/* =========================================================
   TIPOGRAFÍA AUTOALOJADA
   =========================================================
   Poppins ya no viene de Google. Dos motivos: cargaba antes de que se
   pintara la página, y enviaba la IP de cada visitante a Google desde tu
   web, cosa que en Europa ya ha dado sentencias.

   Los seis pesos son EXACTAMENTE los que se cargaban antes: 300, 400, 500,
   600, 800 y 900. OJO, no añadas el 700 aunque el CSS lo pida en once
   sitios: al no existir, el navegador usa el 800, y así se ven hoy todos
   los <strong> de la web. Si añades el 700, cambia la negrita de las 26
   páginas de golpe.

   Los archivos están recortados a los caracteres que usan el castellano y
   el euskera (Latin-1 y puntuación), por eso pesan 7,5 KB cada uno en vez
   de 150. Los seis juntos son 45 KB, menos que una foto pequeña.

   Poppins no trae las flechas → ni ▾: eso ya pasaba con la versión de
   Google y se dibujan con la tipografía del sistema. No es un fallo.

   Licencia: SIL Open Font License 1.1. La copia está en fonts/OFL.txt.
   ========================================================= */
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/poppins-300.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/poppins-800.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;
  src:url("fonts/poppins-900.woff2") format("woff2")}


/* =========================================================
   REWIND — sistema visual derivado de la tarjeta de visita
   Paleta extraída del logotipo (valores exactos)
   ========================================================= */
:root{
  --negro:#000000;
  --coral:#EF6457;      /* "THECITY" de la tarjeta */
  --azul:#5787BE;       /* "& DESIGN" de la tarjeta */
  --rojo:#EB3E2D;
  --naranja:#F16D22;
  --ambar:#FBB217;
  --oliva:#787D3B;
  --vino:#9F4175;
  --azul-hex:#3B8BBA;
  --crema:#EAEAD7;
  --crema-clara:#F5F5EB;
  --blanco:#FFFFFF;
  --gris:#5C5C58;
  --linea:#DEDED2;
  --tinta:#24405E;   /* azul oscuro de marca: fondo de la banda de clientes */

  --display:"Poppins",system-ui,sans-serif;
  --texto:"Poppins",system-ui,-apple-system,sans-serif;
  --max:1180px;
}

*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--blanco); color:var(--negro);
  font-family:var(--texto); font-weight:400; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
/* height:auto es obligatorio ahora que todas las imágenes llevan width y
   height en el HTML: sin él, al limitar el ancho por CSS la imagen se
   deformaría estirándose a la altura declarada. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- Tipografía display + el recurso del contorno ---------- */
.display{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  line-height:.94; letter-spacing:-.025em;
  /* Red de seguridad para el euskera: palabras compuestas como KOOPERATIBENTZAKO
     miden más que la pantalla de un móvil y, dentro de un grid, ensanchaban la
     página entera (aparecía scroll horizontal). Con "anywhere" la palabra parte
     sólo cuando no cabe, y además el grid ya no la cuenta como ancho mínimo.
     Si en el texto hay un guion blando (&shy;) se usa ese punto de corte. */
  overflow-wrap:anywhere;
}
.contorno{
  color:transparent;
  -webkit-text-stroke:2.2px var(--coral);
  paint-order:stroke fill;
}
.contorno-azul{ -webkit-text-stroke-color:var(--azul); }
.contorno-oliva{ -webkit-text-stroke-color:var(--oliva); }
@media (max-width:640px){ .contorno{-webkit-text-stroke-width:1.5px} }

h1.display{font-size:clamp(2.35rem,6.4vw,4.5rem)}
h2.display{font-size:clamp(1.8rem,4vw,2.9rem)}
h3{font-family:var(--texto);font-weight:600;font-size:1.14rem;margin:0 0 .5rem;line-height:1.35}
p{margin:0 0 1.1rem}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:300;color:#26261F;max-width:62ch}
.ojo{font-family:var(--texto);font-weight:600;font-size:.78rem;letter-spacing:.16em;
     text-transform:uppercase;color:var(--gris);margin:0 0 1.1rem}

/* ---------- Botones ---------- */
.btn{display:inline-block;font-weight:600;font-size:.95rem;text-decoration:none;
  padding:15px 30px;border-radius:999px;transition:transform .15s ease,background .15s ease;}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:var(--coral);color:#fff}
.btn-primario:hover{background:var(--rojo)}
.btn-secundario{background:transparent;color:var(--negro);border:2px solid var(--negro)}
.btn-secundario:hover{background:var(--negro);color:#fff}
.btn-claro{background:#fff;color:var(--negro)}

/* ---------- Cabecera ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px;
  max-width:var(--max);margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo svg{width:38px;height:38px;flex:0 0 auto}
.logo-txt{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.88}
.logo-txt .l1{display:block;font-size:1.32rem;letter-spacing:-.01em}
.logo-txt .l2{display:block;font-size:.6rem;font-weight:800;letter-spacing:.19em;
  color:var(--coral);margin-top:2px}
nav{display:flex;align-items:center;gap:26px}
nav a{text-decoration:none;font-size:.92rem;font-weight:500}
nav a:hover{color:var(--coral)}
.idiomas{font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--gris);white-space:nowrap}
.idiomas b{color:var(--negro)}
.idiomas a{text-decoration:none}
.idiomas a:hover{color:var(--coral)}
.idiomas .apagado{opacity:.45}
@media (max-width:1000px){ nav .inicio-nav{display:none} }
@media (max-width:900px){ nav .oculta-movil{display:none} }

/* ---------- Menú móvil ----------
   Antes era una casilla de verificación oculta con una etiqueta, un truco
   clásico para no usar JavaScript. El problema: "hidden" saca la casilla del
   orden de tabulación y las etiquetas no reciben el foco, así que con el
   teclado no había forma de abrir el menú. Ahora es un <button> normal con
   aria-expanded, y el CSS se cuelga de ese atributo. */
.hamburguesa{display:none;cursor:pointer;padding:8px;margin-left:4px;
  background:none;border:0;line-height:0}
.hamburguesa span{display:block;width:24px;height:2px;background:var(--negro);margin:5px 0;
  transition:transform .2s ease,opacity .2s ease}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* El menú abierto es más alto que la pantalla de un móvil: con doce enlaces
   no cabe. Como la cabecera es sticky, lo que sobraba se quedaba por debajo
   del borde inferior y no había forma de llegar a los últimos apartados. Ahora
   el propio menú se desplaza por dentro; el guion le pone el alto máximo al
   abrirlo, porque depende de si la barra negra de arriba está a la vista.
   overscroll-behavior:contain evita que, al llegar al final del menú, el
   desplazamiento siga arrastrando la página de detrás. */
.menu-movil{display:none;border-top:1px solid var(--linea);background:#fff;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu-movil a{display:block;padding:15px 24px;text-decoration:none;font-weight:500;
  border-bottom:1px solid var(--linea)}
.menu-movil .titulo-movil{margin:0;padding:16px 24px 8px;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#A5A59B;background:var(--crema-clara);
  border-bottom:1px solid var(--linea)}
header.menu-abierto .menu-movil{display:block}
@media (max-width:900px){ .hamburguesa{display:block} }
@media (max-width:560px){ nav .btn{display:none} .barra{gap:10px} }
@media (min-width:901px){ .menu-movil{display:none!important} }


/* ---------- Hero ---------- */
.hero{padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,86px)}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero .lead{margin-top:26px}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.rastro{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.rastro svg{width:clamp(44px,8vw,78px);height:auto}
@media (max-width:900px){.rastro{justify-content:flex-start}}

/* ---------- Bandas ---------- */
section{padding:clamp(56px,7.5vw,96px) 0}
.banda-crema{background:var(--crema-clara);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.banda-negra{background:var(--negro);color:#fff}
.banda-negra .lead{color:#D8D8D0}
.banda-negra .ojo{color:#9A9A92}
.banda-negra .btn-secundario{color:#fff;border-color:rgba(255,255,255,.55)}
.banda-negra .btn-secundario:hover{background:#fff;color:var(--negro);border-color:#fff}
.contacto .acciones{justify-content:center}
.contacto .zonas{color:#B9B9B1;margin:0 auto;text-align:center}
.contacto .zonas b{color:#EDEDE4}
.banda-negra h2.display{color:#fff}

/* ---------- Rejilla de servicios ---------- */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;
  background:var(--linea);border:1px solid var(--linea);margin-top:44px}
.servicio{background:#fff;padding:34px 30px 30px;display:flex;flex-direction:column;
  transition:background .2s ease}
.servicio:hover{background:var(--crema-clara)}
.servicio svg{width:34px;height:34px;margin-bottom:20px}
.servicio p{font-size:.96rem;color:#3A3A33;flex:1}
.servicio a{font-weight:600;font-size:.9rem;text-decoration:none;color:var(--coral)}
.servicio a:hover{text-decoration:underline}

/* ---------- Cita grande ---------- */
.cita{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.06;max-width:19ch;margin:0 0 28px}

/* ---------- Pasos con el rastro de hexágonos ---------- */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px;margin-top:48px}
.paso svg{width:44px;height:44px;margin-bottom:16px}
.paso .num{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--gris);
  display:block;margin-bottom:6px}
.paso p{font-size:.94rem;color:#3A3A33;margin:0}

/* ---------- Etiquetas ---------- */
.etiquetas{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.etiqueta{border:1.5px solid var(--negro);border-radius:999px;padding:9px 18px;
  font-size:.88rem;font-weight:500}

/* ---------- Proyectos ---------- */
.proyectos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:44px}
.proyecto{text-decoration:none}
.proyecto .marco{aspect-ratio:4/3;background:var(--crema);border:1px solid var(--linea);
  display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .2s ease}
.proyecto:hover .marco{transform:translateY(-4px)}
.proyecto .marco svg{width:64px;height:64px;opacity:.5}
.proyecto h3{margin:16px 0 2px}
.proyecto span{font-size:.9rem;color:var(--gris)}

/* ---------- FAQ ---------- */
.faq{margin-top:40px;border-top:1px solid var(--linea)}
details{border-bottom:1px solid var(--linea)}
summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-weight:600;font-size:1.03rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:1.6rem;
  font-weight:300;color:var(--coral);transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 24px;max-width:70ch;color:#3A3A33;font-size:.98rem}

/* ---------- Contacto ---------- */
.contacto{text-align:center}
.contacto .display{margin:0 auto 22px}
.contacto .lead{margin:0 auto 32px;color:#D8D8D0}
.datos{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:30px;
  font-size:.94rem;color:#B9B9B1}

/* ---------- Pie ---------- */
footer{background:var(--negro);color:#8E8E86;border-top:1px solid #232323;
  padding:34px 0;font-size:.86rem}
.pie{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer a{text-decoration:none;color:#8E8E86}
footer a:hover{color:#fff}

/* ---------- Nota de prototipo (quitar en producción) ---------- */
.nota{background:var(--ambar);color:#241C00;font-size:.84rem;font-weight:500;
  padding:9px 24px;text-align:center}

.sintomas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:44px}
.sintoma{background:#fff;border-left:4px solid var(--coral);padding:20px 22px;
  font-size:1rem;font-style:italic;color:#2B2B24;box-shadow:0 1px 0 var(--linea)}
.proceso{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:48px}
@media (max-width:880px){.proceso{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.etapa svg{width:44px;height:44px;margin-bottom:16px}
.etapa .num{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--gris);
  display:block;margin-bottom:6px}
.etapa p{font-size:.94rem;color:#3A3A33;margin:0}
.arreglos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;
  margin-top:44px}
.arreglo{background:#fff;border:1px solid var(--linea);padding:30px 28px}
.arreglo .punto{width:14px;height:14px;border-radius:3px;display:inline-block;margin-bottom:14px}
.arreglo p{font-size:.95rem;color:#3A3A33;margin:0}
.destacado{background:var(--crema);border:1px solid var(--linea);padding:34px 32px;margin-top:44px}
.destacado p:last-child{margin-bottom:0}
.cta-final{text-align:center}
.cta-final .display{margin:0 auto 22px}
.cta-final .lead{margin:0 auto 32px;color:#D8D8D0}

/* =========================================================
   COMPONENTES ADICIONALES (páginas de servicio y contacto)
   ========================================================= */

/* --- Rejilla genérica de bloques con punto de color --- */
.bloques{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;
  margin-top:44px}
.bloque{background:#fff;border:1px solid var(--linea);padding:30px 28px}
.bloque .punto{width:14px;height:14px;border-radius:3px;display:inline-block;margin-bottom:14px}
.bloque p{font-size:.95rem;color:#3A3A33;margin:0}
.banda-crema .servicios{background:var(--linea)}

/* --- Listas con marca --- */
.lista{list-style:none;padding:0;margin:32px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:34px 40px}
  /* El min(300px,100%) evita el desbordamiento en pantallas de 320px: si no
     caben 300px, la columna se conforma con el ancho disponible. Por encima
     de 300px se comporta exactamente igual que antes. */
.lista li{position:relative;padding-left:26px;font-size:.98rem;line-height:1.62;color:#2B2B24}
.lista li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;
  background:var(--coral);border-radius:2px;transform:rotate(45deg)}
.lista-no li::before{background:#C9C9BF;border:0;border-radius:2px;transform:rotate(45deg)}
.lista-no li{color:var(--gris)}

/* --- Hilo: lista en vertical con los rombos unidos por una línea --- */
.hilo{list-style:none;padding:0;margin:38px 0 0;max-width:780px}
.hilo li{position:relative;padding:0 0 26px 46px;font-size:1.07rem;line-height:1.62;color:#2B2B24}
.hilo li:last-child{padding-bottom:0}
.hilo li::before{content:"";position:absolute;left:1px;top:.42em;width:16px;height:16px;
  background:var(--coral);border-radius:3px;transform:rotate(45deg)}
.hilo li::after{content:"";position:absolute;left:8px;top:calc(.42em + 24px);bottom:-6px;
  width:2px;background:var(--linea)}
.hilo li:last-child::after{display:none}
@media (max-width:600px){.hilo li{font-size:1.02rem;padding-left:38px}
  .hilo li::after{left:6px}
  .hilo li::before{width:13px;height:13px;top:.48em}}

/* --- Planes de precio --- */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:44px}
.plan{border:1px solid var(--linea);background:#fff;padding:34px 30px;display:flex;flex-direction:column}
.plan.destacado-plan{border:2px solid var(--negro);position:relative}
.plan .cinta{position:absolute;top:-13px;left:30px;background:var(--coral);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;
  border-radius:999px}
.plan .precio{font-family:var(--display);font-weight:900;font-size:2rem;letter-spacing:-.03em;
  margin:6px 0 18px;line-height:1}
.plan .precio small{font-family:var(--texto);font-weight:500;font-size:.9rem;letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:0 0 26px;flex:1}
/* Sin precio, el título quedaba pegado a la lista: el hueco lo daba la cifra. */
.plan h3+ul{margin-top:16px}
/* El botón hugea su texto en vez de estirarse de lado a lado de la tarjeta. */
.plan .btn{align-self:flex-start}
/* Con solo dos planes, las tarjetas se iban a 554 px y quedaban anchas y vacías.
   Se alinean a la izquierda con el antetítulo y el titular, no centradas. */
.planes:has(> .plan:nth-child(2):last-child){max-width:820px;margin-right:auto}
.plan li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.93rem;color:#3A3A33}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
  background:var(--coral);border-radius:2px;transform:rotate(45deg)}

/* --- Dos columnas de texto --- */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
@media (max-width:820px){.dos-col{grid-template-columns:1fr;gap:28px}}

/* --- Formulario --- */
.formulario{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;max-width:760px}
.formulario .ancho{grid-column:1/-1}
@media (max-width:680px){.formulario{grid-template-columns:1fr}}
.campo label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris);margin-bottom:7px}
.campo input,.campo select,.campo textarea{width:100%;font-family:var(--texto);font-size:1rem;
  padding:13px 15px;border:1.5px solid var(--linea);background:#fff;border-radius:4px;color:var(--negro)}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--coral)}
.consentimiento{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--gris)}
.consentimiento input{width:auto;margin-top:4px}

/* --- Bloque lateral de datos --- */
.ficha{background:var(--crema-clara);border:1px solid var(--linea);padding:30px 28px}
.ficha h3{margin-top:0}
.ficha p{font-size:.95rem;color:#3A3A33}
.ficha p:last-child{margin-bottom:0}
.ficha h3+p{margin-top:2px}
.ficha .otro{margin-top:18px}
.ficha .dato{color:var(--coral);font-weight:600;text-decoration:none;font-size:1.05rem}
.ficha .dato:hover{text-decoration:underline}
.redes-sociales a{color:var(--coral);font-weight:600;text-decoration:none}
.redes-sociales a:hover{text-decoration:underline}
.redes-sociales span{color:var(--linea);margin:0 4px}

/* --- tarjeta de contacto --- */
.tarjeta-contacto{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
  margin-top:0;padding:44px 46px;background:var(--crema-clara);border:1px solid var(--linea);
  border-top:3px solid var(--coral);border-radius:var(--radio)}
.tarjeta-contacto .ojo{margin-bottom:14px}
.marca-contacto{font-size:clamp(2.6rem,6vw,3.6rem);margin:0}
.lugar-contacto{color:var(--gris);margin:12px 0 18px;font-size:.98rem;line-height:1.55}
.tarjeta-contacto-der{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.dato-grande{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.35rem,3.2vw,1.9rem);color:var(--negro);text-decoration:none;
  border-bottom:2px solid transparent;line-height:1.2}
.dato-grande:hover{color:var(--coral);border-bottom-color:var(--coral)}
.tarjeta-contacto-der .btn{margin-top:16px}
@media (max-width:820px){.tarjeta-contacto{grid-template-columns:1fr;gap:30px;padding:34px 26px}}

/* --- banda noche: oscura pero no negra --- */
.banda-ambar{background:#FEF6E2;border-top:1px solid #F6E7C4;border-bottom:1px solid #F6E7C4}
.banda-oliva{background:#F2F3E6;border-top:1px solid #E1E4CE;border-bottom:1px solid #E1E4CE}
/* El mismo tinte coral que sale solo en las páginas con acento coral (a-coral):
   fondo #FEF3F2 y línea #FBDDDA, ya declarados abajo en body.a-coral. Esto lo hace
   disponible en una página cuyo acento es otro, sin inventar un color nuevo. */
.banda-coral{background:#FEF3F2;border-top:1px solid #FBDDDA;border-bottom:1px solid #FBDDDA}
.banda-ambar .bloque,.banda-ambar .faq,.banda-ambar details{border-color:#F0DFBC}
.banda-oliva .bloque,.banda-oliva .faq,.banda-oliva details{border-color:#DCE0C6}
.banda-coral .bloque,.banda-coral .faq,.banda-coral details{border-color:#FBDDDA}
.banda-noche{background:var(--tinta);color:#fff}
.banda-noche h2.display{color:#fff}
.banda-noche .ojo{color:#9FB4CA}
.banda-noche .lead{color:#D3DEE9}
.banda-noche .etiqueta{border-color:rgba(255,255,255,.55);color:#fff}
.banda-noche .etiquetas{margin-top:38px}
.banda-noche .logos-clientes{margin-top:56px}

/* --- banda de logotipos de clientes --- */
.logos-clientes{display:grid;grid-template-columns:repeat(3,1fr);
  gap:46px 48px;align-items:center;margin-top:52px;max-width:940px}
.logos-clientes img{max-width:100%;max-height:58px;width:auto;height:auto;
  opacity:.85;transition:opacity .2s}
.logos-clientes img:hover{opacity:1}
.logos-clientes .hueco{display:flex;align-items:center;justify-content:flex-start;min-height:58px}
@media (max-width:600px){.logos-clientes{grid-template-columns:repeat(2,1fr);gap:30px 24px}
  .logos-clientes img{max-height:44px}}

/* --- Zonas / listado en línea --- */
.zonas{font-size:1.02rem;color:#3A3A33;line-height:2;max-width:70ch}
.zonas b{font-weight:600}

/* --- Caso de estudio (tarjeta ancha) --- */
.caso{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border:1px solid var(--linea);
  margin-top:28px;background:#fff}
@media (max-width:820px){.caso{grid-template-columns:1fr}}
.caso .imagen{background:var(--crema);display:flex;align-items:center;justify-content:center;
  min-height:230px}
.caso .imagen svg{width:70px;height:70px;opacity:.5}
.caso .texto{padding:32px 30px}
.caso .texto p{font-size:.96rem;color:#3A3A33}
.caso .metrica{font-family:var(--display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--coral);margin:0 0 6px}

/* --- Aviso / nota destacada --- */
.aviso{border-left:4px solid var(--ambar);background:#FFF9EC;padding:20px 24px;margin-top:32px;
  font-size:.96rem;color:#2B2B24}
.aviso p:last-child{margin-bottom:0}
.aviso-claro{background:#fff;border-left-color:var(--coral);border:1px solid var(--linea);
  border-left:4px solid var(--coral)}

/* --- Cabecera de página interior --- */
.cabecera-int{padding:clamp(48px,7vw,88px) 0 clamp(30px,4vw,44px)}
.miga{font-size:.82rem;color:var(--gris);margin-bottom:20px}
.miga a{text-decoration:none}
.miga a:hover{color:var(--coral)}

/* --- Menú desplegable de servicios --- */
.desplegable{position:relative}
.desplegable button{font-family:var(--texto);font-size:.92rem;font-weight:500;background:none;
  border:0;cursor:pointer;padding:8px 0;color:var(--negro)}
.desplegable button:hover{color:var(--coral)}
.desplegable .panel{position:absolute;top:100%;left:-16px;min-width:250px;background:#fff;
  border:1px solid var(--linea);box-shadow:0 12px 30px rgba(0,0,0,.08);padding:14px 0 16px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:all .16s ease}
/* Quién abre el panel: el ratón por CSS, y el teclado por el guion, que pone
   la clase .abierto. NO se usa :focus-within: si estuviera, al pulsar Escape
   con el foco todavía en el botón el panel volvería a abrirse solo, y lo
   anunciado (cerrado) no coincidiría con lo que se ve. Sin JavaScript, el
   <noscript> de la plantilla devuelve el :focus-within. */
.desplegable:hover .panel,
.desplegable.abierto .panel{opacity:1;visibility:visible;transform:none}
.desplegable .panel a{display:block;padding:8px 22px;font-size:.92rem}
.desplegable .panel a:hover{background:var(--crema-clara);color:var(--coral)}
.desplegable .panel a.activo{color:var(--coral);font-weight:600}
.titulo-panel{margin:10px 22px 6px;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#A5A59B}
.titulo-panel:first-child{margin-top:0}
/* marca "todavía en castellano" mientras se traduce la web al euskera */
.aun-es{font-size:.58rem;font-weight:700;letter-spacing:.08em;vertical-align:super;
  color:#A5A59B;margin-left:3px}
.pie-grid .aun-es{color:#7A7A72}

/* --- Pie ampliado --- */
.pie-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-top:8px;
  padding-bottom:34px}
@media (max-width:820px){.pie-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.pie-grid{grid-template-columns:1fr}}
.pie-grid a.pie-marca{font-family:var(--display);font-weight:900;font-size:1.3rem;color:#fff;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:12px;padding:0;text-decoration:none}
.pie-marca svg{width:24px;height:24px;flex:0 0 auto;transform:translateY(-1.5px)}
.pie-marca:hover{color:var(--coral)}
.pie-grid p{font-size:.88rem;line-height:1.7;margin:0 0 8px}
.pie-grid a{display:block;font-size:.88rem;padding:3px 0}
.pie-grid .pie-apagado{display:block;font-size:.88rem;padding:3px 0;opacity:.42}
.titulo-pie{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:10px}
.pie-legal{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  border-top:1px solid #262626;padding-top:20px;font-size:.82rem}
.pie-legal a{display:inline}
footer{padding:44px 0 26px}

/* =========================================================
   FICHA DE PROYECTO (caso de estudio)
   ========================================================= */
.caso-hero{padding:clamp(40px,6vw,72px) 0 0}
.caso-hero .miga{margin-bottom:22px}
.caso-titular{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:end}
@media (max-width:900px){.caso-titular{grid-template-columns:1fr;gap:26px}}
.caso-etiqueta{display:inline-block;background:var(--negro);color:#fff;font-size:.7rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;
  border-radius:999px;margin-bottom:18px}
.caso-etiqueta.rescate{background:var(--coral)}

/* Imagen principal a ancho completo */
.portada-caso{margin-top:clamp(34px,5vw,56px);background:var(--crema);border:1px solid var(--linea);
  aspect-ratio:16/8;display:flex;align-items:center;justify-content:center;color:var(--gris);
  font-size:.9rem;text-align:center;padding:24px}
.portada-caso svg{width:88px;height:88px;opacity:.45}

/* Barra de metadatos */
.datos-caso{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin-top:0}
.datos-caso > div{padding:24px 26px 24px 0}
.datos-caso dt{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin:0 0 7px}
.datos-caso dd{margin:0;font-size:.98rem;font-weight:500}
.datos-caso a{color:var(--coral);text-decoration:none;font-weight:600}

/* Métricas grandes */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;margin-top:44px}
.metrica-caja{background:#fff;border:1px solid var(--linea);padding:30px 28px}
.banda-negra .metrica-caja{background:#0D0D0D;border-color:#242424}
.metrica-caja .cifra{font-family:var(--display);font-weight:900;letter-spacing:-.035em;
  font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.05;margin:0 0 10px;color:var(--coral)}
.metrica-caja .cifra.azul{color:var(--azul)}
.metrica-caja .cifra.ambar{color:var(--ambar)}
.metrica-caja p{margin:0;font-size:.92rem;color:#3A3A33}
.banda-negra .metrica-caja p{color:#B9B9B1}
.banda-negra .metrica-caja p.cifra{color:var(--coral)}
.banda-negra .metrica-caja p.cifra.azul{color:var(--azul)}
.banda-negra .metrica-caja p.cifra.ambar{color:var(--ambar)}

/* Antes / después */
.comparativa{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media (max-width:760px){.comparativa{grid-template-columns:1fr}}
.antes-despues{border:1px solid var(--linea);background:#fff}
.antes-despues .marca{display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--linea);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}
.antes-despues .marca::before{content:"";width:11px;height:11px;border-radius:2px;transform:rotate(45deg);
  background:#C9C9BF}
.antes-despues.despues .marca::before{background:var(--coral)}
.antes-despues .lienzo{aspect-ratio:4/3;background:var(--crema);display:flex;align-items:center;
  justify-content:center;color:var(--gris);font-size:.86rem;text-align:center;padding:20px}
.antes-despues ul{list-style:none;padding:20px 22px;margin:0}
.antes-despues li{position:relative;padding-left:20px;margin-bottom:8px;font-size:.92rem;color:#3A3A33}
.antes-despues li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:2px;transform:rotate(45deg);background:#C9C9BF}
.antes-despues.despues li::before{background:var(--coral)}

/* Testimonio */
.testimonio{border-left:5px solid var(--coral);padding:8px 0 8px 30px;margin-top:44px;max-width:52ch}
.testimonio blockquote{margin:0 0 18px;font-family:var(--display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.25rem,2.6vw,1.85rem)}
.testimonio .quien{font-size:.92rem;color:var(--gris);font-weight:500}
.testimonio .quien b{color:var(--negro);font-weight:600;display:block}

/* Galería */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:44px}
.galeria figure{margin:0}
.galeria .lienzo{aspect-ratio:3/2;background:var(--crema);border:1px solid var(--linea);
  display:flex;align-items:center;justify-content:center;color:var(--gris);font-size:.84rem;
  text-align:center;padding:16px}
.galeria figcaption{font-size:.85rem;color:var(--gris);margin-top:9px}

/* Servicios usados */
.pastillas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pastillas a{text-decoration:none;border:1.5px solid var(--linea);border-radius:999px;
  padding:9px 18px;font-size:.88rem;font-weight:500;transition:all .15s ease}
.pastillas a:hover{border-color:var(--negro);background:var(--negro);color:#fff}

/* Navegación entre proyectos */
.nav-caso{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--linea);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
@media (max-width:640px){.nav-caso{grid-template-columns:1fr}}
.nav-caso a{background:#fff;padding:30px 28px;text-decoration:none;transition:background .15s ease}
.nav-caso a:hover{background:var(--crema-clara)}
.nav-caso span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.nav-caso b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.15rem;
  letter-spacing:-.02em}
.nav-caso .siguiente{text-align:right}
a.caso{text-decoration:none;transition:box-shadow .15s ease,transform .15s ease}
a.caso:hover{box-shadow:0 10px 30px rgba(0,0,0,.07);transform:translateY(-2px)}
.ver-caso{font-weight:600;color:var(--coral);margin:16px 0 0}


/* =========================================================
   ACENTO POR PÁGINA — MUY contenido: el color propio de cada
   página solo aparece en la línea bajo la cabecera y en el
   fondo suave de una sección. Todo lo demás sigue en coral.
   ========================================================= */
:root{--acento:#EF6457;--acento-suave:#FEF5F4;--acento-linea:#FBDDDA}
body.a-coral{--acento:#EF6457;--acento-suave:#FEF3F2;--acento-linea:#FBDDDA}
body.a-naranja{--acento:#F16D22;--acento-suave:#FEF4EE;--acento-linea:#FCDFCE}
body.a-ambar{--acento:#FBB217;--acento-suave:#FFF9EE;--acento-linea:#FEEECC}
body.a-rojo{--acento:#EB3E2D;--acento-suave:#FEF1EF;--acento-linea:#FBD5D1}
body.a-oliva{--acento:#787D3B;--acento-suave:#F5F5F0;--acento-linea:#E1E2D4}
body.a-azulhex{--acento:#3B8BBA;--acento-suave:#F0F6FA;--acento-linea:#D4E5F0}
body.a-azul{--acento:#5787BE;--acento-suave:#F2F6FA;--acento-linea:#DAE5F1}
body.a-vino{--acento:#9F4175;--acento-suave:#F8F1F5;--acento-linea:#EAD5E1}

header{border-bottom:2px solid var(--coral)}

.banda-tinte{background:var(--acento-suave);
  border-top:1px solid var(--acento-linea);border-bottom:1px solid var(--acento-linea)}
.banda-tinte .bloque,.banda-tinte .plan,.banda-tinte .antes-despues,
.banda-tinte .tarjeta-cita,.banda-tinte .faq,.banda-tinte details{border-color:var(--acento-linea)}

/* El punto de color de las tarjetas (como estaba) */
.bloque .punto,.arreglo .punto{background:var(--c,var(--coral))}

/* =========================================================
   BARRA SUPERIOR — en producción: reclamo + contacto directo
   ========================================================= */
.barra-superior{background:var(--negro);color:#C9C9C1;font-size:.82rem}
.barra-superior-int{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  justify-content:space-between;padding:9px 24px}
.barra-superior .reclamo{font-weight:500}
.barra-superior .reclamo b{color:#fff;font-weight:600}
.barra-superior .contactos{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.barra-superior a{color:#fff;text-decoration:none;font-weight:600}
.barra-superior a:hover{color:var(--coral)}
.barra-superior a.tel{color:var(--coral)}
.chip-proto{background:var(--ambar);color:#241C00;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
@media (max-width:640px){
  .barra-superior .reclamo{display:none}
  .barra-superior-int{justify-content:center}
}

/* --- Testimonios --- */
.testimonios{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:24px;margin-top:44px}
.tarjeta-cita{background:#fff;border:1px solid var(--linea);padding:28px 28px 30px;
  display:flex;flex-direction:column}
.tarjeta-cita .comillas{font-family:var(--display);font-weight:900;font-size:2.8rem;line-height:.62;
  color:var(--coral);margin:0 0 16px}
.tarjeta-cita blockquote{margin:0 0 24px;font-size:1rem;line-height:1.6;color:#2B2B24;flex:1}
.tarjeta-cita .quien{font-size:.88rem;color:var(--gris);margin:0}
.tarjeta-cita .quien b{display:block;color:var(--negro);font-weight:600;font-size:.95rem}

/* =========================================================
   CORRECCIONES Y REDONDEO
   ========================================================= */

/* El hover del menú no debe teñir el texto del botón */
nav a:not(.btn):hover{color:var(--coral)}
.btn-primario,.btn-primario:hover,.btn-primario:focus{color:#fff}
.btn-secundario:hover{color:#fff}
.btn-claro,.btn-claro:hover{color:var(--negro)}

/* --- Radio de esquina: cámbialo aquí y cambia en toda la web --- */
:root{--radio:12px;--radio-pequeno:8px}

.bloque,.arreglo,.servicio,.plan,.tarjeta-cita,.ficha,.metrica-caja,
.antes-despues,.sintoma,.aviso,.destacado,.portada-caso,.caso{border-radius:var(--radio)}
.caso,.antes-despues{overflow:hidden}
.proyecto .marco,.galeria .lienzo,.caso .imagen,.antes-despues .lienzo{border-radius:var(--radio)}
.antes-despues .lienzo,.caso .imagen{border-radius:0}
.campo input,.campo select,.campo textarea{border-radius:var(--radio-pequeno)}
.desplegable .panel{border-radius:var(--radio)}
.nav-caso a:first-child{border-radius:var(--radio) 0 0 var(--radio)}
.nav-caso a:last-child{border-radius:0 var(--radio) var(--radio) 0}
@media (max-width:640px){.nav-caso a{border-radius:var(--radio)}}

/* Las tarjetas de servicio de la portada pasan de rejilla continua a tarjetas sueltas */
.servicios{gap:20px;background:transparent;border:0}
.servicios .servicio{border:1px solid var(--linea)}
.servicios .servicio:hover{background:var(--crema-clara)}

/* Rejilla de proyectos y galería: la imagen y el pie respiran */
.proyecto .marco{overflow:hidden}
.datos-caso{border-radius:0}


/* --- Pie: contacto arriba y destacado --- */
.pie-marca{margin-bottom:10px}
.pie-contacto{margin:0 0 14px}
.pie-contacto a{display:block;color:#fff;font-weight:600;font-size:1.02rem;
  letter-spacing:.01em;padding:2px 0}
.pie-contacto a:hover{color:var(--coral)}
.pie-descripcion{font-size:.86rem;line-height:1.65;color:#8E8E86}

/* --- Fotografía de Amaia --- */
.marco-foto{width:100%}
.marco-foto picture{display:block}
.foto-amaia{width:100%;height:auto;display:block;border-radius:var(--radio);
  border:1px solid var(--linea)}

/* --- Logotipo un punto más grande --- */
.logo{gap:13px}
.logo svg{width:46px;height:46px}
.logo-txt .l1{font-size:1.5rem}
.logo-txt .l2{font-size:.63rem;letter-spacing:.2em}
@media (max-width:560px){.logo svg{width:40px;height:40px}.logo-txt .l1{font-size:1.32rem}}

/* --- Redes: entidades con las que trabaja Rewind --- */
.redes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media (max-width:760px){.redes{grid-template-columns:1fr}}
.tarjeta-red{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:30px 30px 32px;display:flex;flex-direction:column}
.banda-crema .tarjeta-red,.banda-tinte .tarjeta-red{border-color:var(--linea)}
.tarjeta-red .logo-red{height:92px;display:flex;align-items:center;margin-bottom:22px}
/* min(290px,100%): en pantallas estrechas manda el 100 %. Con los atributos
   width/height puestos, el navegador ya sabe el ancho real del logo antes de
   cargarlo y ese ancho pasaba a ser el mínimo de la tarjeta: a 320 px la
   tarjeta se salía 39 px. */
.tarjeta-red .logo-red img{max-height:92px;width:auto;max-width:min(290px,100%)}
.tarjeta-red .hueco-logo{height:64px;min-width:190px;border:1px dashed #C9C9BF;border-radius:6px;
  display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:.72rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#A5A59B;text-align:center}
.tarjeta-red h3{margin-bottom:4px}
.tarjeta-red .subtitulo{font-size:.86rem;color:var(--gris);margin:0 0 16px}
.tarjeta-red p{font-size:.98rem;color:#2B2B24;flex:1;margin-bottom:20px}
.tarjeta-red a.enlace-red{font-weight:600;font-size:.94rem;text-decoration:none;color:var(--coral)}
.tarjeta-red a.enlace-red:hover{text-decoration:underline}
.tarjeta-red.ancha{max-width:none}
.redes:has(> .tarjeta-red.ancha:only-child){grid-template-columns:1fr}

/* --- Contacto: correo grande y reserva de cita --- */
.contacto-directo{margin-top:40px}
.correo-grande{display:inline-block;font-family:var(--display);font-weight:900;
  text-transform:lowercase;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.6rem,4.6vw,3rem);color:var(--negro);text-decoration:none;
  border-bottom:4px solid var(--coral);padding-bottom:4px;transition:color .15s ease}
.correo-grande:hover{color:var(--coral)}
.fichas-contacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin-top:44px}
.reserva{margin-top:40px;background:#fff;border:1px solid var(--acento-linea);
  border-radius:var(--radio);overflow:hidden}
/* Alto del calendario. Si te sigue saliendo barra de scroll dentro del
   recuadro, sube este número y listo; si sobra hueco en blanco, bájalo. */
:root{--alto-reserva:800px}
.reserva iframe{display:block;width:100%;height:var(--alto-reserva);min-height:var(--alto-reserva)}
@media (max-width:900px){:root{--alto-reserva:900px}}
@media (max-width:600px){:root{--alto-reserva:1020px}}

/* ---------- Vídeo de fondo de la portada ----------
   El vídeo va DETRÁS de todo (z-index negativo) y encima lleva un velo de crema
   que es lo que hace legible el texto. Los dos niveles del velo son variables
   para poder afinarlos sin tocar el degradado:
     --velo-texto  el crema en la mitad izquierda, donde está el titular y el párrafo
     --velo-lado   el crema en el lado derecho, donde no hay texto
   Medido sobre los fotogramas reales del vídeo: por debajo del 58 % de velo el
   párrafo (#26261F) baja de 4,5:1 y deja de cumplir el mínimo de accesibilidad.
   Por eso --velo-texto no debe bajar de .58 pase lo que pase.
   En móvil no hay vídeo (lo corta el guion), pero el velo se deja parejo por si
   el poster se ve a pantalla completa: ahí el texto ocupa todo el ancho. */
.hero-video{position:relative;overflow:hidden;isolation:isolate;
  --velo-texto:.86; --velo-lado:.10}
.hero-video .capa-video{position:absolute;inset:0;z-index:-2;background:var(--crema-clara)}
.hero-video .capa-video img,
.hero-video .capa-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero-video .capa-video video{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero-video .capa-video video.visible{opacity:1}
.hero-video::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(245,245,235,var(--velo-texto)) 0%,
    rgba(245,245,235,var(--velo-texto)) 68%,
    rgba(245,245,235,var(--velo-lado))  88%,
    rgba(245,245,235,var(--velo-lado))  100%)}
@media (max-width:900px){
  /* En móvil el vídeo no se reproduce nunca —lo decide el guion—, así que lo
     único que quedaba era la imagen fija, congelada, como una carátula. Fuera
     capa y fuera velo: la portada se ve sobre el blanco de la web, igual que
     el resto de páginas. El <picture> del HTML evita además la descarga. */
  .hero-video .capa-video{display:none}
  .hero-video::after{content:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-video .capa-video video{display:none}
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

/* ---------- Saltar al contenido ----------
   El primer enlace de la página. Invisible hasta que alguien llega con el
   tabulador; entonces aparece arriba a la izquierda. Sirve para no tener que
   pasar por los veinte enlaces del menú en cada página, que es lo que hace
   quien navega con teclado o con lector de pantalla. */
.saltar{position:absolute;left:12px;top:-100px;z-index:200;
  background:var(--negro);color:#fff;padding:12px 20px;border-radius:0 0 6px 6px;
  font-weight:600;font-size:.95rem;text-decoration:none;
  transition:top .15s ease}
.saltar:focus{top:0}
/* El anillo tiene que ser blanco: el enlace cae encima de la barra negra de
   arriba, y el anillo negro de por defecto no se vería contra ese fondo. */
.saltar:focus-visible{outline-color:#fff}
main:focus{outline:none}          /* el foco se mueve ahí, pero no se dibuja */

/* ---------- Foco visible ----------
   Antes no había ninguna regla, así que se usaba el anillo por defecto del
   navegador, que sobre el coral o sobre el negro puede desaparecer. Se dibuja
   con el color de más contraste de cada fondo: negro sobre los claros (19:1
   contra el crema) y blanco sobre los oscuros (21:1). No se usa el coral, que
   contra el crema se queda en 2,9:1 y no llega al mínimo de 3:1. */
:focus-visible{outline:3px solid var(--negro);outline-offset:3px;border-radius:2px}
.banda-negra :focus-visible,
.banda-noche :focus-visible,
footer :focus-visible,
.barra-superior :focus-visible{outline-color:#fff}
/* El botón coral lleva el anillo por fuera para que no se coma el relleno */
.btn:focus-visible{outline-offset:4px}

/* ---------- La página que estás viendo ----------
   aria-current="page" ya lo anuncia el lector de pantalla; esto es para que
   también se vea. */
.menu-movil a[aria-current="page"]{color:var(--coral);font-weight:600}

/* ---------- Menos animación ----------
   El desplazamiento suave marea de verdad a personas con trastornos
   vestibulares, y está recogido en las WCAG. Quien lo pide en su sistema
   operativo deja de tener animaciones y transiciones en toda la web. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .btn:hover{transform:none}
}

/* =========================================================
   PÁGINAS LEGALES (aviso legal, privacidad, cookies)
   Columna estrecha y tipografía de lectura: son documentos para
   leer seguido, no páginas de venta. Sin tarjetas ni colorines.
   ========================================================= */
.legal{max-width:760px}
.fecha-legal{font-size:.82rem;color:var(--gris);text-transform:none;margin:0 0 6px}
.legal h2{font-size:clamp(1.15rem,2.6vw,1.4rem);line-height:1.3;letter-spacing:-.01em;
  margin:48px 0 14px;padding-top:22px;border-top:1px solid var(--linea)}
.legal h2:first-of-type{margin-top:30px}
.legal h3{font-size:1.02rem;margin:28px 0 8px}
.legal p{font-size:1.02rem;line-height:1.75;color:#2B2B24;margin:0 0 1rem;max-width:68ch}
.legal ul{margin:0 0 1.2rem;padding-left:1.3rem;max-width:68ch}
.legal li{font-size:1.02rem;line-height:1.7;color:#2B2B24;margin-bottom:.55rem}
.legal a{color:var(--coral);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
/* Una dirección larga escrita entera (policies.google.com/technologies/cookies)
   es una sola "palabra" para el navegador: a 320 px sacaba la página 83 px
   fuera de la pantalla. Que se parta por donde haga falta. */
.legal a,.legal code{overflow-wrap:anywhere}
.legal p,.legal li,.legal dd{overflow-wrap:break-word}
.legal a:hover{color:var(--rojo)}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--crema-clara);border:1px solid var(--linea);border-radius:4px;padding:1px 5px}

/* La ficha de datos del titular: etiqueta a la izquierda, dato a la derecha */
.ficha-legal{display:grid;grid-template-columns:auto 1fr;gap:0 26px;margin:0 0 1.4rem;
  font-size:.98rem}
.ficha-legal dt{color:var(--gris);padding:9px 0;border-top:1px solid var(--linea)}
.ficha-legal dd{margin:0;padding:9px 0;border-top:1px solid var(--linea);font-weight:500;
  color:#2B2B24}
.ficha-legal dt:first-of-type,.ficha-legal dd:first-of-type{border-top:0}
@media (max-width:560px){
  .ficha-legal{grid-template-columns:1fr;gap:0}
  .ficha-legal dt{padding-bottom:0;border-top:1px solid var(--linea)}
  .ficha-legal dd{padding-top:2px;border-top:0}
  .ficha-legal dd:first-of-type{padding-top:2px}
}

/* Las tablas de la privacidad y de las cookies. min-width + scroll propio:
   a 320 px no caben cuatro columnas y es preferible arrastrar la tabla a
   que se salga de la pantalla y descuadre la página entera. */
.tabla-legal{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--linea);
  border-radius:var(--radio);-webkit-overflow-scrolling:touch}
.tabla-legal table{border-collapse:collapse;width:100%;min-width:620px;font-size:.9rem}
.tabla-legal th,.tabla-legal td{text-align:left;vertical-align:top;padding:12px 16px;
  border-top:1px solid var(--linea);line-height:1.55;color:#2B2B24}
.tabla-legal th{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);border-top:0;background:var(--crema-clara);white-space:nowrap}
.tabla-legal tbody tr:first-child td{border-top:1px solid var(--linea)}

/* =========================================================
   AVISO DE COOKIES
   Fijo abajo, pero PRIMERO en el documento (ver Cookies.astro).
   "Aceptar" y "Rechazar" comparten clase a propósito: tienen que
   verse exactamente igual. Si algún día alguien pinta uno de coral
   y deja el otro en gris, el consentimiento deja de ser válido
   según la guía de la AEPD de mayo de 2024.
   ========================================================= */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:300;
  display:flex;justify-content:center;padding:0 14px 14px;pointer-events:none}
.cookies[hidden]{display:none}
.cookies-caja{pointer-events:auto;width:100%;max-width:730px;background:#fff;
  border:1px solid var(--linea);border-top:2px solid var(--negro);
  border-radius:var(--radio);box-shadow:0 16px 44px rgba(0,0,0,.24);
  padding:24px 26px 22px;
  /* Igual que el menú de móvil: si el panel de preferencias no cabe, que
     se desplace por dentro en vez de salirse por abajo de la pantalla. */
  max-height:calc(100vh - 28px);overflow-y:auto;overscroll-behavior:contain}
.cookies-titulo{font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.35;
  letter-spacing:-.01em;margin:0 0 8px;color:var(--negro)}
.cookies-titulo:focus{outline:none}
.cookies-texto{font-size:.94rem;line-height:1.62;color:#2B2B24;margin:0}
.cookies-texto a{color:var(--coral);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}

.cookies-detalle{margin-top:18px;border-top:1px solid var(--linea);padding-top:16px}
.cookies-detalle[hidden]{display:none}
.cookies-grupo{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-bottom:16px}
.cookies-grupo:last-child{margin-bottom:0}
.cookies-grupo input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--negro);
  grid-row:1;grid-column:1}
.cookies-grupo label{grid-row:1;grid-column:2;font-weight:600;font-size:.94rem;
  color:var(--negro);cursor:pointer}
.cookies-grupo p{grid-row:2;grid-column:2;margin:0;font-size:.86rem;line-height:1.55;
  color:var(--gris)}

.cookies-botones{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.btn-cookies{flex:1 1 0;min-width:130px;background:#fff;color:var(--negro);border:2px solid var(--negro);
  font-family:var(--texto);font-weight:600;font-size:.95rem;padding:12px 24px;
  border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-cookies:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.btn-cookies-mas{flex:0 0 auto;background:none;border:0;padding:10px 6px;font-family:var(--texto);
  font-weight:600;font-size:.9rem;color:var(--negro);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.btn-cookies-mas:hover{color:var(--coral)}
.btn-cookies-mas[hidden]{display:none}

/* Mientras el aviso está puesto, el pie no queda tapado, y el navegador
   sabe cuánto tiene que dejar libre al llevar el foco a algo de abajo
   (WCAG 2.2, "el foco no queda oculto"). El alto lo mide el guion. */
html.con-aviso-cookies{scroll-padding-bottom:calc(var(--alto-aviso,0px) + 16px)}
html.con-aviso-cookies body{padding-bottom:var(--alto-aviso,0px)}

/* El "Preferencias de cookies" del pie es un botón, no un enlace: no lleva
   a ninguna parte, vuelve a abrir el aviso. Se le da pinta de enlace. */
.boton-cookies{display:inline;background:none;border:0;padding:0;margin:0;
  font:inherit;color:#8E8E86;text-decoration:none;cursor:pointer}
.boton-cookies:hover{color:#fff}

/* ---------- Hueco de lo que no se carga sin permiso ---------- */
.incrustado{padding:clamp(26px,4vw,40px);background:var(--crema-clara)}
.incrustado h3{font-size:1.1rem;margin:0 0 10px}
.incrustado p{font-size:.96rem;line-height:1.65;color:#2B2B24;margin:0;max-width:60ch}
.incrustado .incrustado-botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.incrustado-botones .btn{font-size:.92rem;padding:13px 24px;border:2px solid transparent}
.incrustado-botones .btn-primario{border-color:var(--coral)}
.incrustado-botones button.btn{font-family:var(--texto);font-weight:600;cursor:pointer}
.incrustado .incrustado-nota{margin-top:18px;font-size:.9rem;color:var(--gris)}
.incrustado-nota a{color:var(--coral);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
/* Cuando ya hay permiso, el hueco desaparece y solo queda el iframe */
.incrustado.incrustado-listo{padding:0;background:transparent}