/* Fuentes autoalojadas: mismos pesos que antes servia Google Fonts, sin
     depender de esa conexion desde el primer pintado de la pagina. */
  @font-face{
    font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
    src:url('fonts/cormorant-garamond-italic-500.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
    src:url('fonts/cormorant-garamond-normal-variable.woff2') format('woff2');
  }
  @font-face{
    font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
    src:url('fonts/cormorant-garamond-normal-variable.woff2') format('woff2');
  }
  @font-face{
    font-family:'Karla'; font-style:normal; font-weight:400 700; font-display:swap;
    src:url('fonts/karla-normal-variable.woff2') format('woff2');
  }
  :root{
    --paper:#f7f7f2;
    --paper-2:#f0efe8;
    --ink:#1c2119;
    --muted:#5c6259;
    --accent:#b4592f;
    --accent-soft:#e0a06f;
    --accent-ink:#ffffff;
    --forest:#1e3227;
    --line:#ddd9cd;
    --radius:12px;
    --radius-pill:999px;
    --maxw:1180px;
    --ease:cubic-bezier(.16,1,.3,1);
  }

  *{box-sizing:border-box;}
  html{
    overflow-x:clip;
    scroll-behavior:smooth;
    overscroll-behavior-y:none;
    background:var(--browser-chrome, #111);
    scroll-padding-top:84px;
  }
  body{
    margin:0;
    overscroll-behavior-y:none;
    overflow-x:clip;
    background:var(--browser-chrome, #111);
    color:var(--ink);
    font-family:'Karla', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

  h1,h2,h3{
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    line-height:1.05;
    margin:0;
    color:var(--ink);
  }

  section{padding:104px 0; background:var(--paper); position:relative;}
  @media (max-width:768px){ section{padding:68px 0;} }

  /* Filete que se dibuja bajo los titulares de seccion */
  .rule{
    display:block; height:1px; width:64px; margin:18px 0 0;
    background:var(--accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform 1.1s var(--ease) .15s;
  }
  .in .rule, .reveal.in > .rule{transform:scaleX(1);}

  /* ---------- Botones ---------- */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 30px;
    border-radius:var(--radius-pill);
    font-family:'Cormorant Garamond', serif;
    font-weight:600;
    font-size:1.15rem;
    letter-spacing:.01em;
    text-decoration:none;
    cursor:pointer;
    border:1.5px solid transparent;
    overflow:hidden;
    transition:transform .18s cubic-bezier(.2,.7,.2,1), background-color .18s, box-shadow .3s, color .18s;
    white-space:nowrap;
  }
  .btn:active{transform:scale(.97);}
  /* Barrido de luz al pasar por encima */
  .btn::after{
    content:"";
    position:absolute; top:0; bottom:0; left:-120%;
    width:60%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
    transform:skewX(-18deg);
    transition:left .65s var(--ease);
    pointer-events:none;
  }
  .btn:hover::after{left:140%;}
  .btn-primary{background:var(--accent);color:var(--accent-ink);}
  .btn-primary:hover{box-shadow:0 12px 26px -8px rgba(180,89,47,.6);}
  .btn-outline{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.7);}
  .btn-outline:hover{background:rgba(255,255,255,.14);}
  .btn-ink{background:var(--forest);color:#fff;}
  .btn-ink:hover{box-shadow:0 12px 26px -8px rgba(30,50,39,.5);}
  .btn-sm{padding:9px 20px; font-size:1rem;}

  /* ---------- Nav flotante (entra al terminar la portada) ---------- */
  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:70;
    background:rgba(247,247,242,.82);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid rgba(0,0,0,0);
    transform:translateY(-100%);
    transition:transform .55s var(--ease), border-color .55s;
    padding-top:env(safe-area-inset-top);
  }
  .topbar.is-on, .topbar:focus-within{transform:translateY(0); border-bottom-color:var(--line);}
  .topbar-in{
    max-width:var(--maxw); margin:0 auto; padding:12px 24px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .topbar .mark{font-family:'Cormorant Garamond', serif; font-size:1.35rem; font-weight:600; text-decoration:none; white-space:nowrap;}
  .topbar-in>nav{margin-left:auto;}
  .language-switch{display:flex;align-items:center;gap:2px;flex-shrink:0;}
  .language-switch a{display:flex;align-items:center;justify-content:center;min-width:36px;min-height:44px;font-size:.75rem;letter-spacing:.08em;font-weight:700;text-decoration:none;color:inherit;opacity:.65;}
  .language-switch a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px;}
  .language-switch a:hover{opacity:1;}
  .language-switch a:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
  .language-switch--hero{position:absolute;z-index:3;top:calc(16px + env(safe-area-inset-top));right:max(24px,calc((100% - 1180px)/2 + 24px));color:var(--paper);padding:0 6px;background:rgba(17,17,17,.55);border-radius:var(--radius-pill);}
  .topbar nav{display:flex; align-items:center; gap:26px;}
  .topbar nav a:not(.btn){
    font-size:.92rem; text-decoration:none; color:var(--muted);
    position:relative; transition:color .2s;
  }
  .topbar nav a:not(.btn)::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
    background:var(--accent); transform:scaleX(0); transform-origin:right;
    transition:transform .35s var(--ease);
  }
  .topbar nav a:not(.btn):hover{color:var(--ink);}
  .topbar nav a:not(.btn):hover::after{transform:scaleX(1); transform-origin:left;}
  @media (max-width:620px){
    .topbar nav a.hide-sm{display:none;}
    .topbar nav{gap:16px;}
    .topbar-in{gap:8px;padding-inline:16px;}
    .topbar .mark{font-size:1.15rem;}
    .topbar-in>nav>a:first-child{display:none;}
    .topbar .btn-sm{padding:8px 12px;}
    .language-switch a{min-width:32px;}
  }

  /* ---------- Portada a pantalla completa, con salida directa al contenido ---------- */
  .hero{
    position:relative;
    color:#fff;
    background:#111;
  }
  .hero-stage{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    padding:100px 0 calc(96px + env(safe-area-inset-bottom));
  }
  .hero-media{
    position:absolute;
    inset:0;
    overflow:hidden;
  }
  .hero-media::before{
    content:"";
    position:absolute; inset:0;
    background:url('images/comercio_portada.jpg') center 62% / cover no-repeat;
    animation:heroZoom 16s ease-out both;
  }
  @keyframes heroZoom{from{transform:scale(1.055);} to{transform:scale(1);}}
  @media (max-width:640px){
    .hero-media::before{ background-position:65% 62%; }
  }
  /* El velo acompaña a la foto durante toda la salida de la portada. */
  .hero-media::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(58% 68% at 8% 100%, rgba(10,10,7,.88) 0%, rgba(10,10,7,0) 100%),
      linear-gradient(180deg, rgba(14,14,10,.32) 0%, rgba(14,14,10,.18) 32%, rgba(11,11,8,.42) 68%, rgba(9,9,6,.88) 100%);
  }
  .hero-content{position:relative; z-index:2; width:100%;}
  /* Recuperado del ajuste probado en Safari: no deja ver papel bajo la portada. */
  .bottom-scrim{display:none;}
  @media (hover:none) and (pointer:coarse){
    .bottom-scrim{
      display:block; position:fixed; left:0; right:0; bottom:0;
      height:calc(140px + env(safe-area-inset-bottom)); z-index:1;
      pointer-events:none;
      background:linear-gradient(180deg,rgba(9,9,6,0),rgba(9,9,6,.55) 45%,rgba(9,9,6,.95));
      opacity:1; transition:opacity .55s var(--ease);
    }
    .bottom-scrim.is-hidden{opacity:0;}
  }
  .hero-kicker{
    font-family:'Karla', sans-serif;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--accent-soft);
    margin:0 0 20px;
  }
  .hero h1{
    font-size:clamp(3.4rem, 10vw, 7rem);
    letter-spacing:-.01em;
    margin-left:-.05em;
    color:#faf5ea;
    text-shadow:0 8px 40px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4);
  }
  .hero h1 span{
    display:inline-block;
    opacity:0;
    transform:translateY(.35em);
    animation:letterIn .8s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes letterIn{ to{ opacity:1; transform:translateY(0); } }
  .hero p.subtitle{
    font-family:'Karla', sans-serif;
    font-size:clamp(1rem, 2vw, 1.15rem);
    color:rgba(255,255,255,.86);
    margin:20px 0 36px;
    max-width:58ch;
    white-space:nowrap;
    text-shadow:0 2px 16px rgba(0,0,0,.4);
  }
  @media (max-width:860px){ .hero p.subtitle{white-space:normal;} }
  .hero p.subtitle em{
    font-style:normal;
    color:var(--accent-soft);
    font-weight:600;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
  .hero-location{display:inline-block; margin-top:22px; color:rgba(255,255,255,.76); font-size:.85rem; text-underline-offset:5px;}
  .hero-location:hover{color:#fff;}

  /* Aviso de scroll: fino, discreto, se va en cuanto empiezas a bajar */
  .scroll-cue{
    position:absolute; left:50%; bottom:26px; z-index:3;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:'Karla',sans-serif; font-size:.66rem; font-weight:700;
    letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.75);
    pointer-events:none;
  }
  .scroll-cue i{
    display:block; width:1px; height:46px;
    background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0));
    animation:cueDrop 2.4s var(--ease) infinite;
  }
  @keyframes cueDrop{
    0%{transform:scaleY(0); transform-origin:top;}
    45%{transform:scaleY(1); transform-origin:top;}
    55%{transform:scaleY(1); transform-origin:bottom;}
    100%{transform:scaleY(0); transform-origin:bottom;}
  }
  @media (max-width:860px){
    .scroll-cue{bottom:20px; gap:6px;}
    .scroll-cue i{height:28px;}
  }
  @media (max-width:620px){
    .hero-ctas{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
    .hero-ctas .btn{justify-content:center; padding:12px 14px; font-size:1.05rem;}
  }
  @media (max-height:540px){ .scroll-cue{display:none;} }

  @media (prefers-reduced-motion: reduce){
    .hero h1 span{animation:none; opacity:1; transform:none;}
    .hero-media::before{animation:none;}
    .scroll-cue i{animation:none;}
    html{scroll-behavior:auto;}
  }

  /* ---------- Reveal on scroll ---------- */
  .reveal{
    /* Las entradas animadas no deben desplazar el ancla al restaurar la página. */
    overflow-anchor:none;
    opacity:0; transform:translateY(30px);
    transition:opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
    transition-delay:calc(var(--i, 0) * 90ms);
  }
  .reveal.in{opacity:1; transform:translateY(0); filter:blur(0);}
  .reveal-soft{filter:blur(7px);}
  .reveal-left{transform:translateX(-34px);}
  .reveal-left.in{transform:translateX(0);}
  .reveal-right{transform:translateX(34px);}
  .reveal-right.in{transform:translateX(0);}
  @media (max-width:860px){
    .reveal-left{transform:translateX(-20px);}
    .reveal-right{transform:translateX(20px);}
  }
  /* Titulares que se descubren desde abajo, como en una cortinilla editorial */
  .reveal-mask{
    opacity:1; transform:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path 1.15s var(--ease);
  }
  .reveal-mask.in, .reveal.in .reveal-mask{clip-path:inset(0 0 -12% 0);}
  @media (prefers-reduced-motion: reduce){
    .reveal, .reveal-left, .reveal-right, .reveal-soft, .reveal-mask{
      opacity:1; transform:none; filter:none; clip-path:none; transition:none;
    }
    .rule{transform:scaleX(1);}
  }

  /* ---------- Historia (timeline) ---------- */
  .historia-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:64px;
    align-items:center;
  }
  @media (max-width:860px){ .historia-grid{grid-template-columns:1fr; gap:40px;} }
  .historia h2{font-size:clamp(2rem,4vw,2.9rem);}
  .historia .lead{color:var(--muted); max-width:52ch; font-size:1.05rem; margin:22px 0 40px;}
  .timeline{position:relative; padding-left:28px; display:flex; flex-direction:column; gap:30px;}
  /* La linea se dibuja de arriba abajo cuando la seccion entra en pantalla */
  .timeline::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--line);
    transform:scaleY(0); transform-origin:top;
    transition:transform 1.4s var(--ease) .2s;
  }
  .timeline.in::before{transform:scaleY(1);}
  .timeline-item{position:relative;}
  .timeline-item::before{
    content:""; position:absolute; left:-34px; top:11px;
    width:11px; height:11px; border-radius:50%;
    background:var(--accent); border:2px solid var(--paper);
    transform:scale(0);
    transition:transform .5s var(--ease);
  }
  .timeline.in .timeline-item::before{transform:scale(1);}
  .timeline.in .timeline-item:nth-child(2)::before{transition-delay:.55s;}
  .timeline.in .timeline-item:nth-child(3)::before{transition-delay:.8s;}
  .timeline-item .year{font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--accent); font-weight:600;}
  .timeline-item p{margin:4px 0 0; color:var(--ink);}
  .historia-media{position:relative; border-radius:var(--radius); overflow:hidden;}
  .historia-media img{width:100%; aspect-ratio:4/5; object-fit:cover;}
  @media (prefers-reduced-motion: reduce){
    .timeline::before{transform:scaleY(1);}
    .timeline-item::before{transform:scale(1);}
  }

  /* ---------- Sabores de la casa ---------- */
  .sabores h2{font-size:clamp(2rem,4vw,2.9rem);}
  .sabores .lead{color:var(--muted); max-width:56ch; margin:22px 0 44px;}
  .platos-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:1fr;
    gap:18px;
  }
  .plato{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--paper-2);
    min-height:260px;
    grid-column:span 3;
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .plato.featured{grid-column:span 3; grid-row:span 2; min-height:552px;}
  @media (max-width:900px){
    .platos-grid{grid-template-columns:1fr 1fr;}
    .plato, .plato.featured{grid-column:span 1; grid-row:span 1; min-height:300px;}
  }
  @media (max-width:560px){
    .platos-grid{grid-template-columns:1fr;}
  }
  .plato img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform 1.1s var(--ease);
  }
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .plato:hover{z-index:2; transform:translateY(-5px); box-shadow:0 24px 44px -22px rgba(40,34,24,.55);}
    .plato:hover img{transform:scale(1.04);}
  }
  .plato-info{
    position:absolute; left:0; right:0; bottom:0;
    padding:60px 20px 20px;
    background:linear-gradient(180deg, rgba(10,10,6,0) 0%, rgba(10,10,6,.86) 100%);
    color:#fff;
  }
  .plato-tag{font-size:.8rem; color:rgba(255,255,255,.8); margin:0 0 4px;}
  .plato-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
  .plato-row h3{font-size:1.4rem; color:#fff;}
  .plato-price{font-family:'Karla',sans-serif; font-weight:700; font-size:1.05rem; color:#fff; white-space:nowrap;}
  .sabores-cta{margin-top:40px; text-align:center;}
  @media (prefers-reduced-motion: reduce){
    .plato, .plato img, .plato-info{transition:none;}
  }

  /* ---------- Reseñas reales de Google ---------- */
  .resenas{background:var(--paper); overflow:hidden;}
  .resenas-head{max-width:60ch; margin-bottom:44px;}
  .resenas h2{font-size:clamp(2rem,4vw,2.9rem);}
  .resenas .lead{color:var(--muted); margin:22px 0 0; font-size:1.05rem;}

  /* Carrusel continuo. Las tarjetas se duplican y la pista se desplaza un 50%
     exacto, asi que el bucle no tiene costura. El desplazamiento se mide en
     margenes (no en gap) para que media pista sea exactamente la mitad. */
  .marquee{
    position:relative;
    overflow:hidden;
    padding:16px 0 36px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    animation:marquee 78s linear infinite;
  }
  .marquee.is-pressed .marquee-track,
  html.photo-open .marquee-track,
  .marquee.is-paused .marquee-track{animation-play-state:paused;}
  /* El teclado necesita alcanzar las tarjetas sin perseguir una pista móvil. */
  .marquee:has(:focus-visible){overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
  .marquee:has(:focus-visible) .marquee-track{animation:none; transform:none;}
  @keyframes marquee{
    from{transform:translate3d(0,0,0);}
    to{transform:translate3d(-50%,0,0);}
  }
  .marquee-set{display:flex; margin:0; padding:0; list-style:none;}

  .resena{
    position:relative;
    width:352px;
    flex:none;
    margin-right:24px;
    display:flex; flex-direction:column;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  @media (max-width:560px){ .resena{width:80vw; max-width:330px; margin-right:16px;} }
  @media (hover:hover) and (prefers-reduced-motion:no-preference){
    .resena:hover{z-index:2; transform:translateY(-4px); box-shadow:0 16px 24px -18px rgba(40,34,24,.4);}
  }
  .resena-media{height:264px; flex:none; background:var(--paper-2);}
  .resena-photo{display:block; position:relative; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in;}
  .resena-media img{width:100%; height:100%; object-fit:cover; object-position:center 58%;}
  .resena-photo::after{
    content:'↗'; position:absolute; right:12px; bottom:12px; width:30px; height:30px;
    display:grid; place-items:center; border-radius:50%; background:rgba(28,33,25,.72); color:#fff;
    font-size:18px; opacity:0; transition:opacity .2s;
  }
  .resena-photo:hover::after, .resena-photo:focus-visible::after{opacity:1;}
  .resena-photo:focus-visible{outline-offset:-5px; outline-color:white;}
  .photo-dialog{
    max-width:min(94vw,1100px); max-height:94vh; max-height:94svh; padding:0; border:0;
    background:#171c16; color:#fff; border-radius:12px; box-shadow:0 20px 70px rgba(0,0,0,.3);
  }
  .photo-dialog::backdrop{background:rgba(15,20,14,.88);}
  .photo-dialog img{max-width:100%; max-height:80vh; max-height:80svh; width:auto; height:auto; margin:auto; object-fit:contain;}
  .photo-dialog figcaption{padding:14px 64px 14px 20px; font-size:.88rem;}
  .photo-dialog figure{margin:0;}
  .photo-close{position:absolute; top:12px; right:12px; width:44px; height:44px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:#1c2119; color:white; font-size:26px; cursor:pointer;}
  html.photo-open{overflow:hidden;}
  .resena-body{padding:22px 22px 18px; display:flex; flex-direction:column; gap:14px; flex:1;}
  .stars{display:flex; gap:3px;}
  .stars svg{width:15px; height:15px; fill:var(--accent);}
  .stars svg.off{fill:var(--line);}
  .resena blockquote{
    margin:0;
    font-family:'Cormorant Garamond', serif;
    font-size:1.24rem; line-height:1.44; color:var(--ink);
  }
  .resena-foot{
    margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
    display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap;
    font-size:.84rem; color:var(--muted);
  }
  .resena-foot .who{font-weight:700; color:var(--ink);}
  .resena-foot .when{white-space:nowrap;}
  .resenas-foot{
    margin-top:12px; display:flex; align-items:center; justify-content:center;
    gap:14px; flex-wrap:wrap; text-align:center; color:var(--muted); font-size:.95rem;
  }
  .resenas-foot a{color:var(--ink);}
  .marquee-toggle{
    padding:10px 16px; border:1px solid var(--line); border-radius:var(--radius-pill);
    background:transparent; color:var(--ink); font:inherit; font-size:.84rem; cursor:pointer;
  }
  :focus-visible{outline:2px solid var(--accent); outline-offset:5px;}
  @media (prefers-reduced-motion:reduce){
    .marquee{overflow-x:auto; scroll-snap-type:x proximity; padding-left:24px; padding-right:24px; -webkit-mask-image:none; mask-image:none;}
    .marquee-track{animation:none;}
    .marquee-set[aria-hidden="true"], .marquee-toggle{display:none;}
    .resena{scroll-snap-align:start;}
  }
  @media (hover:none){.resena-photo::after{opacity:1;}}
  @media (prefers-reduced-motion: reduce){
    .marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none;}
    .marquee-track{animation:none;}
    .resena, .resena-media img{transition:none;}
  }

  /* ---------- Collage asimetrico (Terraza / Ruta) ---------- */
  .collage-section{background:var(--paper-2);}
  .collage-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:center;
  }
  .collage-grid.flip .collage-media{order:2;}
  .collage-grid.flip .collage-text{order:1;}
  @media (max-width:860px){
    .collage-grid{grid-template-columns:1fr; gap:36px;}
    .collage-grid.flip .collage-media{order:0;}
    .collage-grid.flip .collage-text{order:0;}
  }
  .collage-text h2{font-size:clamp(1.9rem,3.6vw,2.6rem);}
  .collage-text p{color:var(--muted); max-width:48ch; font-size:1.02rem; margin:22px 0 0;}
  .collage-media{position:relative; height:440px;}
  .collage-photo{
    position:absolute; padding:0; border:0 solid var(--paper-2); border-radius:var(--radius);
    background:var(--paper-2); box-shadow:0 24px 50px -18px rgba(28,33,25,.35); cursor:pointer;
    transition:left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), border-width .7s var(--ease);
  }
  .collage-photo img{width:100%; height:100%; border-radius:inherit; object-fit:cover;}
  .collage-media .collage-photo:focus-visible{outline:3px solid var(--accent); outline-offset:5px; z-index:3;}
  .collage-media .img-big{width:72%; height:82%; left:0; top:0; z-index:1;}
  .collage-media .img-small{width:46%; height:52%; left:54%; top:48%; z-index:2; border-width:6px;}
  section:not(.collage-section) .collage-photo{border-color:var(--paper);}
  @media (prefers-reduced-motion:reduce){.collage-photo{transition:none;}}
  @media (max-width:860px){
    .collage-media{height:340px;}
  }

  /* ---------- Horario y ubicacion ---------- */
  .info-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start;}
  @media (max-width:860px){ .info-grid{grid-template-columns:1fr; gap:32px;} }
  .info-grid h2{font-size:clamp(1.9rem,3.6vw,2.6rem);}
  .info-list{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:18px;}
  .info-list li{border-top:1px solid var(--line); padding-top:14px;}
  .info-list .label{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 4px;}
  .info-list .value{font-size:1.08rem; margin:0;}
  .info-list .value + .value{margin-top:2px;}
  .info-list .value small{color:var(--muted); font-size:.85rem;}
  .info-cta{margin-top:28px;}
  .map-frame{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:100%; min-height:400px; background:var(--paper-2);}
  .map-frame iframe{width:100%; height:100%; min-height:400px; border:0; display:block; filter:saturate(.92);}

  /* ---------- Contacto / reserva ---------- */
  .contacto{
    background:var(--forest);
    color:#fff;
    overflow:hidden;
  }
  /* Grano fino sobre el verde: quita el plano de color plano y da textura de papel */
  .contacto::before{
    content:"";
    position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    opacity:.06;
    pointer-events:none;
  }
  /* Marca de agua tipografica */
  .contacto::after{
    content:"1912";
    position:absolute; right:-2vw; bottom:-4vh;
    font-family:'Cormorant Garamond', serif; font-weight:600;
    font-size:clamp(9rem, 26vw, 26rem); line-height:.8;
    color:rgba(255,255,255,.045);
    pointer-events:none; user-select:none;
  }
  .contacto .wrap{position:relative; z-index:2;}
  .contacto-kicker{
    font-family:'Karla', sans-serif;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:#c7d1bb;
    margin:0 0 16px;
  }
  .contacto h2{color:#faf5ea; font-size:clamp(2.1rem,4vw,3.1rem); letter-spacing:-.01em;}
  .contacto h2 em{font-style:italic; color:inherit;}
  .contacto .lead{color:rgba(255,255,255,.72); max-width:52ch; margin:18px 0 44px;}
  .reserva-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start;}
  @media (max-width:960px){ .reserva-grid{grid-template-columns:1fr; gap:40px;} }
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .form-grid .full{grid-column:1 / -1;}
  @media (max-width:700px){ .form-grid{grid-template-columns:1fr;} }
  .field{min-width:0; position:relative;}
  .field label{display:block; font-size:.85rem; color:rgba(255,255,255,.75); margin-bottom:6px; transition:color .25s;}
  .field input, .field textarea{
    width:100%;
    min-width:0;
    max-width:100%;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.24);
    border-radius:10px;
    padding:13px 15px;
    color:#fff;
    font-family:'Karla',sans-serif;
    font-size:1rem;
    transition:border-color .25s, background-color .25s, box-shadow .25s;
  }
  /* Safari/iOS da a los input date un ancho nativo propio que ignora width:100% y desborda la pantalla */
  .field input[type="date"]{
    color-scheme:dark;
    -webkit-appearance:none;
    appearance:none;
    display:block;
    width:100%;
    min-height:51px;
  }
  .field input[type="date"]::-webkit-date-and-time-value{text-align:left;}
  .field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.64);}
  .field input:focus, .field textarea:focus{
    outline:none;
    border-color:#c7d1bb;
    background:rgba(255,255,255,.12);
    box-shadow:0 0 0 3px rgba(199,209,187,.18);
  }
  .field:focus-within label{color:#e2e8da;}
  .form-actions{margin-top:28px;}
  .contacto .btn-primary{background:#e8ecdf; color:var(--forest);}
  .contacto .btn-primary:hover{background:#fff; box-shadow:0 12px 26px -12px rgba(0,0,0,.3);}
  .contacto :focus-visible{outline-color:#e8ecdf;}
  .form-note{font-size:.82rem; color:rgba(255,255,255,.6); margin-top:14px;}

  /* Vista previa en vivo del mensaje de WhatsApp */
  .preview-card{
    position:sticky; top:96px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    padding:20px;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  @media (max-width:960px){ .preview-card{position:static;} }
  .preview-head{
    display:flex; align-items:center; gap:12px;
    padding-bottom:16px; margin-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .preview-avatar{
    width:42px; height:42px; border-radius:50%;
    background:#c7d1bb; color:var(--forest);
    display:grid; place-items:center;
    font-family:'Cormorant Garamond', serif; font-size:1.3rem; font-weight:600;
    flex:none;
  }
  .preview-who{font-weight:700; font-size:.98rem; color:#fff; line-height:1.2;}
  .preview-state{font-size:.78rem; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:6px;}
  .preview-state i{width:7px; height:7px; border-radius:50%; background:#c7d1bb; display:block;}
  .bubble{
    background:#334b3d;
    border-radius:14px 14px 14px 4px;
    padding:14px 16px 10px;
    font-size:.95rem; line-height:1.55;
    color:#fff;
    white-space:pre-wrap;
    word-break:break-word;
    min-height:120px;
    box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
  }
  .bubble .ph{color:rgba(255,255,255,.64);}
  .bubble-time{
    display:block; text-align:right;
    font-size:.7rem; color:rgba(255,255,255,.5); margin-top:6px;
  }
  .preview-note{font-size:.78rem; color:rgba(255,255,255,.55); margin:14px 0 0; text-align:center;}
  /* Linea que parpadea al escribir, para que se note que es en vivo */
  .preview-card.is-typing .preview-state i{animation:pulse 1s infinite;}
  @keyframes pulse{50%{opacity:.25;}}
  @media (prefers-reduced-motion: reduce){
    .preview-card.is-typing .preview-state i{animation:none;}
  }

  /* ---------- Footer ---------- */
  footer{
    position:relative;
    padding:72px 0 calc(32px + env(safe-area-inset-bottom));
    background:var(--paper);
    color:var(--ink);
    border-top:1px solid var(--line);
    overflow:hidden;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    gap:40px;
  }
  @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr; gap:32px;} }
  @media (max-width:560px){ .footer-grid{grid-template-columns:1fr;} }
  footer .brand{font-family:'Cormorant Garamond', serif; font-size:1.9rem; font-weight:600; margin:0;}
  footer .claim{color:var(--muted); font-size:.95rem; margin:10px 0 0; max-width:32ch;}
  .footer-col h3{
    font-family:'Karla', sans-serif; font-size:.74rem; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
    margin:0 0 14px;
  }
  .footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .footer-col a, .footer-col span{font-size:.95rem; color:var(--ink); text-decoration:none;}
  .footer-col a{border-bottom:1px solid transparent; transition:border-color .25s;}
  .footer-col a:hover{border-bottom-color:var(--accent);}
  .footer-bottom{
    margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
    font-size:.82rem; color:var(--muted);
  }
  /* Marca de agua del ano de apertura */
  .footer-watermark{
    position:absolute; left:50%; bottom:-.14em; transform:translateX(-50%);
    font-family:'Cormorant Garamond', serif; font-weight:600;
    font-size:clamp(3rem, 13vw, 12rem); line-height:.85;
    font-variant-numeric:lining-nums; letter-spacing:-.04em;
    color:rgba(28,33,25,.06);
    white-space:nowrap; pointer-events:none; user-select:none;
  }
  @media (max-width:560px){
    .footer-watermark{font-size:17vw;bottom:-.22em;line-height:.75;}
  }

  /* ---------- Boton flotante WhatsApp ---------- */
  .whatsapp-button{
    position:fixed; right:22px; bottom:24px; z-index:60;
    width:60px; height:60px; border:0; border-radius:50%;
    background:#25d366; color:#fff;
    box-shadow:0 10px 24px -4px rgba(0,0,0,.35), 0 4px 10px -2px rgba(0,0,0,.25);
    display:grid; place-items:center; cursor:pointer;
    transition:transform .2s cubic-bezier(.2,.7,.2,1);
  }
  .whatsapp-button svg{width:30px; height:30px;}
  .whatsapp-button:hover{transform:scale(1.06);}
  .whatsapp-button:hover .whatsapp-tip{opacity:1; transform:translate(0,-50%);}
  .whatsapp-tip{
    position:absolute; right:70px; top:50%;
    transform:translate(6px,-50%);
    white-space:nowrap; background:var(--ink); color:#fff;
    font-size:.8rem; font-weight:600; padding:8px 14px; border-radius:8px;
    opacity:0; transition:.2s; pointer-events:none;
  }
  @media (max-width:560px){ .whatsapp-tip{display:none;} }

  .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.rating-symbols{position:absolute;}