/* ══════════════════════════════════════════════════════════════════════════
   AC Wake Baixo Miño · hoja de estilo común de la web pública
   La comparten index.html, reservar.html, hazte-socio.html y patrocinios.html.
   Sin build: es un archivo estático más, servido desde la raíz.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Las fotos ──────────────────────────────────────────────────────────
   Todas las imágenes del sitio se declaran aquí y en ningún otro sitio.
   Para poner una foto de verdad basta con dejar el archivo en /img con el
   nombre que dice cada línea. Mientras no exista, el navegador descarta esa
   capa y se ve el degradado de debajo, así que la página nunca queda rota.
   Medidas recomendadas: hero 2400×1400 · bloques 1600×1200 · tira 800×800.
   Pesarlas antes de subirlas (JPG de calidad 70, menos de 300 kB cada una). */
:root{
  --f-hero:      url('img/hero.jpg');        /* portada, a sangre */
  --f-barco:     url('img/barco.jpg');       /* el barco con gente a bordo */
  --f-sensacion: url('img/sensacion.jpg');   /* rider/a sobre la tabla */
  --f-rio:       url('img/rio.jpg');         /* el Miño desde el agua */
  --f-ig-1:      url('img/ig-1.jpg');
  --f-ig-2:      url('img/ig-2.jpg');
  --f-ig-3:      url('img/ig-3.jpg');
  --f-ig-4:      url('img/ig-4.jpg');
  --f-ig-5:      url('img/ig-5.jpg');
}

/* ── 2. Color y tipografía ───────────────────────────────────────────────── */
:root{
  --tinta:#141d1a;          /* verde muy oscuro, casi negro */
  --tinta-2:#1b2723;
  --tinta-3:#243330;
  --crema:#f4f1ea;
  --crema-2:#e9e4d9;
  --oro:#b3925f;            /* acento: titulares y detalles */
  --oro-claro:#c9ab7c;      /* acento sobre fondo oscuro */
  --oro-boton:#a07c42;      /* más oscuro: contraste suficiente con blanco */
  --texto:#20241f;
  --texto-suave:#5c6159;
  --texto-oscuro-suave:#a7b1a9;   /* cuerpo de texto sobre fondo oscuro */
  --linea:rgba(20,29,26,.13);
  --linea-clara:rgba(244,241,234,.16);
  --sombra:0 20px 50px rgba(20,29,26,.10);
  --ancho:1280px;
  --borde-nav:72px;         /* alto de la barra */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--borde-nav);-webkit-text-size-adjust:100%}
body{
  background:var(--crema);
  color:var(--texto);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;font-weight:400;line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

h1,h2,h3,.titular{
  font-family:'Archivo','Inter',system-ui,sans-serif;
  font-weight:700;text-transform:uppercase;
  line-height:1.02;letter-spacing:-.005em;
}
h1{font-size:clamp(2.7rem,6.6vw,5.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.2rem)}
h3{font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:.02em}
.oro{color:var(--oro)}
.oro-claro{color:var(--oro-claro)}

/* Antetítulo: la línea pequeña en versalitas que abre cada sección. */
.antetitulo{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--texto-suave);
  margin-bottom:1.4rem;
}
.oscuro .antetitulo{color:var(--oro-claro)}

p{max-width:52ch;color:var(--texto-suave)}
.oscuro p{color:var(--texto-oscuro-suave)}
.entradilla{font-size:1.02rem;line-height:1.85}

a{color:inherit}
::selection{background:var(--oro);color:#fff}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ── 3. Estructura ───────────────────────────────────────────────────────── */
.envoltorio{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
section{position:relative}
.seccion{padding:clamp(4rem,8vw,7rem) 0}
.oscuro{background:var(--tinta);color:var(--crema)}
.tono{background:var(--crema-2)}

/* ── 4. Botones ──────────────────────────────────────────────────────────── */
.boton{
  display:inline-block;font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;text-align:center;
  padding:15px 30px;border:1px solid transparent;cursor:pointer;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.boton--oro{background:var(--oro-boton);color:#fff}
.boton--oro:hover{background:#8d6c37}
.boton--linea{background:transparent;color:var(--texto);border-color:rgba(20,29,26,.35)}
.boton--linea:hover{background:var(--texto);color:var(--crema);border-color:var(--texto)}
.oscuro .boton--linea{color:var(--crema);border-color:rgba(244,241,234,.35)}
.oscuro .boton--linea:hover{background:var(--crema);color:var(--tinta);border-color:var(--crema)}
.boton[disabled]{opacity:.4;cursor:not-allowed}
.enlace-flecha{
  font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:3px;transition:opacity .2s;
}
.enlace-flecha:hover{opacity:.6}

/* ── 5. Huecos de foto ───────────────────────────────────────────────────── */
/* Cada .foto lleva dos capas: la imagen (si existe) y un degradado de reserva.
   El degradado cambia con la clase para que los huecos no se vean clonados. */
.foto{
  background-repeat:no-repeat;background-size:cover;background-position:center;
  background-color:var(--tinta-2);position:relative;overflow:hidden;
}
.foto--hero     {background-image:var(--f-hero),      linear-gradient(140deg,#1d2b27,#38504a 45%,#8a7b5e)}
.foto--barco    {background-image:var(--f-barco),     linear-gradient(150deg,#2b3a34,#6c7d6a 60%,#c2ad84)}
.foto--sensacion{background-image:var(--f-sensacion), linear-gradient(200deg,#2a3b3a,#57706e 55%,#b7a583)}
.foto--rio      {background-image:var(--f-rio),       linear-gradient(120deg,#1e2c28,#4a6157 60%,#9aa48d)}
.foto--ig1{background-image:var(--f-ig-1),linear-gradient(150deg,#2b3a34,#67796d)}
.foto--ig2{background-image:var(--f-ig-2),linear-gradient(150deg,#33403a,#8b8a72)}
.foto--ig3{background-image:var(--f-ig-3),linear-gradient(150deg,#26332f,#5b7168)}
.foto--ig4{background-image:var(--f-ig-4),linear-gradient(150deg,#3a453b,#9c9a7e)}
.foto--ig5{background-image:var(--f-ig-5),linear-gradient(150deg,#212e2b,#7d8874)}

/* ── 6. Barra de navegación ──────────────────────────────────────────────── */
.barra{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;gap:2rem;
  height:var(--borde-nav);padding:0 clamp(1.25rem,4vw,3rem);
  background:transparent;transition:background .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.barra.solida,body.interior .barra{
  background:rgba(20,29,26,.94);backdrop-filter:blur(14px);
  border-bottom-color:var(--linea-clara);
}
.marca{
  display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--crema);
  font-family:'Archivo',sans-serif;text-transform:uppercase;flex-shrink:0;
}
.marca b{font-size:19px;font-weight:700;letter-spacing:.16em}
.marca span{font-size:9px;font-weight:500;letter-spacing:.32em;color:var(--oro-claro);margin-top:5px}
/* El panel agrupa enlaces y botón: en escritorio es una fila, en móvil un
   desplegable. Así el botón de reservar viaja con el menú sin duplicar HTML. */
.panel{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:2rem}
.menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem);margin:0 auto}
.menu a{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,241,234,.82);text-decoration:none;transition:color .2s;
  white-space:nowrap;
}
.menu a:hover,.menu a[aria-current="page"]{color:#fff}
.barra .boton{padding:11px 22px;font-size:10.5px;flex-shrink:0}
.barra .boton--linea{color:var(--crema);border-color:rgba(244,241,234,.45)}
.barra .boton--linea:hover{background:var(--crema);color:var(--tinta)}
.hamburguesa{
  display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;
  color:var(--crema);
}
.hamburguesa span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0;transition:.25s}
.barra.abierta .hamburguesa span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.barra.abierta .hamburguesa span:nth-child(2){opacity:0}
.barra.abierta .hamburguesa span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── 7. Portada ──────────────────────────────────────────────────────────── */
.portada{
  min-height:min(94vh,860px);display:flex;align-items:center;
  padding:calc(var(--borde-nav) + 3rem) 0 4rem;color:var(--crema);
}
.portada::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(12,19,17,.86) 0%,rgba(12,19,17,.55) 45%,rgba(12,19,17,.12) 100%),
             linear-gradient(to top,rgba(12,19,17,.55),transparent 45%);
}
.portada .envoltorio{position:relative;z-index:1}
.portada h1{margin-bottom:1.6rem;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.portada p{color:rgba(244,241,234,.88);max-width:40ch;margin-bottom:2.4rem;font-size:1.05rem}
.portada .lema{
  font-family:'Archivo',sans-serif;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--oro-claro);margin-bottom:1.6rem;
}

/* ── 8. Banda de argumentos ──────────────────────────────────────────────── */
.argumentos{background:var(--tinta);color:var(--crema);padding:clamp(2.4rem,4vw,3.2rem) 0}
.argumentos .rejilla{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,3rem);
}
.argumento{display:flex;gap:1rem;align-items:flex-start}
.argumento svg{flex-shrink:0;stroke:var(--oro-claro);fill:none;stroke-width:1.4;margin-top:2px}
.argumento h3{font-size:12px;letter-spacing:.16em;margin-bottom:.4rem;color:#fff}
.argumento p{font-size:13.5px;line-height:1.6;color:rgba(244,241,234,.62);max-width:26ch;margin:0}

/* ── 9. Bloques de foto y texto ──────────────────────────────────────────── */
.bloque{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.bloque .texto{padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,5rem)}
.bloque .texto>*{max-width:34rem}
.bloque .foto{min-height:clamp(320px,45vw,560px);height:100%}
.bloque--invertido .texto{order:2}
.bloque--invertido .foto{order:1}
/* En los bloques el titular vive en media pantalla: baja un punto para que los
   dos versos quepan en dos líneas, como en el diseño. */
.bloque h2{font-size:clamp(1.7rem,3.1vw,2.6rem);margin-bottom:1.4rem}
.bloque p{margin-bottom:2rem}
/* El texto de los bloques se alinea con el envoltorio general, no con el borde. */
.bloque .texto{display:flex;flex-direction:column;align-items:flex-start}
.bloque:not(.bloque--invertido) .texto{padding-left:max(clamp(1.5rem,4vw,3rem),calc((100vw - var(--ancho))/2 + clamp(1.25rem,4vw,3rem)))}
.bloque--invertido .texto{padding-right:max(clamp(1.5rem,4vw,3rem),calc((100vw - var(--ancho))/2 + clamp(1.25rem,4vw,3rem)))}

/* ── 10. Rejillas de tarjetas y listas ───────────────────────────────────── */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.2rem,2.5vw,2rem)}

.lista-simple{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;
  border-top:1px solid var(--linea)}
.lista-simple .celda{padding:1.8rem 1.8rem 1.8rem 0;border-bottom:1px solid var(--linea)}
.lista-simple h3{font-size:1rem;margin-bottom:.5rem}
.lista-simple p{font-size:.92rem;margin:0}
.oscuro .lista-simple,.oscuro .lista-simple .celda{border-color:var(--linea-clara)}

/* ── 11. Cabecera de sección centrada ────────────────────────────────────── */
.cabecera{max-width:720px;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.cabecera.centrada{margin-left:auto;margin-right:auto;text-align:center}
.cabecera.centrada p{margin-left:auto;margin-right:auto}
.cabecera h2{margin-bottom:1.2rem}

/* ── 12. FAQ ─────────────────────────────────────────────────────────────── */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--oro);border-bottom:1.5px solid var(--oro);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 2.5rem 1.6rem 0;margin:0;max-width:70ch}

/* ── 13. Tira de Instagram ───────────────────────────────────────────────── */
.tira{display:grid;grid-template-columns:minmax(300px,2fr) repeat(5,minmax(0,1fr));gap:2px;align-items:stretch}
.tira .rotulo{padding:clamp(2rem,4vw,3rem) clamp(1.25rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:center}
.tira .rotulo h2{font-size:clamp(1.25rem,1.9vw,1.7rem);margin-bottom:1.4rem}
.tira .foto{aspect-ratio:1}

/* ── 14. Pie ─────────────────────────────────────────────────────────────── */
.pie{background:var(--crema-2);padding:clamp(3rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
.pie .rejilla{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:clamp(1.8rem,4vw,3rem)}
/* El sello es un PNG negro sobre fondo blanco opaco. Con multiply el blanco se
   funde con la crema del pie y no queda el recuadro. */
.pie .sello{width:112px;mix-blend-mode:multiply}
.pie h4{
  font-family:'Archivo',sans-serif;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:1.1rem;
}
.pie p,.pie a{font-size:.92rem;color:var(--texto-suave);text-decoration:none}
.pie a:hover{color:var(--texto)}
.pie ul{list-style:none}
.pie li{margin-bottom:.35rem}
.pie-abajo{
  background:var(--tinta);color:rgba(244,241,234,.55);
  padding:1.1rem 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.pie-abajo .envoltorio{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
.pie-abajo a{color:rgba(244,241,234,.55);text-decoration:none;margin-left:1.6rem}
.pie-abajo a:hover{color:var(--crema)}
.pie-abajo nav{display:flex;flex-wrap:wrap}

/* ── 15. Páginas interiores ──────────────────────────────────────────────── */
body.interior{padding-top:var(--borde-nav)}
.cabecera-pagina{background:var(--tinta);color:var(--crema);padding:clamp(3rem,6vw,5rem) 0 clamp(2.6rem,5vw,4rem)}
.cabecera-pagina h1{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1.2rem}
.cabecera-pagina p{color:rgba(244,241,234,.8);max-width:56ch}
.volver{
  display:inline-block;margin-bottom:1.6rem;font-family:'Archivo',sans-serif;font-size:10.5px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);text-decoration:none;
}
.volver:hover{color:#fff}

/* ── 16. Formularios ─────────────────────────────────────────────────────── */
.formulario{background:#fff;border:1px solid var(--linea);padding:clamp(1.6rem,3.5vw,2.6rem)}
label{
  display:block;font-family:'Archivo',sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--texto-suave);
  margin:1.3rem 0 .5rem;
}
label:first-of-type{margin-top:0}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font-family:inherit;font-size:.98rem;color:var(--texto);
  background:var(--crema);border:1px solid var(--linea);padding:12px 14px;
  transition:border-color .2s,background .2s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--oro);background:#fff}
textarea{resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6159' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:34px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fila label{margin-top:1.3rem}
.check{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.3rem;font-size:.9rem;line-height:1.55;color:var(--texto-suave)}
.check input{margin-top:4px;flex-shrink:0;width:16px;height:16px;accent-color:var(--oro-boton)}
.check a{color:var(--oro-boton)}
.formulario .boton{width:100%;margin-top:1.8rem}
.senuelo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{display:none;margin-top:1.1rem;padding:.9rem 1.1rem;font-size:.9rem;line-height:1.55;border-left:3px solid}
.aviso.visible{display:block}
.aviso.bien{background:rgba(120,150,110,.13);border-color:#6f8f5f;color:#3f5335}
.aviso.mal{background:rgba(170,80,60,.10);border-color:#a8503c;color:#8a3f2e}
.legal{font-size:.82rem;line-height:1.6;color:var(--texto-suave);margin-top:1.2rem}
.legal a{color:var(--oro-boton)}

/* ── 17. Calendario ──────────────────────────────────────────────────────── */
.calendario-wrap,.dos-columnas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.calendario{background:#fff;border:1px solid var(--linea);padding:clamp(1.2rem,2.5vw,1.8rem)}
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.cal-top div{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.14em;
  text-transform:uppercase;
}
.cal-top button{
  background:none;border:1px solid var(--linea);width:34px;height:34px;cursor:pointer;
  font-size:1.1rem;line-height:1;color:var(--texto);transition:.2s;
}
.cal-top button:hover:not(:disabled){border-color:var(--oro);color:var(--oro)}
.cal-top button:disabled{opacity:.25;cursor:not-allowed}
.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-dias span{
  text-align:center;font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.14em;
  color:var(--texto-suave);
}
.cal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-rejilla button{
  aspect-ratio:1;background:var(--crema);border:1px solid transparent;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.9rem;color:var(--texto);transition:.15s;
}
.cal-rejilla button:hover:not(:disabled){border-color:var(--oro);color:var(--oro)}
.cal-rejilla button:disabled{background:transparent;color:rgba(92,97,89,.32);cursor:not-allowed}
.cal-rejilla button[aria-pressed="true"]{background:var(--oro-boton);color:#fff;border-color:var(--oro-boton)}
.cal-rejilla .hueco{aspect-ratio:1}
.elegida{
  background:var(--crema);border-left:3px solid var(--linea);padding:.9rem 1.1rem;
  font-size:.9rem;color:var(--texto-suave);margin-bottom:1.6rem;
}
.elegida.puesto{border-color:var(--oro);color:var(--texto)}

/* ── 18. Tarjetas de patrocinio ──────────────────────────────────────────── */
.patrocinio{background:#fff;border:1px solid var(--linea);padding:2rem 1.8rem;display:flex;flex-direction:column}
.patrocinio.destacada{border-color:var(--oro);box-shadow:var(--sombra)}
.patrocinio .nivel{
  font-family:'Archivo',sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro);margin-bottom:1rem;
}
.patrocinio .precio{font-family:'Archivo',sans-serif;font-size:2.6rem;font-weight:700;line-height:1;margin-bottom:.3rem}
.patrocinio .periodo{font-size:.82rem;color:var(--texto-suave);margin-bottom:1.6rem}
.patrocinio ul{list-style:none;font-size:.92rem;color:var(--texto-suave);line-height:1.55}
.patrocinio li{padding:.5rem 0 .5rem 1.2rem;position:relative;border-top:1px solid var(--linea)}
.patrocinio li::before{content:'';position:absolute;left:0;top:1.05rem;width:5px;height:5px;background:var(--oro)}

/* Franja de cierre con una llamada a la acción. */
.cierre{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  border-top:1px solid var(--linea);margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:clamp(2rem,4vw,3rem);
}
.oscuro .cierre{border-color:var(--linea-clara)}
.cierre h3{margin-bottom:.5rem}
.cierre p{margin:0}

/* ── 19. Pantallas pequeñas ──────────────────────────────────────────────── */
@media (max-width:1080px){
  .argumentos .rejilla{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .pie .rejilla{grid-template-columns:1fr 1fr}
  .tira{grid-template-columns:repeat(3,1fr)}
  .tira .rotulo{grid-column:1/-1}
}
@media (max-width:860px){
  .hamburguesa{display:block}
  .panel{
    position:fixed;top:var(--borde-nav);left:0;right:0;
    background:rgba(20,29,26,.98);backdrop-filter:blur(14px);
    flex-direction:column;align-items:stretch;gap:0;
    padding:0 clamp(1.25rem,4vw,3rem);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease,padding .3s ease;
    border-bottom:1px solid transparent;
  }
  .barra.abierta .panel{
    max-height:80vh;overflow-y:auto;
    padding:.5rem clamp(1.25rem,4vw,3rem) 1.6rem;
    border-bottom-color:var(--linea-clara);
  }
  .barra.abierta{background:rgba(20,29,26,.98)}
  .menu{flex-direction:column;align-items:stretch;gap:0;margin:0}
  .menu a{padding:1.05rem 0;border-bottom:1px solid var(--linea-clara);font-size:12px}
  .panel>.boton{margin-top:1.3rem}
  .bloque{grid-template-columns:1fr}
  .bloque .foto{min-height:300px;order:0!important}
  .bloque .texto{order:1!important;padding:clamp(2.4rem,7vw,3.5rem) clamp(1.25rem,4vw,3rem)!important}
  .calendario-wrap,.dos-columnas{grid-template-columns:1fr}
  .fila{grid-template-columns:1fr}
  .portada{min-height:auto;padding:calc(var(--borde-nav) + 5rem) 0 5rem}
}
@media (max-width:560px){
  .argumentos .rejilla{grid-template-columns:1fr}
  .pie .rejilla{grid-template-columns:1fr}
  .tira{grid-template-columns:repeat(2,1fr)}
  .pie-abajo .envoltorio{flex-direction:column;align-items:flex-start;gap:.6rem}
  .pie-abajo a{margin:0 1.4rem 0 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}