/* ============================================================================
   styles.css — LA ESCUELA DE CANAL (escuela_v2)
   Estilos propios sobre tokens.css. Sin Bootstrap: layout con flex/grid.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-ink); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--lec-vino); }
/* text-wrap reparte las líneas para que no quede una palabra sola al final:
   «balance» en titulares (pocas líneas, las iguala) y «pretty» en párrafos
   (solo cuida la última). Es una mejora progresiva: el navegador que no lo
   entienda parte como siempre, así que no sustituye a marcar con .nowrap lo
   que no deba separarse nunca. */
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--color-heading); line-height: 1.15; font-weight: var(--fw-semibold); margin: 0 0 var(--sp-4); text-wrap: balance; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
/* Anclas (#pagos, #lista-espera…): que no queden ocultas bajo el header sticky */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.lec-icon { display: inline-block; vertical-align: middle; flex: none; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--lec-vino); color: #fff; padding: .5rem 1rem; z-index: 200; }
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-head); font-weight: var(--fw-medium); font-size: var(--fs-sm);
  padding: .7rem 1.3rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; transition: all var(--transition);
  background: var(--color-accent); color: #fff;
}
.btn:hover { background: var(--color-accent-ink); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--lec-vino); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--lec-melocoton); color: var(--lec-vino); border-color: var(--lec-melocoton); }
.btn--contacto { background: var(--lec-vino); }
.btn--contacto:hover { background: var(--lec-vino-2); }

/* ============================================================================
   HEADER
   ========================================================================== */
/* Cabecera en dos pisos: [topbar] · [fila de marca con el logo grande] · [franja de nav].
   La topbar NO es sticky (va fuera de .site-header): se marcha sola al hacer scroll.
   Sticky queda solo marca + navegación, con altura CONSTANTE: .is-scrolled solo
   añade sombra. Nada dentro del header sticky debe cambiar de alto al hacer scroll
   —eso movía el contenido, volvía a cruzar el umbral y entraba en bucle (parpadeo). */
.topbar { background: var(--lec-vino); color: #f3e6d8; font-size: var(--fs-xs); }
.topbar__inner { display: flex; gap: var(--sp-6); align-items: center; min-height: 38px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .4rem; color: #f3e6d8; min-height: 28px; }
.topbar__item:hover { color: #fff; }
.topbar__item--end { margin-left: auto; }   /* empuja la dirección al extremo derecho */

.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-bg); box-shadow: var(--shadow-sm); }
.site-header.is-scrolled { box-shadow: var(--shadow); }

/* Fila de marca */
.brandbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); padding-block: var(--sp-4) var(--sp-3); }
.brandbar__claim { font-family: var(--font-head); font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-soft); white-space: nowrap; }
.brandbar__actions { display: flex; justify-content: flex-end; }
.brand { min-width: 0; }   /* deja que el logo encoja dentro de su columna del grid */
.brand img { width: clamp(320px, 44vw, 620px); height: auto; }
/* El header sticky mantiene SIEMPRE la misma altura. Si al hacer scroll encogiera
   el logo, el hueco que el header ocupa en el flujo se reduciría y el contenido
   pegaría un tirón hacia arriba. La sensación de "compactar" la da la topbar, que
   se marcha con el scroll por estar fuera del sticky. */

/* Franja de navegación */
.navrow { border-top: 1px solid var(--color-border); background: var(--lec-crema-2); }
.navrow__inner { display: flex; justify-content: center; }

/* Mega menú (desktop) */
.mega__list { list-style: none; display: flex; gap: var(--sp-2); margin: 0; padding: 0; }
.mega__item { position: relative; }
.mega__top {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--font-head); font-weight: var(--fw-medium); font-size: .82rem;
  letter-spacing: .01em; text-transform: uppercase; color: var(--lec-vino);
  padding: .6rem .7rem; border-radius: var(--radius-sm); white-space: nowrap;
}
/* --color-accent-ink y no --color-accent: el terracota sobre melocotón se
   quedaba en 3,9:1 de contraste (el mínimo AA es 4,5:1); el oscuro da 5:1. */
.mega__top:hover, .mega__top.is-active { color: var(--color-accent-ink); background: var(--lec-melocoton); }
.mega__caret { transition: transform var(--transition); }
.mega__item:hover .mega__caret { transform: rotate(180deg); }

.mega__panel {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 280px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--sp-4);
  opacity: 0; visibility: hidden; transition: all var(--transition); z-index: 120;
}
.mega__item:hover .mega__panel, .mega__item:focus-within .mega__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* El panel se centra bajo su epígrafe, pero el del PRIMERO y el del ÚLTIMO no
   caben así cuando la barra ocupa casi todo el ancho (entre 1081px y ~1210px):
   uno se salía por la izquierda y el otro generaba scroll horizontal. Se anclan
   a su lado en vez de centrarse, y se limita el ancho al del viewport. */
.mega__panel { max-width: min(360px, calc(100vw - 32px)); }
.mega__item:first-child .mega__panel { left: 0; transform: translateX(0) translateY(8px); }
.mega__item:first-child:hover .mega__panel,
.mega__item:first-child:focus-within .mega__panel { transform: translateX(0) translateY(0); }
.mega__item:last-child .mega__panel { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.mega__item:last-child:hover .mega__panel,
.mega__item:last-child:focus-within .mega__panel { transform: translateX(0) translateY(0); }
/* Puente invisible sobre el hueco link→panel: si no, el panel se cierra al bajar el ratón */
.mega__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.mega__panel-head { display: flex; align-items: center; gap: .75rem; padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--color-border); }
.mega__panel-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lec-melocoton); color: var(--color-accent); flex: none; }
.mega__panel-head strong { display: block; font-family: var(--font-head); color: var(--lec-vino); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .02em; }
.mega__panel-head small { color: var(--color-text-soft); font-size: var(--fs-xs); }
.mega__sublist { list-style: none; margin: 0; padding: 0; }
.mega__sublist a { display: flex; flex-direction: column; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--fs-sm); }
.mega__sublist a:hover { background: var(--lec-crema-2); color: var(--lec-vino); }
.mega__sublist em { font-style: normal; font-size: var(--fs-xs); color: var(--color-accent); }

.menu-toggle { display: none; background: none; border: none; color: var(--lec-vino); cursor: pointer; padding: .3rem; }

/* ============================================================================
   MENÚ MÓVIL
   ========================================================================== */
/* El estado cerrado tiene que estar cerrado DE VERDAD. Con solo
   `transform: translateX(100%)` el panel salía de la pantalla pero seguía en el
   orden de tabulación: 37 paradas de teclado invisibles en todas las páginas,
   también en escritorio, donde ni siquiera se puede abrir. `visibility: hidden`
   lo saca del foco y del árbol de accesibilidad; se retrasa su transición para
   no cortar la animación de salida. */
.mobile-menu {
  position: fixed; inset: 0 0 0 auto; width: min(88vw, 380px);
  background: var(--color-surface); z-index: 200; box-shadow: var(--shadow-lg);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition), visibility 0s linear .25s;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition), visibility 0s;
}
/* Por encima de 1080px el panel no se usa (.menu-toggle está oculto): fuera. */
@media (min-width: 1081px) { .mobile-menu { display: none; } }
body.menu-open { overflow: hidden; }
/* Cabecera del panel: logo (enlace a inicio) + botón de cerrar. Sustituye al
   hueco vacío que antes se reservaba con padding para no tapar el header. */
.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface); z-index: 2;
}
.mobile-menu__brand img { width: min(210px, calc(100% - 8px)); height: auto; }
.mobile-menu__close { display: grid; place-items: center; width: 42px; height: 42px; flex: none; background: var(--lec-melocoton); border: none; border-radius: 50%; color: var(--lec-vino); cursor: pointer; }
.mobile-menu__close:hover { background: var(--lec-vino); color: #fff; }
.mobile-menu__list { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-8); }
.mobile-menu__row { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__row > a { display: flex; align-items: center; gap: .6rem; flex: 1; padding: .85rem 0; font-family: var(--font-head); font-weight: var(--fw-medium); color: var(--lec-vino); text-transform: uppercase; font-size: .82rem; }
/* Los mismos iconos de sección que el menú de escritorio y la portada (antes,
   iconos de línea genéricos). Sin ilustración, cae al icono de siempre. */
.mobile-menu__ilu { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; }
.mobile-menu__ilu .lec-ilu { width: 32px; height: 32px; }
.mobile-menu__group { border-bottom: 1px solid var(--color-border); }
.mobile-menu__expand { background: none; border: none; color: var(--color-accent); padding: .5rem; cursor: pointer; }
.mobile-menu__expand .lec-icon { transition: transform var(--transition); }
.mobile-menu__group.is-open .mobile-menu__expand .lec-icon { transform: rotate(180deg); }
/* Igual que el panel: `max-height: 0` oculta pero no quita el foco, así que los
   20 subenlaces plegados seguían siendo tabulables. */
.mobile-menu__sub { list-style: none; margin: 0; padding: 0 0 var(--sp-3) var(--sp-8); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height var(--transition), visibility 0s linear .25s; }
.mobile-menu__group.is-open .mobile-menu__sub { max-height: 400px; visibility: visible; transition: max-height var(--transition), visibility 0s; }
.mobile-menu__sub a { display: block; padding: .45rem 0; color: var(--color-text); font-size: var(--fs-sm); }
.mobile-menu__cta { margin-top: var(--sp-6); }
.menu-backdrop { position: fixed; inset: 0; background: rgba(58,43,40,.45); z-index: 150; opacity: 0; visibility: hidden; transition: opacity var(--transition); }
.menu-backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: var(--sp-20) 0 var(--sp-16); background:
    radial-gradient(60% 80% at 85% 20%, var(--lec-melocoton) 0%, transparent 60%),
    var(--color-bg); overflow: hidden; }
.hero__inner { max-width: 680px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); color: var(--color-accent); font-weight: var(--fw-semibold); margin-bottom: var(--sp-4); }
.hero h1 { margin-bottom: var(--sp-6); }
.hero h1 span { color: var(--color-accent); }
.hero__lead { font-size: var(--fs-lg); color: var(--color-text-soft); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero .container { position: relative; z-index: 1; }

/* Hero de la home: la foto de la fachada a sangre bajo un velo vino que la
   oscurece por la izquierda, donde va el titular en blanco. Un velo crema
   (como el de la ilustración que había antes) aclaraba justo el rótulo «LA
   ESCUELA DE CANAL»; el vino lo deja ver, más apagado, y es el color del
   propio rótulo de la fachada. */
.hero--foto { padding: 0; background: var(--lec-vino); color: #fff; isolation: isolate; }
.hero--foto .hero__foto { position: absolute; inset: 0; z-index: 0; }
.hero--foto .hero__foto picture { display: block; width: 100%; height: 100%; }
.hero--foto .hero__foto img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Algo por encima del centro: al recortar en alto sobra acera, no rótulos. */
  object-position: 50% 25%;
}
.hero--foto .hero__velo {
  position: absolute; inset: 0; z-index: 1;
  /* Calculado para la foto panorámica de la fachada (21:9), que deja la
     pared blanca en la mitad izquierda: el velo la cubre y se desvanece justo
     antes de la fachada, que empieza hacia el 49 % del ancho. */
  background: linear-gradient(100deg,
    rgba(var(--lec-vino-rgb), .93) 0%,
    rgba(var(--lec-vino-rgb), .9)  32%,
    rgba(var(--lec-vino-rgb), .55) 43%,
    rgba(var(--lec-vino-rgb), .12) 49%,
    rgba(var(--lec-vino-rgb), 0)   53%);
}
/* El contenedor mantiene el ancho y los márgenes del resto de secciones (el
   .hero__inner genérico lo limita a 680px, pensado para un hero solo de texto),
   y es el bloque interior el que limita la medida del texto. */
.hero--foto .hero__inner {
  position: relative; z-index: 2;
  max-width: var(--container);
  padding-top: var(--sp-20); padding-bottom: var(--sp-16);
  min-height: clamp(420px, 44vw, 620px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
/* Ancho justo para no pisar la fachada, que empieza a mitad de la foto. */
.hero--foto .hero__texto { max-width: 540px; }
.hero--foto .hero__eyebrow { color: var(--lec-arena); }
.hero--foto h1 { color: #fff; text-wrap: balance; }
.hero--foto h1 span { color: var(--lec-arena); }
.hero--foto .hero__lead { color: rgba(255, 255, 255, .9); }
/* El botón fantasma es vino sobre crema: sobre el velo no se vería. */
.hero--foto .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.hero--foto .btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }

/* Móvil y tableta estrecha: la foto apaisada detrás del texto quedaría
   reducida a una franja central, así que va entera arriba y el texto debajo,
   sobre el mismo vino. */
@media (max-width: 860px) {
  /* En 16:10. La foto de la fachada trae su propio recorte para el móvil
     (fachada-21x9-mobile.webp, ver index.php); cualquier otra se centra. */
  .hero--foto .hero__foto { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .hero--foto .hero__foto img { object-position: 50% 50%; }
  .hero--foto .hero__velo { display: none; }
  .hero--foto .hero__inner { min-height: 0; padding-top: var(--sp-10); padding-bottom: var(--sp-12); }
}

/* ============================================================================
   SECCIÓN "ÁREAS" — patrón acordeón horizontal (reutiliza el componente
   "Servicios" de evolucionaweb.net + estética de Cabecera_Ejemplo.png)
   ========================================================================== */
.section { padding: var(--sp-16) 0; }
.section__head { text-align: center; max-width: 640px; margin: 0 auto var(--sp-12); }
.section__head p { color: var(--color-text-soft); }

/* Panel + fichas. El área abierta ocupa la columna alta de la izquierda y las
   otras seis quedan en rejilla 3x2 a su derecha. Al pulsar una ficha pasa al
   panel y la que estaba abierta ocupa su hueco: el JS permuta los `order` y la
   colocación automática de la rejilla hace el resto (usa el orden modificado
   por `order`, no el del DOM). Contenido siempre presente y altura fija, así
   que abrir no provoca reflow ni mueve el scroll. */
.areas {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-3);
  height: 520px;
  overflow-anchor: none;
}
.area {
  position: relative;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  transition: background .3s ease, border-color .3s ease, transform .25s ease;
}
.area:not(.is-open):hover { border-color: var(--color-accent); transform: translateY(-3px); }
.area.is-open {
  grid-column: 1; grid-row: 1 / span 2;
  background: var(--lec-crema-2); cursor: default; transform: none;
}

/* Cara de ficha: ilustración, nombre y flecha, en columna y centrados. Ahora el
   rótulo va en horizontal (antes iba girado porque las bandas eran estrechas). */
.area__label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-4); text-align: center;
  opacity: 1; transition: opacity .3s ease;
  /* Es un <button>: hay que quitarle los estilos que trae de serie. */
  width: 100%; background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.area.is-open .area__label { opacity: 0; visibility: hidden; }
.area__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--lec-melocoton); color: var(--color-accent); flex: none; }

/* Ilustraciones de sección. Traen su propio círculo melocotón dibujado, así que
   el contenedor no debe pintar otro debajo ni recortarlas en redondo. */
.lec-ilu { display: block; width: 100%; height: auto; max-width: 100%; }
/* Iconos pequeños dibujados por la escuela (lec_icono_img): en bloque, sin el
   hueco de línea base de las imágenes en línea. */
.lec-icono { display: block; flex: none; }
.area__icon:has(.lec-ilu), .mega__panel-icon:has(.lec-ilu) { background: none; border-radius: 0; }
.area__label .area__icon:has(.lec-ilu) { width: min(104px, 62%); height: auto; }
.area__content .area__icon:has(.lec-ilu) { width: 96px; height: auto; }
.mega__panel-icon:has(.lec-ilu) { width: 64px; height: auto; }
.area__nombre {
  font-family: var(--font-head); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
  color: var(--lec-vino); font-size: var(--fs-sm); text-wrap: balance;
}
.area__flecha {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--lec-melocoton); color: var(--color-accent);
  transition: background .25s ease, color .25s ease;
}
.area:hover .area__flecha { background: var(--color-accent); color: #fff; }

/* Cara de panel: ocupa toda la celda alta de la izquierda. Rejilla de 2 columnas:
   la ilustración a la izquierda y, a su lado, título y descripción; enlaces y
   botón cruzan las dos columnas. */
.area__content {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: var(--sp-4);
  padding: var(--sp-8);
  opacity: 0; visibility: hidden; transition: opacity .35s ease .05s;
  overflow: hidden;
}
.area__content .area__icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.area__content h3 { grid-column: 2; grid-row: 1; align-self: end; }
.area__content p { grid-column: 2; grid-row: 2; }
.area__content .area__links { grid-column: 1 / -1; grid-row: 3; align-self: start; }
.area__content .btn { grid-column: 1 / -1; grid-row: 4; }
.area.is-open .area__content { opacity: 1; visibility: visible; }
.area__content .area__icon { margin-bottom: 0; }
.area__content h3 { margin-bottom: var(--sp-1); }
.area__content p { color: var(--color-text-soft); }
.area__links { list-style: none; margin: var(--sp-2) 0 var(--sp-5); padding: 0; }
.area__links li { border-top: 1px solid var(--color-border); }
.area__links a { display: flex; align-items: center; justify-content: space-between; padding: .5rem 0; color: var(--color-text); font-family: var(--font-head); font-size: var(--fs-sm); }
.area__links a:hover { color: var(--color-accent); padding-left: .3rem; }
.area__content .btn { justify-self: start; }   /* en grid, no flex: no debe estirarse a todo el ancho */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--lec-vino); color: #efe0d2; margin-top: var(--sp-20); }
.site-footer a { color: #efe0d2; }
.site-footer a:hover { color: #fff; }
.site-footer h3 { color: #fff; font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-4); }
.site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-8); padding: var(--sp-16) var(--sp-6) var(--sp-8); }
.site-footer__brand img { height: 96px; width: auto; margin-bottom: var(--sp-4); filter: brightness(0) invert(1); opacity: .95; }
.site-footer__brand p { color: #d9c4b6; font-size: var(--fs-sm); }
.site-footer__contact, .site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: #d9c4b6; }
.site-footer__contact .lec-icon { color: var(--lec-melocoton); margin-top: 2px; }
.site-footer__links li { margin-bottom: var(--sp-2); font-size: var(--fs-sm); }
.social { list-style: none; display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
.social a:hover { background: var(--color-accent); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center; padding: var(--sp-6); border-top: 1px solid rgba(255,255,255,.15); font-size: var(--fs-xs); color: #cbb3a4; }
.site-footer__legal a { color: #cbb3a4; }

.back-to-top { position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--lec-vino); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: all var(--transition); z-index: 90; box-shadow: var(--shadow); }
.back-to-top .lec-icon { transform: rotate(180deg); }
.back-to-top.is-visible { opacity: 1; visibility: visible; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  /* El claim se queda sin sitio antes que nada: fuera. El logo sigue centrado
     porque la columna 1fr vacía mantiene la simetría del grid. */
  .brandbar__claim { display: none; }
}
@media (max-width: 1080px) {
  /* Cabecera de una sola fila: logo + hamburguesa. Desaparece la franja de nav. */
  :root { --header-h: 70px; }
  .navrow, .brandbar__actions { display: none; }
  .menu-toggle { display: inline-flex; }
  .brandbar { grid-template-columns: 1fr auto; padding-block: var(--sp-3); }
  .brand img { width: 100%; max-width: 300px; }
}
/* Tablet: el panel sube a una banda a todo el ancho y las seis fichas quedan
   debajo en dos filas de tres. Se mantienen alturas explícitas porque las dos
   caras siguen posicionadas en absoluto dentro de su celda. */
@media (max-width: 991px) {
  .areas {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 170px 170px;
    height: auto;
  }
  .area.is-open { grid-column: 1 / -1; grid-row: 1; }
  .area__content { padding: var(--sp-6); }
  /* El panel abierto entra en el flujo y su fila crece con el contenido. Con
     altura fija, en el móvil los cinco enlaces de La Escuela empujaban el botón
     «Ir a…» fuera del panel y lo tapaban las fichas (27/10/2026). */
  .area.is-open .area__content { position: relative; inset: auto; }
}
@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
/* Móvil: dos fichas por fila (tres filas) y el panel más alto, que el listado de
   secciones y el botón tienen que caber sin recortarse. */
@media (max-width: 560px) {
  .areas {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto repeat(3, 150px);
  }
  .area__content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    padding: var(--sp-5);
  }
  .area__content .area__icon { grid-column: 1; grid-row: 1; }
  .area__content h3 { grid-column: 1; grid-row: 2; align-self: start; }
  .area__content p { grid-column: 1; grid-row: 3; }
  .area__content .area__links { grid-column: 1; grid-row: 4; }
  .area__content .btn { grid-column: 1; grid-row: 5; }
  .area__label { gap: var(--sp-2); padding: var(--sp-3); }
  .area__label .area__icon:has(.lec-ilu) { width: min(72px, 55%); }
  .area__nombre { font-size: var(--fs-xs); }
  .topbar__item--hide-sm { display: none; }
  .site-footer__top { grid-template-columns: 1fr; }
}