/* =====================================================================
AREPITAS DEL VALLE · home.css (estilos del inicio animado)
===================================================================== */
/* ---------- HERO ----------
Foto real a sangre + scrim. Anclado abajo: la foto respira arriba y el
bloque de texto/CTA queda al alcance del pulgar. Presupuesto de altura
pensado para 375x667 (iPhone SE) sin que los botones caigan del fold. */
.hero{
position:relative;
min-height:100svh;
display:flex;align-items:flex-end;
overflow:hidden;
color:var(--hueso);
background:var(--marron-prof);
padding:calc(76px + env(safe-area-inset-top,0px)) 0 clamp(26px,6vh,64px);
}
/* El zoom del scroll vive en el contenedor, no en las fotos: las fotos usan su
propio transform para el acercamiento lento del encadenado. Si los dos
efectos compartieran propiedad, el ultimo en aplicarse borraria al otro. */
.hero-bg{
position:absolute;inset:0;z-index:0;
transform:scale(var(--hero-zoom,1.04));transform-origin:50% 45%;
transition:transform 60ms linear;
}
.hero-bg picture{position:absolute;inset:0;display:block;}
.hero-bg img{
position:absolute;inset:0;
width:100%;height:100%;object-fit:cover;
/* En movil la foto vertical entra entera de alto: aqui solo cuenta el eje
horizontal. En ordenador cada foto ya llega recortada en apaisado, asi que
no hay nada que compensar y va centrada. */
object-position:50% 40%;
}
@media (min-width:760px){ .hero-bg img{object-position:50% 50%;} }
/* Sin animacion solo se ve la primera: las otras dos parten apagadas. */
.hero-bg picture + picture img{opacity:0;}
/* ---------- Encadenado de las tres fotos del hero ----------
Ciclo de 18s, 6s por foto y fundido de 1,5s. Van apiladas en el orden del
HTML, asi que cada una entra POR ENCIMA de la anterior: solo hay que
encender la que llega, nunca apagar la que se va, y no asoma el fondo entre
medias. La tercera si se apaga al final, y debajo espera la primera; la
segunda se apaga de golpe al 85%, tapada, donde no se ve el corte. */
@media (prefers-reduced-motion:no-preference){
.hero-bg img{
animation-duration:18s;
animation-timing-function:linear;
animation-iteration-count:infinite;
}
.hero-bg picture:nth-child(1) img{animation-name:hero-foto-1;}
.hero-bg picture:nth-child(2) img{animation-name:hero-foto-2;}
.hero-bg picture:nth-child(3) img{animation-name:hero-foto-3;}
}
@keyframes hero-foto-1{
0%{opacity:1;transform:scale(1);}
41.67%{transform:scale(1.05);}
85%{transform:scale(1);}
100%{opacity:1;transform:scale(1);}
}
@keyframes hero-foto-2{
0%,33.33%{opacity:0;transform:scale(1);}
41.67%{opacity:1;}
75%{transform:scale(1.05);}
85%{opacity:1;}
85.01%,100%{opacity:0;transform:scale(1);}
}
@keyframes hero-foto-3{
0%,66.67%{opacity:0;transform:scale(1);}
75%{opacity:1;}
94.44%{opacity:1;transform:scale(1.05);}
100%{opacity:0;transform:scale(1.06);}
}
/* Scrim: oscurece lo justo para leer sin apagar la arepa.
Son dos capas. La corta de arriba sujeta el menu; antes ese trabajo lo hacia
la capa grande, y para conseguirlo oscurecia los 135px superiores enteros.
Separandolas, el menu gana contraste (4,3:1 -> 5,0:1 sobre foto clara) y la
franja limpia de foto se aclara de golpe. Abajo no se toca nada: ahi vive el
texto y esos valores estan medidos. */
.hero::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(to bottom,
rgba(26,15,7,.50) 0,
rgba(26,15,7,.26) 90px,
rgba(26,15,7,0) 150px),
linear-gradient(to top,
rgba(26,15,7,.96) 0%,
rgba(26,15,7,.90) 22%,
rgba(26,15,7,.72) 42%,
rgba(26,15,7,.34) 66%,
rgba(26,15,7,.16) 84%,
rgba(26,15,7,.22) 100%);
}
/* Velo propio para ordenador. Ahi el bloque de texto va centrado (del 21% al
56% de la altura), mientras que el velo de movil esta hecho para texto
anclado abajo: oscurecia al 90% el tercio inferior, donde no hay nada, y
dejaba claro el centro, que es justo donde cae el titular. Por eso la comida
no se entendia. Aqui el oscurecimiento es una elipse sobre el texto y los
bordes quedan limpios, que es donde se ve el plato. */
@media (min-width:760px){
.hero::before{
background:
linear-gradient(to bottom,
rgba(26,15,7,.50) 0,
rgba(26,15,7,.26) 90px,
rgba(26,15,7,0) 150px),
radial-gradient(80% 64% at 50% 40%,
rgba(26,15,7,.88) 0%,
rgba(26,15,7,.70) 42%,
rgba(26,15,7,.36) 74%,
rgba(26,15,7,.22) 100%),
linear-gradient(to top,
rgba(26,15,7,.34) 0%,
rgba(26,15,7,.18) 38%,
rgba(26,15,7,.18) 100%);
}
}
.hero::after{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(120% 70% at 50% 100%, rgba(232,184,69,.22), transparent 62%);
}
.hero .wrap{position:relative;z-index:3;width:100%;}
.hero-stack{display:grid;justify-items:center;text-align:center;}
.hero-eyebrow{margin-bottom:10px;justify-self:center;text-shadow:0 1px 10px rgba(20,12,6,.8);}
/* Las dos palabras van en la script del logo: se lee escrito a mano. */
.hero-word{
font-family:'Kaushan Script','Fraunces',cursive;
font-weight:400;font-style:normal;
letter-spacing:0;line-height:.86;text-wrap:balance;
}
.hero-word.top{
position:relative;z-index:5;
font-size:clamp(3.6rem,17vw,13rem);
color:var(--dorado-claro);
text-shadow:0 6px 26px rgba(20,12,6,.7), 0 2px 6px rgba(20,12,6,.6);
transform:rotate(-2deg);transform-origin:60% 80%;
margin-bottom:-.02em;padding:0 .04em;
}
.hero-word.bottom{
position:relative;z-index:5;
font-size:clamp(2.2rem,9.5vw,6.6rem);
color:var(--dorado);
text-shadow:0 5px 22px rgba(20,12,6,.65);
/* Desplazada a la derecha, como una firma bajo el rabo de la "p". */
transform:translateX(.55em) rotate(-1.5deg);transform-origin:40% 20%;
margin-top:-.04em;
}
@keyframes hero-stamp-top{
0%{opacity:0;transform:scale(.78) rotate(-14deg);}
60%{opacity:1;}
100%{opacity:1;transform:scale(1) rotate(-2deg);}
}
@keyframes hero-stamp-bottom{
0%{opacity:0;transform:translateX(.55em) scale(.82) rotate(10deg);}
100%{opacity:1;transform:translateX(.55em) scale(1) rotate(-1.5deg);}
}
.hero-word.top{animation:hero-stamp-top 1.1s var(--ease-out) .2s both;}
.hero-word.bottom{animation:hero-stamp-bottom 1s var(--ease-out) .45s both;}
@media (prefers-reduced-motion:reduce){
.hero-word.top,.hero-word.bottom{animation:none;opacity:1;}
.hero-bg{transform:none;}
}
.hero-sub{
font-size:clamp(1rem,.94rem + .5vw,1.28rem);
max-width:28ch;margin:.7em auto 0;
color:rgba(251,247,238,.96);text-wrap:pretty;
text-shadow:0 1px 10px rgba(20,12,6,.75), 0 1px 2px rgba(20,12,6,.6);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.15em;width:100%;}
.hero-cta .btn{flex:1 1 100%;max-width:340px;}
.hero-strip{
display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:.45em;margin-top:1.05em;padding:.55em 1em;border-radius:999px;
background:rgba(251,247,238,.12);border:1px solid rgba(251,247,238,.22);
font-size:.86rem;font-weight:500;color:rgba(251,247,238,.94);
backdrop-filter:saturate(140%) blur(6px);
}
.hero-strip svg{width:1.05em;height:1.05em;color:var(--dorado-claro);}
.hero-strip .dot{width:5px;height:5px;border-radius:50%;background:var(--dorado);}
.scroll-cue{
position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4;
display:flex;flex-direction:column;align-items:center;gap:6px;
font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,247,238,.88);
}
.scroll-cue .mouse{width:22px;height:34px;border:2px solid rgba(251,247,238,.5);border-radius:14px;position:relative;}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;border-radius:3px;background:var(--dorado-claro);transform:translateX(-50%);animation:wheel 1.5s var(--ease-out) infinite;}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0);}40%{opacity:1;}100%{opacity:0;transform:translate(-50%,12px);}}
/* En pantallas bajas la pista de scroll pisa la chapa de horario. */
@media (max-height:760px){ .scroll-cue{display:none;} }
@media (min-width:520px){
.hero-cta .btn{flex:1 1 210px;}
}
@media (min-width:760px){
.hero{align-items:center;padding-top:130px;}
.hero-strip{font-size:.95rem;}
}
/* ---------- Marquee strip ---------- */
.strip{background:var(--dorado);color:var(--marron-prof);padding:16px 0;border-block:3px solid var(--marron-prof);}
.strip .marquee-item{font-size:clamp(1.5rem,4vw,2.6rem);}
.strip-dark{background:var(--marron-osc);color:var(--dorado);border-color:var(--dorado);}
/* ---------- Manifiesto ---------- */
.manifesto{padding:var(--pad-seccion) 0;}
.manifesto .big{font-family:var(--display);font-weight:900;font-size:var(--fs-h2);line-height:1.02;max-width:18ch;text-wrap:balance;color:var(--marron-osc);}
.manifesto .big em{font-style:italic;color:var(--verde);}
.manifesto .lead{font-size:var(--fs-lead);max-width:44ch;color:var(--marron);margin-top:1.2em;}
.manifesto-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:46px;}
.manifesto-photos .slot{width:100%;border-radius:var(--r-md);box-shadow:var(--sh-md);}
.mp-tall{aspect-ratio:3/4;}
/* ---------- Card-stack: las siguientes secciones muerden la anterior ----------
Borde superior curvo + margin-top negativo. Crea una sensación de tarjetas
apiladas cuando haces scroll. Solo en transiciones que cambian de contraste
(oscuro→claro o claro→oscuro), para que la curva se vea. */
.fijas, .mes, .doce, .reviews, .find{
position:relative;
z-index:2;
margin-top:-28px;
border-top-left-radius:28px;
border-top-right-radius:28px;
}
@media (min-width:760px){
.fijas, .mes, .doce, .reviews, .find{
margin-top:-56px;
border-top-left-radius:48px;
border-top-right-radius:48px;
}
}
/* ---------- Pinned: se arma la arepa · SIN USO desde el 04/09/2026 ----------
La seccion se quito de index.html: pedia seis fotos de ingrediente que no
existen. Se deja el CSS por si algun dia se rueda el material. ---------- */
/* Pista de scroll del pin: 170vh en un movil son ~1.100px de arrastre para
un solo titular. 132svh basta para que entren los ingredientes. */
.pin{height:132svh;background:var(--marron-prof);}
@media (min-width:760px){ .pin{height:165vh;} }
.pin-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;color:var(--hueso);}
.pin-center{position:relative;z-index:2;text-align:center;padding:0 22px;}
.pin-center .eyebrow{justify-content:center;margin-bottom:14px;}
.pin-center h2{font-size:var(--fs-display);line-height:.92;}
.pin-center h2 .gold{color:var(--dorado);font-style:italic;}
.pin-arepa{width:clamp(160px,32vw,280px);height:clamp(160px,32vw,280px);border-radius:50%;margin:0 auto 26px;border:5px solid var(--hueso-90);box-shadow:var(--sh-lg);transform:scale(calc(.85 + .15*var(--p,0)));transition:transform 100ms linear;}
.pin-arepa > img{border-radius:50%;}
.ingts{position:absolute;inset:0;z-index:1;pointer-events:none;}
.ingt{
position:absolute;left:50%;top:50%;
width:clamp(82px,16vw,138px);height:clamp(82px,16vw,138px);margin:calc(-1*clamp(41px,8vw,69px));
border-radius:50%;display:grid;place-items:center;
background:var(--crema);color:var(--marron-osc);box-shadow:var(--sh-md);
font-weight:700;font-size:.8rem;text-align:center;overflow:hidden;
border:3px solid var(--crema);
/* Reveal secuencial: cada ingrediente entra cuando el scroll alcanza su --start.
Ventana corta (0.08) → entradas rápidas, no se espera. */
--start:0;
--t:clamp(0, calc((var(--p,0) - var(--start)) / 0.08), 1);
/* Aterriza en su sitio (clamp px pequeño = ingredientes pegados al arepa).
Cae desde arriba como si soltaras el ingrediente sobre el plato. */
transform:
translate(
clamp(-200px, var(--tx,0vw), 200px),
calc(clamp(-200px, var(--ty,0vw), 200px) + (1 - var(--t)) * -50px)
)
scale(calc(.55 + .45 * var(--t)));
opacity:var(--t);
}
/* Sin foto: no hay imagen real de ningun ingrediente, asi que la burbuja
es puramente tipografica. Fraunces en cursiva sobre crema. */
.ingt b{
font-family:var(--display);font-weight:900;font-style:italic;
font-size:clamp(.74rem,1.8vw,1.05rem);
line-height:1.05;text-align:center;
color:var(--marron-osc);
text-transform:none;letter-spacing:0;
background:none;box-shadow:none;padding:0 6px;margin:0;
text-wrap:balance;
}
/* ---------- Banda "Asi sale del budare" ----------
Sustituye al pin. Un respiro oscuro entre dos secciones crema, con foto
real a sangre. Sin material nuevo que rodar. */
.banda{
position:relative;display:grid;place-items:center;
height:clamp(280px,46svh,460px);overflow:hidden;background:var(--marron-prof);
}
.banda-bg{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:50% 52%;
}
.banda::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top, rgba(26,15,7,.82), rgba(26,15,7,.32) 55%, rgba(26,15,7,.55));
}
.banda-txt{
position:relative;z-index:2;margin:0;padding:0 22px;text-align:center;
font-family:var(--display);font-weight:900;
font-size:clamp(1.9rem,7vw,3.6rem);line-height:1.02;
color:var(--hueso);text-shadow:0 4px 22px rgba(20,12,6,.7);
text-wrap:balance;
}
.banda-txt em.script{color:var(--dorado-claro);font-style:normal;}
/* ---------- Las que nunca fallan ----------
Tarjeta de descanso entre el pin (oscuro) y el mes (oscuro).
Crema clara con cards blancas. Resuelve la duda del cliente nuevo: qué pido. */
.fijas{
background:var(--crema);
padding-block:var(--pad-seccion);
overflow:hidden;
}
.fijas .eyebrow{justify-content:center;display:flex;}
.fijas h2{
text-align:center;
font-size:var(--fs-display);
color:var(--marron-osc);
line-height:.95;
margin:.3em 0 .25em;
text-wrap:balance;
}
.fijas-lead{
text-align:center;
color:var(--marron);
font-size:var(--fs-lead);
max-width:36ch;
margin:0 auto clamp(28px,4vw,46px);
}
/* Lista tipografica: no tenemos una foto fiel de cada variante, asi que el
nombre y el precio cargan el peso y una sola foto real ancla la seccion. */
.fijas-wrap{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,46px);align-items:start;}
.fijas-list{list-style:none;margin:0;padding:0;}
.fija{
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-areas:"n nom p" "desc desc desc";
gap:3px 12px;align-items:baseline;
padding:15px 0;
border-bottom:1.5px dashed rgba(92,58,30,.24);
}
.fija:last-child{border-bottom:0;}
.f-n{
grid-area:n;font-family:var(--display);font-weight:900;
font-size:.8rem;color:var(--verde);letter-spacing:.04em;
transform:translateY(-.15em);
}
.f-nom{
grid-area:nom;font-family:var(--display);font-weight:900;
font-size:clamp(1.28rem,4.6vw,1.85rem);line-height:1;
color:var(--marron-osc);text-wrap:balance;
}
.f-desc{
grid-area:desc;font-family:var(--display);font-style:italic;
font-size:1rem;line-height:1.3;color:var(--marron);
margin-left:calc(.8rem + 12px);
}
.f-p{
grid-area:p;font-family:var(--display);font-weight:900;
font-size:clamp(1.05rem,3.4vw,1.35rem);
color:var(--marron);white-space:nowrap;
}
.fijas-shot{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);}
/* height:auto es obligatorio: el atributo height="900" del ![]()
es una pista
de presentacion y gana sobre aspect-ratio, dejando la foto de 900px de alto. */
.fijas-shot img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;}
.fijas-shot figcaption{
position:absolute;inset:auto 0 0 0;padding:16px 18px;
color:var(--hueso);font-family:var(--display);font-style:italic;font-size:1.02rem;
background:linear-gradient(to top,rgba(20,12,6,.88),rgba(20,12,6,.4) 60%,transparent);
}
.fijas-foot{
text-align:center;margin:clamp(24px,3vw,36px) 0 0;
font-size:1.02rem;
}
.fijas-foot a{
font-weight:700;color:var(--marron-osc);
border-bottom:2px solid var(--dorado);
padding-bottom:2px;
transition:color 180ms ease, border-color 180ms ease;
}
@media (hover:hover) and (pointer:fine){
.fijas-foot a:hover{color:var(--marron);border-color:var(--marron);}
}
@media (min-width:860px){
.fijas-wrap{grid-template-columns:1.1fr .9fr;gap:52px;}
.fijas-shot{position:sticky;top:96px;}
}
/* ---------- Arepa del Mes ---------- */
.mes{position:relative;overflow:hidden;background:var(--marron-osc);color:var(--hueso);padding:var(--pad-seccion) 0;}
.mes::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 85% 15%, rgba(232,184,69,.20), transparent 60%);}
.mes .wrap{position:relative;z-index:2;}
.mes-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,56px);align-items:center;}
.mes .badge{display:inline-flex;align-items:center;gap:.5em;background:var(--dorado);color:var(--marron-prof);font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;padding:.55em 1em;border-radius:999px;box-shadow:var(--sh-sm);}
.mes h2{font-size:var(--fs-display);margin:.4em 0 .12em;}
.mes h2 em{font-style:italic;color:var(--dorado-claro);}
.mes-lead{color:rgba(251,247,238,.86);max-width:38ch;margin:.4em 0 1.4em;}
.mes-note{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,1rem+1vw,1.6rem);color:var(--dorado-claro);max-width:24ch;line-height:1.25;margin:0 0 1.6em;}
.mes-actions{display:flex;flex-wrap:wrap;gap:14px;}
.mes-photo{width:100%;aspect-ratio:1/1;border-radius:var(--r-lg);box-shadow:var(--sh-lg);border:5px solid var(--hueso-90);}
/* ---------- Las 12 del Valle ---------- */
.doce{padding:var(--pad-seccion) 0;}
.doce-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:40px;}
.doce-head h2{font-size:var(--fs-display);line-height:.9;color:var(--marron-osc);}
.doce-head h2 em{font-style:italic;color:var(--dorado);}
.doce-head p{max-width:34ch;color:var(--marron);font-size:var(--fs-lead);}
.doce-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.doce-card{position:relative;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-sm);background:var(--marron-osc);transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){
.doce-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);}
}
.doce-card .slot{width:100%;aspect-ratio:1/1;display:block;}
.doce-meta{position:absolute;inset:auto 0 0 0;padding:14px;background:linear-gradient(to top, rgba(20,12,6,.86), rgba(20,12,6,.45) 60%, transparent);color:var(--hueso);pointer-events:none;}
.doce-meta .m-mes{font-family:var(--sans);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dorado-claro);}
.doce-meta .m-nom{font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1;margin-top:2px;}
.doce-note{margin-top:26px;text-align:center;font-family:var(--display);font-style:italic;font-size:var(--fs-h3);color:var(--marron);text-wrap:balance;}
/* ---------- Reseñas (Google reales) ----------
Misma vibe que la sección mes: dark con radial dorado.
Cards en hueso para que el quote en italic Fraunces respire. */
.reviews{
position:relative;overflow:hidden;
background:var(--marron-osc);color:var(--hueso);
padding:var(--pad-seccion) 0;
}
.reviews::before{
content:"";position:absolute;inset:0;
background:radial-gradient(90% 80% at 50% 0%, rgba(232,184,69,.16), transparent 60%);
pointer-events:none;
}
.reviews .wrap{position:relative;z-index:2;}
.reviews .eyebrow{justify-content:center;display:inline-flex;}
.reviews-head, .reviews .eyebrow + h2{margin-bottom:0;}
/* Kaushan es muy ancha y la cursiva sobresale del cuadratin: a --fs-display
"nos cuentas" se salia del contenedor y los descendentes pisaban las
tarjetas. Escala propia, mas aire abajo y padding para el vuelo. */
.reviews h2{
text-align:center;
font-size:clamp(2.1rem,5.2vw,4.4rem);
color:var(--hueso);
line-height:1.06;
margin:.3em auto 1.15em;
text-wrap:balance;
max-width:18ch;
padding-inline:.14em;
}
.reviews h2 em.script{color:var(--dorado-claro);font-size:1.08em;}
.reviews-grid{
display:grid;grid-template-columns:1fr;gap:18px;
max-width:1140px;margin-inline:auto;
}
.review-card{
background:var(--hueso);
border-radius:var(--r-md);
padding:clamp(22px,3vw,30px);
box-shadow:var(--sh-md);
display:flex;flex-direction:column;gap:14px;
/* Opacity en la transition para que el carrusel pueda hacer fade entre rotaciones.
Duration corta (380ms) para sentirse responsive sin marear. */
transition:opacity 380ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
.review-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
}
.review-card .r-stars{
color:var(--dorado);
font-size:1.15rem;letter-spacing:.12em;line-height:1;
}
.review-card blockquote{
font-family:var(--display);font-style:italic;font-weight:600;
font-size:1.12rem;line-height:1.42;
color:var(--marron-osc);
margin:0;text-wrap:pretty;
}
.review-card cite{
font-style:normal;font-weight:700;font-size:.92rem;
color:var(--marron);display:block;
}
.review-card cite .r-when{font-weight:500;opacity:.7;}
.reviews-foot{
text-align:center;margin-top:clamp(28px,4vw,44px);
font-size:1.02rem;color:var(--hueso);
}
.reviews-foot a{
color:var(--dorado-claro);font-weight:700;
border-bottom:2px solid rgba(232,184,69,.5);padding-bottom:2px;
transition:color 180ms ease, border-color 180ms ease;
}
@media (hover:hover) and (pointer:fine){
.reviews-foot a:hover{color:var(--dorado);border-color:var(--dorado);}
}
@media (min-width:760px){
.reviews-grid{grid-template-columns:repeat(3,1fr);gap:22px;}
}
/* ---------- Carta teaser ---------- */
.tease{position:relative;overflow:hidden;padding:var(--pad-seccion) 0;color:var(--hueso);}
.tease .wrap{position:relative;z-index:2;text-align:center;}
.tease h2{font-size:var(--fs-mega);line-height:.82;}
.tease h2 em{font-style:italic;color:var(--dorado);}
.tease p{font-size:var(--fs-lead);max-width:40ch;margin:1em auto 1.6em;color:var(--hueso-90);}
.tease-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 auto 1.7em;max-width:760px;}
.tease-shots figure{margin:0;position:relative;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-sm);}
.tease-shots img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;}
.tease-shots figcaption{
position:absolute;inset:auto 0 0 0;padding:7px 9px;
font-size:.72rem;font-weight:700;color:var(--hueso);
background:linear-gradient(to top,rgba(20,12,6,.9),transparent);
}
.tease-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:2em;}
.tease-cats a{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.2em;border-radius:999px;background:rgba(251,247,238,.10);border:1.5px solid rgba(251,247,238,.2);color:var(--hueso);font-weight:700;font-size:.98rem;transition:background-color 200ms ease, transform 200ms var(--ease-out), color 200ms ease;}
@media (hover:hover) and (pointer:fine){
.tease-cats a:hover,.tease-cats a:focus-visible{background:var(--dorado);color:var(--marron-prof);transform:translateY(-3px);}
}
.tease-cats a:active{transform:scale(.97);}
/* ---------- Encuéntranos ---------- */
.find{padding:var(--pad-seccion) 0;}
.find-head{margin-bottom:42px;}
.find-head h2{font-size:var(--fs-display);color:var(--marron-osc);line-height:.92;margin-top:.3em;}
.find-head p{font-size:var(--fs-lead);color:var(--marron);max-width:42ch;margin-top:.6em;}
.find-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,40px);}
.map-wrap{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);background:var(--hueso);}
.map-wrap iframe{width:100%;height:100%;min-height:320px;border:0;display:block;}
.map-ph{min-height:340px;display:grid;place-content:center;justify-items:center;gap:.5em;text-align:center;padding:24px;color:var(--marron);}
.map-ph svg{width:48px;height:48px;color:var(--dorado);}
.map-ph code{font-weight:700;background:var(--marron-osc);color:var(--dorado-claro);padding:.3em .6em;border-radius:8px;font-size:.85rem;}
.info-card{background:var(--hueso);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:clamp(24px,4vw,34px);}
.info-block{margin-bottom:1.5em;}
.info-block:last-of-type{margin-bottom:0;}
.info-block h3{font-family:var(--sans);font-size:1rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--verde);margin-bottom:.5em;}
.info-block p{margin:0;font-size:1.06rem;color:var(--marron-osc);}
.info-block a.tel{font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--marron);transition:color 180ms ease;}
@media (hover:hover) and (pointer:fine){
.info-block a.tel:hover{color:var(--dorado);}
}
.hours{list-style:none;margin:0;padding:0;}
.hours li{display:flex;justify-content:space-between;gap:14px;padding:.45em 0;border-bottom:1px dashed rgba(92,58,30,.16);font-size:1rem;}
.hours li:last-child{border-bottom:0;}
.hours .dia{font-weight:700;color:var(--marron-osc);}
/* #a08a6a daba 3,10:1 sobre hueso y no llegaba a AA. Este da 5,26:1 y sigue
leyendose como apagado frente a los dias abiertos. */
.hours li.cerrado,.hours li.cerrado .dia{color:#7A6444;}
.find-cta{display:grid;grid-template-columns:1fr;gap:12px;margin-top:1.6em;}
/* ---------- Instagram ---------- */
.ig{padding:var(--pad-seccion) 0;}
.ig-head{text-align:center;margin-bottom:38px;}
.ig-head h2{font-size:var(--fs-display);color:var(--marron-osc);line-height:.92;margin-top:.3em;}
.ig-head p{font-size:var(--fs-lead);color:var(--marron);max-width:40ch;margin:.6em auto 0;}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:30px;}
.ig-grid .slot{width:100%;aspect-ratio:1/1;border-radius:var(--r-sm);box-shadow:var(--sh-sm);}
.ig-cta{display:flex;justify-content:center;}
@media (min-width:620px){
.doce-grid{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:760px){
.hero-sub{font-size:1.4rem;}
.manifesto-photos{grid-template-columns:repeat(4,1fr);}
.find-cta{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:960px){
.mes-grid{grid-template-columns:1.05fr .95fr;}
.find-grid{grid-template-columns:1.15fr .85fr;}
.doce-grid{grid-template-columns:repeat(4,1fr);}
}
/* ===================== Ajustes 07/09/2026 =====================
Tres cosas que se veian mal en escritorio y no en movil. */
/* 1 · El logotipo del hero crecia sin freno: 17vw llega a 208 px en un
monitor de 1440 y la Kaushan a ese tamano deja de leerse, ademas de
chocar "del Valle" contra el rabo de la "p". Por debajo de 620 px se
queda como estaba, que ahi funcionaba. */
@media (min-width:620px){
.hero-word.top{font-size:clamp(7.2rem,8.2vw,10.5rem);}
.hero-word.bottom{
font-size:clamp(3.7rem,4.3vw,5.6rem);
transform:translateX(.42em) rotate(-1.5deg);
}
/* 28ch parte la frase en tres lineas cortas en pantalla ancha */
.hero-sub{max-width:44ch;}
}
/* 2 · "Pasate y nos cuentas": la Kaushan se sale del cuadratin por arriba y
por abajo. Con line-height 1.06 el ascendente se recortaba contra el
overflow:hidden de la seccion y el descendente pisaba las tarjetas. */
.reviews h2{
line-height:1.26;
margin:.35em auto 1.45em;
padding-block:.14em;
}
/* 3 · En escritorio el bloque queda centrado, y ahi el velo del hero es
flojo: el titulo caia sobre el papel de periodico, que es lo mas claro
de la foto. Una sombra suave detras del texto, sin oscurecer la arepa. */
@media (min-width:620px){
.hero-stack{position:relative;}
.hero-stack::before{
content:"";position:absolute;inset:-10% -14%;z-index:-1;pointer-events:none;
background:radial-gradient(62% 58% at 50% 44%, rgba(26,15,7,.66), rgba(26,15,7,.28) 58%, transparent 76%);
}
}
.reviews h2{margin-bottom:1.7em;}
/* 4 · La cabecera se desbordaba en movil: el nombre lleva white-space:nowrap
y con los tres enlaces suma unos 470 px, sobre un ancho de 390. Por debajo
de 560 px se queda solo el logo, que ya es identificable. */
@media (max-width:560px){
.brand b{display:none;}
.nav-links{gap:2px;}
.nav-links a{padding:.55em .72em;font-size:.9rem;}
}
@media (min-width:561px) and (max-width:720px){
.brand b{font-size:1rem;}
.nav-links a{padding:.55em .8em;font-size:.9rem;}
}
/* 5 · Mismo caso que las resenas: la Kaushan de "arepas" bajaba sobre el
parrafo. La seccion .tease necesita el mismo aire. */
.tease h2{line-height:1.22;margin-bottom:.6em;padding-block:.1em;}
/* 6 · Aire vertical en escritorio. Cada seccion reservaba hasta 150 px
arriba y otros 150 abajo: 300 px de una pantalla de 900 gastados en
margen. En movil se queda como estaba. */
@media (min-width:900px){
/* Antes eran ocho selectores repitiendo el mismo valor. Redefinir el token
lo aplica a todas las secciones, y a las que vengan. */
:root{ --pad-seccion:clamp(56px,6.4vw,94px); }
}
/* ============ Dorado sobre fondo claro · 07/09/2026 ============
DESIGN.md ya lo dice: el dorado no aguanta como texto sobre crema. Quedaban
dos sitios donde se saltaba esa regla, y los dos medidos sobre hueso:
1) El teléfono al pasar el ratón pasaba de marrón (9,45:1) a dorado
(1,73:1). O sea, el enlace más importante de la web DESAPARECÍA justo al
apuntarlo. En una web cuyo objetivo es que llamen, es el peor sitio
posible para tener esto.
Solución: el dorado deja de ser color de letra y pasa a ser subrayado.
Como relleno sí funciona a cualquier contraste, y el gesto de "se ilumina
al pasar por encima" se mantiene.
2) Las estrellas de las reseñas iban en dorado sobre tarjeta hueso: 1,73:1.
Un icono necesita 3:1 (WCAG 1.4.11). Se oscurece solo en ese contexto,
hasta 4,03:1, y sigue leyéndose como dorado. */
@media (hover:hover) and (pointer:fine){
.info-block a.tel:hover{
color:var(--marron-osc);
text-decoration:underline;
text-decoration-color:var(--dorado);
text-decoration-thickness:3px;
text-underline-offset:5px;
}
}
.review-card .r-stars{color:#9C7318;}
/* ============ Preguntas frecuentes · 08/09/2026 ============
Las respuestas ya existían en el JSON-LD y no estaban en la página: se las
contábamos a Google y no a las personas. Además de dejar al turista sin
saber qué es una arepa, marcar como FAQPage algo que no se ve es motivo de
acción manual de Google.
Van con / nativos: sin JavaScript, accesibles de serie y
manejables con el teclado. Cerradas por defecto, que quien ya conoce la
casa no tiene por qué leerlas. */
.faq{background:var(--crema);padding-block:var(--pad-seccion);}
.faq h2{font-size:var(--fs-h2);color:var(--marron);margin:.2em 0 1em;text-wrap:balance;}
.faq h2 em{font-style:normal;color:var(--marron-osc);}
.faq-lista{max-width:70ch;}
.faq details{
border-bottom:1.5px solid var(--linea);
}
.faq details:first-of-type{border-top:1.5px solid var(--linea);}
.faq summary{
cursor:pointer;list-style:none;
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:1.05em 0;min-height:44px;
font-family:var(--display);font-weight:900;
font-size:clamp(1.05rem,1rem + .35vw,1.3rem);
color:var(--marron-osc);
}
.faq summary::-webkit-details-marker{display:none;}
/* El signo hace de indicador de estado: gira al abrir. */
.faq summary::after{
content:"+";flex:0 0 auto;
font-family:var(--sans);font-weight:700;font-size:1.5rem;line-height:1;
color:var(--dorado);
transition:transform 220ms var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{
margin:0 0 1.3em;max-width:62ch;
color:var(--marron);font-size:1.02rem;line-height:1.55;
}
.faq details p a{color:var(--marron-osc);text-decoration:underline;text-decoration-color:var(--dorado);text-decoration-thickness:2px;text-underline-offset:3px;}
@media (hover:hover) and (pointer:fine){
.faq summary:hover{color:var(--marron);}
}
/* ============ El proceso, en tira · 08/09/2026 ============
Nació como scroll fijado, con cinco pantallas de recorrido. Se cambió a
petición del cliente: no quiere secciones más altas que la pantalla, y un
scroll fijado necesita recorrido para avanzar — el mecanismo era
incompatible con el requisito, así que no había que acortarlo sino
cambiarlo. Ahora los cinco pasos se ven a la vez y cabe en una pantalla. */
.proceso{
background:var(--marron-prof);
color:var(--hueso);
padding-block:var(--pad-seccion);
}
.proceso h2{
font-size:var(--fs-h2);line-height:1;
text-align:center;margin:0 0 clamp(28px,4vh,48px);
}
.proceso h2 .gold{color:var(--dorado);font-style:italic;}
.proceso-tira{
list-style:none;margin:0;padding:0;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:clamp(12px,1.6vw,22px);
counter-reset:paso;
}
.proceso-tira li{display:flex;flex-direction:column;gap:.7em;}
.proceso-tira figure{
margin:0;border-radius:var(--r-sm);overflow:hidden;
aspect-ratio:4/5;background:var(--marron-osc);
box-shadow:var(--sh-sm);
}
.proceso-tira img{width:100%;height:100%;object-fit:cover;}
.proceso-tira p{
margin:0;color:var(--hueso-90);
font-size:clamp(.86rem,.8rem + .25vw,.98rem);line-height:1.4;
}
/* El número va delante del texto: es una secuencia y hay que poder seguirla. */
.proceso-tira li p::before{
counter-increment:paso;content:counter(paso) ". ";
color:var(--dorado);font-weight:800;
}
.proceso-tira b{color:var(--hueso);font-weight:800;}
/* En móvil cinco columnas no caben: tira que se arrastra de lado, igual que
las categorías de la carta. */
@media (max-width:760px){
.proceso-tira{
display:flex;overflow-x:auto;
scroll-snap-type:x proximity;
scrollbar-width:none;
margin-inline:-22px;padding-inline:22px;
}
.proceso-tira::-webkit-scrollbar{display:none;}
.proceso-tira li{flex:0 0 58vw;scroll-snap-align:start;}
}
/* ============ Pista de arrastre en la tira · 08/09/2026 ============
En móvil la tira se arrastra de lado, y eso solo funciona si sabes que se
puede. Tres señales a la vez, porque una sola no basta para quien no está
acostumbrado:
1. la pista escrita, con flecha
2. el quinto paso asomando por el borde (el 58vw de la pastilla)
3. un degradado en el borde derecho que dice "esto sigue" */
.proceso-pista{display:none;}
@media (max-width:760px){
.proceso-pista{
display:flex;align-items:center;justify-content:center;gap:.5em;
margin:-1em 0 1.2em;
font-family:var(--sans);font-weight:700;
font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--dorado);
}
.proceso-pista span{
font-size:1.15em;
animation:pista-flecha 1.9s ease-in-out infinite;
}
@keyframes pista-flecha{
0%,100%{transform:translateX(0);}
50%{transform:translateX(5px);}
}
/* El degradado va sobre el contenedor, no sobre la tira, o se iría con el
scroll y dejaría de avisar. */
.proceso .wrap{position:relative;}
.proceso .wrap::after{
content:"";position:absolute;right:0;bottom:0;
width:34px;height:calc(100% - 6em);
pointer-events:none;
background:linear-gradient(to right, rgba(42,24,9,0), var(--marron-prof));
}
}
@media (prefers-reduced-motion:reduce){
.proceso-pista span{animation:none;}
}
/* ============ Banda de productos · 08/09/2026 ============
Antes era un solo primer plano de arepa ampliado a todo el ancho: la foto
era de 900 px y la banda ocupa 1440 o más, así que salía borrosa y se leía
como una textura amarilla, no como comida.
Ahora es una tira de seis productos sobre fondo marrón, montada a partir de
las fotos del registro de mañana. El producto claro destaca sobre el oscuro
y el texto se sigue leyendo. */
.banda{background:var(--marron-osc);}
.banda-bg{object-fit:cover;object-position:50% 50%;opacity:.85;}
/* Cómo se pide, junto al teléfono: es donde alguien decide entre llamar y
Glovo, y hasta ahora la web no lo decía en ningún sitio visible. */
.como-pedir{
margin:.5em 0 0;
font-size:.95rem;
color:var(--marron);
}
/* ============ Ajustes de móvil · 11/09/2026 ============
Revisión del cliente sobre la previsualización: varias piezas ocupaban
demasiada pantalla en el teléfono. Todo lo de aquí es solo móvil; en
escritorio no cambia nada. */
/* 1 · El logotipo del hero caía sobre el papel de periódico, que es lo más
claro de la foto. La sombra suave que ya existía en escritorio no llegaba
al móvil, y ahí es donde peor se leía. */
@media (max-width:619px){
.hero-stack{position:relative;}
.hero-stack::before{
content:"";position:absolute;inset:-8% -10%;z-index:-1;pointer-events:none;
background:radial-gradient(68% 52% at 50% 42%, rgba(26,15,7,.72), rgba(26,15,7,.32) 58%, transparent 78%);
}
.hero-word.top{text-shadow:0 6px 30px rgba(20,12,6,.85), 0 2px 8px rgba(20,12,6,.7);}
}
/* 2 · Los cinco pasos ocupaban 414 px de alto cada uno: más de media pantalla
por paso. Cuadrados y más estrechos caben dos y medio, que además deja claro
que la tira sigue. */
@media (max-width:760px){
.proceso-tira li{flex:0 0 46vw;}
.proceso-tira figure{aspect-ratio:1/1;}
}
/* 3 · La foto de la arepa del mes ocupaba el ancho completo en cuadrado: una
pantalla entera para una sola foto. Se estrecha sin recortarla. */
@media (max-width:760px){
.mes-photo{max-width:74%;margin-inline:auto;}
}
/* ============ Revisión del cliente · 11/09/2026 (segunda ronda) ============ */
/* 4 · Las dos palabras del hero se tocaban: line-height .86 más un margen
negativo en cada una. La Kaushan tiene descendentes largos y el rabo de la
"p" caía encima de "del Valle". Se separan sin perder el efecto de firma. */
.hero-word{line-height:1.02;}
.hero-word.top{margin-bottom:.10em;}
.hero-word.bottom{margin-top:0;}
/* 5 · La foto de "Las que nunca fallan" ocupaba el ancho completo en cuadrado,
igual que pasaba con la de la arepa del mes. */
@media (max-width:760px){
.fijas-shot{max-width:74%;margin-inline:auto;}
}
/* ============ "La arepa del mes" en una pantalla · 11/09/2026 ============
Medía 1.025 px en un móvil de 805 de alto. Se recorta por todos lados a la
vez en vez de sacrificar un elemento: así no se pierde información y ninguno
queda apretado de más.
relleno de sección 140 -> 96
foto cuadrada -> 4/3 (misma anchura, menos alto)
titular, entradilla y nota, con los márgenes más juntos
los dos botones, en fila si caben */
@media (max-width:760px){
.mes{padding-block:clamp(44px,7vw,70px);}
.mes-photo{aspect-ratio:4/3;}
.mes h2{font-size:clamp(2.3rem,8.4vw,8rem);margin:.28em 0 .1em;}
.mes-lead{margin:.35em 0 .9em;}
.mes-note{font-size:clamp(1.05rem,.95rem + .8vw,1.4rem);margin:.6em 0 1em;}
.mes-actions{gap:9px;}
.badge{margin-bottom:.2em;}
}