/* =========================================================================
   Cuatrogatos Band — hoja de estilos única (segundo intento)
   Dirección: híbrido oscuro/claro inspirado en thecucumbers.es
   Tokens en :root — cambiar aquí para reajustar toda la web.
   ========================================================================= */

/* ---- Fuentes (OFL, autoalojadas) --------------------------------------- */
@font-face{font-family:'Big Shoulders';src:url("../fonts/big-shoulders-display-latin-500-normal.081714543b45.woff2") format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Big Shoulders';src:url("../fonts/big-shoulders-display-latin-700-normal.677f0a8821e5.woff2") format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Big Shoulders';src:url("../fonts/big-shoulders-display-latin-800-normal.2f9aec33f07c.woff2") format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url("../fonts/familjen-grotesk-latin-400-normal.195816eda429.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url("../fonts/familjen-grotesk-latin-400-italic.0e47f34355a8.woff2") format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url("../fonts/familjen-grotesk-latin-500-normal.b66a7b841ee5.woff2") format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Familjen Grotesk';src:url("../fonts/familjen-grotesk-latin-700-normal.b7b1af8d3185.woff2") format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url("../fonts/instrument-serif-latin-400-normal.c9d1f8887330.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url("../fonts/instrument-serif-latin-400-italic.8374bac40447.woff2") format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#141013;
  --ink-2:#211c1a;
  --paper:#f5f1e8;
  --paper-2:#ece5d6;
  --accent:#ee7b30;
  --accent-hi:#ff9142;
  /* #ee7b30 da solo 2,48:1 sobre --paper: sirve para fondos, bordes e iconos
     grandes, pero no como color de texto pequeño (WCAG AA exige 4,5:1). Este
     tono, misma familia de naranja, da 5,18:1 sobre --paper/--paper-2. */
  --accent-text:#a8480f;
  --spark:#e23b2e;
  --wine:#4a1d24;
  --muted:#6e645c;
  --cream:#f5f1e8;
  --line:rgba(20,16,19,.14);
  --line-light:rgba(245,241,232,.18);

  --display:'Big Shoulders','Arial Narrow',Arial,sans-serif;
  --text:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --wrap:1680px;
  --pad:clamp(1rem,5vw,4rem);
  /* Separación visual que debe haber SIEMPRE entre dos secciones consecutivas,
     sea cual sea su color o contenido. Única fuente de este valor en todo el
     sitio: cada sección pone la mitad como padding-top y la mitad como
     padding-bottom (ver .section más abajo), así que dos secciones seguidas
     siempre suman exactamente esto — nunca el doble, nunca la mitad, sin
     casos especiales por pares de secciones. */
  --section-y:clamp(3.75rem,8vw,7.5rem);
  --radius:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--text);font-size:clamp(1rem,.55vw + .9rem,1.15rem);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3,h4{margin:0 0 .4em;font-family:var(--display);font-weight:800;line-height:1;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(2.9rem,8vw,7rem)}
h2{font-size:clamp(2.1rem,5vw,4.25rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:.01em}
p{margin:0 0 1rem}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

/* --accent (#ee7b30) da solo 2,48:1 sobre --paper/--paper-2: no vale como
   color de texto en fondo claro (ver el comentario del token en :root), así
   que aquí usa --accent-text (5,18:1) igual que el resto del texto en
   ámbar sobre fondo claro. En fondo oscuro sí puede usar --accent-hi
   (8,43:1 sobre --ink). */
.serif-accent{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:1.06em;line-height:.9;color:var(--accent-text);white-space:nowrap}
.section--dark .serif-accent{color:var(--accent-hi)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Layout ---------------------------------------------------------------- */
.wrap{width:min(100% - (var(--pad) * 2),var(--wrap));margin-inline:auto}
.narrow{max-width:820px}
/* Fondo opaco explícito (antes transparente, mostrando el mismo tono por
   herencia de <body>): sigue viéndose exactamente igual, pero además tapa
   correctamente cualquier capa position:fixed detrás de todo (ver
   .fixedbg-photo) en vez de dejarla traslucir. */
.section{padding-block:calc(var(--section-y) / 2);background:var(--paper)}
.section--dark{background:var(--ink);color:var(--cream)}
.section--dark p{color:#d8d0c6}
.section--tinted{background:var(--paper-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

.skip-link{position:fixed;top:.6rem;left:.6rem;z-index:1200;padding:.7rem 1rem;background:var(--accent);color:var(--ink);font-weight:700;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:none}

/* ---- Eyebrow / headings -------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";width:1.8rem;height:2px;background:var(--accent)}
.eyebrow--light{color:#cabfb2}
.section-head{max-width:44ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.section-head__sub{margin:.6rem 0 0;font-size:.95rem;color:var(--muted)}
.section--dark .section-head__sub{color:#b9b0a4}
.lead{font-size:clamp(1.1rem,1.4vw + .8rem,1.5rem);line-height:1.45;color:var(--ink-2)}
.section--dark .lead{color:#e7dfd4}

/* ---- Buttons / links --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.2rem;padding:.85rem 1.6rem;border-radius:999px;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;transition:transform .18s var(--ease),background .18s,color .18s,box-shadow .18s;border:2px solid transparent}
.btn--sm{min-height:2.6rem;padding:.5rem 1.1rem;font-size:.85rem}
.btn--block{width:100%}
.btn--accent{background:var(--accent);color:var(--ink)}
.btn--accent:hover{background:var(--accent-hi);transform:translateY(-2px)}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover{background:currentColor;color:var(--ink)}
.section--dark .btn--ghost:hover{color:var(--ink);background:var(--cream)}

.link-arrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:.15rem}
.link-arrow::after{content:"→";color:var(--accent);transition:transform .2s}
.link-arrow:hover::after{transform:translateX(.3rem)}

/* ---- Preloader -------------------------------------------------------------- */
.preloader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:var(--ink);transition:opacity .2s,visibility .2s}
.preloader__word{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(2rem,7vw,5rem);color:var(--cream);opacity:.15;animation:pulse 1.4s var(--ease) infinite alternate}
html:not(.is-loading) .preloader{opacity:0;visibility:hidden}
@keyframes pulse{to{opacity:.95;letter-spacing:.14em}}

/* ---- Header ------------------------------------------------------------------ */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(245,241,232,.8);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px) saturate(1.08);backdrop-filter:blur(10px) saturate(1.08);transition:background .3s,border-color .3s,transform .3s}
.site-header__inner{display:flex;align-items:center;gap:1rem;width:min(100% - (var(--pad) * 2),var(--wrap));margin-inline:auto;min-height:4.75rem}

.menu-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
.menu-btn__bars{display:grid;gap:4px;width:26px}
.menu-btn__bars i{height:2px;background:currentColor;display:block;transition:transform .2s,opacity .2s}
.menu-btn:hover .menu-btn__bars i{background:var(--accent)}

.brand{display:flex;align-items:center;justify-content:center;flex:1 1 auto}
.brand__logo{display:block;width:clamp(7rem,12vw,9.5rem);height:auto;margin-block:-.5rem}

.site-nav{display:none}

/* Repliegue accesible del menú: visible en móvil hasta que site.js confirme
   que el offcanvas ya funciona (ver [data-menu-open] en site.js). Cubre JS
   desactivado, bloqueado o que falle al cargar, no solo "sin JS" a secas. */
.site-nav-fallback{display:flex;flex-direction:column;background:var(--paper-2);border-bottom:1px solid var(--line)}
.site-nav-fallback a{display:block;padding:.85rem var(--pad);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;border-top:1px solid var(--line)}
.site-nav-fallback a:first-child{border-top:none}
.site-nav-fallback a.is-current{color:var(--wine)}
.site-nav a{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.92rem;padding:.3rem 0;position:relative}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent);transition:right .2s}
.site-nav a:hover::after,.site-nav a.is-current::after{right:0}

.site-header__actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.header-phone{display:none;align-items:center;gap:.45rem;font-weight:600;font-size:.95rem;white-space:nowrap}
.header-phone:hover{color:var(--accent)}

@media (min-width:1000px){
  .menu-btn{display:none}
  .site-nav-fallback{display:none}
  .brand{flex:0 0 auto}
  .site-nav{display:flex;gap:clamp(1rem,2.5vw,2.2rem);flex:1 1 auto;justify-content:center}
  /* +30% sobre los .92rem de base (.92 * 1.3 ≈ 1.196), redondeado a 1.2rem. */
  .site-nav a{font-size:1.2rem}
  .header-phone{display:inline-flex}
  /* +30% sobre los .8rem de base (.8 * 1.3 = 1.04), redondeado a 1rem.
     Afecta a todos los "eyebrow" del sitio (Sin piloto automático,
     Versiones en directo · Bodas..., etc): es un único componente. */
  .eyebrow{font-size:1rem}
}
@media (max-width:520px){
  .menu-btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .site-header__inner{gap:.5rem}
  .btn--sm{padding:.5rem .85rem;font-size:.78rem}
}

/* ---- Off-canvas menu ------------------------------------------------------- */
.offcanvas{position:fixed;inset:0;z-index:1500;visibility:hidden}
.offcanvas.is-open{visibility:visible}
.offcanvas__backdrop{position:absolute;inset:0;background:rgba(10,7,9,.6);opacity:0;transition:opacity .3s}
.offcanvas.is-open .offcanvas__backdrop{opacity:1}
.offcanvas__panel{position:absolute;top:0;right:0;height:100%;width:min(92vw,600px);background:var(--ink);color:var(--cream);padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(100%);transition:transform .4s var(--ease)}
.offcanvas.is-open .offcanvas__panel{transform:none}
.offcanvas__panel:focus-visible{outline:none}
.offcanvas__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.offcanvas__logo{display:block;width:clamp(7rem,24vw,9rem);height:auto;margin-block:-.75rem}
.offcanvas__close{font-size:1.4rem;width:2.6rem;height:2.6rem;border:1px solid var(--line-light);border-radius:50%}
.offcanvas__close:hover{color:var(--accent);border-color:var(--accent)}
.offcanvas__nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.offcanvas__nav a{display:block;padding:.42rem 0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,5.5vw,2.4rem);letter-spacing:.01em;border-bottom:1px solid var(--line-light)}
.offcanvas__nav a:hover,.offcanvas__nav a.is-current{color:var(--accent)}

/* ---- Home hero ------------------------------------------------------------- */
.home-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:var(--cream);background:var(--ink) var(--hero-img) center/cover no-repeat}
.home-hero__video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.home-hero__toggle{position:absolute;z-index:3;right:1rem;bottom:1rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(245,241,232,.4);color:var(--cream);background:rgba(10,7,9,.35);font-size:.7rem;backdrop-filter:blur(4px);transition:background .2s,opacity .2s;opacity:.55}
.home-hero__toggle:hover{opacity:1;background:rgba(10,7,9,.6)}
.home-hero__toggle .home-hero__toggle-play{display:none}
.home-hero__toggle.is-paused .home-hero__toggle-pause{display:none}
.home-hero__toggle.is-paused .home-hero__toggle-play{display:block;margin-left:2px}
@media (max-width:520px){.home-hero__toggle{right:.7rem;bottom:.7rem}}
.home-hero__grade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,7,9,.92),rgba(10,7,9,.35) 70%),linear-gradient(0deg,rgba(10,7,9,.85),transparent 55%)}
.home-hero__inner{position:relative;z-index:2;padding-block:clamp(6rem,14vh,10rem) clamp(3.5rem,10vh,7rem)}
.home-hero__title{font-size:clamp(3.4rem,12vw,9.5rem);margin-bottom:.35em}
.home-hero__text{max-width:44ch;font-size:clamp(1.05rem,1.2vw + .8rem,1.4rem);color:#e7dfd4;margin-bottom:1.8rem}
.home-hero__cue{position:absolute;z-index:2;left:50%;bottom:1.4rem;transform:translateX(-50%);color:var(--cream);font-size:1.1rem;opacity:.7;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,.4rem)}}

/* ---- Page hero (interiores) --------------------------------------------- */
.page-hero{position:relative;overflow:hidden;color:var(--cream);padding-block:clamp(8rem,20vh,13rem) clamp(3.5rem,8vw,6rem)}
.page-hero__bg{position:absolute;inset:0;z-index:0;background:var(--hero-img) center/cover no-repeat}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,7,9,.9),rgba(10,7,9,.45) 75%),linear-gradient(0deg,rgba(10,7,9,.6),transparent 60%)}
.page-hero__inner{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem;font-size:.8rem;color:#cabfb2}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{opacity:.5}
.crumbs [aria-current]{color:#fff}
.page-hero__title{font-size:clamp(2.8rem,9vw,6.5rem);max-width:16ch}
.page-hero__text{max-width:52ch;color:#e7dfd4;font-size:clamp(1.05rem,1vw + .8rem,1.3rem);margin-top:.5rem}

/* Variante con el texto a la derecha: el degradado oscuro también se
   voltea, si no el texto quedaría sobre la parte más clara de la imagen. */
.page-hero--right::after{background:linear-gradient(270deg,rgba(10,7,9,.9),rgba(10,7,9,.45) 75%),linear-gradient(0deg,rgba(10,7,9,.6),transparent 60%)}
/* Baja el bloque de texto hacia el borde inferior, para dejar ver la parte
   alta de la foto (la cara de uno de los músicos) sin que el texto la tape. */
.page-hero--right{display:flex;align-items:flex-end;min-height:90svh;padding-block:2rem clamp(1.5rem,3vw,2.5rem)}
.page-hero--right .page-hero__inner{text-align:right}
.page-hero--right .page-hero__title,
.page-hero--right .page-hero__text{margin-left:auto}
.page-hero--right .crumbs,
.page-hero--right .btn-row{justify-content:flex-end}

/* ---- Split ---------------------------------------------------------------- */
.split__grid{display:grid;gap:clamp(1.5rem,4vw,4.5rem)}
.tag-cloud{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.6rem;padding:0}
.tag-cloud li{border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;transition:transform .2s var(--ease)}
.tag-cloud li:hover{transform:translateY(-3px) scale(1.05)}

/* ---- Services ----------------------------------------------------------------- */
.services__grid{display:grid;gap:1rem;margin-top:1.5rem}
.service-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;min-height:22rem;padding:clamp(1.4rem,3vw,2.4rem);overflow:hidden;color:var(--cream);isolation:isolate}
.service-card::before{content:"";position:absolute;inset:0;background:var(--card-img) center/cover no-repeat;z-index:-2;transition:transform .5s var(--ease)}
.service-card::after{content:"";position:absolute;inset:0;background:linear-gradient(20deg,rgba(10,6,8,.92),rgba(10,6,8,.15));z-index:-1}
.service-card:hover::before{transform:scale(1.06)}
.service-card__title{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,6vw,4rem);line-height:.9;margin-bottom:.3rem}
.service-card__text{max-width:34ch;color:#e7dfd4}
.service-card__go{position:absolute;top:clamp(1.4rem,3vw,2.4rem);right:clamp(1.4rem,3vw,2.4rem);color:var(--accent);font-size:1.6rem}

/* ---- Participa (mención "en directo" en Bodas/Eventos) ---------------------- */
.participa{background:var(--wine)}
.participa .lead{color:#f0e6e2}
.participa__grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.participa__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.participa__list li{display:flex;gap:1rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--line-light);font-size:1.1rem}
.participa__list b{font-family:var(--display);color:var(--accent-hi)}
@media (min-width:820px){.participa__grid{grid-template-columns:1.3fr .7fr}}

/* ---- Feature (en directo teaser) --------------------------------------------- */
.feature__grid{display:grid;gap:clamp(1.5rem,4vw,4rem)}
.feature__list{list-style:none;margin:0;padding:clamp(1.4rem,3vw,2.2rem);background:var(--wine);color:var(--cream);border-radius:var(--radius)}
.feature__list li{padding:1rem 0;border-bottom:1px solid var(--line-light);font-size:1.1rem}
.feature__list li:last-child{border-bottom:0}
.feature__list b{color:var(--accent-hi)}

/* ---- Steps ------------------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.section--dark .steps li,.section--tinted .steps li{border-color:var(--line)}
.steps span{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--accent-text)}
.steps h3{margin-bottom:.25rem}
.steps p{margin:0}

/* ---- Check / cards lists --------------------------------------------------- */
.check-list{list-style:none;margin:0;padding:0}
.check-list li{position:relative;padding:.9rem 0 .9rem 2rem;border-bottom:1px solid var(--line)}
.check-list li::before{content:"♪";position:absolute;left:0;color:var(--accent);font-weight:700}
.check-list a{color:var(--accent-text);text-decoration:underline;text-underline-offset:.15em}
.check-list a:hover{color:var(--accent-hi)}
.cards-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.cards-list li{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;background:var(--paper)}
.cards-list h3{margin-bottom:.4rem}
.cards-list p{margin:0;color:var(--muted)}

/* ---- Members ------------------------------------------------------------------- */
.members-strip__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.members-strip__grid img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#2a2226;filter:grayscale(.8) contrast(1.02) brightness(1.05);transition:filter .3s,transform .5s}
.members-strip__grid a{display:block;position:relative}
.members-strip__grid a::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(12,9,11,.85));pointer-events:none}
.members-strip__grid a:hover img{filter:none;transform:scale(1.03)}
.members-strip__name{position:absolute;left:.7rem;bottom:1.4rem;color:#fff;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.15rem}
.members-strip__role{position:absolute;left:.7rem;bottom:.7rem;color:var(--accent-hi);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}

.members{display:grid;gap:clamp(2rem,5vw,4rem)}
.member{display:grid;gap:1.5rem;align-items:start}
/* Apiladas en columna estrecha: el nombre y la bio van primero, la foto
   debajo. En el grid de dos columnas (≥960px) se vuelve a poner la foto
   primero (izquierda), salvo en los músicos en espejo, que ya quedan así
   por defecto (ver más abajo). */
.member img{order:2;width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.04);margin-bottom:3rem}
.member>div{order:1}
.member p a{color:var(--accent-text);text-decoration:underline;text-underline-offset:.15em}
.member p a:hover{color:var(--accent-hi);text-decoration-thickness:2px}
.member__role{display:block;margin:.4rem 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-text);font-size:1.1rem}
.manifesto blockquote{margin:1rem 0 1.5rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.5vw,2.6rem);line-height:1.25}

/* ---- Accordion --------------------------------------------------------------- */
.accordion details{border-top:1px solid var(--line)}
.accordion details:last-child{border-bottom:1px solid var(--line)}
.accordion summary{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.25rem 0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.05rem,1.6vw,1.35rem);list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary span{color:var(--accent);font-size:1.5rem;transition:transform .2s}
.accordion details[open] summary span{transform:rotate(45deg)}
.accordion details p{max-width:70ch;padding:0 0 1.4rem;color:var(--muted)}
.faq-layout{display:grid;gap:clamp(2rem,5vw,4rem)}

/* ---- Insignia giratoria (logo + texto en círculo, estilo thecucumbers.es) --- */
.spin-feature__grid{display:grid;justify-items:center;align-items:center;gap:clamp(1.5rem,4vw,3rem);text-align:center}
.article__spin{display:flex;justify-content:center;margin-top:2.5rem}
.spin-badge{position:relative;width:15rem;height:15rem;flex:none}
.spin-badge__ring{position:absolute;inset:-3%;display:block;width:106%;height:106%;overflow:visible;transform-box:fill-box;transform-origin:center;animation:spin-badge-rotate 18s linear infinite}
.spin-badge__ring text{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:.05em;text-transform:uppercase;fill:var(--ink)}
.spin-badge__logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58%;height:auto}
@keyframes spin-badge-rotate{to{transform:rotate(-360deg)}}
@media (min-width:720px){
  .spin-feature__grid{grid-template-columns:1fr auto;justify-items:start;text-align:left}
}
.faq-layout aside{align-self:start}
.faq-lite{background:var(--paper-2)}
.faq-lite .link-arrow{margin-top:2rem}

/* ---- Repertorio -------------------------------------------------------------- */
.repertoire-group{margin-top:2.5rem}
.repertoire-group h3{color:var(--accent);border-bottom:2px solid var(--line);padding-bottom:.5rem}
.repertoire-more{margin:2.5rem 0;text-align:center;font-family:var(--display);font-size:1.4rem;font-weight:700;text-transform:uppercase}
.song-list{list-style:none;margin:1rem 0 0;padding:0;columns:2;column-gap:2.5rem}
@media (max-width:719px) and (orientation:portrait){.song-list{columns:1}}
.song-list li{break-inside:avoid;padding:.5rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem}
.song-list__artist{color:var(--muted);font-size:.9rem;text-align:right;flex-shrink:0;display:inline-block;cursor:default;transition:color .25s var(--ease),transform .25s var(--ease),font-style .25s var(--ease)}
.song-list__artist:hover{color:var(--accent);transform:translateY(-1px);font-family:var(--serif);font-style:italic;font-size:1em}
.inline-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:clamp(1.4rem,3vw,2rem);background:var(--paper-2);color:var(--ink-2);border-radius:var(--radius);margin-bottom:1rem}
.inline-cta p{margin:0}

/* ---- Gallery ------------------------------------------------------------- */
/* Mosaico ajustado (mismas filas de alto uniforme, ancho exacto del
   contenedor) con caída en perspectiva 3D al entrar en pantalla, igual que
   la galería de fotos de la web anterior. El ancho/alto de cada pieza lo
   calcula site.js (initMasonry) a partir de data-w/data-h; aquí solo el
   aspecto visual y la animación. */
/* Copiado literal de https://cuatrogatosband.com/iestilos2min.css (galería
   de fotos de la web anterior, plugin jQuery Collage Plus). No reescrito:
   mismas reglas, mismos valores, mismos prefijos de navegador. */
.Collage{padding:10px}
.Collage img{margin:0;padding:0;display:inline-block;vertical-align:bottom;opacity:1;border:6px solid #FFF}
.Image_Wrapper{opacity:0;-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.1);-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.1);box-shadow:0px 2px 4px rgba(0,0,0,0.1);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
/* El plugin no fija ningún color de texto para el rótulo del hover: hereda
   el color de párrafo normal de la página (oscuro), casi invisible sobre
   el fondo semitransparente negro (.Caption_Background). */
.Caption_Content{color:#fff;font-size:.85rem;line-height:1.3}
.effect-parent{-webkit-perspective:1300px;-moz-perspective:1300px;perspective:1300px}
.effect-3{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(400px) translateY(300px) rotateX(-90deg);-moz-transform:translateZ(400px) translateY(300px) rotateX(-90deg);transform:translateZ(400px) translateY(300px) rotateX(-90deg);-webkit-animation:fallPerspective ease-in-out forwards;-moz-animation:fallPerspective ease-in-out forwards;animation:fallPerspective ease-in-out forwards}
@-webkit-keyframes fallPerspective{100%{-webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg);opacity:1}}
@-moz-keyframes fallPerspective{100%{-moz-transform:translateZ(0px) translateY(0px) rotateX(0deg);opacity:1}}
@keyframes fallPerspective{100%{transform:translateZ(0px) translateY(0px) rotateX(0deg);opacity:1}}
.effect-duration-1{-webkit-animation-duration:.4s;-moz-animation-duration:.4s;animation-duration:.4s}
.effect-duration-2{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s}
.effect-duration-3{-webkit-animation-duration:.6s;-moz-animation-duration:.6s;animation-duration:.6s}
.effect-duration-4{-webkit-animation-duration:.7s;-moz-animation-duration:.7s;animation-duration:.7s}
.effect-duration-5{-webkit-animation-duration:.8s;-moz-animation-duration:.8s;animation-duration:.8s}
.effect-duration-6{-webkit-animation-duration:.9s;-moz-animation-duration:.9s;animation-duration:.9s}
.effect-duration-7{-webkit-animation-duration:.95s;-moz-animation-duration:.95s;animation-duration:.95s}
.effect-duration-8{-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration:1s}
.effect-duration-9{-webkit-animation-duration:1.05s;-moz-animation-duration:1.05s;animation-duration:1.05s}
.effect-duration-10{-webkit-animation-duration:1.1s;-moz-animation-duration:1.1s;animation-duration:1.1s}
.photo-credits{margin-top:1rem;color:var(--muted);font-size:.9rem}
.photo-credits a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.photo-credits a:hover{color:var(--accent-text)}
/* "La pista" y "Vídeo" van pegadas en /repertorio/: un tercio del espaciado
   habitual entre ambas en vez de sumar el padding completo de las dos secciones. */

/* ---- Vídeo de YouTube (fachada) ---------------------------------------- */
.embed-grid{display:grid;gap:1rem;margin-top:1.5rem}
.ytlite{margin:0}
.ytlite__btn{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--ink);cursor:pointer}
.ytlite__thumb{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease),filter .3s}
.ytlite__btn:hover .ytlite__thumb{transform:scale(1.03);filter:brightness(.85)}
.ytlite__play{position:absolute;inset:0;margin:auto;width:4.2rem;height:3rem;border-radius:14px;background:var(--spark);display:block}
.ytlite__play::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-style:solid;border-width:.65rem 0 .65rem 1.05rem;border-color:transparent transparent transparent #fff}
.ytlite__btn:hover .ytlite__play{background:var(--accent)}
.ytlite__notice{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);width:max-content;max-width:calc(100% - 2rem);padding:.45rem .7rem;border-radius:6px;background:rgba(13,10,12,.85);color:#fff;font:700 .8rem var(--display);text-transform:uppercase}
.ytlite__notice[hidden]{display:none}
.ytlite figcaption{margin-top:.7rem;font-size:.88rem;color:var(--muted)}
.ytlite figcaption a{text-decoration:underline}
.ytlite iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);display:block}

/* ---- Spotify ---------------------------------------------------------------- */
.spotify-cta{display:grid;gap:1.4rem;padding:clamp(1.4rem,3vw,2rem);background:var(--wine);color:var(--cream);border-radius:var(--radius);margin-bottom:1rem}
.spotify-cta h2{margin:.2rem 0}
.spotify-cta p{margin:0}
.spotify-cta a{color:var(--accent-hi);text-decoration:underline}
.spotify-embed{min-height:352px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.25)}
.spotify-embed iframe{width:100%;height:352px;display:block}
.spotify-tagline{text-align:center;margin:clamp(2.5rem,6vw,4.5rem) 0}
.videos-tagline{text-align:left;margin:0}
@media (min-width:820px){
  .spotify-cta{grid-template-columns:.8fr 1.2fr;align-items:center}
}

/* ---- Reviews: carrusel único (Bodas.net + Google + Musiqua), avatar con
   inicial, nombre, 5 estrellas y sello "Publicado en <fuente>"; toda la
   tarjeta enlaza a la reseña real. --------------------------------------- */
.reviews{background:var(--paper-2)}
.reviews__marquee{position:relative}
.reviews__track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;-webkit-overflow-scrolling:touch;cursor:grab}
/* Arrastrar con el ratón (site.js): se desactiva el snap mientras se
   arrastra para que no "tire" del scroll a mitad de gesto. */
.reviews__track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.reviews__track::-webkit-scrollbar{height:6px}
.reviews__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* Relleno invisible al inicio/final para que la primera y la última tarjeta
   también puedan quedar centradas, no solo las intermedias. */
.reviews__track::before,.reviews__track::after{content:"";flex:0 0 calc((100% - min(85%,22rem))/2)}
/* scroll-snap-stop:always obliga a parar en cada tarjeta aunque el swipe
   sea rápido; sin esto (comportamiento "normal") un deslizamiento con algo
   de velocidad salta varias tarjetas de golpe en móvil. */
.review-card{scroll-snap-align:center;scroll-snap-stop:always;flex:0 0 min(85%,22rem);display:flex;flex-direction:column;gap:.9rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.2rem,2.5vw,1.6rem);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s;cursor:grab}
/* Sin esto, el cursor de "mano de enlace" propio de <a> tapa el "grab" del
   track al pasar por encima de una tarjeta (aunque arrastrar sí funciona
   igual ahí: ver draggable="false" en la plantilla y el click en site.js). */
.reviews__track.is-dragging .review-card{cursor:grabbing}
.review-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.review-card__head{display:flex;align-items:center;gap:.7rem}
.review-card__avatar{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--cream);background:var(--accent)}
.review-card:nth-child(5n+2) .review-card__avatar{background:var(--wine)}
.review-card:nth-child(5n+3) .review-card__avatar{background:var(--spark)}
.review-card:nth-child(5n+4) .review-card__avatar{background:var(--ink-2)}
.review-card:nth-child(5n+5) .review-card__avatar{background:var(--muted)}
.review-card__who{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.review-card__name{font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-card__stars{color:var(--accent);font-size:.8rem;letter-spacing:.12em}
.review-card blockquote{margin:0;font-size:.98rem;line-height:1.45}
/* Pie de la tarjeta: "Publicado en X" a la izquierda y el icono redondo de
   la plataforma a la derecha, en la misma línea, pegado siempre abajo
   (margin-top:auto lo empuja al final de la columna flex de .review-card,
   se desplace lo que se desplace el texto de la reseña). Sin enlace propio
   en el icono: ya vive dentro de .review-card, que enlaza a la ficha real. */
.review-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.review-card__badge{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.review-card__platform{flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 4px rgba(20,16,19,.25)}
.review-card__platform img{width:1.05rem;height:1.05rem;display:block}
.carousel-controls{display:flex;gap:.5rem;margin-top:1rem}
.carousel-controls button{width:3rem;height:3rem;border:1px solid var(--line);border-radius:50%;font-size:1.1rem}
.carousel-controls button:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.reviews__note{margin-top:1.5rem;font-size:.9rem;color:var(--muted)}
.reviews__note a{text-decoration:underline}
.reviews__sep{margin:0 .4em}

/* Tarjeta invitación a reseñar, intercalada con separación creciente entre
   una y la siguiente (ver _review_cta_positions() en views.py y
   section_reviews.html): mismo tamaño/comportamiento de carrusel que
   .review-card, pero con look propio para que no se confunda con una
   reseña real. */
.review-card--cta{align-items:center;justify-content:center;text-align:center;gap:.7rem;background:var(--paper-2);border-style:dashed;border-color:var(--muted)}
.review-card--cta:hover{background:var(--accent);border-color:var(--accent);border-style:solid}
.review-card__cta-icon{flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 1px 4px rgba(20,16,19,.25)}
.review-card__cta-title{font-family:var(--display);font-weight:800;font-size:1.05rem}
.review-card__cta-text{margin:0;font-size:.9rem;color:var(--muted)}
.review-card--cta:hover .review-card__cta-text{color:var(--ink)}
.review-card__cta-link{font-weight:700;text-decoration:underline}

/* ---- Awards -------------------------------------------------------------------- */
/* Variante clara (ver section_awards.html/tail.html, `light`): para páginas como
   /eventos/ donde no hay sección de reseñas entre "Nos avalan..." y .clients, así
   no quedan dos secciones negras seguidas. Sin overrides de color: los estilos
   por defecto de .eyebrow/.award-badge ya están pensados para fondo claro; son
   las reglas ".section--dark ..." las que los adaptaban para fondo oscuro. */
.awards--light{background:var(--paper-2)}
.awards__row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.5rem 0}
.award-badge{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;text-align:center}
.award-badge b small{font-size:.5em;color:var(--muted)}
.award-seal{display:grid;place-items:center;padding:.6rem;text-align:center}
.award-seal img{width:clamp(6rem,14vw,7.5rem);height:auto}
.award-badge--wide a{display:block}
.award-badge b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);color:var(--accent);line-height:1.15}
.award-badge span{display:block;font-size:.9rem;color:var(--muted);line-height:1.15}
.award-badge__link{text-decoration:underline}
.section--dark .award-badge{border-color:var(--line-light)}
.section--dark .award-badge span,.section--dark .award-badge b small{color:#cabfb2}

/* ---- Clients marquee -------------------------------------------------------
   Antes era una animación CSS pura (transform, sin interacción). Ahora
   `.clients__marquee` es el contenedor con scroll táctil real: site.js
   mueve `scrollLeft` solo con requestAnimationFrame, pero el dedo puede
   arrastrarlo en cualquier momento (scroll nativo) y al soltar retoma el
   movimiento automático. El track sigue duplicado x2 para el bucle infinito
   (se "rebobina" a la mitad sin que se note, tanto en automático como arrastrando). */
.clients{background:var(--ink);color:var(--cream)}
.clients .eyebrow{color:#cabfb2}
/* Sin -webkit-overflow-scrolling:touch a propósito: es un residuo de antes
   de iOS 13 (ya no hace falta para el scroll con inercia) y, peor, hace que
   iOS deje de repintar cuando se cambia `scrollLeft` por JS sin que el dedo
   esté tocando la pantalla en ese momento — justo lo que hace el auto-scroll
   de más abajo. Con esta propiedad puesta, el auto-scroll no se veía nunca
   en iPhone (aunque el valor de scrollLeft sí cambiaba). */
.clients__marquee{overflow-x:auto;overflow-y:hidden;margin:2rem 0;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients__marquee::-webkit-scrollbar{display:none}
.clients__track{display:flex;align-items:flex-end;gap:3.2rem;list-style:none;margin:0;padding:0;width:max-content}
.client{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:4.4rem;justify-content:flex-end}
.client__logo{height:2.8rem;width:auto;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);opacity:.55;transition:opacity .25s}
.client:hover .client__logo{opacity:1}
.client__name{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:#8f8578;white-space:nowrap}
.client__link{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.client__link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* ---- Band CTA strip ------------------------------------------------------- */
.band-cta{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-block:clamp(4rem,10vw,8rem)}
.band-cta__bg{position:absolute;inset:0;background:var(--cta-img) center/cover no-repeat;z-index:-2}
.band-cta::after{content:"";position:absolute;inset:0;background:rgba(10,7,9,.72);z-index:-1}
.band-cta__inner{position:relative;max-width:50ch;margin-inline:auto}
.band-cta__title{font-size:clamp(2.4rem,7vw,5rem)}
.band-cta__text{font-size:clamp(1.1rem,1.5vw,1.4rem);color:#e7dfd4;margin-bottom:1.8rem}

/* ---- Foto de fondo fija tipo parallax (misma técnica que thecucumbers.es:
   el contenido de la página se desplaza, la foto queda anclada al viewport
   y solo se le ve/deja de ver a través del "marco" de la sección).
   background-attachment:fixed (con o sin filter de por medio) resultó
   demasiado frágil en iOS, y sincronizar la posición a mano con JS en cada
   scroll (intento previo) se veía a trompicones: JS corre en un hilo
   distinto al del scroll nativo y nunca queda perfectamente sincronizado
   fotograma a fotograma, sobre todo en iOS.
   Solución sin JS: `.fixedbg-photo` es un position:fixed de verdad —igual
   que el preloader, que ya usa este mismo mecanismo en este sitio
   sin problemas— situado FUERA de `.fixedbg` (no anidado en su
   overflow:hidden, que es precisamente donde position:fixed falla en iOS).
   Al ser realmente fijo, el navegador lo ancla al viewport él solo, sin
   ayuda de JS: cero desfase posible. Como cubre toda la pantalla siempre,
   se apoya en que el resto de secciones (.section) tengan fondo opaco, para
   que solo se vea "a través" del hueco de `.fixedbg`, que no pinta fondo
   propio (deja pasar la foto) salvo la capa oscura de `::after`. */
.fixedbg-photo{position:fixed;inset:0;z-index:-1;background:var(--fixedbg-img) center/cover no-repeat}
.fixedbg{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-block:clamp(4rem,10vw,8rem);background:none}
.fixedbg::after{content:"";position:absolute;inset:0;background:rgba(20,16,19,.66);z-index:-1;-webkit-backdrop-filter:saturate(.92) contrast(1.05);backdrop-filter:saturate(.92) contrast(1.05)}
.fixedbg__inner{position:relative;max-width:58ch;margin-inline:auto}
.fixedbg .tag-cloud{justify-content:center}
.fixedbg .tag-cloud li{border-color:rgba(245,241,232,.35);color:var(--cream)}
.fixedbg .link-arrow{color:var(--cream)}

/* ---- Contact / form ------------------------------------------------------- */
.contact__stack{display:grid;gap:clamp(2rem,5vw,4rem);max-width:960px}
.contact__points{list-style:none;margin:1.5rem 0;padding:0}
.contact__points li{display:flex;flex-direction:column;padding:.9rem 0;border-bottom:1px solid var(--line)}
.contact__points span{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--accent-text)}
.contact__points a{font-size:1.15rem}
.contact__form-wrap{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 30px 60px -30px rgba(20,16,19,.3)}
/* En móvil vertical el "card" resta ancho útil a los campos; se retira su
   marco y se deja solo el margen del .wrap, igual que el resto de secciones. */
@media (max-width:719px) and (orientation:portrait){
  .contact__form-wrap{background:none;border:none;border-radius:0;box-shadow:none;padding:1.4rem 0}
}
.form__row{display:grid;gap:1rem}
.field{display:flex;flex-direction:column;margin-bottom:1rem}
.field label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;margin-bottom:.35rem}
.field input,.field select,.field textarea{font:inherit;padding:.75rem .85rem;border:1px solid #c4bbac;border-radius:8px;background:#fff;color:var(--ink-2);min-height:3rem}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:0}
.field--error input,.field--error select,.field--error textarea{border-color:var(--spark)}
.field__errors,.form__field-errors,.form__errors{color:#a3271b;font-size:.88rem;margin-top:.3rem}
.form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__consent{display:flex;gap:.6rem;align-items:center;margin:.5rem 0 1.2rem;font-size:.95rem}
.form__consent input{flex:0 0 auto;margin:0}
.form__consent a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.18em}
.form-success{text-align:center;padding:1.5rem 0}
.form-success>span{display:grid;place-items:center;width:3.5rem;height:3.5rem;margin:0 auto 1rem;border-radius:50%;background:var(--accent);color:var(--ink);font-size:1.6rem}

/* ---- Legal / map / error --------------------------------------------------- */
.legal-copy .wrap{max-width:960px}
.legal-copy h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:0}
.legal-copy h3{font-size:1.25rem;margin-top:2.4rem}
.legal-copy p,.legal-copy li{color:var(--ink-2)}
.legal-updated{color:var(--muted);font-size:.9rem;border-bottom:1px solid var(--line);padding-bottom:1rem}
.legal-nav{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.25rem}
.legal-nav a{padding:.5rem .75rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-family:var(--display);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.legal-nav a:hover{border-color:var(--accent);color:var(--accent)}
.legal-nav a[aria-current]{border-color:var(--accent);background:var(--accent);color:var(--ink)}
.legal-section{padding-top:clamp(2.5rem,6vw,4.5rem);scroll-margin-top:5rem}
.legal-section+.legal-section{margin-top:clamp(2.5rem,6vw,4.5rem);border-top:1px solid var(--line)}
.cookie-preferences{margin:1.5rem 0;padding:clamp(1rem,3vw,1.5rem);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.cookie-table{display:grid;gap:.65rem;margin:1rem 0}
.cookie-choice{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;text-align:left;border:1px solid #d5a9a2;border-radius:10px;background:#fff1ee;color:var(--ink-2);cursor:pointer;transition:background .2s,border-color .2s}
.cookie-choice span{display:grid;gap:.25rem}
.cookie-choice small{font-size:.82rem;font-weight:400;line-height:1.4;color:var(--muted)}
.cookie-choice b{flex:0 0 auto;font-family:var(--display);font-size:.78rem;text-transform:uppercase;color:#96352d}
.cookie-choice.is-accepted{border-color:#91b49b;background:#edf7ef}
.cookie-choice.is-accepted b{color:#27683a}
.cookie-choice:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.cookie-preferences__actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}
@media (max-width:560px){.cookie-choice{align-items:flex-start;flex-direction:column}.cookie-choice b{align-self:flex-end}}
.cookie-required-dialog{width:min(92vw,34rem);padding:0;border:0;border-radius:var(--radius);background:var(--paper);color:var(--ink-2);box-shadow:0 30px 80px -20px rgba(0,0,0,.65)}
.cookie-required-dialog::backdrop{background:rgba(10,7,9,.72);backdrop-filter:blur(3px)}
.cookie-required-dialog__inner{position:relative;padding:clamp(1.5rem,5vw,2.75rem)}
.cookie-required-dialog__inner h2{font-size:clamp(1.7rem,5vw,2.4rem);margin-bottom:1rem}
.cookie-required-dialog__inner p{margin-bottom:1rem}
.cookie-required-dialog__close{position:absolute;top:.8rem;right:.8rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:50%}
.cookie-required-dialog__close:hover,.cookie-required-dialog__close:focus-visible{border-color:var(--accent);color:var(--accent)}
.zone-layout{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
.zone-photo{min-height:20rem;border-radius:var(--radius);overflow:hidden}
.zone-photo img{display:block;width:100%;height:100%;object-fit:cover}
.error-page{min-height:80vh;display:flex;align-items:center}

/* ---- Blog --------------------------------------------------------------------- */
/* Altura fija (igual para todas las tarjetas) con grid-template-rows:auto 1fr
   en móvil (la foto mide lo que le toque por su aspect-ratio, el texto ocupa
   el resto) y una sola fila a pantalla completa en escritorio. El texto se
   centra verticalmente en su mitad con flexbox, y se recorta con
   line-clamp si no cabe, para que ninguna tarjeta desborde su altura. */
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem}
.post-card a{display:grid;grid-template-rows:auto 1fr;gap:1.2rem;height:29rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);transition:transform .2s var(--ease),box-shadow .2s}
.post-card a:hover{transform:translateY(-3px);box-shadow:0 24px 50px -24px rgba(20,16,19,.35)}
.post-card__media{aspect-ratio:16/10;min-height:0}
.post-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:0 clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2rem)}
.post-card__meta{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--accent-text);margin-bottom:.4rem}
.post-card h3{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:.4rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.post-list-heading{margin:0 0 1.5rem}
.post-list + .post-list-heading{margin-top:var(--section-y)}
.post-card p{color:var(--muted);margin-bottom:1rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.post-card__body .link-arrow{align-self:flex-start}

.article__meta{font-size:.85rem;color:var(--muted);margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.prose{font-size:clamp(1.05rem,.4vw + .95rem,1.2rem);line-height:1.7;display:flow-root}
.prose a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent)}
.prose__lead{font-size:1.25em;line-height:1.5;color:var(--ink)}
.prose h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:2.5rem 0 .8rem}
.prose p{margin:0 0 1.2rem}
.prose ul{margin:0 0 1.4rem;padding-left:1.3rem}
.prose li{margin-bottom:.6rem}
.prose em{font-family:var(--serif);font-style:italic;font-size:1.08em;color:var(--ink)}
.prose strong{font-weight:700}
.prose h3{font-size:clamp(1.2rem,2.2vw,1.6rem);margin:2rem 0 .7rem;color:var(--ink)}
.prose img{display:block;max-width:100%;height:auto;border-radius:var(--radius);margin:1.5rem 0}
.prose iframe{max-width:100%;border:0;border-radius:12px}
/* Imágenes intercaladas en el texto (p.ej. por-que-cuanto-cuesta-euros-banda-versiones):
   más pequeñas y flotadas, alternando lado, para que el texto corra a su lado. En
   móvil (columna estrecha) se descarta el float y quedan a ancho completo, igual
   que el resto de imágenes del blog. */
@media (min-width:640px){
  .prose .img-float-left,.prose .img-float-right{max-width:44%;margin-top:.3rem;margin-bottom:1.2rem}
  .prose .img-float-left{float:left;margin-right:1.6rem}
  .prose .img-float-right{float:right;margin-left:1.6rem}
}
.videoytb{position:relative;aspect-ratio:16/9;margin:1.8rem 0;border-radius:12px;overflow:hidden}
.videoytb iframe{position:absolute;inset:0;width:100%;height:100%;border-radius:0;margin:0}
.consent-embed{position:relative;display:grid;place-items:center;min-height:18rem;margin:1.5rem 0;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);overflow:hidden}
.consent-embed--video{aspect-ratio:16/9;min-height:0}
.consent-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;margin:0}
.consent-embed__placeholder{max-width:28rem;padding:1.4rem;text-align:center}
.consent-embed__placeholder p{margin:0 0 .8rem;font-size:.95rem}

/* Directorio de bandas (bandas-tributo-versiones-cartagena.html) */
.bandas-grid{list-style:none;margin:1.5rem 0 2rem;padding:0;display:grid;gap:1.2rem}
.banda-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:var(--paper)}
.banda-card h3{margin-top:0;font-size:1.15rem}
.banda-card__logo{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--paper-2);border-radius:var(--radius);margin:0 0 1rem}
.banda-card p{flex-grow:1;font-size:.95rem}
.banda-card__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.banda-card__social img{width:2.75rem;height:2.75rem;border-radius:50%;margin:0}
@media (min-width:720px){.bandas-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.bandas-grid{grid-template-columns:repeat(3,1fr)}}

.article__cta{margin:3rem 0 1.5rem;padding:1.6rem;background:var(--paper-2);border-radius:var(--radius);text-align:center}
.article__cta p{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:1rem}
.article__back{margin-top:1rem}

@media (min-width:720px){
  .post-card a{grid-template-columns:.9fr 1.1fr;grid-template-rows:1fr;height:22rem;align-items:stretch}
  .post-card__media{aspect-ratio:auto;height:100%}
  .post-card__body{padding:clamp(1.2rem,3vw,2rem);padding-left:0}
  .post-card:nth-child(even) a{grid-template-columns:1.1fr .9fr}
  .post-card:nth-child(even) .post-card__media{order:2}
  .post-card:nth-child(even) .post-card__body{order:1;padding-left:clamp(1.2rem,3vw,2rem);padding-right:0}
}

/* ---- Footer --------------------------------------------------------------- */
.site-footer{background:#0d0a0c;color:#b6ada2;padding-block:clamp(3rem,6vw,5rem) 0}
.site-footer__inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}
.site-footer__tagline{margin:0;color:#b6ada2}
.site-footer__social{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:.5rem}
.social-link{display:grid!important;place-items:center;width:2.6rem;height:2.6rem;padding:.55rem!important;border:1px solid rgba(245,241,232,.2);border-radius:50%;color:#fff!important;transition:color .3s,background .3s,border-color .3s,transform .3s var(--ease)}
.social-link svg{display:block;width:100%;height:100%}
.social-link:hover,.social-link:focus-visible,.social-link:active{background:#fff;border-color:#fff;transform:translateY(-2px)}
.social-link:hover{transition-delay:.08s}
.social-link--instagram:hover,.social-link--instagram:focus-visible,.social-link--instagram:active{color:#e4405f!important}
.social-link--youtube:hover,.social-link--youtube:focus-visible,.social-link--youtube:active{color:#f00!important}
.social-link--facebook:hover,.social-link--facebook:focus-visible,.social-link--facebook:active{color:#1877f2!important}
.social-link--spotify:hover,.social-link--spotify:focus-visible,.social-link--spotify:active{color:#1ed760!important}
.social-link--email:hover,.social-link--email:focus-visible,.social-link--email:active{color:var(--accent)!important}
.social-link--phone:hover,.social-link--phone:focus-visible,.social-link--phone:active{color:var(--accent)!important}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.2rem;margin-top:3rem;padding:2rem 0 clamp(3rem,5vw,4rem);border-top:1px solid rgba(245,241,232,.12);font-size:.8rem;text-align:center}
.site-footer__legal a:hover{color:var(--accent)}
@media (max-width:620px){
  .site-footer__legal{flex-direction:column;gap:.35rem}
}

.phone-dialog{width:min(92vw,28rem);padding:0;border:0;border-radius:var(--radius);background:var(--paper);color:var(--ink-2);box-shadow:0 30px 80px -20px rgba(0,0,0,.65)}
.phone-dialog::backdrop{background:rgba(10,7,9,.72);backdrop-filter:blur(3px)}
.phone-dialog__inner{position:relative;padding:clamp(2rem,6vw,3.5rem);text-align:center}
.phone-dialog__close{position:absolute;top:.8rem;right:.8rem;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:50%}
.phone-dialog__close:hover{border-color:var(--accent);color:var(--accent)}
.phone-dialog .eyebrow{justify-content:center}
.phone-dialog__number{margin:1.25rem 0;font-family:var(--display);font-size:clamp(1.8rem,7vw,2.8rem);font-weight:700;color:var(--ink)}

/* ---- Widget de WhatsApp (cajetín en la página) --------------------------- */
:root{--wa-green:#25d366;--wa-green-d:#1eb455;--wa-head:#0b7d67}
.wa{position:fixed;right:1rem;bottom:2rem;z-index:950;font-family:var(--text)}
.wa__toggle{position:relative;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--wa-green);color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);transition:background .2s}
.wa__toggle:hover{background:var(--wa-green-d)}
.wa__toggle-icon,.wa__toggle-close{grid-area:1/1;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.wa__toggle-close{font-size:1.2rem;opacity:0;transform:scale(0) rotate(-1turn)}
.wa.is-open .wa__toggle-icon{opacity:0;transform:scale(0) rotate(1turn)}
.wa.is-open .wa__toggle-close{opacity:1;transform:none}
.wa__toggle-hint{position:absolute;right:calc(100% + .6rem);top:50%;transform:translateY(-50%);white-space:nowrap;background:#fff;color:var(--ink-2);font-size:.8rem;font-weight:600;padding:.4rem .7rem;border-radius:8px;box-shadow:0 8px 20px -8px rgba(0,0,0,.3);cursor:pointer;transition:opacity .3s}
.wa.is-open .wa__toggle-hint{opacity:0}
@media (max-width:520px){.wa__toggle-hint{display:none}}

/* ---- Aviso de cookies ------------------------------------------------------ */
.cookie-banner{position:fixed;left:1rem;right:auto;bottom:1rem;z-index:960;max-width:26rem;background:var(--paper);color:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 20px 60px -20px rgba(0,0,0,.5);padding:1.2rem 1.4rem}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner>strong{display:block;margin-bottom:.35rem;font-family:var(--display);font-size:1.05rem;text-transform:uppercase}
.cookie-banner__inner p{margin:0 0 .9rem;font-size:.85rem;line-height:1.45}
.cookie-banner__inner a{text-decoration:underline}
.cookie-banner__actions{display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:480px){.cookie-banner{left:.6rem;right:.6rem;bottom:.6rem;max-width:none}}

.wa__panel{position:absolute;right:0;bottom:calc(100% + .8rem);width:min(22rem,calc(100vw - 2rem));background:var(--paper);border-radius:14px 14px 6px 14px;overflow:hidden;box-shadow:0 24px 60px -12px rgba(0,0,0,.4);opacity:0;transform:translateY(16px) scale(.98);transform-origin:bottom right;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.wa.is-open .wa__panel{opacity:1;transform:none}
.wa__head{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;background:var(--wa-head);color:#fff}
.wa__avatar img{width:2.6rem;height:2.6rem;border-radius:50%;object-fit:cover;background:#fff}
.wa__id{flex:1;min-width:0}
.wa__name{margin:0;font-weight:700;font-size:.98rem;line-height:1.1}
.wa__status{margin:.15rem 0 0;font-size:.72rem;opacity:.85;display:flex;align-items:center;gap:.35rem}
.wa__dot{width:.5rem;height:.5rem;border-radius:50%;background:#8ef5a8;box-shadow:0 0 0 3px rgba(142,245,168,.25)}
.wa__close{color:#fff;font-size:1rem;opacity:.8;padding:.3rem}
.wa__close:hover{opacity:1}
.wa__body{padding:1rem 1rem .6rem;background:#e6ddd0;background-image:radial-gradient(rgba(20,16,19,.045) 1px,transparent 1px);background-size:16px 16px;min-height:5.5rem}
.wa__bubble{position:relative;background:#fff;border-radius:2px 10px 10px 10px;padding:.7rem .9rem 1.3rem;font-size:.9rem;line-height:1.45;color:var(--ink-2);box-shadow:0 2px 6px -2px rgba(0,0,0,.15);max-width:90%;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.wa__bubble.is-in{opacity:1;transform:none}
.wa__bubble a{color:var(--wa-head);text-decoration:underline}
.wa__bubble-from{display:block;font-size:.72rem;font-weight:700;color:var(--wa-head);margin-bottom:.15rem}
.wa__bubble-time{position:absolute;right:.7rem;bottom:.4rem;font-size:.62rem;color:var(--muted)}
.wa__typing{display:flex;gap:.25rem;padding:.6rem .8rem;background:#fff;border-radius:2px 10px 10px 10px;width:max-content;box-shadow:0 2px 6px -2px rgba(0,0,0,.15)}
.wa__typing span{width:.4rem;height:.4rem;border-radius:50%;background:#b7b0a6;animation:wablink 1s infinite}
.wa__typing span:nth-child(2){animation-delay:.15s}
.wa__typing span:nth-child(3){animation-delay:.3s}
@keyframes wablink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.wa__compose{display:flex;align-items:flex-end;gap:.5rem;padding:.6rem;background:var(--paper)}
.wa__compose textarea{flex:1;font:inherit;font-size:.9rem;resize:none;border:1px solid #cdc4b5;border-radius:20px;padding:.6rem .9rem;background:#fff;max-height:120px;line-height:1.35}
.wa__compose textarea:focus{outline:2px solid var(--wa-green);border-color:var(--wa-green)}
.wa__send{flex:0 0 auto;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;background:var(--wa-green);color:#fff}
.wa__send:hover{background:var(--wa-green-d)}
.wa__note{margin:0;padding:0 .8rem .7rem;background:var(--paper);font-size:.7rem;color:var(--muted)}
.wa__note a{text-decoration:underline}
@media (max-width:520px){
  .wa{right:.8rem;bottom:1.25rem}
  .wa__panel{position:fixed;right:.8rem;left:.8rem;bottom:5.25rem;width:auto}
}

/* ---- Reveal on scroll --------------------------------------------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js [data-reveal].is-in{opacity:1;transform:none}

/* ---- Responsive ---------------------------------------------------------------- */
@media (min-width:720px){
  .awards__row{grid-template-columns:repeat(4,1fr)}
  .cards-list{grid-template-columns:repeat(3,1fr)}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .service-card{min-height:30rem}
  .members-strip__grid{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:960px){
  .split__grid{grid-template-columns:0.9fr 1.1fr;align-items:start}
  .feature__grid{grid-template-columns:1.15fr .85fr;align-items:center}
  /* De vuelta a dos columnas: la foto recupera su lugar habitual (izquierda),
     deshaciendo el order:2/1 de más arriba (pensado solo para cuando se
     apila en una columna estrecha). */
  .member{grid-template-columns:.8fr 1.2fr;gap:2.5rem}
  .member img{order:1}
  .member>div{order:2}
  /* Músicos 2º y 4º en espejo: foto a la derecha, texto a la izquierda. */
  .member:nth-child(2),.member:nth-child(4){grid-template-columns:1.2fr .8fr}
  .member:nth-child(2) img,.member:nth-child(4) img{order:2}
  .member:nth-child(2)>div,.member:nth-child(4)>div{order:1}
  .faq-layout{grid-template-columns:.7fr 1.3fr}
  .zone-layout{grid-template-columns:.9fr 1.1fr}
  .form__row{grid-template-columns:1fr 1fr}
}
@media (min-width:1200px){
  .home-hero__title{font-size:clamp(5rem,10vw,10rem)}
}

/* ---- Sin movimiento ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1;transform:none}
}