debajo, éste va pegado a las tarjetas) */ .z-h2-lista{margin-bottom:24px !important} .z-lista h2 em{font-style:italic;color:var(--r);font-weight:500} .z-lista>p{color:var(--tx-2);margin-bottom:22px;max-width:72ch} .z-cols{list-style:none;padding:0;margin:0;columns:4;column-gap:34px} .z-cols li{break-inside:avoid;margin-bottom:9px;font-size:.95rem;line-height:1.45} .z-cols a{color:var(--tx)} .z-cols a:hover{color:var(--r);text-decoration:underline} /* texto de apoyo */ .z-texto{padding:0 32px 64px;max-width:calc(var(--wrap));margin:0 auto} .z-texto h2{font-size:1.85rem;letter-spacing:-.015em;margin:0 0 18px} .z-texto h2 em{font-style:italic;color:var(--r);font-weight:500} .z-texto h3{font-size:1.12rem;font-weight:800;margin:28px 0 8px;color:var(--ink)} .z-texto p{font-size:1.02rem;line-height:1.72;color:var(--tx);max-width:76ch;margin-bottom:6px} /* 🐛 BUG (Castro, 19-ago: "botón rojo y texto rojo" / "botón verde y texto rojo se pierde"): esta regla era `.z-texto a` a secas. `.z-texto a` pesa más que `.z-btn1` (clase + elemento vs clase sola), así que le ganaba a los botones y les pintaba el texto rojo y subrayado — sobre fondo rojo desaparecía. El `:not(.z-btn)` deja el estilo de enlace SOLO para los enlaces del texto. */ .z-texto a:not(.z-btn){color:var(--r);font-weight:700;text-decoration:underline} .z-pasos{margin:0 0 8px;padding-left:22px;max-width:76ch} .z-pasos li{font-size:1.02rem;line-height:1.7;margin-bottom:7px;color:var(--tx)} .z-404{padding:70px 32px 90px;text-align:center} .z-404 h1{font-size:2.4rem;margin-bottom:12px} .z-404 p{color:var(--tx-2);font-size:1.05rem;margin-bottom:8px} .z-404 .z-cta{justify-content:center} @media (max-width:1200px){ .grid-5{grid-template-columns:repeat(3,minmax(0,1fr))} .z-cols{columns:3} } @media (max-width:860px){ .z-head{padding:14px 20px 40px} .z-head h1{font-size:2rem;max-width:none} .z-h2,.z-lista h2,.z-texto h2{font-size:1.5rem} .grid-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .z-cols{columns:2;column-gap:20px} .z-lista,.z-texto{padding-left:20px;padding-right:20px} .migas{padding-left:0;font-size:.8rem} } @media (max-width:520px){ .grid-5{grid-template-columns:minmax(0,1fr)} .z-cols{columns:1} .z-btn{width:100%;justify-content:center} } /* =========================================================== CATÁLOGO (/sex-shop/) y páginas de texto (/envios, etc.) =========================================================== */ .cat-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:1.5px solid var(--line); border-radius:999px;font-size:.87rem;font-weight:700;color:var(--tx);background:#fff;transition:.16s} .chip small{color:var(--tx-2);font-weight:600;font-size:.78rem} .chip:hover{border-color:var(--r);color:var(--r)} .chip:hover small{color:var(--r)} .chip.on{background:var(--ink);border-color:var(--ink);color:#fff} .chip.on small{color:#b9b3bf} .pager{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:44px; font-size:.95rem;font-weight:700} .pager a{color:var(--r);border-bottom:2px solid var(--r);padding-bottom:2px} .pager a:hover{color:var(--r-dark);border-color:var(--r-dark)} .pager span{color:var(--tx-2);font-weight:600} /* páginas de texto: columna angosta, se leen mejor */ .pg{max-width:900px} .pg h1{font-size:2.4rem;letter-spacing:-.02em;margin-bottom:18px} .pg h2{font-size:1.5rem;margin-top:38px} .pg .z-intro{margin-bottom:8px} @media (max-width:860px){ .pg h1{font-size:1.9rem} .pg h2{font-size:1.3rem} .cat-chips{gap:7px} .chip{padding:8px 13px;font-size:.82rem} } /* =========================================================== BLOG — /blog/ y /blog/detalles/{ID}/{slug} =========================================================== */ .bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .bl{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:#fff; display:flex;flex-direction:column;transition:.18s} .bl:hover{border-color:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.07)} .bl-img{display:block;aspect-ratio:16/10;background:var(--bg-2);overflow:hidden} .bl-img img{width:100%;height:100%;object-fit:cover;transition:.4s} .bl:hover .bl-img img{transform:scale(1.04)} .bl-b{padding:20px 20px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .bl-b h2,.bl-b h3{font-size:1.22rem;line-height:1.3;font-weight:700;letter-spacing:-.01em} .bl-b h3{font-size:1.05rem} .bl-b h2 a,.bl-b h3 a{color:var(--ink)} .bl-b h2 a:hover,.bl-b h3 a:hover{color:var(--r)} .bl-b p{font-size:.92rem;line-height:1.6;color:var(--tx-2);flex:1} .bl-b .lnk{align-self:flex-start} .art{max-width:880px} .art h1{font-size:2.5rem;line-height:1.14;letter-spacing:-.02em;margin-bottom:24px} .art-img{width:100%;border-radius:var(--rad);margin-bottom:30px} .art-body{font-size:1.06rem;line-height:1.78;color:var(--tx)} .art-body h2{font-size:1.6rem;font-family:'Playfair Display',Georgia,serif;margin:36px 0 12px;letter-spacing:-.015em} .art-body h3{font-size:1.18rem;font-weight:800;margin:28px 0 8px} .art-body p{margin-bottom:16px} .art-body ul,.art-body ol{margin:0 0 18px 22px} .art-body li{margin-bottom:8px} .art-body img{max-width:100%;height:auto;border-radius:var(--rad);margin:18px 0} .art-body a{color:var(--r);font-weight:700;text-decoration:underline} .art-body strong,.art-body b{font-weight:800} @media (max-width:1000px){ .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} } @media (max-width:640px){ .bl-grid{grid-template-columns:minmax(0,1fr)} .art h1{font-size:1.85rem} .art-body{font-size:1rem} .art-body h2{font-size:1.35rem} } /* Blindaje de desborde en las páginas nuevas. Los nombres de producto y de ciudad pueden traer cadenas largas sin espacios; en pantallas de 390px eso empuja la caja y desliza la página de lado. (El html,body{overflow-x:hidden} de arriba es la red; esto es el arreglo real.) */ .z-intro,.z-texto p,.z-cols li,.z-cols a,.bl-b p,.bl-b h2,.bl-b h3,.art-body,.migas{overflow-wrap:anywhere} .art-body pre,.art-body table{max-width:100%;overflow-x:auto;display:block} .z-head h1,.pg h1,.art h1{overflow-wrap:break-word} /* =========================================================== ARREGLO DE ACOMODO DEL TEXTO (Castro, 18-ago: "está mal acomodado") =========================================================== */ /* 🐛 El H1 traía max-width:19ch, pensado para los H1 cortos de zona. En el catálogo, "Sex shop en línea: Lencería" se partía en dos con una sola palabra abajo. Se sube el tope y, sobre todo, se deja que el navegador reparta las líneas parejas (text-wrap:balance). */ .z-head h1{max-width:24ch;text-wrap:balance} .z-head-cat h1{max-width:30ch} /* text-wrap:pretty evita la "viuda": esa palabra sola en el último renglón ("...en empaque / neutro."). Donde no lo soporte el navegador, no pasa nada. */ .z-intro,.z-texto p,.z-lista>p{text-wrap:pretty} .z-intro{max-width:66ch} .z-head-cat .z-intro{margin-bottom:26px} /* --- interruptor de categorías (CSS puro, sin JS) --- */ .cats-tog:checked ~ .cat-chips .chip-x{display:inline-flex} .cat-chips .chip-x{display:none} .chip-mas{cursor:pointer;user-select:none;border-style:dashed;color:var(--r);border-color:var(--r)} .chip-mas:hover{background:var(--r);color:#fff;border-color:var(--r)} .chip-mas .mas-b{display:none} .cats-tog:checked ~ .cat-chips .chip-mas .mas-a{display:none} .cats-tog:checked ~ .cat-chips .chip-mas .mas-b{display:inline} @media (max-width:860px){ .z-head h1,.z-head-cat h1{max-width:none} } /* El interruptor va oculto a la vista pero SIGUE siendo enfocable con teclado (con `hidden` no se podría tabular hasta él). */ .cats-tog{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .cats-tog:focus-visible ~ .cat-chips .chip-mas{outline:2px solid var(--r);outline-offset:2px} /* El párrafo de entrada del catálogo medía 66ch y partía dejando "empaque neutro." casi solo en el segundo renglón. A 56ch las dos líneas quedan parejas. (text-wrap:pretty ayuda, pero no todos los navegadores lo aplican.) */ .z-head-cat .z-intro{max-width:56ch} /* Con max-width fijo el corte caía en medio de la frase en negritas ("envío discreto a todo / México"). `balance` reparte las líneas parejas y deja el corte donde no estorba. Se quita el tope estrecho para que decida el navegador. Donde no haya soporte, se ve como antes (no rompe nada). */ .z-head-cat .z-intro{max-width:70ch;text-wrap:balance} /* =========================================================== ENCABEZADO A TODO EL ANCHO (Castro, 18-ago: "hay mucho espacio del lado derecho, hazlo al 100% del container") El bloque ocupaba ~60% y el resto quedaba muerto. Se abre a las dos columnas del contenedor completo. El texto NO se estira a 150 caracteres por renglón (sería ilegible): la columna derecha carga los dos botones y los datos de la compra, así el ancho se aprovecha de verdad y los CTA suben a la primera pantalla. =========================================================== */ .z-head-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:56px;align-items:start;width:100%} .z-head-tx{min-width:0} /* al vivir en su columna, los topes en `ch` ya no hacen falta: la columna misma es el límite de línea */ .z-head-in h1{max-width:none} .z-head-in .z-intro{max-width:none} .z-card{border:1.5px solid var(--line);border-radius:var(--rad);padding:26px 26px 28px; background:var(--bg-2);position:sticky;top:18px} .z-card-t{font-family:'Playfair Display',Georgia,serif;font-size:1.4rem;font-weight:700; letter-spacing:-.015em;margin-bottom:16px;color:var(--ink)} .z-card-l{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:11px} .z-card-l li{position:relative;padding-left:26px;font-size:.94rem;line-height:1.5;color:var(--tx)} .z-card-l li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:8px; border-left:2.5px solid var(--r);border-bottom:2.5px solid var(--r); transform:rotate(-45deg)} .z-card-l b{font-weight:800} /* dentro de la tarjeta los botones van apilados y a todo el ancho */ .z-card .z-cta{margin-top:0;flex-direction:column;gap:10px} .z-card .z-btn{width:100%;justify-content:center;padding:15px 20px} @media (max-width:1100px){ .z-head-in{grid-template-columns:minmax(0,1fr);gap:32px} .z-card{position:static} .z-card .z-cta{flex-direction:row;flex-wrap:wrap} .z-card .z-btn{width:auto;flex:1 1 220px} } @media (max-width:520px){ .z-card{padding:22px 20px 24px} .z-card .z-btn{width:100%;flex:1 1 100%} } /* Accesos rápidos bajo el texto del encabezado. Cierran el hueco vertical que dejaba la columna izquierda (la tarjeta de la derecha es más alta) y reparten enlaces internos a las categorías. */ /* "Enviamos a: Hermosillo, Nogales…" — llena la columna izquierda con enlaces de verdad en vez de aire, y le da texto propio a cada uno de los 32 estados. */ .z-ciudades{margin-top:16px;color:var(--tx-2);line-height:1.75;max-width:64ch} .z-ciudades a{color:var(--tx);text-decoration:none;border-bottom:1px solid var(--line)} .z-ciudades a:hover{color:var(--r);border-bottom-color:var(--r)} .z-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .z-chips .chip{padding:8px 15px;font-size:.85rem} .chip-todo{border-color:var(--r);color:var(--r);font-weight:800} .chip-todo:hover{background:var(--r);color:#fff;border-color:var(--r)} @media (max-width:1100px){ .z-chips{margin-top:20px} } /* 🐛 La rejilla base traía `repeat(4,1fr)`. Un `1fr` pelón equivale a `minmax(auto,1fr)`: la columna NO puede encogerse por debajo del contenido, así que alrededor de 1100 px las tarjetas empujaban 33 px fuera de la pantalla. Ya quedó `minmax(0,1fr)` arriba (es el mismo tropiezo que hubo en móvil el 17-ago; faltaba corregir la regla base, no solo las media queries). Y entre 1100 y 1200 px caben mejor 3 tarjetas que 4 apretadas. */ /* ⚠️ ACOTADA CON min-width A PROPÓSITO. Sin el `min-width:861px`, esta regla —que vive al FINAL del archivo— pisaba a las de 860px y 540px (en CSS gana la última con la misma especificidad) y ponía 3 columnas en un celular de 390px: desborde de 11px. Es el mismo tropiezo de la `.p-d` duplicada. Al editar este archivo: revisar SIEMPRE contra qué otras media queries choca. */ @media (min-width:861px) and (max-width:1200px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} } /* =========================================================== Columna izquierda del encabezado — HUECO MUERTO ----------------------------------------------------------- 🔴 Historia, para que no se vuelva a hacer: 18-ago: la tarjeta de la derecha es más alta que el texto, así que se ancló la fila de chips ABAJO con `margin-top:auto` para que las dos columnas cerraran parejo. Funciona **solo si el párrafo es largo**. 19-ago (Castro, sobre /sonora y sobre el catálogo): en las zonas con pocas ciudades el párrafo son 2 renglones, y anclar los chips abajo abre un hueco de ~150 px **JUSTO EN MEDIO** de la columna. Se ve como error. 👉 Regla: **el aire al final no se nota; el aire en medio parece un bug.** Los chips van pegados al texto y el sobrante cae abajo, donde no estorba. Por eso aquí NO hay `margin-top:auto` ni `align-items:stretch`. =========================================================== */ @media (min-width:1101px){ .z-head-tx .z-chips{margin-top:22px} .z-head-tx .cat-chips{margin-top:22px} /* ⛔ NO poner display:none al checkbox: ya está oculto con position:absolute + opacity:0 (línea 932) justamente para que siga siendo enfocable con teclado. Con display:none no se podría tabular hasta "+17 categorías". */ .z-card{align-self:start} } /* aire entre el encabezado y la rejilla de productos */ .z-head-in + .z-h2{margin-top:46px} @media (max-width:860px){ .z-head-in + .z-h2{margin-top:34px} } /* =========================================================== "Lo que más nos preguntan" — bloque bajo la ficha de producto. Acordeón nativo con : sin JS, y el texto de las respuestas está en el HTML desde el primer byte (Google lo lee aunque estén cerradas). =========================================================== */ .faq{padding-top:0} /* align-items:start — sin esto, la tarjeta CERRADA se estira hasta la altura de la abierta de su misma fila y queda con un hueco blanco raro debajo. */ .faq-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px; align-items:start} .faq-i{border:1.5px solid var(--line);border-radius:var(--rad);background:var(--bg-2); padding:0;overflow:hidden;transition:border-color .2s} .faq-i[open]{border-color:var(--r)} .faq-i summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;gap:14px; align-items:flex-start;justify-content:space-between} .faq-i summary::-webkit-details-marker{display:none} .faq-q{font-weight:700;color:var(--ink);line-height:1.4;position:relative;padding-right:6px} /* la flechita: gira al abrir */ .faq-i summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-top:6px; border-right:2.5px solid var(--r);border-bottom:2.5px solid var(--r); transform:rotate(45deg);transition:transform .2s} .faq-i[open] summary::after{transform:rotate(-135deg)} .faq-t{flex:0 0 auto;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase; font-weight:800;color:var(--tx-2);background:var(--bg);border:1px solid var(--line); border-radius:999px;padding:4px 10px;margin-left:auto;margin-right:12px} .faq-i p{margin:0;padding:0 20px 19px;color:var(--tx);line-height:1.65;max-width:62ch} .faq-i summary:focus-visible{outline:2px solid var(--r);outline-offset:-2px} .faq-pie{margin-top:26px;color:var(--tx-2);font-size:.9rem} .faq-pie b{color:var(--tx)} @media (max-width:900px){ .faq-lista{grid-template-columns:minmax(0,1fr)} .faq-t{display:none} /* en móvil la etiqueta del tema estorba */ } /* H2 con palabra clave (Castro, 19-ago): al meter "en nuestra tienda sex shop" el título creció y a 2.5rem se partía en tres renglones desiguales. Se le baja un punto el tamaño y se deja que el navegador reparta las líneas parejas con text-wrap:balance. */ .h2-key{font-size:clamp(1.5rem,2.6vw,2.05rem) !important;max-width:22ch;text-wrap:balance} .sec-hd .h2-key{max-width:30ch} /* =========================================================== El bloque de texto de abajo: se comía media pantalla en blanco ----------------------------------------------------------- Castro (19-ago): "mucho espacio lado derecho". El párrafo tiene tope de 76ch (lo cómodo de leer son 45-75), así que en un contenedor de 1376px el 45% derecho quedaba muerto — y los botones abajo, fuera de vista. 👉 Mismo criterio que ya se usó en el encabezado: el ancho no se rellena estirando el texto (ilegible), se rellena con los CTA. El texto va en la columna izquierda y los dos botones suben a la derecha, apilados y centrados: se ven sin bajar y el bloque cierra parejo. Solo en escritorio; apilado no aplica. =========================================================== */ @media (min-width:1101px){ /* row-gap:0 explícito y no por omisión: el `span` de abajo crea filas vacías de 0px, y si alguien pusiera un `gap` general se sumarían todas y abriría un hueco enorme. */ .z-texto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.4fr); column-gap:56px;row-gap:0;align-items:start} .z-texto > :not(.z-cta){grid-column:1} /* ⚠️ `grid-row:1 / -1` NO sirve aquí: el `-1` apunta a la última línea de la rejilla EXPLÍCITA, y como solo se declararon columnas, todas las filas son implícitas → el bloque se quedaba en la fila 1 y la estiraba a su altura, abriendo un hueco de 100px debajo del H2. Con `span` sí las cruza todas. */ .z-texto .z-cta{grid-column:2;grid-row:1 / span 20;align-self:center; flex-direction:column;margin-top:0} .z-texto .z-btn{width:100%;justify-content:center} /* el artículo del blog NO se parte en dos columnas: ahí el texto es el contenido, no un apoyo */ .z-texto.art,.z-texto.pg{display:block} } /* =========================================================== Modal "se agregó al carrito" (Castro, 19-ago) Antes solo había un toast chiquito abajo: Castro le dio 5 clicks al botón sin ver que sí se agregaba. Esto NO se cierra solo, a propósito. =========================================================== */ .madd{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; padding:20px;opacity:0;transition:opacity .2s} .madd.on{opacity:1} .madd-bg{position:absolute;inset:0;background:rgba(12,11,13,.55);backdrop-filter:blur(2px)} .madd-caja{position:relative;background:#fff;border-radius:calc(var(--rad) + 6px); padding:34px 30px 26px;width:100%;max-width:380px;text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.28);transform:translateY(14px) scale(.97); transition:transform .22s cubic-bezier(.2,.9,.3,1.2)} .madd.on .madd-caja{transform:none} .madd-x{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.7rem; line-height:1;color:var(--tx-2);cursor:pointer;padding:4px 8px;border-radius:8px} .madd-x:hover{background:var(--bg-2);color:var(--ink)} /* la palomita: se dibuja sola al abrir, para que el ojo la cache */ .madd-ok{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:rgba(37,211,102,.14); display:flex;align-items:center;justify-content:center} .madd-ok svg{width:28px;height:28px;fill:none;stroke:var(--ok);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:26;stroke-dashoffset:26} .madd.on .madd-ok svg{animation:maddCheck .4s .12s forwards} @keyframes maddCheck{to{stroke-dashoffset:0}} .madd-t{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;font-weight:700; letter-spacing:-.02em;color:var(--ink);margin:0 0 14px} .madd-prod{display:flex;align-items:center;gap:12px;text-align:left;background:var(--bg-2); border:1px solid var(--line);border-radius:var(--rad);padding:10px 12px;margin-bottom:14px} .madd-prod img{width:46px;height:46px;object-fit:contain;flex:0 0 auto;background:#fff;border-radius:6px} .madd-prod span{font-size:.92rem;font-weight:700;color:var(--tx);line-height:1.35} .madd-n{margin:0 0 18px;color:var(--tx-2);font-size:.92rem} .madd-n b{color:var(--ink)} .madd-ver{width:100%;justify-content:center;text-decoration:none} .madd-seguir{display:block;width:100%;margin-top:10px;border:0;background:none;cursor:pointer; font:inherit;font-size:.9rem;font-weight:700;color:var(--tx-2);padding:11px} .madd-seguir:hover{color:var(--r)} @media (prefers-reduced-motion:reduce){ .madd,.madd-caja{transition:none} .madd.on .madd-ok svg{animation:none;stroke-dashoffset:0} } /* =========================================================== CARRITO — "se ve jodido y triste" (Castro, 19-ago) 1·2·3 = los pasos, sin color · 4 = medio contenedor vacío a su derecha. Se resuelven de una: los pasos dejan de ser tres pastillitas encogidas a la izquierda y pasan a ser una BARRA DE PROGRESO a todo el ancho. =========================================================== */ .pasos-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0; margin:0 0 40px;position:relative;border:0} .pasos-3 li{position:relative;flex-direction:column;gap:10px;text-align:center; border:0;padding:0 8px;background:none;font-size:.9rem} /* la línea que une los pasos: va detrás de los números */ .pasos-3 li::before{content:"";position:absolute;top:19px;left:calc(-50% + 20px); width:calc(100% - 40px);height:3px;background:var(--line);z-index:0} .pasos-3 li:first-child::before{display:none} .pasos-3 li.ok::before,.pasos-3 li.on::before{background:var(--ok)} .pasos-3 span{position:relative;z-index:1;width:38px;height:38px;font-size:.98rem;font-weight:800; border:3px solid var(--line);background:#fff;color:var(--tx-2);transition:.2s} /* el paso ACTUAL: rojo de la marca, con halo, para que se vea dónde va uno */ .pasos-3 .on{color:var(--ink);font-weight:800} .pasos-3 .on span{background:var(--r);border-color:var(--r);color:#fff; box-shadow:0 0 0 5px rgba(206,56,56,.14)} /* los ya hechos: verde con palomita en vez del número */ .pasos-3 .ok{color:var(--tx)} .pasos-3 .ok span{background:var(--ok);border-color:var(--ok);color:#062e16;font-size:0} .pasos-3 .ok span::after{content:"✓";font-size:1.1rem;font-weight:800} @media (max-width:560px){ .pasos-3{margin-bottom:28px} .pasos-3 li{font-size:.74rem} .pasos-3 span{width:32px;height:32px} .pasos-3 li::before{top:16px} } /* --- las filas del carrito: con FOTO, que es lo que les faltaba --- */ .ci{grid-template-columns:auto 1fr auto auto auto} .ci-img{width:66px;height:66px;flex:0 0 auto;border:1px solid var(--line);border-radius:10px; background:var(--bg-2);overflow:hidden;display:block} .ci-img img{width:100%;height:100%;object-fit:contain;transition:transform .3s} .ci-img:hover img{transform:scale(1.07)} .ci-img-no{display:block} .ci h3 a{color:inherit;text-decoration:none} .ci h3 a:hover{color:var(--r)} .ci-sub{color:var(--ink)} @media (max-width:640px){ .ci{grid-template-columns:auto 1fr;gap:12px 14px} .ci-img{width:56px;height:56px;grid-row:span 2} .ci-cant{grid-column:2} .ci-sub{grid-column:2;text-align:left;font-size:1.15rem} .ci-del{position:absolute;top:10px;right:10px} .ci{position:relative} } /* --- el resumen: que el total se vea y los sellos den confianza --- */ .ck-total b{color:var(--r)} .ck-sellos{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)} .ck-sellos li{display:flex;align-items:flex-start;gap:10px;padding:6px 0; font-size:.83rem;color:var(--tx-2);line-height:1.4} .ck-sellos b{color:var(--tx);font-weight:700} .ck-sellos .ic{width:17px;height:17px;color:var(--ok);margin-top:1px;flex:0 0 auto} /* =========================================================== CHECKOUT sin distracciones (Castro, 19-ago) header/footer propios para /tienda/carrito/, /datos/ y /gracias/. Ver include/headercarrito.php para el porqué de cada cosa que NO está. =========================================================== */ .body-ck{background:var(--bg)} .hdck{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .hdck-in{display:flex;align-items:center;gap:24px;padding:16px 32px} .hdck-logo{flex:0 0 auto;display:block} .hdck-logo img{height:34px;width:auto;display:block} /* el sello del centro: es la razón por la que la gente compra aquí y no en la esquina, así que va en el encabezado del checkout, no escondido abajo */ .hdck-seg{display:flex;align-items:center;gap:10px;margin:0 auto 0 auto;color:var(--tx-2);font-size:.82rem} .hdck-seg .ic{width:20px;height:20px;color:var(--ok);flex:0 0 auto} .hdck-seg span{display:flex;flex-direction:column;line-height:1.25} .hdck-seg b{color:var(--tx);font-weight:700;font-size:.86rem} .hdck-seg small{font-size:.76rem} .hdck-wa{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;text-decoration:none; border:1.5px solid rgba(37,211,102,.4);background:rgba(37,211,102,.08); color:var(--tx);border-radius:999px;padding:9px 16px;font-size:.85rem;transition:.18s} .hdck-wa .ic-wa{width:18px;height:18px;color:var(--ok)} .hdck-wa b{font-weight:800} .hdck-wa:hover{background:var(--ok);border-color:var(--ok);color:#062e16} .hdck-wa:hover .ic-wa{color:#062e16} .ftck{border-top:1px solid var(--line);background:var(--bg-2);margin-top:40px;padding:26px 0 22px} .ftck .wrap{padding-left:32px;padding-right:32px} .ftck-sellos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 26px;margin:0 0 20px;padding:0} .ftck-sellos li{display:flex;align-items:flex-start;gap:10px;font-size:.84rem;color:var(--tx-2);line-height:1.4} .ftck-sellos b{color:var(--tx);font-weight:700} .ftck-sellos .ic{width:18px;height:18px;color:var(--ok);margin-top:1px;flex:0 0 auto} .ftck-pie{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between; align-items:center;border-top:1px solid var(--line);padding-top:16px; font-size:.78rem;color:var(--tx-2)} .ftck-legal{display:flex;gap:18px;flex-wrap:wrap} .ftck-legal a{color:var(--tx-2);text-decoration:none;border-bottom:1px solid transparent} .ftck-legal a:hover{color:var(--r);border-bottom-color:var(--r)} @media (max-width:760px){ .hdck-in{flex-wrap:wrap;gap:12px 16px;padding:14px 20px} .hdck-seg{order:3;flex:1 1 100%;margin:0} .hdck-wa{margin-left:auto} .ftck .wrap{padding-left:20px;padding-right:20px} .ftck-sellos{grid-template-columns:minmax(0,1fr)} } /* El check de +18, ya dentro del resumen y pegado al botón (Castro, 19-ago). Se marca en rojo suave para que se lea como requisito, no como letra chica. */ .ck-tot .ck-check{margin:18px 0 0 !important;padding:13px 15px;font-size:.84rem; background:rgba(206,56,56,.05);border:1px solid rgba(206,56,56,.18)} .ck-tot .ck-check span{line-height:1.45;color:var(--tx-2)} .ck-tot .ck-check b{color:var(--tx)} .ck-tot .ck-check + .ck-seguir{margin-top:12px} /* Si el CRM decide pintar SU botón flotante de WhatsApp (.w2024_button_float, fixed abajo a la derecha), se esconde el nuestro: caen en el mismo lugar y dos botones encimados se ven peor que ninguno. Ver include/codigos.php. */ body:has(.w2024_button_float) .wa-f{display:none} /* =========================================================== Logo REAL de WhatsApp en todos los botones (Castro, 19-ago: "los botones de whatsapp en la nueva no tienen icono de whatsapp"). Antes había un globito genérico dibujado a trazo; ahora es el logo de la marca, que es un path RELLENO — por eso no puede usar la clase `.ic` del sitio (esa es `fill:none; stroke:currentColor`). Toma el tamaño del contexto con `em`, así sirve igual en la barra de arriba que en un botón grande, sin una regla por cada lugar. =========================================================== */ .ic-wa{width:1.25em;height:1.25em;fill:currentColor;stroke:none;flex:0 0 auto} .tb-wa .ic-wa{width:1.05em;height:1.05em} .wa-f .ic-wa{width:28px;height:28px} .btn-wa2 .ic-wa,.btn-wa .ic-wa,.z-btn2 .ic-wa{width:20px;height:20px} /* =========================================================== /categorias-sex-shop — las 29 categorías en cards uniformes. "Uniforme" es lo importante: las fotos del catálogo vienen de todos tamaños y proporciones, así que la caja fija la proporción y `object-fit:cover` recorta. Si se dejara al natural, la rejilla quedaría como escalera. =========================================================== */ .cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} .cg{display:flex;flex-direction:column;text-decoration:none;border:1.5px solid var(--line); border-radius:var(--rad);overflow:hidden;background:#fff;transition:.2s} .cg:hover{border-color:var(--r);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.07)} .cg-img{display:block;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden;position:relative} .cg-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s} .cg:hover .cg-img img{transform:scale(1.06)} /* sin foto: la inicial en grande, mejor que un hueco blanco */ .cg-ini{position:absolute;inset:0;display:grid;place-items:center; font-family:'Playfair Display',Georgia,serif;font-size:3.2rem;font-weight:700; color:var(--line)} .cg-b{padding:15px 17px 17px;display:flex;flex-direction:column;gap:3px} .cg-n{font-weight:800;font-size:1rem;color:var(--ink);line-height:1.3} .cg:hover .cg-n{color:var(--r)} .cg-c{font-size:.82rem;color:var(--tx-2)} @media (max-width:1100px){ .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} } @media (max-width:760px){ .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .cg-n{font-size:.92rem} } @media (max-width:400px){ .cat-grid{gap:11px} .cg-b{padding:12px 13px 14px} } /* encabezado de /categorias-sex-shop: una sola columna (ver el porqué en el propio categorias.php) y los datos de la compra en franja horizontal, que usa el ancho completo en vez de dejarlo muerto. */ .cat-head{padding-bottom:38px} /* dos columnas: el texto a la izquierda con su ancho legible, los CTA a la derecha llenando lo que sobra. Ver el porqué en categorias.php. */ .cat-head-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.55fr); gap:48px;align-items:center;margin-bottom:26px} .cat-head-tx{min-width:0} .cat-head h1{max-width:22ch;margin-bottom:16px} .cat-head .z-intro{max-width:58ch;margin:0} .cat-head-cta .z-cta{margin-top:0;flex-direction:column;gap:11px} .cat-head-cta .z-btn{width:100%;justify-content:center} @media (max-width:900px){ .cat-head-in{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start} .cat-head-cta .z-cta{flex-direction:row;flex-wrap:wrap} .cat-head-cta .z-btn{width:auto;flex:1 1 220px} } @media (max-width:520px){ .cat-head-cta .z-btn{width:100%;flex:1 1 100%} } .cat-sellos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px} .cat-sellos li{position:relative;padding-left:26px;font-size:.92rem;color:var(--tx-2)} .cat-sellos li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:8px; border-left:2.5px solid var(--r);border-bottom:2.5px solid var(--r); transform:rotate(-45deg)} .cat-sellos b{color:var(--tx);font-weight:800} /* =========================================================== .z-texto-2c — bloque de texto LARGO repartido en dos columnas de contenido. (Castro, 20-ago: "queda mucho espacio en blanco… abusado") 🔴 El error que corrige: la regla genérica de `.z-texto` mete el texto en la columna 1 y los CTA en la 2. Eso funciona con un texto CORTO (catálogo), pero en zona y en las 744 fichas el texto mide 350-380 px de alto contra 134 px de botones — o directamente NO había botones y la mitad derecha quedaba vacía. 👉 La regla: cuando el bloque es largo, no se rellena el hueco con un botón; se REPARTE el contenido que ya existe entre las dos columnas. =========================================================== */ .z-texto-2c{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px;row-gap:0;align-items:start} .z-texto-2c > .tx-a, .z-texto-2c > .tx-b{grid-column:auto;min-width:0} .z-texto-2c .z-cta{margin-top:28px} /* los topes de línea salen sobrando: ahora la columna ES el límite */ .z-texto-2c p{max-width:none} @media (max-width:900px){ .z-texto-2c{grid-template-columns:minmax(0,1fr);row-gap:8px} }