/* ═══════════════════════════════════════════════════════════════════════════
   BUENA MOZA BISTRÓ — hoja única
   Su carta impresa, abierta bajo su sombrilla: papel crema, tinta azul marino,
   la marquesina de rayas celeste de su portada, y su comida entrando por los
   bordes. Todo medido sobre su propio material (identidad.md).
   Sin frameworks. Cuatro capas. Un solo corte de maquetación en rem.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  button, input { font: inherit; color: inherit; }
}

@layer base {
  :root {
    /* el papel — su carta */
    --papel:   #faf3e4;
    --papel-2: #f1ece0;
    --papel-3: #e7e2d5;
    /* la tinta — su azul marino, medido */
    --marino:   #1a3e6e;
    --marino-2: #173868;
    --marino-3: #133156;
    /* la marquesina — la portada de su carta */
    --celeste:   #a6cee1;
    --celeste-2: #d3e5ef;
    /* el latón — el letrero real del jardín */
    --laton:       #c6a75b;
    --laton-claro: #dcc48a;
    /* tinta sobre marino */
    --crema-tinta: #faf3e4;
    --crema-tenue: hsl(43 40% 78%);

    --f-display: "Bodoni Moda", "Didot", "Bodoni MT", "Times New Roman", serif;
    --f-texto:   "Noto Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --f-script:  "Pinyon Script", "Snell Roundhand", "Brush Script MT", cursive;

    /* siete tamaños, y ninguno más */
    --t-1: 0.8125rem;
    --t0:  1rem;
    --t1:  1.125rem;
    --t2:  1.375rem;
    --t3:  1.75rem;
    --t4:  clamp(2.125rem, 1.4rem + 2.6vw, 3rem);
    --t5:  clamp(2.75rem, 1.6rem + 4.6vw, 4.25rem);

    --ancho:       min(100% - 2.5rem, 72rem);
    --ancho-texto: min(100% - 2.5rem, 42rem);
    --seccion:     clamp(4rem, 6vw + 2rem, 7.5rem);
    --curva:       cubic-bezier(0.22, 0.61, 0.36, 1);
    --arco:        50% 50% 0 0 / 30% 30% 0 0;
    --cabecera-alto: 4.5rem;
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--cabecera-alto) + 1rem);
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--f-texto);
    font-weight: 400;
    font-size: var(--t0);
    line-height: 1.6;
    color: var(--marino);
    background: var(--papel);
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: var(--f-display);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t5); }
  h2 { font-size: var(--t4); }
  h3 { font-size: var(--t2); line-height: 1.2; }
  p  { text-wrap: pretty; max-width: 62ch; }

  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--laton);
    outline-offset: 3px;
  }

  em { font-family: var(--f-display); font-style: italic; font-weight: 500; }

  ::selection { background: var(--celeste); color: var(--marino-3); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── piezas pequeñas ─────────────────────────────────────────────────── */
  main, .pie { overflow-x: clip; }      /* clip, no hidden: lo que asoma por los bordes no crea scroll horizontal y sticky sigue funcionando */
  .envoltura { width: var(--ancho); margin-inline: auto; }
  .salto {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: .6rem 1rem; background: var(--marino); color: var(--crema-tinta);
    border-radius: 0 0 .5rem .5rem;
  }
  .salto:focus { top: 0; }

  .sobretitulo {
    font-family: var(--f-texto);
    font-size: var(--t-1);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--marino);
    opacity: .78;
  }
  .oscuro .sobretitulo { color: var(--laton-claro); opacity: 1; }

  /* el fleurón de su carta a cada lado de un título: ✦ MENÚ ✦ */
  .titulo-ornado {
    display: flex; align-items: center; justify-content: center; gap: .9em;
    width: fit-content; max-width: 100%; margin-inline: auto;   /* los fleurones abrazan el texto, no el contenedor */
    text-align: center; text-wrap: pretty;
  }
  .titulo-ornado::before, .titulo-ornado::after {
    content: ''; flex: 0 0 auto; width: 1.15em; height: 1.15em;
    background: url("../img/fleuron-izq.30bedd44.svg") center / contain no-repeat;
  }
  .titulo-ornado::after { background-image: url("../img/fleuron-der.b5346b42.svg"); }
  .oscuro .titulo-ornado::before, .oscuro .titulo-ornado::after { filter: brightness(0) invert(1) sepia(.35) saturate(2) brightness(.95); }

  .script {
    font-family: var(--f-script);
    font-weight: 400;
    font-size: 1.75em;
    line-height: .9;
    letter-spacing: 0;
  }

  /* ── botones: un llamado, un color ───────────────────────────────────── */
  .boton {
    --fondo: var(--marino);
    --tinta: var(--crema-tinta);
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3rem; padding: .7rem 1.5rem;
    font-family: var(--f-texto); font-size: var(--t0); font-weight: 600;
    letter-spacing: .02em; text-decoration: none; white-space: nowrap;
    color: var(--tinta); background: var(--fondo);
    border: 1.5px solid var(--marino); border-radius: 999px;
    transition: transform .35s var(--curva), background-color .35s var(--curva), color .35s var(--curva), box-shadow .35s var(--curva);
  }
  .boton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--marino-3); }
  .boton:active { transform: translateY(0); }
  .boton--secundario { --fondo: transparent; --tinta: var(--marino); }
  .boton--secundario:hover { background: var(--marino); color: var(--crema-tinta); }
  .oscuro .boton { --fondo: var(--papel); --tinta: var(--marino); border-color: var(--papel); }
  .oscuro .boton--secundario { --fondo: transparent; --tinta: var(--papel); }
  .oscuro .boton--secundario:hover { background: var(--papel); color: var(--marino); }
  @media (prefers-reduced-motion: reduce) { .boton, .boton:hover { transition: none; transform: none; } }

  /* ── la marquesina: las rayas de la portada de su carta ──────────────── */
  .marquesina {
    height: .875rem;
    background: repeating-linear-gradient(90deg, var(--celeste) 0 1.5rem, var(--papel) 1.5rem 3rem);
    position: relative;
  }
  /* el festón: el canto ondulado de un toldo */
  .marquesina::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: .55rem;
    background: radial-gradient(circle at 50% 0, var(--celeste) 0 .75rem, transparent .8rem);
    background-size: 1.5rem .55rem;
    background-position: 0 0;
    opacity: .9;
  }
  .marquesina--fina { height: .5rem; }
  .marquesina--fina::after { display: none; }

  /* ── superficies ─────────────────────────────────────────────────────── */
  .oscuro { background: var(--marino-2); color: var(--crema-tinta); }
  .oscuro h1, .oscuro h2, .oscuro h3 { color: var(--crema-tinta); }
  .oscuro ::selection { background: var(--laton-claro); color: var(--marino-3); }
  .papel-2 { background: var(--papel-2); }

  /* luz de la mañana entrando por la sombrilla — compositor puro, se apaga con reduced-motion */
  .ambiente { position: relative; isolation: isolate; overflow: hidden; }
  .ambiente > * { position: relative; z-index: 1; }
  .ambiente::before {
    content: ''; position: absolute; inset: -30% -20%; z-index: 0; pointer-events: none;
    opacity: .5;
    background: repeating-linear-gradient(104deg,
      transparent 0 60px,
      color-mix(in srgb, var(--papel) 9%, transparent) 60px 96px,
      transparent 96px 190px,
      color-mix(in srgb, var(--celeste) 10%, transparent) 190px 214px,
      transparent 214px 340px);
    transform: rotate(-14deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ambiente::before { animation: ambiente-deriva 74s linear infinite alternate; will-change: transform; }
  }
  @keyframes ambiente-deriva {
    from { transform: translate3d(-3%, -2%, 0) rotate(-14deg); }
    to   { transform: translate3d( 3%,  2%, 0) rotate(-14deg); }
  }

  /* ── la silueta: la foto adopta el arco de su emblema ────────────────── */
  .silueta {
    position: relative; overflow: hidden; isolation: isolate;
    border-radius: var(--arco);
  }
  .silueta > img, .silueta > picture, .silueta > picture > img { width: 100%; height: 100%; object-fit: cover; }
  .silueta > picture { display: block; }
  .silueta.lente { border-radius: 50%; }
  .silueta.ficha { border-radius: 2px 2px 34% 2px; }
  @supports not (border-radius: 50% 50% 0 0 / 30% 30% 0 0) { .silueta { border-radius: 4px; } }
  /* lo que cruza el borde: sus acuarelas y sus mimosas */
  .cruza { position: absolute; pointer-events: none; z-index: 2; width: var(--cruza-ancho, 30%); }
  .cruza img { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgb(19 49 86 / .28)); }

  /* ── cabecera ────────────────────────────────────────────────────────── */
  .cabecera {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    border-bottom: 1px solid var(--papel-3);
  }
  .cabecera .envoltura {
    min-height: var(--cabecera-alto);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .marca { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: .25rem; }
  .marca img { width: clamp(9.5rem, 8rem + 5vw, 13rem); height: auto; }
  .nav ul { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); align-items: center; }
  .nav a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    text-decoration: none; font-weight: 500; font-size: var(--t0);
    padding: .5rem 0; border-bottom: 1.5px solid transparent;
    transition: border-color .3s var(--curva);
  }
  .nav a:hover { border-bottom-color: var(--marino); }
  .cabecera .boton { min-height: 2.75rem; padding-block: .5rem; }
  @media (width < 56.25rem) {
    .nav { display: none; }                /* en móvil la navegación es el propio scroll y las dos acciones del héroe */
  }

  /* ── héroe ───────────────────────────────────────────────────────────── */
  .heroe { padding-block: clamp(2rem, 5vw, 4.5rem) 0; }
  .heroe__rejilla { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
  .heroe__texto { max-width: 36rem; }
  .heroe h1 { margin-top: .6rem; color: var(--marino); }
  .heroe__lema {
    margin-top: 1.1rem;
    font-family: var(--f-display); font-style: italic; font-weight: 400;
    font-size: var(--t2); line-height: 1.25; max-width: none;
  }
  .heroe__lema .script { color: var(--marino); }
  .heroe__parrafo { margin-top: 1.25rem; font-size: var(--t1); max-width: 34rem; }
  .acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
  .datos {
    display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
    margin-top: 1.75rem; padding-top: 1.1rem;
    border-top: 1px solid var(--papel-3);
    font-size: var(--t-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  }
  .datos li { display: inline-flex; align-items: center; gap: .45rem; }
  .datos li::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--laton); }
  .datos a { display: inline-block; padding-block: .8rem; margin-block: -.8rem; text-decoration-thickness: 1.5px; }
  @media (width < 56.25rem) {
    /* el índice de la carta en el teléfono: píldoras más cortas para que asome la tercera y se entienda que desliza */
    .carta__indice a { padding: .5rem .7rem; font-size: .75rem; letter-spacing: .02em; }
  }
  .heroe__figura { position: relative; }
  .heroe__foto { aspect-ratio: 4 / 4.6; --arco: 50% 50% 0 0 / 34% 34% 0 0; }
  /* la acuarela cruza el canto del arco hacia el papel: no compite con el plato real de la foto */
  .heroe__figura .cruza { left: -5%; bottom: -7%; --cruza-ancho: 31%; transform: rotate(-9.431deg); }
  .heroe .marquesina { margin-top: clamp(2.5rem, 5vw, 4rem); }
  @media (width < 56.25rem) {
    /* en el teléfono la foto va primero: es lo que vienen a ver; titular y botones caben debajo en la misma pantalla */
    .heroe__figura { order: -1; }
    .heroe__foto { aspect-ratio: 4 / 3.2; }
    .heroe__figura .cruza { left: -4%; bottom: -9%; --cruza-ancho: 30%; }
  }
  @media (width >= 56.25rem) {
    .heroe__rejilla { grid-template-columns: 1.05fr .95fr; }
    .heroe__foto { aspect-ratio: 4 / 4.2; }
  }

  /* ── secciones ───────────────────────────────────────────────────────── */
  .seccion { padding-block: var(--seccion); }
  .seccion__cabeza { text-align: center; max-width: 44rem; margin-inline: auto; }
  .seccion__cabeza h2 { margin-top: .6rem; }
  .seccion__cabeza p { margin: 1rem auto 0; font-size: var(--t1); }

  /* ── las dos puertas: ¿dulce o salado? ───────────────────────────────── */
  .puertas { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
  .puerta {
    position: relative; display: grid; gap: 0;
    background: var(--papel-2); border: 1px solid var(--papel-3);
    border-radius: 1.25rem; overflow: hidden;
    text-decoration: none; color: inherit;
    transition: transform .45s var(--curva), box-shadow .45s var(--curva);
  }
  .puerta:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px var(--marino-3); }
  .puerta .silueta { aspect-ratio: 5 / 4; --arco: 0; border-radius: 0; }
  .puerta__cuerpo { padding: 1.5rem 1.6rem 1.75rem; display: grid; align-content: center; }
  /* la palabra que organiza el sitio, a escala de titular */
  .puerta__cuerpo h3 { font-size: var(--t5); line-height: 1; }
  .puerta__cuerpo h3 .script { font-size: 1.05em; }
  .puerta__cuerpo p { margin-top: .9rem; }
  .puerta__enlace { display: inline-block; margin-top: 1rem; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
  @media (width >= 56.25rem) {
    .puertas { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .puerta { grid-template-columns: 1fr 1fr; }
    .puerta .silueta { aspect-ratio: auto; height: 100%; min-height: 14rem; }
  }
  @media (prefers-reduced-motion: reduce) { .puerta, .puerta:hover { transition: none; transform: none; } }

  /* ── la estrella: Pancakes Spaguetti ─────────────────────────────────── */
  .estrella .envoltura { display: grid; gap: 2rem; align-items: center; }
  .estrella__figura { position: relative; max-width: 30rem; margin-inline: auto; width: 100%; }
  .estrella__figura img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .35)); }
  .estrella__sello {
    position: absolute; right: 2%; top: 3%;
    width: clamp(6rem, 22%, 8.5rem); aspect-ratio: 1;
    display: grid; place-items: center; text-align: center;
    border-radius: 50%; background: var(--papel); color: var(--marino);
    font-family: var(--f-display); font-style: italic; font-size: var(--t0); line-height: 1.1;
    padding: .75rem;
    transform: rotate(9.431deg);
    box-shadow: 0 16px 30px -18px rgb(0 0 0 / .6);
  }
  .estrella__sello strong { display: block; font-size: var(--t2); font-style: normal; font-weight: 500; }
  .estrella__texto h2 { font-size: var(--t5); }
  .estrella__texto h2 em { color: var(--laton-claro); }
  .estrella__texto .precio { margin-top: 1rem; font-family: var(--f-display); font-size: var(--t3); color: var(--laton-claro); }
  .estrella__texto p { margin-top: 1rem; font-size: var(--t1); color: var(--crema-tinta); }
  .estrella__texto .nota { font-style: italic; font-family: var(--f-display); font-size: var(--t2); color: var(--crema-tenue); margin-top: 1.25rem; }
  @media (width >= 56.25rem) {
    .estrella .envoltura { grid-template-columns: .9fr 1.1fr; gap: 4rem; }
  }

  /* ── la carta ────────────────────────────────────────────────────────── */
  .carta__avisos {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem;
    margin-top: 1.5rem; font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  }
  .carta__avisos li { padding: .45rem .9rem; border: 1px solid var(--marino); border-radius: 999px; }

  /* el filtro dulce/salado: solo CSS y anclas (#dulce / #salado), sin JavaScript.
     Por defecto se ve todo; el lado no elegido se atenúa, nunca desaparece. */
  .lados { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; flex-wrap: wrap; }
  .lados a {
    display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; text-decoration: none;
    padding: .6rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--marino);
    font-weight: 600; font-size: var(--t0); line-height: 1; background: transparent;
    transition: background-color .3s var(--curva), color .3s var(--curva);
  }
  .lados a em { font-size: var(--t1); }
  .lados a:hover { background: var(--papel-3); }
  /* el estado activo es un estado, no un llamado: fondo de papel y borde doble, nunca el marino del botón */
  .carta:has(#dulce:target)  .lados a[href="#dulce"],
  .carta:has(#salado:target) .lados a[href="#salado"],
  .carta:not(:has(#dulce:target, #salado:target)) .lados a[href="#carta"] { background: var(--papel-3); box-shadow: inset 0 0 0 1.5px var(--marino); }
  .carta:has(#dulce:target)  .plato[data-lado="salado"],
  .carta:has(#salado:target) .plato[data-lado="dulce"],
  .carta:has(#dulce:target)  .grupo[data-lado="salado"],
  .carta:has(#salado:target) .grupo[data-lado="dulce"] { opacity: .3; }
  .plato, .grupo { transition: opacity .4s var(--curva); }
  #dulce, #salado { scroll-margin-top: calc(var(--cabecera-alto) + .5rem); }

  /* las mimosas recortadas de su carta, asomando en el grupo de bebidas */
  .grupo { position: relative; }
  .grupo__figura { display: none; }
  @media (width >= 56.25rem) {
    .grupo__figura { display: block; position: absolute; right: -2rem; top: 1.5rem; width: 9rem; pointer-events: none; z-index: 1; }
    .grupo__figura img { filter: drop-shadow(0 14px 18px rgb(19 49 86 / .25)); transform: rotate(6.56deg); }
    #bebidas .grupo__cabeza { padding-right: 9rem; }
  }

  /* índice pegajoso de secciones de la carta */
  .carta__indice {
    position: sticky; top: var(--cabecera-alto); z-index: 40;
    margin-top: 2.5rem; padding: .6rem 0;
    background: color-mix(in srgb, var(--papel) 94%, transparent);
    border-block: 1px solid var(--papel-3);
  }
  .carta__indice ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-inline: .25rem; }
  .carta__indice ul::-webkit-scrollbar { display: none; }
  /* en el teléfono el índice se desplaza en horizontal: el desvanecido del borde derecho lo dice sin flechas */
  .carta__indice::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3.5rem; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--papel));
  }
  @media (width >= 56.25rem) { .carta__indice::after { display: none; } .carta__indice ul { justify-content: center; flex-wrap: wrap; } }
  .carta__indice a {
    display: inline-flex; align-items: center; min-height: 2.75rem; white-space: nowrap; text-decoration: none;
    padding: .5rem .9rem; border-radius: 999px; font-size: var(--t-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  }
  .carta__indice a:hover { background: var(--papel-3); }

  .grupo { padding-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: calc(var(--cabecera-alto) + 4.5rem); }
  .grupo__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1.5px solid var(--marino); padding-bottom: .6rem; }
  .grupo__cabeza h3 { font-size: var(--t3); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
  .grupo__cabeza .nota { font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .75; text-align: right; }
  .platos { display: grid; gap: 1.25rem 3rem; margin-top: 1.5rem; }
  @media (width >= 56.25rem) { .platos { grid-template-columns: 1fr 1fr; } .platos--compacta { grid-template-columns: 1fr 1fr 1fr; gap: .75rem 3rem; } }
  .plato { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; align-items: baseline; align-content: start; }
  .plato__nombre {
    font-weight: 500; font-size: var(--t1); line-height: 1.3;
    /* la línea de puntos de su carta impresa */
    display: flex; align-items: baseline; gap: .5rem;
  }
  .plato__nombre::after { content: ''; flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--marino) 55%, transparent); transform: translateY(-.3em); min-width: 1.5rem; }
  /* precios en Noto Sans, como en su carta impresa: a este tamaño el «4» de la didona se confunde con un «1» */
  .plato__precio { font-family: var(--f-texto); font-weight: 600; font-size: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .plato__desc { grid-column: 1 / -1; font-size: var(--t-1); line-height: 1.5; color: color-mix(in srgb, var(--marino) 82%, var(--papel)); max-width: 44ch; }
  .plato--casa .plato__nombre::before { content: ''; width: .9em; height: .9em; flex: none; background: url("../img/emblema.bd09ec0e.svg") center / contain no-repeat; align-self: center; }
  .plato--estrella .plato__nombre { font-family: var(--f-display); font-size: var(--t2); }
  .carta__pie { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; font-size: var(--t-1); opacity: .8; }
  .carta__pie a { font-weight: 600; }

  /* ── el jardín ───────────────────────────────────────────────────────── */
  .jardin__rejilla { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
  .jardin__rejilla .silueta { aspect-ratio: 4 / 5; }
  .jardin__rejilla > .silueta:nth-child(2) { --arco: 2px 2px 34% 2px; aspect-ratio: 4 / 3; }   /* el letrero entero, sin decapitarlo */
  .jardin__lente { position: relative; }
  .jardin__lente .silueta { aspect-ratio: 1; --arco: 50%; }
  .jardin__lente .cruza { right: -6%; bottom: -5%; --cruza-ancho: 36%; transform: rotate(-6.56deg); }
  /* los rasgos como columnas de una carta, no como tarjetas: un filete de latón y la palabra en cursiva */
  .rasgos { display: grid; gap: 1.5rem 2rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
  .rasgo { padding-top: 1rem; border-top: 1px solid var(--laton); }
  .rasgo h3 { font-size: var(--t2); font-style: italic; font-weight: 400; }
  .rasgo p { margin-top: .5rem; font-size: var(--t0); }
  .cita {
    margin: clamp(2.5rem, 5vw, 4rem) auto 0; max-width: 40rem; text-align: center;
    font-family: var(--f-display); font-style: italic; font-size: var(--t3); line-height: 1.25;
  }
  .cita cite { display: block; margin-top: .75rem; font-family: var(--f-texto); font-style: normal; font-size: var(--t-1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
  @media (width >= 56.25rem) {
    .jardin__rejilla { grid-template-columns: 1.1fr 1fr .9fr; align-items: end; }
    .rasgos { grid-template-columns: repeat(4, 1fr); }
  }

  /* ── cómo llegar ─────────────────────────────────────────────────────── */
  .visita .envoltura { display: grid; gap: 2rem; align-items: center; }
  .visita__datos dl { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
  .visita__datos dt { font-size: var(--t-1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--laton-claro); }
  .visita__datos dd { margin-top: .2rem; font-size: var(--t1); }
  .visita__datos dd strong { font-family: var(--f-display); font-weight: 500; font-size: var(--t2); }
  .visita__datos dd a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; font-weight: 600; }
  .visita__datos .acciones { margin-top: 1.5rem; }
  .mapa { position: relative; border-radius: var(--arco); overflow: hidden; isolation: isolate; box-shadow: 0 30px 60px -40px rgb(0 0 0 / .7); }
  .mapa img { width: 100%; height: 100%; object-fit: cover; }
  .mapa__pin {
    position: absolute; left: var(--pin-x); top: var(--pin-y);
    width: 2.4rem; height: 2.4rem; transform: translate(-50%, -100%);
    background: url("../img/emblema.bd09ec0e.svg") center / 62% no-repeat, var(--papel);
    border: 2px solid var(--marino); border-radius: 50% 50% 50% 0; rotate: -45deg;
  }
  .mapa__pin::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .mapa__atribucion { position: absolute; right: .5rem; bottom: .4rem; font-size: .75rem; padding: .15rem .45rem; background: rgb(250 243 228 / .88); color: var(--marino); border-radius: .35rem; }
  .redes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
  .redes a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; text-decoration: none; padding: .6rem 1rem; border: 1px solid color-mix(in srgb, var(--papel) 45%, transparent); border-radius: 999px; font-weight: 600; font-size: var(--t-1); letter-spacing: .04em; transition: background-color .3s var(--curva), color .3s var(--curva); }
  .redes a:hover { background: var(--papel); color: var(--marino); }
  .redes svg { width: 1.1em; height: 1.1em; fill: currentColor; }
  @media (width >= 56.25rem) {
    .visita .envoltura { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
    .mapa { aspect-ratio: 4 / 3.4; }
  }

  /* ── pie ─────────────────────────────────────────────────────────────── */
  .pie { padding-block: 3rem 2.5rem; border-top: 1px solid var(--papel-3); }
  .pie .envoltura { display: grid; gap: 1.5rem; align-items: center; }
  .pie__marca img { width: 12rem; }
  .pie__texto { font-size: var(--t-1); line-height: 1.7; }
  .pie__texto strong { font-weight: 600; }
  .pie__enlaces { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .pie__enlaces a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .carta__pie a { display: inline-block; padding-block: .75rem; }
  @media (width >= 56.25rem) { .pie .envoltura { grid-template-columns: auto 1fr auto; gap: 3rem; } }

  /* Sin revelado al hacer scroll: el contenido nunca depende de una animación
     (ref-fullpage-rompe-view-timeline · feedback-contenido-nunca-depende-de-js). */
}

@layer utilities {
  .visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .centrado { text-align: center; }
}