/* =========================================================================
   ROLL TO GO SUSHI
   Instrument Serif para títulos, Montserrat para todo lo demás.
   Ritmo: durazno claro, durazno hondo, tinta profunda y foto a sangre.
   ========================================================================= */

:root{
  --durazno:      #F5D9CC;
  --durazno-hondo:#F0CCC0;
  --trazo:        #D8B8AD;
  --rojo:         #E92228;
  --rojo-texto:   #DC2026;
  /* precios: el #DC2026 daba 3.3:1 sobre durazno y 3.3:1 sobre tinta.
     Estos dos si pasan el minimo de legibilidad (4.5:1). */
  --precio-claro: #A81318;   /* sobre fondos durazno  -> 5.1:1 */
  --precio-hondo: #F08A8E;   /* sobre la seccion oscura -> 6.8:1 */
  --tinta:        #241F1D;

  --ancho: 1280px;
  --angosto: 720px;
  --aire: clamp(5.5rem, 10vw, 9.5rem);

  /* alto real de la barra fija (relleno 1.4rem x2 + alto del logo).
     Lo usa el hero para no meter su contenido debajo del logo. */
  --alto-barra: 5.7rem;
}
@media (max-width:900px){:root{--alto-barra:5.2rem}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--durazno);color:var(--tinta);
  font-family:'Mulish',system-ui,sans-serif;
  font-size:1.125rem;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0}

/* Estructura en Mulish, remates ocurrentes en Coming Soon.
   Es la fórmula que la marca ya usa en redes. */
.display{font-family:'Mulish',sans-serif;font-weight:800;line-height:1.06;letter-spacing:-0.025em}
h1.display{font-size:clamp(2.8rem,6.6vw,5.4rem)}
h2.display{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.display em{font-style:normal;color:var(--rojo)}
.display em.junto{white-space:nowrap}

.remate{
  font-family:'Coming Soon',cursive;
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  line-height:1.25;color:var(--rojo-texto);
  display:inline-flex;align-items:flex-end;gap:.5rem;margin-top:.7rem;
}
.remate svg{display:none}
.favorito .remate svg{display:block;width:26px;height:26px;flex:none;transform:scaleY(-1);margin-bottom:.1rem}
.seccion--tinta .remate,.hero .remate{color:#FF7A7E}

h3{font-family:'Mulish',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.35}

.etiqueta{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rojo-texto);margin-bottom:1.4rem;
}
.envoltura{width:min(100% - 3rem,var(--ancho));margin-inline:auto}
.angosto{max-width:var(--angosto)}
.seccion{padding-block:var(--aire)}
.seccion--honda{background:var(--durazno-hondo)}
.seccion--tinta{background:var(--tinta);color:var(--durazno)}
.seccion--tinta .etiqueta{color:#F08A8E}
.seccion--tinta .display em{color:#FF6B6F}

.textura{position:relative;isolation:isolate}
.textura::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url('assets/rolltogo-patron-sushi.svg') repeat;
  background-size:360px;opacity:.32;
}

/* --- aparición al hacer scroll --------------------------------------- */
/* El contenido SIEMPRE es visible. La animación solo se activa si el
   JavaScript pudo correr, y entonces marca <html class="con-js">.
   Sin esto, un fallo de JS deja la página en blanco. */
.con-js .sube{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.con-js .sube.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sube{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}

/* --- barra ------------------------------------------------------------ */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .3s ease,padding .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;padding-block:1.4rem;
}
.barra.pegada{background:rgba(245,217,204,.96);backdrop-filter:blur(12px);border-bottom-color:var(--trazo);padding-block:.7rem}
.barra__interior{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.barra__logo{width:172px;transition:width .3s ease}
.barra.pegada .barra__logo{width:148px}
.barra nav{display:flex;gap:2rem;align-items:center}
.barra nav a{text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.08em}
.barra nav a:hover{color:var(--rojo)}
/* sobre el hero oscuro el menú va en claro */
.barra:not(.pegada) .barra__interior{color:#fff}
.barra:not(.pegada) .barra__logo{filter:brightness(0) invert(1)}
@media (max-width:900px){.barra nav{display:none}.barra__logo{width:140px}}

/* --- botones ---------------------------------------------------------- */
.boton{
  display:inline-block;background:var(--rojo);color:#fff;
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;padding:1.05rem 2.3rem;border:1px solid var(--rojo);
  transition:background .2s ease,color .2s ease;
}
.boton:hover{background:transparent;color:var(--rojo)}
.boton--claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.boton--claro:hover{background:#fff;color:var(--tinta);border-color:#fff}
.boton--linea{background:transparent;color:currentColor;border-color:currentColor}
.boton--linea:hover{background:var(--tinta);color:var(--durazno);border-color:var(--tinta)}
:where(a,button,summary):focus-visible{outline:2px solid var(--rojo);outline-offset:4px}

/* --- hero a pantalla completa ----------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__fondo{position:absolute;inset:0;z-index:0}
.hero__fondo img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero__velo{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(36,31,29,.5) 0%,rgba(36,31,29,.1) 30%,rgba(36,31,29,.9) 100%),
    linear-gradient(100deg,rgba(36,31,29,.78) 0%,rgba(36,31,29,.45) 42%,rgba(36,31,29,0) 68%);
}
.hero__cuerpo{
  position:relative;z-index:2;color:#fff;width:100%;
  /* en pantallas bajas el contenido crece hacia arriba y se metia debajo de la
     barra: el relleno superior nunca baja del alto de la barra + un respiro. */
  padding-top:max(clamp(3rem,8vw,6rem), calc(var(--alto-barra) + 1rem));
  padding-bottom:clamp(3rem,8vw,6rem);
}
.hero .display em{color:#FF5E63}
.hero h1{max-width:13ch;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero p{max-width:40ch;margin:1.8rem 0 2.6rem;font-size:1.1rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:1rem}
.hero__estado{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.25);
  font-size:.85rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
}
.punto{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.punto::before{content:"";width:8px;height:8px;border-radius:50%;background:#7ED07E}
.punto.cerrado::before{background:#E0A23C}

/* --- imagen a sangre --------------------------------------------------- */
.sangre{width:100%;margin:0}
.sangre img{width:100%;height:clamp(320px,46vw,620px);object-fit:cover}

/* --- pilares ------------------------------------------------------------ */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4.5rem)}
.pilares .num{
  font-family:'Coming Soon',cursive;font-size:2.2rem;line-height:1;
  color:var(--rojo);display:block;margin-bottom:1rem;
}
.pilares p{margin:.7rem 0 0;font-size:1rem;opacity:.9}
@media (max-width:820px){.pilares{grid-template-columns:1fr;gap:2.5rem}}

/* --- favoritos: retícula desigual ---------------------------------------- */
.favoritos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem);margin-top:4rem}
.favorito img{width:100%;object-fit:cover;aspect-ratio:4/3}
.favorito .marca{display:block;font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.55;margin:1.3rem 0 .5rem}
.favorito__pie{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.favorito h3{font-size:1.08rem}
.favorito .precio{font-weight:700;font-size:.92rem;color:var(--precio-claro);white-space:nowrap}
.favorito p{margin:.5rem 0 0;font-size:.98rem;opacity:.9}
@media (max-width:900px){.favoritos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.favoritos{grid-template-columns:1fr}}

/* --- menú ----------------------------------------------------------------- */
.menu__cabeza{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:end;margin-bottom:2.5rem}
.buscador{position:relative;margin-bottom:2.5rem}
.buscador input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--trazo);
  padding:1.1rem 0 1.1rem 2rem;font-family:inherit;font-size:1.05rem;color:inherit;
}
.buscador input:focus{outline:none;border-bottom-color:var(--rojo)}
.buscador input::placeholder{color:currentColor;opacity:.45}
.buscador::before{
  content:"";position:absolute;left:.15rem;top:1.45rem;width:12px;height:12px;
  border:1.5px solid currentColor;border-radius:50%;opacity:.5;
}
.buscador::after{
  content:"";position:absolute;left:1.05rem;top:2.35rem;width:7px;height:1.5px;
  background:currentColor;transform:rotate(45deg);opacity:.5;
}
.aviso{font-size:.9rem;opacity:.7;padding:1.5rem 0}

.categoria{border-top:1px solid var(--trazo)}
.categoria:last-of-type{border-bottom:1px solid var(--trazo)}
.categoria[hidden]{display:none}
.categoria summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.6rem 0;font-size:.88rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.categoria summary::-webkit-details-marker{display:none}
.categoria summary::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:1.5px solid var(--rojo);border-bottom:1.5px solid var(--rojo);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s ease;
}
.categoria[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.cuenta{font-size:.7rem;letter-spacing:.1em;opacity:.5;margin-left:auto;margin-right:.6rem}
.categoria .nota{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--rojo-texto);margin:0 0 1.3rem}
.lista{list-style:none;margin:0;padding:0 0 2.2rem}
.lista li{display:grid;grid-template-columns:1fr auto;gap:.3rem 2rem;padding:.95rem 0}
.lista li[hidden]{display:none}
.lista li + li{border-top:1px solid rgba(216,184,173,.5)}
.lista .nombre{font-weight:600}
.lista .precio{font-weight:700;color:var(--precio-claro);white-space:nowrap}
.seccion--tinta .lista .precio{color:var(--precio-hondo)}
.lista .desc{grid-column:1/-1;font-size:.95rem;opacity:.88;max-width:70ch}
.lista mark{background:rgba(233,34,40,.18);color:inherit;padding:0 .1em}

/* --- carta impresa ---------------------------------------------------------- */
.carta{display:grid;grid-template-columns:auto auto 1fr;gap:1.4rem 2.5rem;align-items:end;margin-top:4rem;padding-top:3rem;border-top:1px solid var(--trazo)}
.carta a.hoja{display:block;width:150px;border:1px solid var(--trazo);transition:transform .25s ease}
.carta a.hoja:hover{transform:translateY(-5px)}
.carta__texto h3{margin-bottom:.5rem}
.carta__texto p{margin:0 0 1.4rem;font-size:.9rem;opacity:.8;max-width:40ch}
@media (max-width:760px){.carta{grid-template-columns:1fr 1fr}.carta__texto{grid-column:1/-1}}

/* --- picnic ------------------------------------------------------------------- */
.picnic{display:grid;grid-template-columns:1fr 1fr;gap:0}
.picnic img{width:100%;height:clamp(280px,38vw,500px);object-fit:cover}
@media (max-width:700px){.picnic{grid-template-columns:1fr}}

/* --- dos columnas -------------------------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.duo p{margin-top:1.6rem}
@media (max-width:880px){.duo{grid-template-columns:1fr;gap:2.5rem}}
.puntos{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.7rem}
.puntos li{border-top:1px solid currentColor;padding-top:1rem;opacity:.95}
.puntos li{border-color:rgba(216,184,173,.4)}
.puntos p{margin:.3rem 0 0;font-size:1rem;opacity:.88}

/* --- reseñas --------------------------------------------------------------------- */
.resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(1.2rem,2.2vw,1.8rem);margin-top:3.5rem}
/* Cada reseña es una tarjeta: antes eran cuatro parrafos seguidos y no se
   distinguia donde acababa uno y empezaba el otro, ni cual era el nombre. */
.resena{
  position:relative;background:#FCF3EE;border:1px solid var(--trazo);
  border-radius:3px;padding:2.6rem 1.6rem 1.5rem;display:flex;flex-direction:column;
}
.resena::before{                      /* comilla: dice "esto es un testimonio" sin explicarlo */
  content:"\201C";position:absolute;top:.2rem;left:1.1rem;
  font-family:Georgia,'Times New Roman',serif;font-size:4.6rem;line-height:1;
  color:var(--rojo);opacity:.22;pointer-events:none;
}
.resena__estrellas{
  display:block;color:var(--rojo);font-size:1.05rem;letter-spacing:.16em;
  line-height:1;margin:0 0 .9rem;text-align:right;
}
.resena p{margin:0 0 1.6rem;font-size:1rem;line-height:1.6;opacity:.95;flex:1}
.resena__firma{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--trazo);padding-top:1rem}
.resena__inicial{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--precio-claro);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.95rem;line-height:1;
}
.resena__quien{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.resena cite{font-style:normal;font-size:1rem;font-weight:700;letter-spacing:0;text-transform:none;color:var(--precio-claro);opacity:1}
.resena__fuente{font-size:.72rem;letter-spacing:.04em;opacity:.6}
@media (max-width:520px){.resena{padding:2.4rem 1.3rem 1.3rem}}

/* --- galería desigual --------------------------------------------------------------- */
.galeria{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:3.5rem}
.galeria button{padding:0;border:0;background:none;cursor:pointer;overflow:hidden;aspect-ratio:1}
.galeria button img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.galeria button:hover img{transform:scale(1.05)}
@media (max-width:820px){.galeria{grid-template-columns:repeat(3,1fr)}}

/* --- lightbox ------------------------------------------------------------------------- */
.visor{
  position:fixed;inset:0;z-index:100;background:rgba(20,16,15,.94);
  display:none;align-items:center;justify-content:center;padding:2rem;
}
.visor[open],.visor.abierto{display:flex}
.visor img{max-width:min(1100px,92vw);max-height:86vh;object-fit:contain}
/* modo hoja de menu: texto denso, se ve a lo ancho y se recorre */
.visor--hoja{align-items:flex-start;overflow-y:auto;padding:3.5rem 1rem 2rem}
.visor--hoja img{max-width:min(900px,100%);max-height:none;width:100%;margin-inline:auto}
.visor button{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:2rem;line-height:1;padding:1rem;opacity:.75;
}
.visor button:hover{opacity:1}
.visor .cerrar{top:1rem;right:1.5rem}
.visor .prev{left:.5rem;top:50%;transform:translateY(-50%)}
.visor .sig{right:.5rem;top:50%;transform:translateY(-50%)}

/* --- contacto ----------------------------------------------------------------------------- */
.contacto{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.datos{display:grid;gap:2.2rem;margin-top:2.8rem}
.dato span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:.45rem}
.dato a,.dato p{font-size:1.12rem;font-weight:500;margin:0;text-decoration:none;line-height:1.5}
.dato a:hover{color:var(--rojo)}
.redes{display:flex;gap:1.5rem}
.redes a{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.mapa{width:100%;min-height:460px;border:0;filter:grayscale(.4) contrast(1.05)}
@media (max-width:880px){.contacto{grid-template-columns:1fr}.mapa{min-height:320px}}

/* --- pie --------------------------------------------------------------------------------- */
.pie{background:var(--tinta);color:var(--durazno);padding-block:3.5rem}
.pie__interior{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:center}
.pie img{width:170px}
.pie nav{display:flex;gap:1.7rem;flex-wrap:wrap}
.pie a{text-decoration:none;font-size:.78rem;font-weight:600;letter-spacing:.08em}
.pie a:hover{color:var(--rojo)}
.pie__legal{width:100%;font-size:.73rem;opacity:.55;margin:0}

.flotante{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;text-align:center;padding:1rem}
@media (max-width:760px){.flotante{display:block}body{padding-bottom:4rem}}

/* --- remate y flechita en las tarjetas -------------------------------------- */
.favorito .remate{font-size:1.35rem;margin:.9rem 0 0}
.favorito .remate svg{width:26px;height:26px}
.pilares .remate{font-size:1.3rem}

/* --- franja del 2x1 ----------------------------------------------------------- */
.franja{background:var(--rojo);color:#fff;padding-block:clamp(3rem,6vw,4.5rem);text-align:center}
.franja h2{font-size:clamp(1.9rem,4vw,3rem)}
.franja .remate{color:#fff;justify-content:center}
.franja p{margin:.8rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.9}

/* --- ajustes de celular -------------------------------------------------------- */
@media (max-width:760px){
  :root{--aire:clamp(4rem,13vw,5.5rem)}
  .envoltura{width:min(100% - 2.2rem,var(--ancho))}
  h1.display{font-size:clamp(2.4rem,10.5vw,3.4rem)}
  h2.display{font-size:clamp(1.9rem,7.6vw,2.6rem)}
  .remate{font-size:1.35rem;margin-top:.55rem}
  .favorito .remate svg{width:22px;height:22px}
  .favorito .remate{font-size:1.2rem}
  .pilares .remate{font-size:1.25rem}
  .hero{min-height:92svh}
  .hero p{font-size:1rem;margin:1.4rem 0 2rem}
  .hero__acciones{gap:.7rem}
  .hero__acciones .boton{flex:1 1 100%;text-align:center}
  .hero__estado{margin-top:2.2rem;flex-direction:column;align-items:flex-start;gap:.35rem}
  .boton{padding:1rem 1.6rem;font-size:.72rem;letter-spacing:.14em}
  .sangre img{height:clamp(240px,58vw,340px)}
  .lista li{grid-template-columns:1fr auto;gap:.25rem 1rem}
  .lista .desc{font-size:.82rem}
  .categoria summary{font-size:.74rem;padding:1.3rem 0}
  .galeria{gap:5px}
  .franja h2{font-size:clamp(1.6rem,6.4vw,2.1rem)}
  .carta a.hoja{width:100%}
  .visor button{font-size:1.6rem}
  .pie__interior{gap:1.6rem}
  .pie nav{gap:1.1rem}
}