/* ══════════════════════════════════════════════════════════════════
Kohala Poké
Sistema visual heredado del mockup de Celicioso: casi monocromo, una
sola tipografía en peso ligero, mucho aire, esquinas de 26 px. El color de marca entra
con cuentagotas — rellenos e iconos, nunca fondos enteros.
══════════════════════════════════════════════════════════════════ */
:root{
/* ── paleta ─────────────────────────────────────────────────── */
--crema:#efebe4; /* hueso cálido del mockup */
--crema-hondo:#e6e1d7; /* banda alterna, un punto más honda */
--blanco:#faf7f2; /* el blanco de esta paleta es roto, no puro */
--tinta:#16211c; /* negro con verde dentro: titulares */
--texto:#3d4a44; /* cuerpo */
--atenuado:#6b756f; /* secundario, 4,8:1 sobre el hueso */
/* los dos colores están MEDIDOS sobre el logo original (img/logo.png):
la menta del círculo y el coral de los hibiscos. No se inventan. */
/* medidos sobre el mockup: el verde del botón y el de la itálica */
--verde:#30493f; /* verde bosque: botón sólido, banda, titulares */
--verde-medio:#446441; /* el de «hace bien» en itálica */
--verde-agua:#e4e8e1; /* lavado para paneles suaves */
--coral:#ee7265; /* coral del hibisco del logo */
--coral-texto:#c8503f;
/* alias: el resto de la hoja sigue hablando de teal */
--teal:#30493f;
--teal-hondo:#30493f;
--teal-agua:#e4e8e1;
--linea:rgba(16,32,30,.10);
--linea-suave:rgba(16,32,30,.06);
/* ── forma ──────────────────────────────────────────────────── */
--radio:32px;
--radio-chico:22px;
--sombra:0 30px 70px -38px rgba(16,32,30,.26);
--sombra-suave:0 14px 36px -26px rgba(16,32,30,.22);
/* ── ritmo ──────────────────────────────────────────────────── */
--aire:clamp(4.5rem,8vw,8rem);
--aire-corto:clamp(3rem,5vw,5rem);
--lado:clamp(1.25rem,5vw,4.5rem);
--ancho:1280px;
--sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--crema);
color:var(--texto);
font-family:var(--sans);
font-weight:400;
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul{list-style:none;padding:0}
svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4{
font-family:var(--sans);
font-weight:500;
letter-spacing:-.03em;
line-height:1.12;
color:var(--tinta);
}
/* ─────────────────────────── esqueleto ─────────────────────────── */
.contenedor{max-width:var(--ancho);margin:0 auto;padding-inline:var(--lado)}
.seccion{padding-block:var(--aire)}
.seccion-corta{padding-block:var(--aire-corto)}
.banda-honda{background:var(--crema-hondo)}
.banda-blanca{background:var(--blanco)}
.bloque{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra)}
.bloque-liso{background:var(--blanco);border-radius:var(--radio);border:1px solid var(--linea-suave)}
/* ─────────────────────────── tipografía ────────────────────────── */
.titular-hero{font-size:clamp(2.4rem,4.6vw,3.85rem);line-height:1.08;letter-spacing:-.035em;font-weight:500}
.titular{font-size:clamp(1.9rem,3.2vw,2.9rem);letter-spacing:-.032em}
.titular-chico{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.028em}
.entradilla{font-size:1.0625rem;line-height:1.7;color:var(--atenuado);max-width:34rem}
.prosa{max-width:62ch;font-size:1rem;line-height:1.75;color:var(--texto)}
.prosa p+p{margin-top:1.05em}
.etiqueta{
font-size:.6875rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--atenuado);
}
.sello{
display:inline-flex;align-items:center;gap:.55rem;
background:rgba(255,255,255,.75);border:1px solid var(--linea-suave);
border-radius:999px;padding:.55rem 1.1rem;
font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--tinta);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.sello svg{width:1.05rem;height:1.05rem;color:var(--coral);stroke-width:0;fill:var(--coral)}
/* ──────────────────────── botones y enlaces ────────────────────── */
.btn-solido,.btn-linea{
display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
padding:1rem 1.9rem;border-radius:999px;
transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
.btn-solido{background:var(--verde);color:#fff;border:1px solid var(--verde)}
.btn-solido:hover{background:#243a31;border-color:#243a31;transform:translateY(-2px)}
.btn-linea{background:rgba(250,247,242,.6);color:var(--tinta);border:1px solid rgba(22,33,28,.35)}
.btn-linea:hover{border-color:var(--tinta);background:var(--blanco)}
.btn-solido svg,.btn-linea svg{width:1rem;height:1rem;transition:transform .3s ease;stroke-width:1.8}
.btn-solido:hover svg,.btn-linea:hover svg{transform:translateX(3px)}
.btn-coral{background:var(--coral);color:#fff;border-color:var(--coral)}
.btn-coral:hover{background:var(--coral-texto);border-color:var(--coral-texto)}
.enlace-filete{
display:inline-flex;align-items:center;gap:.9rem;
font-size:.9375rem;font-weight:500;color:var(--tinta);
padding-bottom:.85rem;border-bottom:1px solid var(--linea);
transition:border-color .3s ease,gap .3s ease;
}
.enlace-filete:hover{border-color:var(--tinta);gap:1.3rem}
.enlace-filete svg{width:1rem;height:1rem;stroke-width:1.6}
.enlace-flecha{
display:inline-flex;align-items:center;gap:.5rem;color:var(--tinta);
font-size:.9375rem;font-weight:500;transition:gap .3s ease;
}
.enlace-flecha:hover{gap:.85rem}
.enlace-flecha svg{width:1rem;height:1rem;stroke-width:1.6}
.flecha-circulo{
display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:999px;
background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.45);color:#fff;
transition:background .3s ease,color .3s ease;flex:none;
}
.flecha-circulo svg{width:1rem;height:1rem;stroke-width:1.6}
a:hover .flecha-circulo{background:#fff;color:var(--tinta)}
/* ───────────────────────────── fotos ───────────────────────────── */
.foto-redonda{border-radius:var(--radio);overflow:hidden;background:var(--crema-hondo)}
.foto-redonda img{width:100%;height:100%;object-fit:cover}
.ficha-cat{
position:relative;display:block;overflow:hidden;border-radius:var(--radio-chico);
aspect-ratio:3/4;isolation:isolate;
}
.ficha-cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.ficha-cat:hover img{transform:scale(1.05)}
.ficha-cat::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(18,14,12,0) 38%,rgba(18,14,12,.74) 100%);
}
.ficha-cat .rotulo{
position:absolute;inset:auto 0 0 0;z-index:1;
display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
padding:1.35rem;color:#fff;font-weight:500;font-size:1.0625rem;line-height:1.25;
letter-spacing:-.02em;
}
.ficha-cat .rotulo small{display:block;font-size:.8125rem;font-weight:400;opacity:.78;margin-top:.3rem}
/* ─────────────────────────── cabecera ──────────────────────────── */
.cab{position:sticky;top:0;z-index:50;transition:background .3s ease,box-shadow .3s ease}
.cab.pegada{
background:rgba(251,250,247,.9);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 1px 0 var(--linea-suave);
}
.cab-in{
max-width:var(--ancho);margin:0 auto;padding:1.1rem var(--lado);
display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);
}
.marca img{width:clamp(96px,8.4vw,122px);height:auto}
.nav{display:flex;align-items:center;gap:clamp(1rem,1.9vw,1.9rem);margin-left:auto}
.nav a{
position:relative;padding:.35rem 0;color:var(--tinta);
font-size:.875rem;font-weight:500;letter-spacing:-.01em;
transition:color .25s ease;
}
.nav a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--coral);
transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.nav a.on::after,.nav a:hover::after{transform:scaleX(1)}
.cab .btn-solido{padding:.7rem 1.35rem;font-size:.8125rem}
.hamb{
display:none;width:2.5rem;height:2.5rem;padding:0;border:0;cursor:pointer;
background:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamb span{width:17px;height:1.6px;background:var(--tinta);border-radius:2px;transition:transform .3s,opacity .2s}
.solo-movil{display:none}
/* ──────────────────────────── portada ──────────────────────────── */
.hero{padding-block:clamp(2rem,4vw,3.5rem) var(--aire-corto)}
.hero-in{
max-width:var(--ancho);margin:0 auto;padding-inline:var(--lado);
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
gap:clamp(2rem,4.5vw,4.5rem);align-items:center;
}
.hero-txt>*+*{margin-top:1.6rem}
.hero-txt .sello+.titular-hero{margin-top:1.8rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-foto{aspect-ratio:4/3}
.prueba{display:flex;flex-wrap:wrap;gap:.5rem}
.distintivo{
display:inline-flex;align-items:center;gap:.4rem;
font-size:.6875rem;font-weight:600;letter-spacing:.06em;
line-height:1;padding:.55rem .9rem;border-radius:999px;
color:var(--teal-hondo);background:var(--teal-agua);white-space:nowrap;
}
.distintivo svg{width:.9rem;height:.9rem;color:var(--teal-hondo);stroke-width:1.8}
/* ────────────────────────── garantías ──────────────────────────── */
.garantias{display:grid;gap:0;grid-template-columns:1fr}
.garantia{display:flex;gap:1rem;padding:1.6rem 1.9rem}
.garantia svg{width:1.55rem;height:1.55rem;flex:none;color:var(--tinta);stroke-width:1.2}
.garantia h3{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.garantia p{margin-top:.3rem;font-size:.875rem;line-height:1.55;color:var(--atenuado)}
/* ──────────────────────────── secciones ────────────────────────── */
.cab-seccion{
display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:1.5rem;margin-bottom:clamp(2rem,3.4vw,3.2rem);
}
.cab-seccion .etiqueta{margin-bottom:.9rem}
.rejilla-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.2vw,1.1rem)}
.dos-columnas{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(2rem,4.5vw,4.5rem);align-items:center;
}
.dos-columnas .foto-redonda{aspect-ratio:4/3}
.cifras{display:flex;flex-wrap:wrap;gap:clamp(1.8rem,3.4vw,3.4rem);margin-top:2.2rem}
.cifras dt{font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:500;letter-spacing:-.03em;color:var(--tinta);line-height:1}
.cifras dd{margin-top:.35rem;font-size:.8125rem;color:var(--atenuado)}
/* ───────────────── destacados de la carta (líneas) ─────────────── */
.carta-linea{
display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1rem;
padding-block:1.1rem;border-bottom:1px solid var(--linea-suave);
}
.carta-linea:last-child{border-bottom:0}
.carta-linea .nombre{font-size:1.0625rem;font-weight:500;color:var(--tinta);letter-spacing:-.02em}
.carta-linea .detalle{grid-column:1/-1;font-size:.875rem;color:var(--atenuado);margin-top:.25rem;max-width:54ch}
.carta-linea .en{grid-column:1/-1;font-size:.8125rem;color:var(--atenuado);opacity:.72;font-style:italic;margin-top:.2rem}
.carta-linea .precio{font-size:1rem;font-weight:500;color:var(--tinta);white-space:nowrap}
.carta-linea .precio em{font-style:normal;color:var(--atenuado);font-size:.8125rem;font-weight:400}
/* ─────────────────────── bloque de cierre ──────────────────────── */
.cierre{
position:relative;isolation:isolate;display:grid;border-radius:var(--radio);overflow:hidden;
min-height:clamp(22rem,46vh,28rem);
}
.cierre>img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.cierre-velo{
grid-area:1/1;
background:linear-gradient(100deg,rgba(18,14,12,.9) 0%,rgba(18,14,12,.72) 42%,
rgba(18,14,12,.2) 78%,rgba(18,14,12,.05) 100%);
}
.cierre-texto{
grid-area:1/1;display:flex;align-items:center;padding:clamp(2rem,5vw,4.5rem);
color:rgba(255,255,255,.88);
}
.cierre-texto .titular{color:#fff}
.cierre-texto>div>*+*{margin-top:1.4rem}
.cierre-texto .entradilla{color:rgba(255,255,255,.8)}
.cierre-texto .etiqueta{color:rgba(255,255,255,.65)}
.cierre-texto .btn-solido{background:#fff;color:var(--tinta);border-color:#fff}
.cierre-texto .btn-solido:hover{background:rgba(255,255,255,.85)}
.cierre-texto .btn-linea{color:#fff;border-color:rgba(255,255,255,.45)}
.cierre-texto .btn-linea:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* ──────────────────────── dónde estamos ────────────────────────── */
.datos{display:grid;gap:1px;background:var(--linea-suave);border-radius:var(--radio-chico);overflow:hidden}
.datos li{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem 1.4rem;background:var(--blanco)}
.datos svg{width:1.25rem;height:1.25rem;flex:none;color:var(--teal-hondo);margin-top:.15rem;stroke-width:1.5}
.datos strong{display:block;font-size:.9375rem;font-weight:500;color:var(--tinta);letter-spacing:-.01em}
.datos span{display:block;font-size:.8125rem;color:var(--atenuado);margin-top:.15rem}
.datos a:hover strong{color:var(--coral-texto)}
.mapa{border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea-suave)}
.mapa iframe{display:block;width:100%;height:clamp(18rem,30vw,27rem);border:0;filter:saturate(.9)}
/* ──────────────────────────── pie ──────────────────────────────── */
.pie{background:var(--tinta);color:rgba(255,255,255,.72);padding-block:var(--aire-corto) 2rem}
.pie-in{
max-width:var(--ancho);margin:0 auto;padding-inline:var(--lado);
display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
gap:clamp(2rem,4vw,3.5rem);
}
.pie .marca img{width:118px;filter:invert(1) brightness(2.4)}
.pie h4{color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.pie p,.pie li{font-size:.875rem;line-height:1.75}
.pie li+li{margin-top:.45rem}
.pie a:hover{color:#fff}
.pie-soc{display:flex;gap:.85rem;margin-top:1.4rem}
.pie-soc a{
display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:999px;
border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .25s,border-color .25s;
}
.pie-soc a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45)}
.pie-soc svg{width:1.05rem;height:1.05rem;stroke-width:1.5}
.pie-fondo{max-width:var(--ancho);margin:clamp(2.5rem,4vw,3.5rem) auto 0;padding-inline:var(--lado)}
.pie-fondo>div{
border-top:1px solid rgba(255,255,255,.14);padding-top:1.5rem;
display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between;
font-size:.8125rem;
}
.pie-fondo nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
/* ═════════════════════ la carta (página propia) ════════════════ */
.carta-hero{padding-block:clamp(2.5rem,5vw,4.5rem) var(--aire-corto)}
.chips{position:sticky;top:0;z-index:40;background:rgba(251,250,247,.93);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea-suave)}
.chips-in{
max-width:var(--ancho);margin:0 auto;padding:.9rem var(--lado);
display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;
}
.chips-in::-webkit-scrollbar{display:none}
.chips a{
flex:none;padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--linea);
font-size:.8125rem;font-weight:500;color:var(--tinta);
transition:background .25s,color .25s,border-color .25s;
}
.chips a:hover,.chips a.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.bloque-carta{padding:clamp(1.5rem,3vw,2.8rem)}
.lista-carta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,4vw,4rem)}
.marca-veg,.marca-rec{
display:inline-flex;align-items:center;border-radius:999px;padding:.25rem .55rem;
font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
margin-left:.5rem;vertical-align:middle;
}
.marca-veg{background:var(--teal-agua);color:var(--teal-hondo)}
.marca-rec{background:var(--tinta);color:#fff}
.marca-pic{font-size:.75rem;margin-left:.35rem}
.nota{
margin-top:clamp(2rem,3vw,3rem);padding-left:1.1rem;border-left:2px solid var(--teal);
font-size:.875rem;line-height:1.7;color:var(--atenuado);max-width:70ch;
}
.leyenda{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
/* ═══════════════════════ página legal ══════════════════════════ */
.legal{max-width:52rem;margin:0 auto;padding:clamp(2.5rem,5vw,4.5rem) var(--lado) var(--aire)}
.legal section{margin-top:clamp(2.2rem,3.4vw,3.2rem);scroll-margin-top:6rem}
.legal h2{font-size:clamp(1.2rem,1.8vw,1.55rem);padding-bottom:.8rem;border-bottom:1px solid var(--linea);margin-bottom:1.1rem}
.legal p,.legal li{font-size:.9375rem;line-height:1.8;color:var(--texto)}
.legal p+p,.legal ul{margin-top:.9rem}
.legal ul{padding-left:1.2rem;list-style:disc}
.legal li+li{margin-top:.5rem}
.legal-datos{list-style:none;padding:0}
.legal-datos li{padding:.55rem 0;border-bottom:1px solid var(--linea-suave)}
.legal strong{color:var(--tinta);font-weight:600}
.legal a{color:var(--coral-texto);font-weight:500}
.legal a:hover{text-decoration:underline}
.aviso-borrador{
margin-top:2rem;padding:1.1rem 1.3rem;border-radius:var(--radio-chico);
background:rgba(228,113,95,.09);border:1px solid rgba(228,113,95,.3);
font-size:.875rem;line-height:1.7;color:var(--texto);
}
.cierre-botones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}
/* ══════════════════════ rejillas responsivas ═══════════════════ */
@media (min-width:768px){
.garantias{grid-template-columns:repeat(2,1fr)}
.garantia:nth-child(n+3){border-top:1px solid var(--linea-suave)}
.garantia:nth-child(even){border-left:1px solid var(--linea-suave)}
}
@media (min-width:1100px){
.garantias{grid-template-columns:repeat(4,1fr)}
.garantia:nth-child(n+3){border-top:0}
.garantia+.garantia{border-left:1px solid var(--linea-suave)}
}
/* ══════════════════════════ móvil ══════════════════════════════ */
.tabs,.velo-menu{display:none}
@media (max-width:900px){
:root{--tabs:64px}
body{padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
/* OJO: nada de backdrop-filter en .cab — un elemento con filtro pasa a ser el bloque
contenedor de sus hijos position:fixed, y la hoja del menú vive dentro del header:
se colocaba respecto a la cabecera en vez de respecto a la pantalla. */
.cab{background:var(--crema);box-shadow:0 1px 0 var(--linea-suave)}
.cab.pegada{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--crema)}
.cab-in{padding:.8rem var(--lado)}
.cab .btn-solido{display:none}
.hamb{display:flex;margin-left:auto}
.nav{
position:fixed;inset:auto 0 0 0;width:auto;margin:0;
flex-direction:column;align-items:stretch;gap:0;
padding:.9rem 1.5rem calc(1.8rem + var(--tabs) + env(safe-area-inset-bottom));
background:var(--blanco);border-radius:22px 22px 0 0;
transform:translateY(102%);transition:transform .34s cubic-bezier(.2,.85,.25,1);
box-shadow:0 -24px 60px -34px rgba(25,22,20,.5);z-index:70;
}
.nav::before{content:"";display:block;width:42px;height:4px;border-radius:99px;background:var(--linea);margin:0 auto 1rem}
.nav.abierto{transform:none}
.nav a{font-size:1rem;padding:.95rem .15rem;border-bottom:1px solid var(--linea-suave)}
.nav a::after{display:none}
.solo-movil{display:inline-flex;margin-top:1.1rem;justify-content:center}
.abierto-menu{overflow:hidden}
.abierto-menu .hamb span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.abierto-menu .hamb span:nth-child(2){opacity:0}
.abierto-menu .hamb span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.velo-menu{
display:block;position:fixed;inset:0;z-index:65;background:rgba(25,22,20,.42);
opacity:0;transition:opacity .3s;pointer-events:none;
}
.velo-menu.visible{opacity:1;pointer-events:auto}
.tabs{
display:flex;position:fixed;inset:auto 0 0 0;z-index:80;
background:rgba(255,255,255,.96);
-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
border-top:1px solid var(--linea);padding-bottom:env(safe-area-inset-bottom);
}
.tab{
flex:1;height:var(--tabs);display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:.3rem;color:var(--atenuado);
}
.tab svg{width:1.3rem;height:1.3rem;stroke-width:1.5}
.tab span{font-size:.625rem;font-weight:600;letter-spacing:.04em}
.tab.on{color:var(--tinta)}
.tab.on svg{color:var(--verde)}
.tab:active{background:rgba(25,22,20,.04)}
.tab-burbuja{
display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:999px;
background:var(--verde);color:#fff;box-shadow:0 8px 18px -8px rgba(48,73,63,.75);
}
.tab-burbuja svg{width:1rem;height:1rem;stroke-width:1.8}
.tab-cta{color:var(--tinta)}
.hero-in,.dos-columnas{grid-template-columns:1fr}
.dos-columnas .foto-redonda{order:-1}
.hero-foto{aspect-ratio:16/11}
.rejilla-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.lista-carta{grid-template-columns:1fr}
.pie-in{grid-template-columns:1fr;gap:2.2rem}
.btn-solido,.btn-linea{padding:.9rem 1.5rem}
.hero-btns .btn-solido,.hero-btns .btn-linea{flex:1 1 auto}
.cierre{min-height:0}
.cierre-texto{padding:2rem 1.5rem}
}
@media (max-width:560px){
.rejilla-4{grid-template-columns:1fr;gap:.9rem}
.ficha-cat{aspect-ratio:16/10}
.cifras{gap:1.4rem 2.2rem}
}
/* ───────────────── entrada suave, sin librerías ────────────────── */
.sube{opacity:0;transform:translateY(18px);transition:opacity .65s cubic-bezier(.2,.8,.3,1),transform .65s cubic-bezier(.2,.8,.3,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.sube{opacity:1;transform:none}
}
/* los apartados del legal usan la misma tira de chips que la carta */
.legal .chips-in{overflow:visible;flex-wrap:wrap;padding-inline:0}
.legal .chips-in a{
flex:none;padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--linea);
font-size:.8125rem;font-weight:500;color:var(--tinta);
transition:background .25s,color .25s,border-color .25s;
}
.legal .chips-in a:hover{background:var(--tinta);border-color:var(--tinta);color:#fff}
/* ══════════════════════════════════════════════════════════════════
COSTA — lo que hace que esto sea Kohala y no la web de otro
Portada centrada, tira de fotos altas que se mete en la sección
siguiente, banda de agua turquesa y trío de fotos con el rótulo
FUERA de la foto. Nada de hero partido ni de tarjetas con filetes.
══════════════════════════════════════════════════════════════════ */
/* ── portada centrada ────────────────────────────────────────────── */
.portada{position:relative;text-align:center;padding-block:clamp(3rem,7vw,6.5rem) 0;overflow:hidden}
.portada::before{
content:"";position:absolute;inset:-20% 0 auto 0;height:70%;z-index:-1;
background:radial-gradient(60% 70% at 50% 0%,var(--teal-agua) 0%,rgba(228,242,240,0) 72%);
}
.portada .etiqueta{color:var(--teal-hondo)}
.portada h1{
margin-top:1.3rem;
font-size:clamp(2.6rem,6.4vw,5.3rem);line-height:1.02;letter-spacing:-.045em;font-weight:500;
}
.portada h1 em{font-style:italic;color:var(--verde-medio);font-weight:500}
.portada .entradilla{margin:1.6rem auto 0;max-width:33rem}
.portada .hero-btns{justify-content:center;margin-top:2.2rem}
.portada .prueba{justify-content:center;margin-top:1.8rem}
/* ── tira de fotos altas que invade la sección siguiente ─────────── */
.tira-altas{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(.8rem,1.6vw,1.5rem);
max-width:var(--ancho);margin:clamp(3rem,5vw,4.5rem) auto calc(var(--mordida) * -1);
padding-inline:var(--lado);position:relative;z-index:2;
--mordida:clamp(3rem,7vw,7rem);
}
.alta{border-radius:var(--radio);overflow:hidden;aspect-ratio:3/4;background:var(--crema-hondo)}
.alta img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.alta:hover img{transform:scale(1.05)}
.tira-altas .alta:nth-child(2){transform:translateY(clamp(1rem,2.6vw,2.6rem))}
.tira-altas .alta:nth-child(3){transform:translateY(clamp(-.6rem,-1.4vw,-.4rem))}
/* ── banda de agua ───────────────────────────────────────────────── */
.banda-agua{
position:relative;overflow:hidden;
background:var(--verde);color:#f2efe8;
padding-block:calc(var(--aire) + var(--mordida,0px)) var(--aire);
}
.banda-agua .etiqueta{color:rgba(242,239,232,.62)}
.banda-agua .titular,.banda-agua h2,.banda-agua h3{color:#fff}
.banda-agua .entradilla,.banda-agua p{color:rgba(242,239,232,.8)}
.banda-agua .valor svg{color:#fff;opacity:.9}
.trio-valores{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(1.6rem,3.4vw,3.4rem);margin-top:clamp(2.4rem,4vw,3.6rem);
}
.valor h3{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;margin-top:1rem}
.valor p{margin-top:.5rem;font-size:.9375rem;line-height:1.65}
.valor svg{width:1.9rem;height:1.9rem;stroke-width:1.2}
/* ── trío de categorías, con el rótulo FUERA de la foto ──────────── */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2.2rem)}
.plato-cat img{border-radius:var(--radio);aspect-ratio:4/5;width:100%;object-fit:cover;
transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.plato-cat{display:block}
.plato-cat:hover img{transform:scale(1.03)}
.plato-cat .pie-cat{
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
margin-top:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--linea);
transition:border-color .3s ease;
}
.plato-cat:hover .pie-cat{border-color:var(--teal-hondo)}
.plato-cat h3{font-size:1.1875rem;font-weight:500;letter-spacing:-.025em}
.plato-cat .desde{font-size:.8125rem;color:var(--atenuado);white-space:nowrap}
.plato-cat p{margin-top:.7rem;font-size:.9375rem;line-height:1.6;color:var(--atenuado)}
/* ── la cita: la definición de poké, en grande y centrada ───────── */
.cita{text-align:center;max-width:46rem;margin:0 auto}
.cita blockquote{
font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.32;letter-spacing:-.03em;
font-weight:400;color:var(--tinta);
}
.cita blockquote em{font-style:normal;color:var(--teal-hondo);font-weight:500}
.cita figcaption{margin-top:1.6rem;font-size:.8125rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--atenuado)}
/* dos fotos desalineadas a los lados de la cita */
.cita-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(1rem,2vw,1.8rem);margin-top:clamp(2.6rem,4.5vw,4rem)}
.cita-fotos figure{border-radius:var(--radio);overflow:hidden;aspect-ratio:16/11}
.cita-fotos figure:first-child{transform:translateY(clamp(-1.6rem,-3vw,-1rem))}
.cita-fotos img{width:100%;height:100%;object-fit:cover}
/* ── franja de pedido, en coral ─────────────────────────────────── */
.franja-pedido{
background:var(--coral);color:#fff;border-radius:var(--radio);
padding:clamp(2.2rem,4.5vw,4rem);
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;
}
.franja-pedido .titular{color:#fff;max-width:20ch}
.franja-pedido p{color:rgba(255,255,255,.85);margin-top:.9rem;font-size:1.0625rem}
.franja-pedido .btn-solido{background:#fff;color:var(--coral-texto);border-color:#fff}
.franja-pedido .btn-solido:hover{background:rgba(255,255,255,.88);color:var(--coral-texto)}
.franja-pedido .btn-linea{color:#fff;border-color:rgba(255,255,255,.5)}
.franja-pedido .btn-linea:hover{background:rgba(255,255,255,.15);border-color:#fff}
@media (max-width:900px){
.tira-altas{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;--mordida:2.5rem}
.tira-altas .alta:nth-child(2),.tira-altas .alta:nth-child(3){transform:none}
.trio-valores,.trio{grid-template-columns:1fr;gap:2rem}
.cita-fotos figure:first-child{transform:none}
.franja-pedido{flex-direction:column;align-items:flex-start;text-align:left}
.portada h1{font-size:clamp(2.4rem,10vw,3.2rem)}
}
@media (max-width:560px){
.cita-fotos{grid-template-columns:1fr}
.tira-altas .alta:nth-child(3){display:none}
.tira-altas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ── el toque hawaiano: hibiscos del logo como marca de agua ─────── */
.hibisco{position:absolute;z-index:0;pointer-events:none;fill:currentColor;stroke:none}
.portada .hibisco{color:var(--coral);opacity:.16}
.portada .hib-1{left:2%;top:14%;width:clamp(70px,9vw,140px);transform:rotate(-18deg)}
.portada .hib-2{right:3%;top:34%;width:clamp(50px,6.5vw,104px);transform:rotate(22deg)}
.banda-agua .hibisco{color:#fff;opacity:.17}
.banda-agua .hib-1{left:-3%;bottom:-14%;width:clamp(150px,18vw,300px);transform:rotate(14deg)}
.banda-agua .hib-2{right:2%;top:-10%;width:clamp(110px,13vw,220px);transform:rotate(-24deg)}
.franja-pedido{position:relative;overflow:hidden}
.franja-pedido .hibisco{color:#fff;opacity:.16;right:-2%;bottom:-32%;width:clamp(150px,17vw,280px);transform:rotate(-16deg)}
.franja-pedido>*{position:relative;z-index:1}
/* el bowl que flota en la portada */
.bowl-portada{
position:relative;z-index:1;max-width:var(--ancho);margin:clamp(1rem,2.5vw,2.5rem) auto 0;
padding-inline:var(--lado);
}
.bowl-portada img{width:min(58vw,640px);margin:0 auto;filter:drop-shadow(0 40px 45px rgba(16,32,30,.22))}
/* los bowls de la carta, flotando sobre un panel de agua */
.panel-bowl{
display:grid;place-items:center;border-radius:var(--radio);
background:var(--teal-agua);aspect-ratio:1/1;overflow:hidden;
transition:background .35s ease;
}
.plato-cat:hover .panel-bowl{background:#d8efec}
.panel-bowl img{
width:88%;height:auto;object-fit:contain;aspect-ratio:auto;border-radius:0;
transition:transform .8s cubic-bezier(.2,.8,.3,1);
filter:drop-shadow(0 22px 26px rgba(16,32,30,.18));
}
.plato-cat:hover .panel-bowl img{transform:scale(1.05) translateY(-4px)}
/* remates: el bowl de la portada no debe empujar el pliegue tan abajo,
y los hibiscos funcionan mejor grandes y medio fuera del lienzo que
pequeños y enteros (enteros y chicos se leen como un trébol) */
.bowl-portada img{width:min(44vw,500px)}
.portada .hib-1{left:-6%;top:8%;width:clamp(130px,17vw,270px);opacity:.13}
.portada .hib-2{right:-5%;top:30%;width:clamp(110px,14vw,220px);opacity:.13}
.banda-agua .hib-1{left:-7%;bottom:-26%;width:clamp(220px,26vw,420px);opacity:.15}
.banda-agua .hib-2{right:-4%;top:-22%;width:clamp(170px,20vw,320px);opacity:.15}
.valor svg{width:2.1rem;height:2.1rem;stroke-width:1.35}
/* ══════════════════════════════════════════════════════════════════
PANTALLAS ANCHAS
Los hibiscos iban anclados al borde de la VENTANA (left:-6%), así que
en un monitor de 2.500 px se quedaban a medio metro del texto,
flotando solos. Se anclan a la columna de contenido: se calcula el
borde del contenedor y se colocan justo fuera de él.
══════════════════════════════════════════════════════════════════ */
:root{--borde-col:max(var(--lado), calc(50vw - var(--ancho)/2 + var(--lado)))}
.portada .hib-1{left:calc(var(--borde-col) - clamp(90px,10vw,190px));top:6%}
.portada .hib-2{right:calc(var(--borde-col) - clamp(70px,8vw,150px));top:26%}
.banda-agua .hib-1{left:calc(var(--borde-col) - clamp(180px,20vw,340px));bottom:-24%}
.banda-agua .hib-2{right:calc(var(--borde-col) - clamp(130px,15vw,250px));top:-20%}
/* y la página deja de ser una columna estrecha perdida en el centro */
@media (min-width:1600px){
:root{--ancho:1460px;--lado:clamp(1.25rem,5vw,5.5rem)}
.portada h1{font-size:clamp(2.6rem,4.6vw,5.9rem)}
.bowl-portada img{width:min(40vw,560px)}
.portada .entradilla{max-width:36rem;font-size:1.15rem}
}
@media (min-width:2100px){
:root{--ancho:1620px}
.portada h1{font-size:5.9rem}
}
/* el hibisco es ahora la flor REAL del logo (img/hibisco.png, extraída por
color del propio logotipo), no un SVG dibujado a ojo que parecía un trébol */
img.hibisco{height:auto;opacity:.15}
.portada img.hibisco{opacity:.17}
.banda-agua img.hibisco,.franja-pedido img.hibisco{
filter:brightness(0) invert(1);opacity:.22;
}
.sello-flor{width:1.05rem;height:auto;flex:none}
.sello{gap:.6rem}
/* ══════════════════════════════════════════════════════════════════
PORTADA · hueso + verde bosque + serif
Titular en Playfair, foto a sangre con el bowl a la derecha, tres
iconos con rótulo a dos líneas, los dos rótulos a mano y el borde
de papel rasgado abajo.
══════════════════════════════════════════════════════════════════ */
:root{
--serif:'Playfair Display', Georgia, 'Times New Roman', serif;
--mano:'Caveat', 'Segoe Script', cursive;
}
.portada{
position:relative;isolation:isolate;overflow:hidden;background:var(--crema);
min-height:clamp(620px,60vw,880px);display:flex;align-items:center;
padding-block:clamp(5.5rem,9vw,7rem) clamp(4.5rem,7vw,6rem);
text-align:left;
}
.portada::before{display:none}
.portada-img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.portada-velo{
position:absolute;inset:0;z-index:-1;
background:linear-gradient(96deg,rgba(239,235,228,.94) 0%,rgba(239,235,228,.86) 22%,
rgba(239,235,228,.5) 36%,rgba(239,235,228,.08) 48%,rgba(239,235,228,0) 58%);
}
.portada-in{position:relative;z-index:1;max-width:var(--ancho);margin:0 auto;width:100%;padding-inline:var(--lado)}
.portada-txt{max-width:min(50%,34rem)}
.portada .etiqueta{color:var(--atenuado);letter-spacing:.28em;font-weight:500}
.portada h1{
font-family:var(--serif);font-weight:500;
margin-top:clamp(1rem,1.6vw,1.6rem);
font-size:clamp(2.7rem,5.6vw,5.1rem);line-height:1.02;letter-spacing:-.018em;
color:var(--tinta);
}
.portada h1 em{display:block;font-style:italic;color:var(--verde-medio);font-weight:500}
.portada .entradilla{
margin-top:clamp(1.2rem,2vw,2rem);color:var(--texto);
font-size:clamp(.95rem,1.12vw,1.0625rem);line-height:1.62;max-width:29rem;
}
.portada .hero-btns{justify-content:flex-start;margin-top:clamp(1.6rem,2.6vw,2.4rem)}
.btn-solido,.btn-linea{
font-size:clamp(.75rem,.86vw,.8125rem);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
}
/* los tres iconos con rótulo a dos líneas */
.tres-iconos{display:flex;gap:clamp(1.8rem,3.6vw,3.6rem);margin-top:clamp(2.2rem,3.6vw,3.2rem)}
.tres-iconos li{max-width:9rem}
.tres-iconos svg{width:1.7rem;height:1.7rem;color:var(--tinta);stroke-width:1.25}
.tres-iconos span{
display:block;margin-top:.7rem;
font-size:.6875rem;font-weight:600;letter-spacing:.14em;line-height:1.55;
text-transform:uppercase;color:var(--tinta);
}
/* los dos rótulos escritos a mano */
.a-mano{
position:absolute;z-index:2;font-family:var(--mano);font-weight:700;line-height:.95;
}
.mano-vibes{
left:var(--borde-col);bottom:clamp(3.5rem,7vw,7rem);
font-size:clamp(1.5rem,2.3vw,2.3rem);color:var(--tinta);transform:rotate(-4deg);
}
.mano-vibes::after{
content:"";display:block;width:3.2rem;height:2px;border-radius:2px;
background:var(--tinta);margin-top:.5rem;margin-left:.3rem;transform:rotate(-3deg);
}
.mano-aloha{
right:calc(var(--borde-col) + 3.5rem);bottom:clamp(2.6rem,5vw,5rem);
font-size:clamp(1.4rem,2.1vw,2.1rem);color:var(--coral);transform:rotate(-7deg);
display:flex;align-items:flex-end;gap:.6rem;
}
.mano-aloha img{width:clamp(28px,2.6vw,40px);height:auto;transform:rotate(7deg)}
/* borde de papel rasgado */
.rasgado{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(34px,4.2vw,60px);
z-index:3;fill:var(--crema);stroke:none}
/* ── tira de «explora nuestra carta» con el indicador de scroll ──── */
.tira-explora{
max-width:var(--ancho);margin:0 auto;padding:clamp(1.6rem,3vw,2.6rem) var(--lado);
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1rem,3vw,3rem);
}
.tira-explora .etiqueta{letter-spacing:.24em}
.indicador{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.indicador i{display:block;width:1px;height:2.4rem;background:var(--linea)}
.indicador span{font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--atenuado)}
.indicador b{display:block;width:.55rem;height:.55rem;border:1px solid var(--atenuado);border-radius:50%}
.explora-fin{display:flex;align-items:center;justify-content:flex-end;gap:1.4rem}
.explora-fin p{font-size:.875rem;color:var(--atenuado);text-align:right;max-width:26rem}
.redondo-flecha{
display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;flex:none;
border:1px solid var(--linea);color:var(--tinta);transition:background .3s,border-color .3s,color .3s;
}
.redondo-flecha:hover{background:var(--verde);border-color:var(--verde);color:#fff}
.redondo-flecha svg{width:1rem;height:1rem;stroke-width:1.6}
@media (max-width:900px){
.portada{min-height:0;display:block;padding-block:2rem clamp(4rem,10vw,5rem)}
.portada-img{position:relative;height:clamp(240px,52vw,360px);z-index:0;object-position:60% 50%;
border-radius:var(--radio-chico);margin-bottom:1.8rem}
.portada-velo{display:none}
.portada-txt{max-width:none}
.portada h1{font-size:clamp(2.3rem,9.4vw,3.2rem)}
.tres-iconos{gap:1.4rem;flex-wrap:wrap}
.tres-iconos li{max-width:7.5rem}
.a-mano{position:static;transform:none;display:inline-flex;margin-top:1.8rem}
.mano-vibes{transform:rotate(-3deg)}
.mano-vibes::after{display:none}
.tira-explora{grid-template-columns:1fr;gap:1.2rem;text-align:left}
.indicador{display:none}
.explora-fin{justify-content:space-between;gap:1rem}
.explora-fin p{text-align:left}
}
/* remates contra el mockup */
.nav a{text-transform:uppercase;letter-spacing:.13em;font-size:.75rem;font-weight:600}
.cab .btn-solido{padding:.85rem 1.6rem}
.portada{min-height:clamp(680px,66vw,980px)}
.portada-txt{padding-bottom:clamp(3rem,6vw,6rem)}
.mano-vibes{bottom:clamp(2.2rem,4.2vw,4.2rem)}
.mano-aloha{bottom:clamp(2rem,4vw,4rem)}
@media (max-width:900px){
.portada{min-height:0}
.portada-txt{padding-bottom:0}
.nav a{font-size:.9375rem;letter-spacing:.06em;text-transform:none}
}
/* ── franja de garantías, fuera del hero ────────────────────────── */
.banda-iconos{background:var(--crema);padding-block:clamp(1.8rem,3.4vw,3rem)}
.banda-iconos .tres-iconos{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(1rem,2.4vw,2.4rem);margin:0;text-align:center;justify-items:center;
}
.banda-iconos .tres-iconos li{max-width:11rem}
.banda-iconos .tres-iconos svg{width:1.85rem;height:1.85rem}
/* ══════════════════ móvil: la portada del mockup ═════════════════ */
@media (max-width:900px){
.portada{
display:flex;align-items:flex-start;min-height:min(112vw,760px);
padding-block:clamp(5.5rem,17vw,7.5rem) clamp(3.5rem,9vw,5rem);
}
.portada-img{
position:absolute;inset:0;z-index:-1;height:100%;border-radius:0;margin:0;
object-position:50% 46%;
}
.portada-velo{
display:block;
background:linear-gradient(170deg,rgba(239,235,228,.93) 0%,rgba(239,235,228,.8) 26%,
rgba(239,235,228,.28) 46%,rgba(239,235,228,.02) 62%,rgba(239,235,228,0) 100%);
}
.portada-txt{max-width:none;padding-bottom:0}
.portada h1{font-size:clamp(2.3rem,10.4vw,3.4rem)}
.portada .entradilla{font-size:.95rem;max-width:20rem}
.portada .hero-btns{flex-direction:column;align-items:stretch;max-width:15rem;gap:.7rem}
.portada .hero-btns .btn-solido,.portada .hero-btns .btn-linea{justify-content:center}
.portada .btn-linea{background:rgba(250,247,242,.88)}
/* el rótulo a mano cambia de esquina: en móvil va abajo a la derecha */
.mano-vibes{
position:absolute;left:auto;right:var(--lado);bottom:clamp(3.2rem,9vw,5rem);
display:block;margin:0;text-align:right;font-size:clamp(1.3rem,5.6vw,1.9rem);
transform:rotate(-5deg);
}
.mano-vibes::after{display:block;margin-left:auto;width:2.6rem}
.mano-aloha{display:none}
.banda-iconos .tres-iconos{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.banda-iconos .tres-iconos svg{width:1.5rem;height:1.5rem}
.banda-iconos .tres-iconos span{font-size:.5625rem;letter-spacing:.1em}
.banda-iconos .tres-iconos li{max-width:none}
}
@media (max-width:420px){
.banda-iconos .tres-iconos{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .6rem}
}
/* remates de la portada de móvil: el texto tiene que caer sobre la arena
clara, no sobre el bowl, o no se lee */
@media (max-width:900px){
.portada{min-height:min(154vw,860px)}
.portada-img{object-position:50% 66%}
.portada-velo{
background:linear-gradient(176deg,rgba(239,235,228,.97) 0%,rgba(239,235,228,.95) 30%,
rgba(239,235,228,.72) 42%,rgba(239,235,228,.22) 54%,rgba(239,235,228,0) 68%);
}
.cab .btn-solido{display:inline-flex;padding:.7rem 1.1rem;font-size:.6875rem}
.cab-in{gap:.6rem}
.marca img{width:96px}
.mano-vibes{bottom:clamp(2.2rem,6vw,3.4rem);color:var(--tinta)}
}
@media (max-width:380px){
.cab .btn-solido{display:none}
}
@media (max-width:900px){
.portada-img{object-position:50% 74%}
.portada-velo{
background:linear-gradient(176deg,rgba(239,235,228,.98) 0%,rgba(239,235,228,.96) 34%,
rgba(239,235,228,.68) 46%,rgba(239,235,228,.18) 58%,rgba(239,235,228,0) 72%);
}
}
/* ══════════════════════════════════════════════════════════════════
«POR QUÉ SABE DISTINTO» — la banda deja de ser verde plano y pasa a
ser foto con velo hueso por la izquierda, como el hero. Titular en
serif con la segunda línea en itálica verde, tres puntos con
insignia redonda de salvia y el rótulo a mano pegado al borde.
══════════════════════════════════════════════════════════════════ */
.banda-porque{
position:relative;isolation:isolate;overflow:hidden;background:var(--crema);
padding-block:clamp(3.5rem,6.5vw,6rem);
}
.banda-porque-img{
position:absolute;inset:0;z-index:-2;width:100%;height:100%;
object-fit:cover;object-position:88% 55%;
}
.banda-porque-velo{
position:absolute;inset:0;z-index:-1;
background:linear-gradient(94deg,rgba(239,235,228,.97) 0%,rgba(239,235,228,.94) 30%,
rgba(239,235,228,.8) 48%,rgba(239,235,228,.3) 62%,rgba(239,235,228,0) 74%);
}
.banda-porque-in{position:relative;z-index:1;padding-left:calc(var(--lado) + clamp(0rem,6vw,7rem))}
.banda-porque .etiqueta{color:var(--verde-medio);letter-spacing:.26em}
.titular-serif{
font-family:var(--serif);font-weight:500;color:var(--tinta);
margin-top:clamp(.8rem,1.4vw,1.3rem);
font-size:clamp(1.9rem,3.7vw,3.3rem);line-height:1.08;letter-spacing:-.018em;
}
.titular-serif em{display:block;font-style:italic;color:var(--verde-medio)}
.banda-porque .entradilla{margin-top:clamp(1rem,1.7vw,1.5rem);color:var(--texto);max-width:32rem}
.trio-porque{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(1.6rem,3.4vw,3.4rem);margin-top:clamp(2.2rem,4vw,3.4rem);max-width:58rem;
}
.insignia{
display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
background:var(--verde-agua);color:var(--verde);
}
.insignia svg{width:1.4rem;height:1.4rem;stroke-width:1.3}
.trio-porque h3{
font-family:var(--serif);font-weight:600;font-size:clamp(1rem,1.22vw,1.15rem);
letter-spacing:-.01em;margin-top:1rem;color:var(--tinta);
}
.trio-porque p{margin-top:.5rem;font-size:.9375rem;line-height:1.6;color:var(--atenuado)}
.mano-porque{
left:clamp(.6rem,2.2vw,2.6rem);top:50%;transform:translateY(-10%) rotate(-4deg);
font-size:clamp(1.3rem,2vw,2rem);color:var(--verde);
}
.mano-porque::after{
content:"";display:block;width:3rem;height:2px;border-radius:2px;
background:var(--verde);margin-top:.5rem;margin-left:.3rem;transform:rotate(-3deg);
}
@media (max-width:1100px){ .mano-porque{display:none} }
@media (max-width:900px){
.banda-porque{padding-block:2.6rem 3rem}
.banda-porque-img{object-position:80% 60%}
.banda-porque-velo{
background:linear-gradient(174deg,rgba(239,235,228,.97) 0%,rgba(239,235,228,.93) 42%,
rgba(239,235,228,.72) 62%,rgba(239,235,228,.4) 100%);
}
.banda-porque-in{padding-left:var(--lado)}
.trio-porque{grid-template-columns:1fr;gap:1.6rem;max-width:none}
.trio-porque p br,.banda-porque .entradilla br{display:none}
}
/* el bowl de la foto se comía la tercera columna: el velo llega más a la
derecha y el trío se estrecha, así el texto siempre cae sobre hueso */
.banda-porque-velo{
background:linear-gradient(94deg,rgba(239,235,228,.98) 0%,rgba(239,235,228,.96) 34%,
rgba(239,235,228,.93) 52%,rgba(239,235,228,.72) 64%,
rgba(239,235,228,.28) 76%,rgba(239,235,228,0) 88%);
}
.trio-porque{max-width:52rem;gap:clamp(1.2rem,2.4vw,2.6rem)}
.trio-porque p br{display:none}
.banda-porque{padding-block:clamp(4rem,7vw,7rem)}
.banda-porque-img{object-position:72% 55%}
@media (max-width:900px){.banda-porque{padding-block:2.6rem 3rem}}
/* la foto va SÓLO a la derecha, como en el mockup: el texto nunca cae
encima del bowl y no hace falta un velo que apague media foto */
.banda-porque-img{
left:auto;right:0;width:clamp(30%,42%,46%);height:100%;
object-position:46% 52%;
}
.banda-porque-velo{
background:linear-gradient(90deg,var(--crema) 0%,var(--crema) 52%,
rgba(239,235,228,.85) 60%,rgba(239,235,228,.25) 68%,rgba(239,235,228,0) 76%);
}
.trio-porque{max-width:46rem}
@media (max-width:900px){
.banda-porque-img{position:relative;left:auto;right:auto;width:100%;height:clamp(150px,34vw,220px);
border-radius:var(--radio-chico);margin-bottom:1.6rem;object-position:50% 55%}
.banda-porque-velo{display:none}
.banda-porque{padding-block:2.4rem 3rem}
}
/* la tercera columna llegaba a rozar la foto: se estrecha el trío */
.trio-porque{max-width:41rem;gap:clamp(1rem,1.9vw,2rem)}
.banda-porque-img{width:clamp(30%,40%,44%)}
.banda-porque-in{padding-left:calc(var(--lado) + clamp(0rem,4.5vw,5rem))}
@media (max-width:900px){.trio-porque{max-width:none}.banda-porque-img{width:100%}}
/* ══════════════════════════════════════════════════════════════════
«POR QUÉ SABE DISTINTO» EN BENTO
La banda a sangre ocupaba media pantalla para decir tres cosas. Se
compacta en una rejilla de fichas: texto ancho, foto alta a la
derecha y los tres motivos debajo. Menos sitio, misma información.
══════════════════════════════════════════════════════════════════ */
.bento-porque{padding-block:clamp(2.6rem,4.6vw,4.4rem);background:var(--crema)}
.bento{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(.7rem,1.1vw,1rem);
}
.bt{
background:var(--blanco);border:1px solid var(--linea-suave);
border-radius:var(--radio-chico);padding:clamp(1.3rem,2.1vw,2rem);
position:relative;overflow:hidden;
}
.bt-txt{grid-column:1/4;display:flex;flex-direction:column;justify-content:center}
.bt-foto{grid-column:4/5;grid-row:1/3;padding:0;border:0}
.bt-foto img{width:100%;height:100%;object-fit:cover;object-position:46% 52%}
.bt-v{grid-column:span 1}
.bt .etiqueta{color:var(--verde-medio);letter-spacing:.22em}
.bt .titular-serif{
margin-top:.7rem;font-size:clamp(1.5rem,2.5vw,2.25rem);line-height:1.1;
}
.bt-p{
margin-top:.9rem;font-size:.9375rem;line-height:1.62;color:var(--atenuado);max-width:34rem;
}
.mano-bento{
position:absolute;right:clamp(1.2rem,2.4vw,2.2rem);bottom:clamp(1rem,1.8vw,1.6rem);
font-size:clamp(1.05rem,1.5vw,1.45rem);color:var(--verde);
transform:rotate(-5deg);text-align:right;line-height:.95;
}
.bt-v .insignia{width:2.5rem;height:2.5rem}
.bt-v .insignia svg{width:1.2rem;height:1.2rem}
.bt-v h3{
font-family:var(--serif);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;
margin-top:.85rem;color:var(--tinta);
}
.bt-v p{margin-top:.45rem;font-size:.875rem;line-height:1.55;color:var(--atenuado)}
@media (max-width:900px){
.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.bt-txt{grid-column:1/-1}
.bt-foto{grid-column:1/-1;grid-row:auto;height:clamp(150px,34vw,210px)}
.mano-bento{position:static;display:block;margin-top:1.2rem;text-align:left;transform:rotate(-4deg)}
.bt-v:last-child{grid-column:1/-1}
}
@media (max-width:480px){ .bento{grid-template-columns:1fr} .bt-v:last-child{grid-column:auto} }
/* los cuatro motivos, centrados como grupo en vez de estirados de borde a borde */
.banda-iconos .tres-iconos{
display:flex;justify-content:center;flex-wrap:wrap;
gap:clamp(1.8rem,5vw,5.5rem);max-width:62rem;margin-inline:auto;
}
.banda-iconos .tres-iconos li{width:9rem;max-width:9rem}
@media (max-width:640px){
.banda-iconos .tres-iconos{gap:1.6rem 1rem}
.banda-iconos .tres-iconos li{width:calc(50% - .5rem);max-width:none}
}
/* los cuatro motivos, SIEMPRE en una fila — también en móvil */
.banda-iconos .tres-iconos{flex-wrap:nowrap}
.banda-iconos .tres-iconos li{flex:1 1 0;width:auto;min-width:0;max-width:9rem}
@media (max-width:640px){
.banda-iconos .tres-iconos{gap:.4rem;max-width:none}
.banda-iconos .tres-iconos li{max-width:none}
.banda-iconos .tres-iconos svg{width:1.35rem;height:1.35rem}
.banda-iconos .tres-iconos span{font-size:.5rem;letter-spacing:.06em;line-height:1.45;margin-top:.5rem}
}
@media (max-width:360px){
.banda-iconos .tres-iconos span{font-size:.4375rem;letter-spacing:.03em}
}
/* a lo bruto y sin discusión: cuatro columnas de verdad en móvil.
Con flex centrado el cuarto se salía del lienzo y lo recortaba el
overflow-x:hidden del body — el mismo fallo de siempre. */
@media (max-width:640px){
.banda-iconos .tres-iconos{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:.35rem;justify-items:center;max-width:none;margin-inline:0;
}
.banda-iconos .tres-iconos li{width:100%;max-width:none;flex:none}
}
@media (max-width:640px){
/* el justify-content:center heredado dejaba las columnas a tamaño fijo y la
cuarta se salía del lienzo: aquí la rejilla ocupa el ancho y se estira */
.banda-iconos .tres-iconos{
justify-content:stretch;width:100%;max-width:100%;margin:0;
padding-inline:.5rem;gap:.3rem;
}
.banda-iconos .tres-iconos li{width:100%;max-width:100%;min-width:0}
}
/* ══════════════════════════════════════════════════════════════════
«NUESTRA ESENCIA» — la definición de poké, centrada, con dos fotos
grandes debajo y un enlace con filete. Los dos rótulos van DENTRO
de las fotos, en blanco.
══════════════════════════════════════════════════════════════════ */
.esencia-cita{padding-block:clamp(3rem,5.6vw,5.5rem);background:var(--crema);text-align:center}
.esencia-cita .etiqueta{color:var(--atenuado);letter-spacing:.26em}
.cita-h{
margin-top:clamp(.8rem,1.4vw,1.2rem);
font-size:clamp(1.55rem,3vw,2.55rem);line-height:1.18;
}
.cita-h em{display:inline;font-style:italic;color:var(--verde-medio)}
.cita-p{
margin:clamp(.9rem,1.5vw,1.3rem) auto 0;max-width:44rem;
font-size:clamp(.9375rem,1.05vw,1rem);line-height:1.62;color:var(--atenuado);
}
.cita-firma{
margin-top:clamp(1rem,1.7vw,1.5rem);
font-size:.625rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--atenuado);
}
.cita-par{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(.8rem,1.4vw,1.3rem);margin-top:clamp(1.8rem,3.2vw,3rem);
}
.cita-foto{
position:relative;overflow:hidden;border-radius:var(--radio-chico);
aspect-ratio:16/10;margin:0;
}
.cita-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.3,1)}
.cita-foto:hover img{transform:scale(1.04)}
.foto-mano{
position:absolute;left:clamp(1rem,1.8vw,1.8rem);top:clamp(1rem,1.8vw,1.8rem);
color:#fff;font-size:clamp(1rem,1.5vw,1.4rem);line-height:.98;text-align:left;
transform:rotate(-5deg);text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.foto-mano::after{
content:"";display:block;width:2.4rem;height:2px;border-radius:2px;background:#fff;
margin-top:.45rem;margin-left:.2rem;transform:rotate(-3deg);
}
.foto-rotulo{
position:absolute;right:clamp(1rem,1.8vw,1.9rem);top:clamp(1rem,1.8vw,1.9rem);
color:#fff;font-size:.625rem;font-weight:600;letter-spacing:.3em;line-height:2;
text-transform:uppercase;text-align:right;text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.cita-cta{margin-top:clamp(1.6rem,2.8vw,2.6rem)}
@media (max-width:760px){
.cita-par{grid-template-columns:1fr}
.cita-foto{aspect-ratio:16/11}
.cita-p br{display:none}
}
/* ══════════════════════════════════════════════════════════════════
TAKE AWAY & DELIVERY — tarjeta con panel de texto a la izquierda y
la foto de la bolsa a la derecha, con el hibisco a caballo entre
las dos. El titular lleva la línea del medio en itálica CORAL.
══════════════════════════════════════════════════════════════════ */
.tarjeta-pedido{
position:relative;isolation:isolate;overflow:hidden;
display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);
background:var(--blanco);border-radius:var(--radio);
box-shadow:var(--sombra-suave);min-height:clamp(20rem,30vw,27rem);
}
.pedido-txt{
position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
padding:clamp(1.8rem,3.4vw,3.6rem);
}
.pedido-txt .etiqueta{color:var(--atenuado);letter-spacing:.24em}
.t-coral{margin-top:clamp(.7rem,1.2vw,1.1rem);font-size:clamp(1.6rem,2.9vw,2.6rem);line-height:1.12;color:var(--verde)}
.t-coral em{display:block;font-style:italic;color:#dd6a53}
.t-coral span{display:block}
.pedido-p{margin-top:clamp(.8rem,1.3vw,1.2rem);font-size:1rem;color:var(--texto)}
.pedido-txt .hero-btns{margin-top:clamp(1.2rem,2.2vw,2rem);justify-content:flex-start}
.mano-pedido{
position:absolute;left:clamp(1.8rem,3.4vw,3.6rem);bottom:clamp(1.4rem,2.4vw,2.4rem);
font-size:clamp(.95rem,1.35vw,1.3rem);color:var(--verde);transform:rotate(-5deg);line-height:.98;
}
.mano-pedido::after{
content:"";display:block;width:2.2rem;height:2px;border-radius:2px;background:var(--verde);
margin-top:.4rem;margin-left:.2rem;transform:rotate(-3deg);
}
.pedido-foto{margin:0;position:relative;z-index:1}
.pedido-foto img{width:100%;height:100%;object-fit:cover;object-position:44% 50%}
.hib-pedido{
position:absolute;z-index:1;left:36%;bottom:-8%;
width:clamp(120px,15vw,230px);height:auto;opacity:.85;pointer-events:none;
}
@media (max-width:860px){
.tarjeta-pedido{grid-template-columns:1fr;min-height:0}
.pedido-foto{order:-1;height:clamp(170px,42vw,260px)}
.pedido-foto img{object-position:46% 50%}
.mano-pedido{position:static;display:block;margin-top:1.6rem;transform:rotate(-4deg)}
.hib-pedido{left:auto;right:-4%;bottom:auto;top:clamp(120px,34vw,200px);width:clamp(90px,22vw,140px)}
.pedido-txt .hero-btns{flex-direction:column;align-items:stretch;max-width:16rem}
.pedido-txt .hero-btns a{justify-content:center}
}
/* el rótulo a mano va en el margen izquierdo, no encima de los botones */
.pedido-txt{padding-left:clamp(4.5rem,7.5vw,8rem)}
.mano-pedido{left:clamp(1.2rem,2.2vw,2.4rem);bottom:clamp(2.4rem,4vw,4.2rem)}
.hib-pedido{left:31%;bottom:-14%;width:clamp(150px,18vw,280px);opacity:.9}
@media (max-width:860px){
.pedido-txt{padding-left:clamp(1.8rem,3.4vw,3.6rem)}
.mano-pedido{left:auto;bottom:auto}
}
/* los dos botones, en una línea como el mockup */
.pedido-txt{padding-left:clamp(4rem,6.2vw,6.8rem);padding-right:clamp(1.4rem,2.2vw,2.2rem)}
.pedido-txt .hero-btns{flex-wrap:nowrap;gap:.6rem}
.pedido-txt .hero-btns a{padding-inline:clamp(1rem,1.6vw,1.6rem);white-space:nowrap}
@media (max-width:860px){
.pedido-txt{padding-left:clamp(1.8rem,3.4vw,3.6rem);padding-right:clamp(1.8rem,3.4vw,3.6rem)}
.pedido-txt .hero-btns{flex-wrap:wrap}
}
.bt-foto img{object-position:52% 54%}
.cita-foto{aspect-ratio:3/2}
@media (max-width:760px){.cita-foto{aspect-ratio:3/2}}
}
/* la tira trae su propio blanco roto: la sección lo iguala para que se
lea como una banda a propósito y no como un rectángulo pegado */
}
}
}
}
/* ══════════════════════════════════════════════════════════════════
TIRA DE MARCA EN MOVIMIENTO
Marquesina infinita: la misma fila se escribe DOS veces y se anima
un -50 %, así el salto cae justo donde la segunda copia empieza y
no se ve ninguna costura. Se para al pasar el ratón y se queda
quieta si el sistema pide menos movimiento.
══════════════════════════════════════════════════════════════════ */
.tira-marca{
background:#f6f2ed;border-block:1px solid var(--linea-suave);
overflow:hidden;padding-block:clamp(.9rem,1.5vw,1.3rem);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.tira-pista{display:flex;width:max-content;animation:desfile 42s linear infinite}
.tira-marca:hover .tira-pista{animation-play-state:paused}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tira-fila{
display:flex;align-items:center;flex:none;
gap:clamp(1.6rem,3.2vw,3.4rem);padding-inline:clamp(.8rem,1.6vw,1.7rem);margin:0;
}
.ti-sello{display:flex;align-items:center;gap:.7rem;flex:none}
.ti-sello img{width:clamp(38px,3.4vw,48px);height:auto;flex:none}
.ti-sello span{
font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
color:var(--tinta);white-space:nowrap;
}
.ti-frase{
flex:none;position:relative;padding-inline:clamp(1.6rem,3.2vw,3.4rem);
font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.35vw,1.3rem);
color:var(--verde-medio);white-space:nowrap;
}
.ti-frase::before,.ti-frase::after{
content:"";position:absolute;top:50%;width:1px;height:1.7rem;
transform:translateY(-50%);background:var(--linea);
}
.ti-frase::before{left:0}
.ti-frase::after{right:0}
@media (prefers-reduced-motion:reduce){
.tira-pista{animation:none}
.tira-marca{overflow-x:auto;scrollbar-width:none}
}
@media (max-width:760px){
.tira-pista{animation-duration:30s}
.ti-sello img{width:34px}
.ti-sello span{font-size:.5625rem;letter-spacing:.12em}
.ti-frase{font-size:.95rem}
}
/* ══════════════════════════════════════════════════════════════════
BANNER · pared de travertino con sombras de palmera.
Muy panorámico (1930×815 = 2.37:1): hero menos alto para no comerse
el ancho, y poco velo porque el lado izquierdo ya es pared clara.
══════════════════════════════════════════════════════════════════ */
.portada{min-height:clamp(540px,45vw,720px)}
.portada-txt{padding-bottom:clamp(.5rem,1.4vw,1.4rem)}
.portada-img{object-position:60% 50%}
.portada-velo{
background:linear-gradient(96deg,rgba(239,235,228,.80) 0%,rgba(239,235,228,.66) 24%,
rgba(239,235,228,.34) 40%,rgba(239,235,228,.06) 56%,rgba(239,235,228,0) 66%);
}
@media (max-width:900px){
/* la foto de móvil es vertical (853×1844): el texto cae sobre la
pared de arriba, no sobre el bloque de piedra */
.portada{min-height:min(148vw,820px)}
.portada-img{object-position:50% 26%}
.portada-velo{
background:linear-gradient(176deg,rgba(239,235,228,.95) 0%,rgba(239,235,228,.9) 30%,
rgba(239,235,228,.6) 44%,rgba(239,235,228,.14) 58%,rgba(239,235,228,0) 72%);
}
}
/* la entradilla del hero heredaba «margin:… auto» de la portada centrada
y en móvil salía centrada en vez de alineada con el titular; y sus
saltos de línea son de escritorio. El espacio va ESCRITO antes del
, o al ocultarlo se pegan las palabras. */
@media (max-width:900px){
.portada .entradilla{margin-inline:0;max-width:24rem}
.portada .br-esc{display:none}
}
/* La marquesina se estaba recortando gracias al overflow-x:hidden del
body (medido: scrollWidth 5018 con scroll real 0). En iOS eso no
siempre basta, así que recorta ella misma. */
.tira-marca{overflow:hidden !important}
/* ══════════════════════════════════════════════════════════════════
DÓNDE ESTAMOS · UNA tarjeta: datos a la izquierda y el mapa a
sangre por la derecha, con la chapa del local flotando encima y un
indicador de si está abierto AHORA (lo calcula guion.js en hora de
Madrid, no en la del visitante).
══════════════════════════════════════════════════════════════════ */
.dd-cab{max-width:46rem;margin-bottom:clamp(2rem,3.6vw,3.2rem)}
.dd-cab .etiqueta{color:var(--verde)}
.dd-titular{
font-family:var(--serif);font-weight:500;color:var(--tinta);
font-size:clamp(2.1rem,4.2vw,3.5rem);line-height:1.05;letter-spacing:-.018em;
margin:.8rem 0 0;
}
.dd-titular em{font-style:italic;color:var(--verde-medio);font-weight:500}
.dd-sub{margin:1.1rem 0 0;color:var(--texto);font-size:1.0625rem;line-height:1.65;max-width:34rem}
.dd-panel{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
background:var(--blanco);border:1px solid var(--linea-suave);
border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;
}
.dd-lado{padding:clamp(1.8rem,3vw,2.9rem)}
/* ── abierto ahora ──────────────────────────────────────────────── */
.dd-estado{
display:inline-flex;align-items:center;gap:.6rem;margin:0;
padding:.5rem .95rem .5rem .8rem;border-radius:999px;
background:var(--verde-agua);border:1px solid var(--linea-suave);
font-size:.8125rem;font-weight:600;letter-spacing:.01em;color:var(--verde);
}
.dd-estado i{
width:.5rem;height:.5rem;border-radius:50%;background:var(--verde-medio);flex:none;
box-shadow:0 0 0 0 rgba(68,100,65,.45);animation:latido 2.4s ease-out infinite;
}
.dd-estado.cerrado{background:rgba(238,114,101,.10);color:var(--coral-texto)}
.dd-estado.cerrado i{background:var(--coral-texto);animation:none}
@keyframes latido{
0%{box-shadow:0 0 0 0 rgba(68,100,65,.45)}
70%{box-shadow:0 0 0 .5rem rgba(68,100,65,0)}
100%{box-shadow:0 0 0 0 rgba(68,100,65,0)}
}
@media (prefers-reduced-motion:reduce){.dd-estado i{animation:none}}
/* ── las cuatro fichas ──────────────────────────────────────────── */
.dd-datos{list-style:none;margin:clamp(1.6rem,2.6vw,2.2rem) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
background:var(--linea-suave);border:1px solid var(--linea-suave);
border-radius:var(--radio-chico);overflow:hidden;
}
.dd-datos li{display:flex;gap:.9rem;align-items:flex-start;padding:1.25rem 1.3rem;background:var(--blanco)}
.dd-datos a{display:block;color:inherit;text-decoration:none}
.dd-ico{
display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;
background:var(--verde-agua);color:var(--verde);
}
.dd-ico svg{width:1.1rem;height:1.1rem;stroke-width:1.5;fill:none;stroke:currentColor}
.dd-datos b{display:block;font-size:.9375rem;font-weight:600;color:var(--tinta);letter-spacing:-.01em;line-height:1.35}
.dd-datos div span{display:block;font-size:.8125rem;color:var(--atenuado);margin-top:.25rem;line-height:1.45}
.dd-datos a:hover b{color:var(--verde-medio)}
/* ── distintivos ────────────────────────────────────────────────── */
.dd-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0;padding:0}
.dd-chips li{
padding:.42rem .9rem;border-radius:999px;border:1px solid var(--linea);
font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texto);
}
.dd-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.5rem,2.4vw,2rem)}
/* ── el mapa, a sangre dentro de la tarjeta ─────────────────────── */
.dd-mapa{position:relative;min-height:clamp(22rem,34vw,30rem);background:var(--crema-hondo)}
.dd-mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.72) contrast(1.02)}
.dd-pin{
position:absolute;left:clamp(.9rem,1.6vw,1.4rem);right:clamp(.9rem,1.6vw,1.4rem);
bottom:clamp(.9rem,1.6vw,1.4rem);
display:flex;align-items:center;gap:.85rem;text-decoration:none;
padding:.85rem 1rem;border-radius:var(--radio-chico);
background:rgba(250,247,242,.94);border:1px solid var(--linea-suave);
box-shadow:var(--sombra-suave);backdrop-filter:blur(8px);
transition:transform .3s ease,box-shadow .3s ease;
}
.dd-pin:hover{transform:translateY(-2px);box-shadow:0 22px 44px -26px rgba(16,32,30,.4)}
.dd-pin-ico{display:grid;place-items:center;flex:none;width:2.4rem;height:2.4rem;border-radius:50%;
background:var(--verde);color:#fff}
.dd-pin-ico svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.5}
.dd-pin-txt{min-width:0}
.dd-pin-txt b{display:block;font-size:.9375rem;font-weight:600;color:var(--tinta);line-height:1.3}
.dd-pin-txt span{display:block;font-size:.78125rem;color:var(--atenuado);margin-top:.1rem;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-pin-fl{width:1.05rem;height:1.05rem;flex:none;margin-left:auto;color:var(--verde);
fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s ease}
.dd-pin:hover .dd-pin-fl{transform:translateX(3px)}
@media (max-width:980px){
.dd-panel{grid-template-columns:1fr}
.dd-mapa{min-height:clamp(15rem,52vw,20rem);order:-1}
.dd-pin{backdrop-filter:none}
}
@media (max-width:560px){
.dd-datos{grid-template-columns:1fr}
.dd-btns .btn-solido,.dd-btns .btn-linea{flex:1 1 100%;justify-content:center}
}
/* las fichas son estrechas y partían «Avda. Antonio Belón, / 26»
dejando el número solo: se reparte el texto y el panel de datos
gana algo de ancho frente al mapa. */
.dd-panel{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.dd-datos b{text-wrap:balance}
@media (max-width:980px){.dd-panel{grid-template-columns:1fr}}
/* ── iconos centrados en su círculo ─────────────────────────────
1) un