/* =========================================================
ARISTAS — «El poder del diseño» (page-poder-del-diseno.php)
Medidas tomadas de producción (aristas.co, 1440 y 390) — ver
poder-del-diseno/levantamiento.md. Las tarjetas de producto son las de
la categoría (categoria.css), que se carga antes que este archivo.
Marca: Futura PT para todo (en producción el título de testimonios y la
franja de envío iban en Montserrat); Amadine solo en el título de cada
bloque. Las imágenes no llevan bordes redondeados.
========================================================= */
.pdd{
/* alto de la fila de menú pegada (header.js la deja fija al bajar). Es el mismo valor de
--hdr-fijo de categoria.css; se mide en pantalla y se anota acá para que las anclas no
queden tapadas por el encabezado. */
--pdd-hdr:60px;
background:#fff;
font-family:var(--sans);
/* regla de marca: las imágenes nunca llevan bordes redondeados */
}
@media(max-width:900px){.pdd{--pdd-hdr:67px}}
.pdd img{border-radius:0}
/* :where() deja la especificidad en cero: con `.pdd ul` (0,1,1) este reset le ganaba a las reglas de clase
de las listas de abajo (la barra fija perdía su padding y su margin:auto) */
:where(.pdd) ul{list-style:none;margin:0;padding:0}
/* ---------------------------------------------------------
1. HERO
El header blanco flota sobre esta imagen (fila del menú absoluta bajo la barra negra),
igual que en el home. Sin velo: el texto está dentro del arte.
Escritorio 1920x700 -> 1440x525; móvil y tablet 1200x800 -> 390x260.
El aspect-ratio va en CSS porque el ![]()
trae los width/height del recorte de escritorio
y, sin esto, en el teléfono reservaría la altura equivocada hasta que llegue la foto.
--------------------------------------------------------- */
.pdd-hero picture{display:block}
.pdd-hero__img{display:block;width:100%;height:auto;aspect-ratio:1920/700;object-fit:cover}
@media(max-width:1024px){.pdd-hero__img{aspect-ratio:1200/800}}
/* ---------------------------------------------------------
Carrusel genérico (categorías y testimonios)
Pista con scroll nativo y snap: se arrastra con el dedo sin JS. `contain:paint` además
de overflow-x:auto porque, sin él, Chrome Android deja arrastrar la PÁGINA entera en
horizontal cuando el dedo empieza sobre la pista (ver project_aristas2026_desborde_horizontal).
--------------------------------------------------------- */
.pdd-carrusel{position:relative}
.pdd-carrusel__marco{position:relative}
.pdd-carrusel__pista{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;contain:paint;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pdd-carrusel__pista::-webkit-scrollbar{display:none}
.pdd-carrusel__pista > li{min-width:0;scroll-snap-align:start}
.pdd-flecha{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;padding:0;border:0;background:transparent;
display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(238,238,238,.9)}
.pdd-flecha[hidden]{display:none}
.pdd-flecha::before{content:"";width:12px;height:12px;border:solid currentColor;border-width:0 2.5px 2.5px 0;filter:drop-shadow(0 0 3px rgba(0,0,0,.55))}
.pdd-flecha--ant{left:6px}
.pdd-flecha--ant::before{transform:rotate(135deg);margin-left:5px}
.pdd-flecha--sig{right:6px}
.pdd-flecha--sig::before{transform:rotate(-45deg);margin-right:5px}
.pdd-flecha:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* puntos: 6x6, negro, .2 de opacidad el inactivo. El botón mide 24 de alto (objetivo táctil
mínimo de WCAG 2.2) y la bolita va dibujada con ::before */
.pdd-puntos{display:flex;justify-content:center;margin-top:-4px}
.pdd-puntos[hidden]{display:none}
.pdd-punto{width:24px;height:24px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pdd-punto::before{content:"";width:6px;height:6px;border-radius:50%;background:#000;opacity:.2;transition:opacity .2s}
.pdd-punto.is-activo::before{opacity:1}
.pdd-punto:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
/* ---------------------------------------------------------
2. CARRUSEL DE CATEGORÍAS
Escritorio: 4 tarjetas de (1420-30)/4 = 347,5 px con 10 px de separación; caben las cuatro
y no hay nada que mover (flechas y puntos se esconden solos). Móvil y tablet: 2 visibles.
--------------------------------------------------------- */
.pdd-cats{padding:10px 10px 26px;max-width:1920px;margin:0 auto}
.pdd-cats__item{flex:0 0 calc((100% - 30px) / 4)}
.pdd-cats__enlace{display:block;color:var(--text-2)}
.pdd-cats__enlace:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pdd-cats__img{display:block;width:100%;height:auto;aspect-ratio:950/500;object-fit:cover}
.pdd-cats__titulo{display:block;margin-top:5px;font-size:22px;line-height:22px;font-weight:400;
text-transform:uppercase;text-align:center;color:var(--text-2)}
@media(max-width:1024px){
.pdd-cats{padding-bottom:10px}
.pdd-cats__item{flex-basis:calc((100% - 10px) / 2)}
/* la flecha va centrada sobre la FOTO, no sobre foto + título (23 px = 5 de separación + 18 de título) */
.pdd-cats .pdd-flecha{top:calc(50% - 11.5px)}
}
@media(max-width:767px){.pdd-cats__titulo{font-size:18px;line-height:18px}}
/* ---------------------------------------------------------
3. BANNER DE VIDEO (el texto va dentro del video)
1920x200 -> 1440x150; 1000x160 -> 390x62,4. El póster es un debajo del video.
--------------------------------------------------------- */
.pdd-video__caja{display:block;position:relative;overflow:hidden;line-height:0;aspect-ratio:1920/200;background:var(--ink)}
.pdd-video__poster,.pdd-video__poster img,.pdd-video__video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:767px){.pdd-video__caja{aspect-ratio:1000/160}}
a.pdd-video__caja:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
/* ---------------------------------------------------------
4-7. BLOQUES DE CATEGORÍA
Sección: 10 px de aire por lado. Fila: foto 694,9 + 20 + productos 705,1 (49,6 % / 50,4 %,
medido; no es 50/50 porque en Elementor las dos cajas piden 100 % y la derecha se encoge por
su padding). Rejilla: a todo el ancho (margen -10 px para ocupar también el aire de la
sección), 4 columnas de 360 px a 1440.
--------------------------------------------------------- */
.pdd-cat{padding:10px;max-width:1920px;margin:0 auto;scroll-margin-top:var(--pdd-hdr)}
.pdd-cat__titulo{margin:0 0 10px;font-family:var(--display);font-weight:300;font-size:46px;line-height:46px;
letter-spacing:.15em;text-transform:uppercase;text-align:center;color:var(--ink);-webkit-text-stroke:.35px var(--ink)}
.pdd-cat__fila{display:grid;grid-template-columns:minmax(0,694.9fr) minmax(0,705.1fr);gap:20px;align-items:stretch}
.pdd-cat__fila--sin-foto,.pdd-cat__fila--sin-lado{grid-template-columns:minmax(0,1fr)}
/* La foto mide, como mínimo, la proporción de producción (694,9 x 299,1); si las dos tarjetas de al
lado son más altas, se estira hasta su altura y `cover` recorta. */
.pdd-cat__foto{position:relative;overflow:hidden;aspect-ratio:694.9/299.1;align-self:stretch;
/* width:100% a propósito: con aspect-ratio y la altura estirada por la fila, el navegador calcula
el ANCHO desde la altura y la foto se salía de su columna (880 en vez de 694,9) */
width:100%;background:var(--cream)}
.pdd-cat__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos-desk,50% 50%)}
.pdd-cat__lado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;padding:10px 0}
/* Foto completa (campo «Mostrar la foto completa» del bloque; Hot Days, 16-oct): el bloque toma la
proporción de la foto y no la recorta. La foto no se estira a la altura de las tarjetas. */
.pdd-cat__foto--completa{aspect-ratio:auto;align-self:start}
.pdd-cat__foto--completa img{position:static;display:block;height:auto;object-fit:contain}
@media(max-width:767px){.pdd-cat__foto.pdd-cat__foto--completa{height:auto;min-height:0}} /* doble clase: le gana al height:150px de móvil, que va más abajo */
.pdd-cat__rejilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px -10px 0}
/* La celda da el aire (20 px por lado: la foto de la tarjeta mide 320 en la rejilla de 360) y deja
a la tarjeta de categoría llenar la celda, para que las de un mismo renglón queden a la misma
altura aunque una tenga el precio en dos líneas. */
.pdd-celda{padding:10px 20px;display:flex;flex-direction:column;min-width:0}
.pdd-celda > .pcard{flex:1}
/* la entrada animada de la rejilla de categoría sirve para el filtrado; acá serían 55 tarjetas
parpadeando a la vez al cargar */
.pdd .pcard{animation:none}
/* tablet: la rejilla de abajo baja de 4 a 3 columnas (en producción sigue en 4 y las tarjetas
quedan de 152 px, demasiado estrechas para nombre + muestras de tela) */
@media(max-width:1024px){
.pdd-cat__rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
.pdd-celda{padding:10px}
}
@media(max-width:767px){
.pdd-cat__titulo{font-size:20px;line-height:20px;padding-top:20px;margin-bottom:5px}
.pdd-cat__fila{grid-template-columns:minmax(0,1fr);gap:5px}
.pdd-cat__foto{aspect-ratio:auto;height:150px;min-height:150px}
.pdd-cat__foto img{object-position:var(--pos-mov,50% 100%)}
.pdd-cat__lado{padding:0}
.pdd-cat__rejilla{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:5px}
}
/* ---------------------------------------------------------
8. TESTIMONIOS — una cita visible, 1083 px de ancho a 1440
--------------------------------------------------------- */
.pdd-test{padding:50px 10px;max-width:1140px;margin:0 auto}
.pdd-test__titulo{margin:0 0 20px;font-family:var(--sans);font-size:36px;line-height:36px;font-weight:300;text-align:center;color:var(--text-2)}
.pdd-carrusel--test{max-width:1083px;margin:0 auto}
.pdd-test__pista{gap:0}
.pdd-test__item{flex:0 0 100%;scroll-snap-align:center}
.pdd-test__cita{margin:0;padding:20px 50px;text-align:center}
.pdd-test__cita p{margin:0;font-size:21.2px;line-height:31.8px;font-style:italic;font-weight:500;color:var(--text-3)}
.pdd-test__cita cite{display:block;margin-top:10px;font-size:15px;line-height:21px;font-style:normal;font-weight:600;color:var(--text-3)}
.pdd-carrusel--test .pdd-flecha{color:var(--text-3)}
.pdd-carrusel--test .pdd-flecha::before{filter:none}
@media(max-width:767px){
.pdd-test{padding:10px}
.pdd-test__titulo{font-size:27px;line-height:27px}
.pdd-test__cita{padding:20px 36px}
.pdd-test__cita p{font-size:20.8px;line-height:31.2px}
}
/* ---------------------------------------------------------
9. FRANJA DE ENVÍO GRATIS
--------------------------------------------------------- */
.pdd-envio{margin:0;padding:40px 10px 20px;text-align:center;font-size:15px;line-height:22.4px;color:var(--charcoal)}
.pdd-envio__ic{display:inline-block;vertical-align:-1px;margin-right:5px;color:var(--text-3)}
@media(max-width:767px){.pdd-envio{text-align:left}}
/* ---------------------------------------------------------
11. BLOQUE FINAL OSCURO — #1e1e1c, logo 200x68 y frase
--------------------------------------------------------- */
.pdd-cierre{display:flex;flex-direction:column;align-items:center;gap:20px;padding:50px;background:var(--ink);text-align:center}
.pdd-cierre__logo{display:block;width:200px;max-width:100%}
.pdd-cierre__logo:focus-visible{outline:2px solid #fff;outline-offset:4px}
.pdd-cierre__logo img{width:200px;height:auto}
.pdd-cierre__frase{margin:0;font-size:26px;line-height:1.2;font-weight:300;color:#fff}
@media(max-width:767px){
.pdd-cierre{padding:20px}
.pdd-cierre__frase{font-size:21px;line-height:1.4}
}
/* ---------------------------------------------------------
10. BARRA FIJA DE ANCLAS
Pegada al borde inferior, sin fondo (solo los botones flotan). Aparece al pasar scrollY > 500
(> 300 en pantallas de 768 o menos) con un fundido de 0,3 s. Escritorio: 4 columnas de 285 en
1140 centrados -> botón de 265x39; móvil: cuadrícula 2x2. Texto en la escala B de letra (15 -> 16).
--------------------------------------------------------- */
.pdd-barra{position:fixed;left:0;right:0;bottom:0;z-index:99;pointer-events:none;
opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.pdd-barra.is-visible{opacity:1;visibility:visible}
/* flex y no grid de 4 columnas fijas: con menos categorías (Hot Days lleva 2) los botones quedan
centrados y del mismo ancho, en vez de pegados a la izquierda */
.pdd-barra__lista{display:flex;flex-wrap:wrap;justify-content:center;max-width:1140px;margin:0 auto;padding:20px 0}
.pdd-barra__lista > li{padding:0 10px;flex:0 0 25%;box-sizing:border-box}
.pdd-barra__btn{display:block;pointer-events:auto;padding:11px 24px;border-radius:3px;background:var(--ink);color:#fff;
font-size:16px;line-height:17px;letter-spacing:.15em;text-transform:uppercase;text-align:center}
.pdd-barra__btn:hover{color:#fff}
.pdd-barra__btn:focus-visible{outline:2px solid #fff;outline-offset:-5px;box-shadow:0 0 0 2px var(--ink)}
@media(max-width:767px){
.pdd-barra__lista{row-gap:20px;padding:10px 0}
.pdd-barra__lista > li{flex-basis:50%}
.pdd-barra__btn{padding:11px 12px}
}
@media(prefers-reduced-motion:reduce){.pdd-barra{transition:none}}