/* ═══════════════════════════════════════════════════════════════════════════ EL OBRADOR DE MARIQUILLA · hoja de estilos común a todo el sitio ═══════════════════════════════════════════════════════════════════════════ Este archivo lo comparten las doce páginas. Se cambia aquí una vez y cambia el sitio entero: por eso NO se copia el CSS dentro de cada página. Las rutas de las fuentes son relativas a la raíz del sitio (/fuentes/…), así que este archivo debe servirse desde /estilos.css. ═══════════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:"Fraunces"; src:url("/fuentes/fraunces-latin-var.woff2") format("woff2-variations"); font-weight:300 700; /* rango del eje wght */ font-style:normal; font-display:swap; /* el texto se lee desde el primer instante */ unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Archivo"; src:url("/fuentes/archivo-latin-var.woff2") format("woff2-variations"); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ═══════════════════════════════════════════════════════════════════════════ 1. FICHAS DE DISEÑO · aquí se cambia TODO el aspecto de la web ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ═══ TIPOGRAFÍA, ESPACIO Y MOVIMIENTO (no cambian con la paleta) ═══ */ --fuente-titulos: "Fraunces", Georgia, "Times New Roman", serif; --fuente-texto: "Archivo", "Helvetica Neue", Arial, sans-serif; --t-display: clamp(2.5rem, 8vw, 5.75rem); --t-h2: clamp(1.95rem, 4.4vw, 3.35rem); --t-h3: clamp(1.15rem, 1.9vw, 1.5rem); --t-cifra: clamp(2.2rem, 5vw, 3.6rem); --t-lead: clamp(1.05rem, 1.5vw, 1.28rem); --t-base: 1rem; --t-sm: 0.9rem; --t-xs: 0.8rem; --t-micro: 0.7rem; --seccion: clamp(4.5rem, 11vw, 8.5rem); --margen: clamp(1.25rem, 5vw, 3rem); --ancho: 1240px; --ancho-txt: 66ch; --curva: cubic-bezier(.2,.7,.2,1); /* Altura de los controles del carrusel. Vive aquí porque la rejilla del catálogo necesita reservar exactamente este hueco. */ --medida-toque: 38px; } /* ═══════════════════════════════════════════════════════════════════════════ PALETA · Cacao y terracota ═══════════════════════════════════════════════════════════════════════════ Elegida el 2026-08-29 entre tres candidatas. Las otras dos —«Mármol y obrador» y «Laurel y miel»— quedan documentadas en marca/2026-08-29-paletas-para-elegir.md por si algún día se reabre. Los nombres son SEMÁNTICOS (--fondo, --tinta, --acento) y no de color, para que un cambio de paleta no obligue a tocar ninguna regla del resto de la hoja. Comprobada: 18 pares de contraste, 0 incumplimientos. Proporción de uso pretendida: 70 fondo · 18 tinta · 8 acento · 4 realce. Si el terracota empieza a aparecer en superficies grandes, algo va mal. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --fondo:#F5EFE6; --superficie:#FBF7F1; --claro:#FFFDFA; --tinta:#33231C; --tinta-honda:#1E1410; --tinta-suave:#6B564B; --acento:#B2542F; --acento-texto:#9E4623; --acento-oscuro:#8E3F20; --realce:#D8A9A0; --velo:#EFDCD6; --sobre-acento:#FFF8F2; --sobre-tinta-2:#CBB9AE; --sobre-tinta-3:#A2918A; --linea:rgba(51,35,28,.14); --linea-fuerte:rgba(51,35,28,.30); --linea-clara:rgba(245,239,230,.18); --sombra:rgba(30,20,16,.28); --sombra-suave:rgba(51,35,28,.06); --velo-banda:rgba(30,20,16,.62); } /* El fondo y el color van en además de en para que el color de sobredesplazamiento (el «rebote» al final del scroll) también sea el de la paleta y no el blanco del navegador. */ html{background:var(--fondo);color:var(--tinta)} /* ═══════════════════════════════════════════════════════════════════════════ 2. BASE ═══════════════════════════════════════════════════════════════════════════ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--fondo); /* fondo explícito: se ve igual en cualquier contexto */ color:var(--tinta); font-family:var(--fuente-texto); font-size:var(--t-base); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{margin:0;font-family:var(--fuente-titulos);font-weight:400;text-wrap:balance} p,ul,ol{margin:0} img{max-width:100%;height:auto;display:block} a{color:inherit} :focus-visible{outline:2.5px solid var(--acento);outline-offset:4px;border-radius:1px} /* Display: Fraunces con tamaño óptico alto y terminaciones afiladas (SOFT 0). Es lo que separa «serif de plantilla» de «serif con carácter». */ .display{ font-family:var(--fuente-titulos); font-size:var(--t-display); font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0; font-weight:400; line-height:1.06; /* era 0,98: en español las tildes chocaban con la línea de arriba */ letter-spacing:-.016em; /* era -0,028: demasiado cerrado a 92 px */ } .titulo-seccion{ font-size:var(--t-h2); font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0; line-height:1.14; /* era 1,06 */ letter-spacing:-.014em; /* era -0,022 */ } /* Encabezado que existe para el buscador y el lector de pantalla, pero que el diseño no necesita pintar. NO se usa display:none: eso lo saca del árbol de accesibilidad y Google lo trata como texto oculto. */ .oculto-visual{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)} .seccion{padding:var(--seccion) 0} .medida{max-width:var(--ancho-txt)} .centrado{text-align:center} .centrado .medida{margin-left:auto;margin-right:auto} .saltar{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--fondo); padding:.85rem 1.15rem;z-index:300} .saltar:focus{left:0} /* --- Antetítulo: rótulo de sección con filete. Es el elemento que da estructura editorial a toda la página. --- */ .antetitulo{ display:flex;align-items:center;gap:.75rem; font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--acento-texto);margin-bottom:1.4rem; } .antetitulo::before{content:"";width:34px;height:1px;background:currentColor;flex:none} .centrado .antetitulo{justify-content:center} .oscuro .antetitulo{color:var(--realce)} .entradilla{color:var(--tinta-suave);font-size:var(--t-lead);line-height:1.6;margin-top:1.1rem} .oscuro .entradilla{color:var(--sobre-tinta-2)} /* --- Botones --- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--fuente-texto);font-size:var(--t-sm);font-weight:600; letter-spacing:.02em; padding:1.05rem 1.85rem;border:1px solid transparent;border-radius:0; text-decoration:none;cursor:pointer;text-align:center;min-height:52px; transition:background-color .3s var(--curva),color .3s var(--curva), border-color .3s var(--curva),transform .18s var(--curva); } .btn:active{transform:translateY(1px)} .btn-principal{background:var(--acento);color:var(--sobre-acento)} .btn-principal:hover{background:var(--acento-oscuro)} .btn-secundario{background:transparent;color:var(--tinta);border-color:var(--linea-fuerte)} .btn-secundario:hover{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)} .btn-claro{background:var(--fondo);color:var(--tinta)} .btn-claro:hover{background:#FFF} .btn-borde-claro{background:transparent;color:var(--fondo);border-color:var(--linea-clara)} .btn-borde-claro:hover{background:var(--fondo);color:var(--tinta);border-color:var(--fondo)} .botonera{display:flex;flex-direction:column;gap:.75rem;margin-top:1.6rem} @media (min-width:600px){.botonera{margin-top:2rem}} @media (min-width:520px){.botonera{flex-direction:row;flex-wrap:wrap}} /* --- Enlace con flecha: la llamada secundaria de toda la página --- */ .enlace-flecha{ display:inline-flex;align-items:center;gap:.5rem;text-decoration:none; font-size:var(--t-sm);font-weight:600;letter-spacing:.02em; padding-bottom:.3rem;border-bottom:1px solid var(--linea-fuerte); transition:border-color .3s var(--curva),color .3s var(--curva); } .enlace-flecha svg{width:1rem;height:1rem;transition:transform .3s var(--curva)} .enlace-flecha:hover{color:var(--acento-texto);border-color:var(--acento-texto)} .enlace-flecha:hover svg{transform:translateX(4px)} /* --- Marco de imagen: recorte fijo + acercamiento suave --- */ .marco{position:relative;overflow:hidden;background:var(--velo)} .marco img{width:100%;height:100%;object-fit:cover; transition:transform .9s var(--curva)} .marco:hover img{transform:scale(1.035)} /* --- Revelado al entrar en pantalla --- Ojo al selector: se oculta SOLO si hay JavaScript (.js). Sin JS el contenido se ve desde el principio en vez de quedarse invisible. --- */ .js [data-revelar]{opacity:0;transform:translateY(20px); transition:opacity .8s var(--curva),transform .8s var(--curva)} .js [data-revelar].visible{opacity:1;transform:none} /* ═══════════════════════════════════════════════════════════════════════════ 3. CABECERA ═══════════════════════════════════════════════════════════════════════════ */ .cabecera{position:sticky;top:0;z-index:100;background:var(--fondo); border-bottom:1px solid transparent; transition:border-color .35s var(--curva),box-shadow .35s var(--curva)} .cabecera.fijada{border-bottom-color:var(--linea);box-shadow:0 1px 24px var(--sombra-suave)} .nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem; padding:1.1rem var(--margen);max-width:var(--ancho);margin:0 auto} /* Logotipo: dos líneas con relación medida entre ellas. No es «texto grande». */ /* ─── LOGOTIPO ───────────────────────────────────────────────────────────── El sello es la curva de atemperado del chocolate sobre su eje de medida: sube hasta fundir, baja para cristalizar y se estabiliza en el punto de trabajo. El punto naranja marca ese punto exacto, que es literalmente el nombre de la marca. El SVG va en línea y pinta con variables CSS, así que cambia solo al cambiar de paleta. */ .logo{text-decoration:none;line-height:1;display:flex;align-items:center;gap:.7rem} .logo .sello{width:38px;height:38px;flex:none;display:block} /* El calificativo va ARRIBA y el nombre grande debajo: el rótulo dice el nombre completo, pero lo que el ojo se lleva es «Mariquilla». Es lo que la gente va a decir de todas formas. */ .logo small{display:block;font-family:var(--fuente-texto);font-size:.5rem; font-weight:600;letter-spacing:.28em;text-transform:uppercase; color:var(--tinta-suave);margin-bottom:.32rem;padding-left:.1em} .logo b{display:block;font-family:var(--fuente-titulos);font-weight:400; font-size:1.5rem;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0; letter-spacing:.01em} @media (min-width:980px){.logo .sello{width:42px;height:42px}} .hamburguesa{display:flex;flex-direction:column;justify-content:center;gap:5px; width:46px;height:46px;padding:11px;background:none;border:1px solid var(--linea-fuerte); border-radius:0;cursor:pointer} .hamburguesa span{display:block;height:1px;background:var(--tinta); transition:transform .3s var(--curva),opacity .2s var(--curva)} .hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .menu{display:none;flex-basis:100%;flex-direction:column;gap:0; margin-top:.5rem;padding-bottom:.5rem;border-top:1px solid var(--linea)} .menu.abierto{display:flex} .menu a{padding:1rem 0;text-decoration:none;font-size:var(--t-base);font-weight:500; border-bottom:1px solid var(--linea);transition:color .25s var(--curva)} .menu a:hover{color:var(--acento-texto)} .menu .btn{margin-top:1.25rem;border-bottom:none} @media (min-width:980px){ .hamburguesa{display:none} .menu{display:flex!important;flex-basis:auto;flex-direction:row;align-items:center; gap:2.25rem;margin-top:0;padding-bottom:0;border-top:none} /* En escritorio los enlaces llevan un subrayado que se dibuja al pasar. */ .menu a{padding:.35rem 0;border-bottom:none;font-size:var(--t-sm);font-weight:500; position:relative} .menu a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0; height:1px;background:var(--acento);transition:right .35s var(--curva)} .menu a:not(.btn):hover::after{right:0} .menu .btn{margin-top:0;padding:.8rem 1.4rem;min-height:0} .menu .btn::after{display:none} .nav{flex-wrap:nowrap} } /* ═══════════════════════════════════════════════════════════════════════════ 4. HÉROE · foto a sangre de fondo, texto encima ═══════════════════════════════════════════════════════════════════════════ El velo NO es un oscurecido plano: es un degradado direccional. Un velo uniforme daría el contraste que hace falta, pero apagaría la tarta por igual — y en una web de repostería la foto del producto es el argumento de venta. Así el texto se apoya sobre la zona oscura y la tarta se queda luminosa. */ .hero{ position:relative;isolation:isolate;overflow:hidden; background:var(--tinta-honda); /* color de respaldo si la foto tarda */ display:grid;align-items:end; min-height:min(88vh,760px); } .hero-foto{ position:absolute;inset:0;z-index:-2; width:100%;height:100%;object-fit:cover;object-position:center 42%; } /* MÓVIL: el velo sube desde abajo. La tarta queda arriba, limpia; el texto se apoya en la parte inferior, que es además donde llega el pulgar. */ .hero::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(to top, rgba(24,16,12,.94) 0%, rgba(24,16,12,.88) 34%, rgba(24,16,12,.62) 58%, rgba(24,16,12,.30) 100%); } /* width:100% es obligatorio aquí. .contenedor lleva «margin:0 auto», y dentro de un contenedor grid los márgenes automáticos hacen que el elemento se encoja al ancho de su contenido en lugar de ocupar la columna: el bloque de texto medía 910 px en vez de 1240 y quedaba descolgado 165 px a la derecha del logotipo y del resto de secciones. Alineado con nada. */ .hero-contenido{position:relative;width:100%; padding-top:clamp(5rem,22vh,9rem);padding-bottom:clamp(2.5rem,7vw,4rem)} .hero .display{margin-bottom:1.15rem;color:var(--claro)} .hero .sub{font-size:var(--t-lead);color:#E6D8CF;max-width:46ch;line-height:1.55} .eslogan{display:flex;align-items:center;gap:.85rem;margin-bottom:1.5rem; font-size:var(--t-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--realce)} .eslogan::before{content:"";width:44px;height:2px;background:var(--realce);flex:none} /* Nació dentro del héroe, sobre la foto oscurecida, y llevaba el color claro escrito a pelo. La página de empresas la reutiliza sobre crema, donde ese color da 1,55:1 —ilegible—. Mismo fallo que tenía .lista-check: el color por defecto es ahora el de fondo claro y es el héroe el que lo invierte. */ .tranquiliza{display:flex;align-items:flex-start;gap:.5rem;margin-top:1rem; font-size:var(--t-xs);color:var(--tinta-suave);line-height:1.5;max-width:44ch} .tranquiliza svg{width:.95rem;height:.95rem;flex:none;margin-top:.22rem; color:var(--acento-texto)} .hero .tranquiliza,.oscuro .tranquiliza{color:#D6C6BC} .hero .tranquiliza svg,.oscuro .tranquiliza svg{color:var(--realce)} @media (min-width:900px){ /* ESCRITORIO: el velo pasa a venir de la izquierda, que es donde vive el texto. La tarta ocupa el lado derecho y se queda casi sin velar. */ .hero{align-items:center;min-height:min(90vh,860px)} .hero::after{ background:linear-gradient(to right, rgba(24,16,12,.90) 0%, rgba(24,16,12,.80) 38%, rgba(24,16,12,.42) 68%, rgba(24,16,12,.18) 100%); } .hero-foto{object-position:center center} .hero-contenido{padding-top:var(--seccion);padding-bottom:var(--seccion)} .hero .display{max-width:16ch} } /* ═══════════════════════════════════════════════════════════════════════════ 5. BANDA DE COMPROMISO · franja oscura y estrecha justo después del héroe. Es el primer golpe de contraste de la página y donde viven los tres datos que sostienen la promesa de la marca. ═══════════════════════════════════════════════════════════════════════════ */ .compromiso{background:var(--tinta);color:var(--claro); padding:clamp(2.25rem,4vw,3rem) 0} .compromiso-grid{display:grid;gap:0} @media (min-width:760px){.compromiso-grid{grid-template-columns:repeat(3,1fr)}} .compromiso-item{display:grid;grid-template-columns:1.5rem 1fr;gap:.9rem; padding:1.1rem 0;border-bottom:1px solid var(--linea-clara)} .compromiso-item:last-child{border-bottom:none} .compromiso-item svg{width:1.25rem;height:1.25rem;color:var(--realce);margin-top:.3rem} .compromiso-item b{display:block;font-weight:600;font-size:var(--t-sm);letter-spacing:.01em} .compromiso-item span{display:block;font-size:var(--t-xs);color:var(--sobre-tinta-3);line-height:1.5; margin-top:.15rem} @media (min-width:760px){ .compromiso-item{border-bottom:none;border-left:1px solid var(--linea-clara); padding:.4rem 2rem;grid-template-columns:1.5rem 1fr} .compromiso-item:first-child{border-left:none;padding-left:0} } /* ═══════════════════════════════════════════════════════════════════════════ 6. TARTAS · la imagen manda; la tarjeta desaparece. Nada de caja con borde: solo foto, nombre, precio y un filete. ═══════════════════════════════════════════════════════════════════════════ */ .cabeza-seccion{display:grid;gap:1.5rem;margin-bottom:clamp(2.5rem,5vw,4rem)} @media (min-width:900px){ .cabeza-seccion{grid-template-columns:1fr auto;align-items:end;gap:2.5rem} } /* Dos columnas ya en móvil: en una sola, estas cuatro fichas ocupaban 3,8 pantallas de 812 px y empujaban la sección de empresas hasta la pantalla 8,6. Un catálogo de dos columnas es además lo que el usuario espera. */ .rejilla-tartas{display:grid;gap:2.25rem 1rem;grid-template-columns:repeat(2,1fr)} @media (min-width:600px){.rejilla-tartas{gap:2.5rem 1.75rem;grid-template-columns:repeat(3,1fr)}} /* Tres columnas y no cuatro: son seis referencias, así caen en dos filas limpias en lugar de dejar dos huérfanas. */ .tarta{position:relative;display:flex;flex-direction:column} .tarta .marco{aspect-ratio:4/5;margin-bottom:1.25rem} .carrusel-tarta{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;aspect-ratio:4/5;margin-bottom:1.25rem;background:var(--velo)} .carrusel-tarta::-webkit-scrollbar{display:none} .carrusel-tarta .marco{flex:0 0 100%;scroll-snap-align:center;margin-bottom:0} .tarta h3{font-size:var(--t-h3);font-variation-settings:"opsz" 60,"SOFT" 0; letter-spacing:-.005em;line-height:1.3} .tarta .desc{font-size:var(--t-xs);color:var(--tinta-suave);margin-top:.5rem;flex:1; line-height:1.6} @media (min-width:600px){.tarta .desc{font-size:var(--t-sm)}} .tarta .datos{display:flex;flex-wrap:wrap;align-items:baseline; justify-content:space-between;gap:.15rem .75rem; margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--linea); font-variant-numeric:tabular-nums} .tarta .precio{font-family:var(--fuente-titulos);font-size:1.35rem; font-variation-settings:"opsz" 40,"SOFT" 0;letter-spacing:-.01em} .tarta .porciones{font-size:var(--t-xs);color:var(--tinta-suave);letter-spacing:.04em} /* La tarjeta entera es el enlace, pero se ve un control explícito abajo. */ .tarta .pedir{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem; min-height:46px;padding:.7rem 1.1rem;border:1px solid var(--linea-fuerte); font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase; text-decoration:none;align-self:start; transition:background-color .3s var(--curva),color .3s var(--curva), border-color .3s var(--curva)} .tarta:hover .pedir{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)} .etiqueta{position:absolute;top:0;left:0;z-index:2; background:var(--fondo);color:var(--tinta); font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase; padding:.5rem .8rem} /* ── Recuperado del prototipo: secciones 7 a 14 del diseño original ── */ /* ═══════════════════════════════════════════════════════════════════════════ 7. EL OFICIO · sección oscura con la foto del atemperado. Es el centro emocional de la página y lo que justifica el nombre. ═══════════════════════════════════════════════════════════════════════════ */ .oficio{background:var(--tinta-honda);color:var(--claro)} .oficio-grid{display:grid;gap:2.75rem} @media (min-width:900px){ .oficio-grid{grid-template-columns:.85fr 1.15fr;gap:clamp(3rem,6vw,6rem); align-items:center} } .oficio .marco{aspect-ratio:3/4} .oficio p{color:var(--sobre-tinta-2);font-size:var(--t-lead);line-height:1.65} /* La cita en display es el momento tipográfico más alto de la página después del titular. */ .oficio .cita{font-family:var(--fuente-titulos);font-weight:400; font-size:clamp(1.65rem,3.4vw,2.6rem); font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0; line-height:1.28;letter-spacing:-.012em;color:var(--claro); /* era 1,15 y -0,02: son cuatro líneas seguidas */ margin:0 0 1.75rem;text-wrap:balance} .oficio .cita em{font-style:italic;color:var(--realce)} .oficio .firma{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--linea-clara); font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--sobre-tinta-3); line-height:1.6} /* ═══════════════════════════════════════════════════════════════════════════ 8. CÓMO FUNCIONA · tres pasos con cifra grande y filete ═══════════════════════════════════════════════════════════════════════════ */ .pasos{display:grid;gap:2.75rem;counter-reset:paso} @media (min-width:820px){.pasos{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}} /* Subgrid para que la cifra, el título y el texto de los tres pasos empiecen a la misma altura. Sin esto, en cuanto un título ocupa dos líneas —«Te enviamos presupuesto cerrado» lo hace— el cuerpo de ese paso baja y los tres dejan de leerse como una fila. Donde no haya subgrid cae en el flujo normal y se ve como antes: no se pierde nada. */ @supports (grid-template-rows: subgrid){ @media (min-width:820px){ .pasos{grid-template-rows:auto} .paso{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:0} } } .paso{counter-increment:paso;padding-top:1.5rem;border-top:1px solid var(--linea-fuerte)} .paso::before{ content:counter(paso,decimal-leading-zero);display:block; font-family:var(--fuente-titulos);font-size:var(--t-cifra); font-variation-settings:"opsz" 144,"SOFT" 0;font-weight:300; color:var(--acento);line-height:1;margin-bottom:1rem; font-variant-numeric:tabular-nums;letter-spacing:-.02em; } .paso h3{font-size:var(--t-h3);font-variation-settings:"opsz" 60,"SOFT" 0; letter-spacing:-.01em;margin-bottom:.6rem} .paso p{font-size:var(--t-sm);color:var(--tinta-suave);line-height:1.65} .nota-pie{margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.35rem 1.5rem; background:var(--velo);font-size:var(--t-sm);border-left:2px solid var(--acento)} /* ═══════════════════════════════════════════════════════════════════════════ 8 bis. ZONA DE REPARTO ═══════════════════════════════════════════════════════════════════════════ La prescribía la arquitectura y faltaba. No es decoración: es la respuesta a «¿llegáis a mi pueblo?», que es la primera duda de cualquiera que vive cerca pero no en Elda, y es contenido de SEO local — cada topónimo en texto es una consulta que se puede ganar sin competir contra nadie grande. */ .zonas{display:grid;gap:2.5rem;margin-top:clamp(2.5rem,5vw,3.5rem)} @media (min-width:860px){.zonas{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}} .zona{padding-top:1.4rem;border-top:2px solid var(--acento)} .zona.secundaria{border-top-color:var(--linea-fuerte)} .zona h3{font-size:var(--t-h3);font-variation-settings:"opsz" 60,"SOFT" 0; letter-spacing:-.005em;margin-bottom:.35rem} .zona .promesa{font-size:var(--t-xs);font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--acento-texto);margin-bottom:1rem} .zona.secundaria .promesa{color:var(--tinta-suave)} .zona p{font-size:var(--t-sm);color:var(--tinta-suave);line-height:1.65} .municipios{list-style:none;padding:0;margin:1.1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem} .municipios li{font-size:var(--t-sm);padding:.4rem .85rem;border:1px solid var(--linea); background:var(--superficie);font-variant-numeric:tabular-nums} .municipios li.principal{border-color:var(--acento);font-weight:600} /* ═══════════════════════════════════════════════════════════════════════════ 9. EMPRESAS · la página más importante del sitio según la estrategia, así que aquí tiene peso propio: fondo invertido y foto de contexto. ═══════════════════════════════════════════════════════════════════════════ */ .empresas{background:var(--tinta);color:var(--claro)} .empresas-grid{display:grid;gap:2.75rem} @media (min-width:900px){ /* «stretch», no «center»: la columna de texto es mucho más alta que la foto y, centrada, dejaba dos huecos oscuros enormes arriba y abajo. */ .empresas-grid{grid-template-columns:1.05fr .95fr;gap:clamp(3rem,6vw,5.5rem); align-items:center} .empresas .marco{aspect-ratio:4/5;height:auto} } .empresas .marco{aspect-ratio:4/3} .empresas p{color:var(--sobre-tinta-2)} /* Nació en la sección oscura y llevaba los colores fijos; sobre fondo claro daba 1,66:1. Ahora el color por defecto es el de fondo claro y son las secciones .oscuro las que lo invierten. */ .lista-check{list-style:none;padding:0;display:grid;gap:.9rem;margin-top:2rem} .lista-check li{display:grid;grid-template-columns:1.15rem 1fr;gap:.8rem; font-size:var(--t-sm);color:var(--tinta-suave);line-height:1.55} .lista-check li strong{color:var(--tinta)} .lista-check svg{width:1rem;height:1rem;margin-top:.4rem;color:var(--acento-texto)} .oscuro .lista-check li{color:var(--sobre-tinta-2)} .oscuro .lista-check li strong{color:var(--claro)} .oscuro .lista-check svg{color:var(--realce)} .caja-empresas{margin-top:2.25rem;border-top:1px solid var(--linea-clara)} .caja-empresas .dato{display:flex;justify-content:space-between;gap:1.25rem; padding:.9rem 0;border-bottom:1px solid var(--linea-clara);font-size:var(--t-sm)} .caja-empresas .dato b{font-weight:500;color:var(--sobre-tinta-2)} .caja-empresas .dato span{text-align:right;color:var(--claro);font-weight:600; font-variant-numeric:tabular-nums} /* ═══════════════════════════════════════════════════════════════════════════ 10. GALERÍA · mosaico editorial, no cuadrícula uniforme ═══════════════════════════════════════════════════════════════════════════ */ .mosaico{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)} .mosaico .marco{aspect-ratio:1} .mosaico .alta{grid-row:span 2;aspect-ratio:1/2} @media (min-width:760px){ .mosaico{grid-template-columns:repeat(4,1fr);gap:1.1rem} .mosaico .ancha{grid-column:span 2;aspect-ratio:2/1} .mosaico .alta{grid-row:span 2;aspect-ratio:1/2} } /* ═══════════════════════════════════════════════════════════════════════════ 11. BANDA DE TEXTURA · fotografía a sangre con el eslogan encima. Cuesta muy poco y sube mucho la percepción de marca. ═══════════════════════════════════════════════════════════════════════════ */ .banda{position:relative;display:grid;place-items:center;text-align:center; min-height:clamp(300px,45vw,460px);overflow:hidden;background:var(--tinta-honda)} .banda img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* Velo oscuro: sin él el texto blanco no llega al contraste mínimo. */ .banda::after{content:"";position:absolute;inset:0;background:var(--velo-banda)} .banda .contenido{position:relative;z-index:2;padding:var(--seccion) var(--margen); max-width:720px} /* en px, no en ch: «ch» se calcula con la fuente del contenedor (Archivo 1rem), no con la del display, y salían 6 líneas */ .banda .display{color:var(--claro);font-size:clamp(2rem,5vw,3.6rem)} /* Ojo: NO llamar «pie» a esta clase — colisionaría con el pie de página. */ .banda .rotulo{margin-top:1.75rem;font-size:var(--t-xs);letter-spacing:.2em; text-transform:uppercase;color:var(--realce)} /* ═══════════════════════════════════════════════════════════════════════════ 12. PREGUNTAS FRECUENTES ═══════════════════════════════════════════════════════════════════════════ */ .faq{max-width:840px;margin:0 auto;border-top:1px solid var(--linea)} .faq details{border-bottom:1px solid var(--linea)} .faq summary{ cursor:pointer;list-style:none;padding:1.5rem 3rem 1.5rem 0;position:relative; font-family:var(--fuente-titulos);font-size:clamp(1.05rem,1.7vw,1.3rem); font-variation-settings:"opsz" 60,"SOFT" 0;letter-spacing:0;line-height:1.45; transition:color .25s var(--curva); } .faq summary::-webkit-details-marker{display:none} /* Signo «más» que gira a «menos»: dos filetes, sin iconografía extra. */ .faq summary::before,.faq summary::after{ content:"";position:absolute;right:.4rem;top:50%;background:var(--acento); transition:transform .35s var(--curva),opacity .35s var(--curva)} .faq summary::before{width:14px;height:1.5px;margin-top:-.75px} .faq summary::after{width:1.5px;height:14px;margin-top:-7px;right:calc(.4rem + 6.25px)} .faq details[open] summary::after{transform:rotate(90deg);opacity:0} .faq summary:hover{color:var(--acento-texto)} .faq .respuesta{padding:0 3rem 1.75rem 0;color:var(--tinta-suave);font-size:var(--t-sm); line-height:1.7;max-width:64ch} .faq .respuesta a{color:var(--acento-texto);text-decoration:underline; text-underline-offset:.18em;text-decoration-thickness:1px} .faq .respuesta a:hover{text-decoration-thickness:2px} /* ═══════════════════════════════════════════════════════════════════════════ 13. CIERRE + BOTÓN FLOTANTE ═══════════════════════════════════════════════════════════════════════════ */ .cierre{background:var(--velo)} .cierre .display{font-size:clamp(2.4rem,6vw,4.5rem);margin-bottom:1.25rem} .canales{margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--linea); font-size:var(--t-sm);color:var(--tinta-suave);display:grid;gap:.5rem} .canales b{color:var(--tinta);font-weight:600} /* ─── BARRA DE ACCIÓN ────────────────────────────────────────────────────── En móvil es una barra fija abajo con las DOS vías de contacto: escribir y llamar. Antes había una píldora suelta con una sola acción. Dos motivos para cambiarlo: la franja inferior es donde llega el pulgar, y quien duda entre escribir y llamar ya no tiene que ir a buscar el teléfono al pie. En escritorio vuelve a ser una píldora: allí la barra fija estorba. */ .barra-accion{ position:fixed;left:0;right:0;bottom:0;z-index:120; display:grid;grid-template-columns:1fr auto;gap:1px; background:var(--linea-fuerte); box-shadow:0 -6px 24px var(--sombra); /* Oculta de verdad. Antes solo llevaba translateY(110%), que desplaza el 110 % de la ALTURA DEL ELEMENTO (unos 60 px); en escritorio la barra está anclada a bottom:2rem, así que no llegaba a salir de la pantalla: quedaba una franja pulsable abajo a la derecha, y sus dos enlaces seguían siendo alcanzables con el tabulador. Con visibility:hidden desaparece de verdad, deja de recibir clics y sale del orden de tabulación. */ transform:translateY(130%); opacity:0;visibility:hidden;pointer-events:none; transition:transform .35s var(--curva),opacity .3s var(--curva),visibility .35s; padding-bottom:env(safe-area-inset-bottom); /* respeta la barra del iPhone */ } .barra-accion.visible{transform:none;opacity:1;visibility:visible;pointer-events:auto} .barra-accion a{ display:flex;align-items:center;justify-content:center;gap:.55rem; min-height:58px;padding:.9rem 1.25rem;text-decoration:none; font-size:var(--t-sm);font-weight:600;letter-spacing:.02em; transition:background-color .25s var(--curva); } .barra-accion .principal{background:var(--acento);color:var(--sobre-acento)} .barra-accion .principal:hover{background:var(--acento-oscuro)} .barra-accion .secundaria{background:var(--superficie);color:var(--tinta);padding-inline:1.5rem} .barra-accion .secundaria:hover{background:var(--fondo)} .barra-accion svg{width:1.15rem;height:1.15rem;flex:none} .barra-accion .rotulo-corto{display:none} @media (max-width:379px){ .barra-accion .rotulo-largo{display:none} .barra-accion .rotulo-corto{display:inline} } @media (min-width:980px){ .barra-accion{ left:auto;right:2rem;bottom:2rem;grid-template-columns:auto; background:none;box-shadow:none;gap:.6rem; } .barra-accion a{border-radius:100px;min-height:0;padding:.95rem 1.5rem; box-shadow:0 8px 28px var(--sombra)} .barra-accion .secundaria{display:none} /* en escritorio nadie pulsa «llamar» */ } /* ═══════════════════════════════════════════════════════════════════════════ 14. PIE ═══════════════════════════════════════════════════════════════════════════ */ .pie{background:var(--tinta);color:var(--sobre-tinta-3);padding:clamp(3.5rem,7vw,5.5rem) 0 7rem; font-size:var(--t-sm)} .pie-grid{display:grid;gap:2.5rem} @media (min-width:780px){.pie-grid{grid-template-columns:1.4fr 1fr 1fr}} .pie h2{color:var(--claro);font-family:var(--fuente-texto);font-size:var(--t-micro); font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.15rem} .pie a{color:var(--sobre-tinta-3);text-decoration:none;display:block;padding:.3rem 0; transition:color .25s var(--curva)} .pie a:hover{color:var(--claro)} .pie .logo-pie{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem} .pie .logo-pie .sello{width:42px;height:42px;flex:none} .pie .logo-pie b{display:block;font-family:var(--fuente-titulos);font-size:1.6rem; font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 0;color:var(--claro); letter-spacing:.01em} .pie .logo-pie small{margin:0 0 .3rem} .pie .logo-pie small{display:block;font-size:.5rem;font-weight:600;letter-spacing:.28em; text-transform:uppercase;color:var(--sobre-tinta-3)} /* 4,97:1 sobre cacao */ .pie .legal{margin-top:3.5rem;padding-top:1.75rem;border-top:1px solid var(--linea-clara); font-size:var(--t-xs);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center} .pie .legal a{display:inline;padding:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} [data-revelar],.js [data-revelar]{opacity:1;transform:none} } /* ═══════════════════════════════════════════════════════════════════════════ PÁGINAS INTERIORES ═══════════════════════════════════════════════════════════════════════════ Las doce páginas que no son la home comparten tres piezas: la cabecera de página, las migas de pan y el cuerpo de texto largo. Definirlas una vez evita que cada página invente su propio espaciado. */ /* ─── Cabecera de página ─── */ .hero-interior{padding:calc(var(--alto-cabecera, 88px) + 4rem) 0 3rem; background:var(--superficie)} .hero-interior .texto{max-width:60ch} .hero-interior .display{margin:.2rem 0 .9rem} .hero-interior .sub{font-size:var(--t-md);color:var(--tinta-suave);line-height:1.6; max-width:56ch} @media (min-width:900px){.hero-interior{padding-top:calc(var(--alto-cabecera, 88px) + 5.5rem)}} /* Variante con foto al lado, para las dos páginas que la tienen. */ .hero-interior-grid{display:grid;gap:2.5rem;align-items:center} @media (min-width:900px){ .hero-interior-grid{grid-template-columns:1fr .8fr;gap:4rem} } /* ─── Migas de pan ─── No son decorativas: son el único enlace de vuelta a la categoría desde una ficha, y son lo que Google usa para pintar la ruta en el resultado. */ .migas{padding:1.5rem 0 0} .migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0; font-size:var(--t-xs);color:var(--tinta-suave)} .migas li+li::before{content:"/";margin-right:.5rem;opacity:.5} .migas a{color:var(--tinta-suave);text-decoration:none; border-bottom:1px solid transparent;transition:border-color .25s var(--curva)} .migas a:hover{border-bottom-color:var(--tinta-suave)} .migas [aria-current="page"]{color:var(--tinta)} /* ─── Cuerpo de texto largo ─── 65 caracteres por línea. Por encima de eso el ojo pierde el renglón al volver al margen izquierdo, y estas páginas son las que más se leen seguidas: alérgenos, condiciones, privacidad. */ .texto{max-width:65ch} .texto h2{font-size:var(--t-xl);margin:2.75rem 0 .9rem;letter-spacing:-.012em} .texto h2:first-child{margin-top:0} .texto h3{font-family:var(--fuente-texto);font-size:var(--t-md);font-weight:600; margin:1.9rem 0 .5rem} .texto p{color:var(--tinta-suave);line-height:1.75;margin-bottom:1.1rem} .texto ul,.texto ol{color:var(--tinta-suave);line-height:1.75; margin:0 0 1.3rem 1.15rem;padding:0} .texto li{margin-bottom:.5rem} .texto strong{color:var(--tinta);font-weight:600} /* :not(.btn) porque un botón dentro de un bloque de texto sigue siendo un , y esta regla le imponía el color de enlace sobre su propio fondo terracota: 1,25:1, ilegible. El botón manda sobre el estilo de enlace del párrafo. */ .texto a:not(.btn){color:var(--acento-texto);text-decoration:underline; text-underline-offset:.16em} .texto table{width:100%;border-collapse:collapse;font-size:var(--t-xs);margin-bottom:1.3rem} .texto th,.texto td{text-align:left;padding:.6rem .75rem;border:1px solid var(--linea); vertical-align:top} .texto th{background:var(--velo);font-weight:600;color:var(--tinta);white-space:nowrap} /* El caption es el título de la tabla y lo primero que anuncia un lector de pantalla al entrar en ella. Se ve pequeño a propósito: informa sin competir con el h2 que va encima. */ .texto caption{caption-side:top;text-align:left;font-size:var(--t-micro); font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta-suave);padding:0 0 .55rem} .texto td{color:var(--tinta-suave)} /* La tabla de alérgenos tiene nueve columnas: en un móvil no cabe de ninguna manera. Que ruede en horizontal ella sola es mejor que encogerla hasta que no se lea, y mucho mejor que hacer rodar la página entera. */ .tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.3rem} .tabla-scroll table{margin-bottom:0;min-width:640px} /* ─── Aviso destacado dentro del texto ─── */ .aviso{background:var(--velo);border-left:3px solid var(--acento); padding:1.15rem 1.35rem;margin:1.75rem 0; font-size:var(--t-sm);color:var(--tinta-suave);line-height:1.65} .aviso strong{color:var(--tinta)} .aviso a{color:var(--acento-texto);text-decoration:underline;text-underline-offset:.16em} /* ─── Motivos de compra de la página de empresas ─── */ .rejilla-beneficios{display:grid;gap:1.5rem;margin-top:2.5rem} @media (min-width:700px){.rejilla-beneficios{grid-template-columns:repeat(2,1fr);gap:2rem}} .beneficio{border-top:1px solid var(--linea);padding-top:1.15rem} .beneficio h3{font-family:var(--fuente-titulos);font-size:var(--t-lg); font-variation-settings:"opsz" 40,"SOFT" 40,"WONK" 1; line-height:1.25;letter-spacing:-.012em;margin-bottom:.55rem} .beneficio p{font-size:var(--t-sm);color:var(--tinta-suave);line-height:1.65} /* ═══════════════════════════════════════════════════════════════════════════ FORMULARIO ═══════════════════════════════════════════════════════════════════════════ Un solo formulario en todo el sitio, el de presupuesto para empresas. Los campos miden 48 px de alto: es el mínimo que se toca sin fallar con el pulgar, y es lo que evita el zoom automático de Safari en iOS —que se dispara con cualquier tipografía por debajo de 16 px. */ .formulario{display:grid;gap:1.25rem;margin-top:2.5rem} @media (min-width:700px){.formulario{grid-template-columns:repeat(2,1fr);gap:1.25rem 1.5rem}} .campo{display:flex;flex-direction:column} .campo-ancho{grid-column:1/-1} .campo label{font-size:var(--t-xs);font-weight:600;letter-spacing:.04em; color:var(--tinta);margin-bottom:.4rem} .campo label span[aria-hidden]{color:var(--acento-texto)} .campo input,.campo textarea{ font-family:var(--fuente-texto);font-size:1rem;color:var(--tinta); background:var(--fondo);border:1px solid var(--linea-fuerte);border-radius:0; padding:.75rem .9rem;min-height:48px;width:100%; transition:border-color .25s var(--curva); } .campo textarea{min-height:120px;resize:vertical;line-height:1.6} .campo input:hover,.campo textarea:hover{border-color:var(--tinta-suave)} .campo input:focus-visible,.campo textarea:focus-visible{ outline:2.5px solid var(--acento);outline-offset:2px;border-color:var(--acento)} /* :user-invalid y no :invalid: :invalid pinta de rojo un campo obligatorio que aún está vacío porque nadie lo ha tocado. Regañar antes de escribir. */ .campo input:user-invalid,.campo textarea:user-invalid{border-color:var(--terracota-txt)} .ayuda{font-size:var(--t-micro);color:var(--tinta-suave);margin-top:.35rem;line-height:1.5} .consentimiento label{display:grid;grid-template-columns:auto 1fr;gap:.65rem; align-items:start;font-size:var(--t-xs);font-weight:400;color:var(--tinta-suave); line-height:1.6;cursor:pointer} .consentimiento input[type=checkbox]{width:20px;height:20px;min-height:0; margin-top:.1rem;accent-color:var(--acento);cursor:pointer} .consentimiento a{color:var(--acento-texto);text-decoration:underline; text-underline-offset:.16em} /* ═══════════════════════════════════════════════════════════════════════════ FICHA DE PRODUCTO ═══════════════════════════════════════════════════════════════════════════ Antes las cinco fotos se apilaban a lo alto y a ancho completo: la página se iba a más de 3.000 px y la columna de datos, que mide unos 250, dejaba debajo casi tres mil píxeles de crema vacía. Se ve enorme y descuidado. Ahora: UNA foto grande con miniaturas debajo —el patrón que cualquiera reconoce de una tienda— y la columna de datos pegada al scroll, así que acompaña a las fotos en vez de quedarse atrás. La página baja a una pantalla y media y no queda hueco muerto. */ .producto-grid{display:grid;gap:2rem;padding-top:1rem} @media (min-width:900px){ .producto-grid{grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start} } /* La galería, sus miniaturas y la pista de deslizar van juntas en una celda. Si cuelgan sueltas de .producto-grid, la rejilla las reparte por columnas y las miniaturas acaban al lado del título. */ .producto-media{min-width:0} .producto-info .btn-principal{width:100%} /* ─── Galería: una foto visible, miniaturas debajo ─── */ .galeria-producto{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; background:var(--superficie);aspect-ratio:4/5; } .galeria-producto::-webkit-scrollbar{display:none} .galeria-producto .marco{flex:0 0 100%;scroll-snap-align:center;margin:0;aspect-ratio:4/5} .galeria-producto img{width:100%;height:100%;object-fit:cover} @media (min-width:900px){ /* Un poco menos alta en escritorio: a 4:5 y media pantalla de ancho, la foto sola ya medía más que el alto del navegador. */ .galeria-producto,.galeria-producto .marco{aspect-ratio:1/1} } /* ─── Miniaturas ─── */ .carrusel-miniaturas{ display:flex;gap:.5rem;margin-top:.6rem; overflow-x:auto;scrollbar-width:none;padding-bottom:.15rem; } .carrusel-miniaturas::-webkit-scrollbar{display:none} .carrusel-miniatura{ flex:0 0 auto;width:64px;height:64px;padding:0;cursor:pointer; border:1px solid var(--linea);background:none;overflow:hidden; opacity:.55;transition:opacity .25s var(--curva),border-color .25s var(--curva); } .carrusel-miniatura img{width:100%;height:100%;object-fit:cover;display:block} .carrusel-miniatura:hover{opacity:.85} .carrusel-miniatura.activo{opacity:1;border-color:var(--acento);border-width:2px} @media (min-width:900px){.carrusel-miniatura{width:76px;height:76px}} /* ─── Columna de datos, pegada al scroll ─── */ @media (min-width:900px){ .producto-info{position:sticky;top:calc(var(--alto-cabecera, 88px) + 1.5rem)} } .producto-info h1{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1; letter-spacing:-.018em;margin-bottom:.35rem} .precio-base{font-family:var(--fuente-titulos);font-size:1.6rem; font-variation-settings:"opsz" 60,"SOFT" 0;color:var(--acento-texto); letter-spacing:-.01em;margin-bottom:1rem;font-variant-numeric:tabular-nums} .producto-info .desc{color:var(--tinta-suave);line-height:1.65;margin-bottom:1.5rem} /* ─── Precio, selector de tamaño y pista de deslizar ─── */ .precio-base{display:block} .selector-tamano{margin:1.5rem 0 1rem} .selector-tamano label{display:block;font-size:var(--t-xs);font-weight:600; letter-spacing:.04em;color:var(--tinta-suave);margin-bottom:.4rem} .selector-tamano select{ /* appearance:none más la flecha dibujada a mano: el desplegable del sistema rompe la tipografía de la página en Windows. */ width:100%;appearance:none;cursor:pointer; font-family:var(--fuente-texto);font-size:var(--t-sm);color:var(--tinta); padding:.8rem 2.4rem .8rem .9rem; background-color:var(--fondo);border:1px solid var(--linea-fuerte);border-radius:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B322E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .8rem center;background-size:1.05rem; transition:border-color .25s var(--curva); } .selector-tamano select:hover{border-color:var(--tinta-suave)} .selector-tamano select:focus-visible{outline:2.5px solid var(--acento);outline-offset:2px} /* La pista de deslizar solo tiene sentido donde se desliza de verdad. En escritorio están las miniaturas y sobra. */ .swipe-hint{display:none} @media (max-width:899px){ .swipe-hint{display:block;margin:.6rem 0 0;text-align:center; font-size:var(--t-xs);color:var(--tinta-suave)} } /* ─── Alérgenos, en la propia ficha ─── No es un adorno: el art. 14 del Reglamento (UE) 1169/2011 obliga a que esta información esté disponible ANTES de cerrar la compra. Aquí está donde se decide, no escondida en otra página. */ .alergenos-ficha{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--linea)} .alergenos-ficha h2{font-family:var(--fuente-texto);font-size:var(--t-micro); font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--tinta-suave);margin:0 0 .75rem} .alergenos-lista{list-style:none;padding:0;margin:0 0 .8rem; display:flex;flex-wrap:wrap;gap:.4rem} .alergenos-lista li{font-size:var(--t-xs);font-weight:600;letter-spacing:.04em; padding:.35rem .7rem;background:var(--velo);color:var(--tinta); border:1px solid var(--linea)} .alergenos-lista li.traza{background:none;color:var(--tinta-suave);font-weight:400} .alergenos-ficha p{font-size:var(--t-xs);color:var(--tinta-suave);line-height:1.6;margin:0} .alergenos-ficha a{color:var(--acento-texto);text-decoration:underline; text-underline-offset:.16em} /* ═══════════════════════════════════════════════════════════════════════════ CONTROLES DEL CARRUSEL ═══════════════════════════════════════════════════════════════════════════ Los crea el JavaScript, así que el HTML de las páginas se queda limpio. Sin JS no aparecen, pero el carrusel se sigue pudiendo arrastrar con el dedo y recorrer con el tabulador: no se pierde nada esencial. */ .carrusel-controles{display:flex;align-items:center;gap:.6rem; margin:.75rem 0 1.25rem;flex-wrap:wrap} /* Las tarjetas con varias fotos llevan puntos y flechas debajo de la imagen; las de una sola foto, no. Eso empujaba su título 70 px más abajo que el de sus vecinas y la fila dejaba de leerse como una fila. Aquí se reserva ese mismo hueco en las que no tienen controles. La medida no es a ojo: es la altura del botón más los dos márgenes de la línea de arriba, y sale de las mismas variables, así que si cambian los controles esto acompaña. Donde no haya :has() se ve como antes. */ .rejilla-tartas{--alto-controles:calc(var(--medida-toque) + .75rem + 1.25rem)} .rejilla-tartas .tarta:not(:has(.carrusel-controles)) :is(h2,h3){ margin-top:var(--alto-controles)} .carrusel-controles[hidden]{display:none} .carrusel-flecha{ display:inline-flex;align-items:center;justify-content:center; width:var(--medida-toque);height:var(--medida-toque);flex:none;padding:0;cursor:pointer; background:none;border:1px solid var(--linea-fuerte);border-radius:0; color:var(--tinta); transition:background-color .25s var(--curva),color .25s var(--curva), border-color .25s var(--curva); } .carrusel-flecha:hover{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)} .carrusel-flecha svg{width:1.05rem;height:1.05rem} .carrusel-puntos{display:flex;align-items:center;gap:.4rem;flex:1} .carrusel-punto{ /* El punto se ve pequeño pero el área pulsable son 24 px: por debajo de eso se falla al tocarlo con el pulgar. */ width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; } .carrusel-punto::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--linea-fuerte); transition:background-color .25s var(--curva),transform .25s var(--curva); } .carrusel-punto:hover::before{background:var(--tinta-suave)} .carrusel-punto.activo::before{background:var(--acento);transform:scale(1.35)} /* El carrusel recibe foco de teclado: hay que verlo. */ .carrusel-tarta:focus-visible,.galeria-producto:focus-visible{ outline:2.5px solid var(--acento);outline-offset:3px} /* Los controles de la galería de producto son las miniaturas: van pegadas debajo de la foto, sin el margen de los puntos. */ .galeria-producto + .carrusel-controles{margin-top:0;display:block}