/* =====================================================================
   PUNTO SALITRE - estilos de la web
   Para cambiar la apariencia, toca SOLO este primer bloque (:root).
   Colores y tipografias del manual de marca (identidad clara).
   ===================================================================== */
:root {
  /* Paleta del manual */
  --color-sal: #f4ede2;
  --color-arena: #cdb292;
  --color-tierna: #b8785f;
  --color-coral: #c95f55;
  --color-sal-rosa: #d9a6a0;
  --color-agua: #3b8790;
  --color-mar: #075466;
  --color-alga: #526358;

  /* Papel y tinta */
  --color-fondo: var(--color-sal);
  --color-superficie: #fbf6ee;
  --color-superficie-2: #ffffff;
  --color-crema: #fffbf5;
  --color-texto: var(--color-mar);
  --color-apagado: #5d686a;
  --color-linea: #e2d6c4;
  --color-acento: #a8463d;       /* coral oscuro: vale para texto sobre sal */
  --color-profundo: #0c4050;     /* mar mas profundo: fondos y pie */
  --color-exito: #3e4e44;        /* alga oscura: "gratis" */

  /* Degradados */
  --degradado-acento: linear-gradient(100deg, var(--color-mar), var(--color-agua));
  --degradado-marca: linear-gradient(125deg, #05323f 0%, var(--color-mar) 30%, var(--color-agua) 58%, #7fb5ab 78%, #cdb292 100%);

  /* Tipografias */
  --fuente-titulos: "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-etiquetas: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Espacios y formas */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 1rem;
  --espacio-4: 1.5rem;
  --espacio-5: 2.5rem;
  --espacio-6: 4rem;
  --radio: 14px;
  --radio-pequeno: 8px;
  --radio-pastilla: 999px;
  --ancho-maximo: 1180px;
  --sombra: 0 16px 36px -22px rgba(7, 84, 102, 0.55);
  --sombra-suave: 0 10px 24px -18px rgba(7, 84, 102, 0.5);

  /* Alturas de las barras fijas (cabecera y filtros de fecha) */
  --alto-cabecera: 3.75rem;
  --alto-filtros: 3.4rem;
}

/* ---------- Fuentes (carpeta fuentes, licencia SIL OFL 1.1) ---------- */
@font-face { font-family: "Fraunces"; font-weight: 700; font-style: normal; font-display: swap; src: url(fuentes/fraunces-700.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap; src: url(fuentes/fraunces-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url(fuentes/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url(fuentes/inter-500.woff2) format("woff2"); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + var(--espacio-3)); }
body { margin: 0; background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-texto); font-size: 1rem; line-height: 1.55; overflow-x: hidden; -webkit-tap-highlight-color: rgba(7, 84, 102, 0.12); }
h1, h2, h3, .plan-hora { font-variant-numeric: lining-nums; }
a { color: inherit; text-underline-offset: 3px; }
img { max-width: 100%; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 3px; }
.contenedor { width: 100%; max-width: var(--ancho-maximo); margin: 0 auto; padding-left: var(--espacio-3); padding-right: var(--espacio-3); }
.etiqueta { font-family: var(--fuente-etiquetas); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Punto de marca: circulo de color con el punto crema descentrado. Cada categoria tiene el suyo
   (color y posicion del punto tomados de la guia de marca). */
.punto { --c: var(--color-arena); --px: 62%; --py: 36%; flex: none; display: inline-block; width: 0.78em; height: 0.78em; border-radius: 50%; vertical-align: -0.06em; background: radial-gradient(circle at var(--px) var(--py), var(--color-crema) 0 0.13em, transparent 0.14em), var(--c); }
.p-gastronomia { --c: #a8463d; --px: 64%; --py: 32%; }
.p-musica { --c: #0c6078; --px: 36%; --py: 62%; }
.p-arte-y-cultura { --c: #96604a; --px: 64%; --py: 30%; }
.p-talleres { --c: #bc765d; --px: 66%; --py: 66%; }
.p-bienestar { --c: #5a6c5e; --px: 62%; --py: 34%; }
.p-deporte-y-naturaleza { --c: #3e4e44; --px: 38%; --py: 36%; }
.p-fiestas-y-noche { --c: #983730; --px: 66%; --py: 38%; }
.p-mercadillos { --c: #d99d93; --px: 38%; --py: 64%; }
.p-otros { --c: #cdb292; --px: 38%; --py: 36%; }

/* ---------- Saltar al contenido (visible solo con teclado) ---------- */
.saltar { position: absolute; left: var(--espacio-3); top: -3rem; z-index: 100; padding: 0.6rem 1rem; border-radius: var(--radio-pequeno); background: var(--color-crema); color: var(--color-mar); font-weight: 500; transition: top 0.2s; }
.saltar:focus { top: var(--espacio-2); }
#contenido:focus { outline: none; }

/* ---------- Cabecera y menu ---------- */
/* Movil: logo + boton "Menu". El panel se despliega bajo la cabecera, a pantalla completa.
   Escritorio (1100 px o mas): los enlaces se ven en linea y el boton desaparece.
   Sin JavaScript (sin la clase .js en <html>) el menu se muestra siempre, como una lista. */
.cabecera { position: sticky; top: 0; z-index: 40; background: var(--color-mar); color: var(--color-crema); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); min-height: var(--alto-cabecera); }
.marca { display: inline-flex; align-items: center; text-decoration: none; flex: none; padding: 0.3rem 0; }
.marca img { display: block; flex: none; width: auto; height: 1.85rem; }
.cabecera :focus-visible { outline-color: var(--color-crema); }

.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-enlace { position: relative; display: block; text-decoration: none; color: rgba(255, 251, 245, 0.88); transition: color 0.2s; }
.menu-enlace:hover, .menu-enlace[aria-current="page"] { color: var(--color-crema); }
.menu-ig { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.5rem; text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 0.45rem 0.95rem; border-radius: var(--radio-pastilla); background: var(--color-crema); color: var(--color-mar); transition: background 0.2s, transform 0.2s; }
.menu-ig:hover { background: #ffffff; }

.menu-boton { display: none; appearance: none; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 0.3rem 0 0.9rem; border: 1px solid rgba(255, 251, 245, 0.35); border-radius: var(--radio-pastilla); background: transparent; color: var(--color-crema); font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.menu-boton:hover { background: rgba(255, 251, 245, 0.08); border-color: rgba(255, 251, 245, 0.6); }
.menu-boton-texto { order: -1; }
/* Icono: dos lineas que se cruzan al abrir */
.menu-icono { position: relative; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--color-crema); }
.menu-icono span, .menu-icono span::before { content: ""; position: absolute; left: 0.62rem; right: 0.62rem; height: 2px; border-radius: 2px; background: var(--color-mar); transition: transform 0.25s ease, top 0.25s ease; }
.menu-icono span { top: calc(50% - 4px); }
.menu-icono span::before { left: 0; right: 0; top: 7px; }
.menu-abierto .menu-icono span { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-abierto .menu-icono span::before { top: 0; transform: rotate(-90deg); }

@media (max-width: 1099px) {
  .js .menu-boton { display: inline-flex; }
  /* Panel del menu movil */
  .js .menu { position: fixed; z-index: 35; left: 0; right: 0; top: var(--alto-cabecera); bottom: 0; display: flex; flex-direction: column; gap: var(--espacio-4); padding: var(--espacio-4) var(--espacio-3) calc(var(--espacio-5) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--color-profundo); visibility: hidden; opacity: 0; transform: translateY(-0.75rem); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; }
  .js.menu-abierto .menu { visibility: visible; opacity: 1; transform: none; transition: opacity 0.22s ease, transform 0.22s ease; }
  .js.menu-abierto, .js.menu-abierto body { overflow: hidden; }
  .menu-lista { display: grid; }
  .menu-lista li + li { border-top: 1px solid rgba(255, 251, 245, 0.12); }
  .menu-enlace { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0.1rem; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.01em; }
  .menu-enlace::after { content: "→"; font-family: var(--fuente-texto); font-weight: 400; font-size: 1.1rem; opacity: 0.5; transition: transform 0.2s, opacity 0.2s; }
  .menu-enlace:hover::after, .menu-enlace:focus-visible::after { transform: translateX(4px); opacity: 1; }
  .menu-enlace[aria-current="page"] { color: var(--color-arena); }
  .menu-ig { align-self: flex-start; }
  /* Sin JavaScript: el menu es una lista normal bajo la cabecera */
  html:not(.js) .cabecera-fila { flex-wrap: wrap; padding-bottom: var(--espacio-2); }
  html:not(.js) .menu { width: 100%; }
  html:not(.js) .menu-enlace { font-size: 1.1rem; padding: 0.5rem 0; }
}
@media (min-width: 560px) { .marca img { height: 2.2rem; } }
@media (min-width: 1100px) {
  .menu { display: flex; align-items: center; gap: var(--espacio-4); }
  .menu-lista { display: flex; align-items: center; gap: 1.35rem; }
  .menu-enlace { padding: 0.6rem 0; font-size: 0.92rem; white-space: nowrap; }
  /* Subrayado de la pagina actual y al pasar el raton */
  .menu-enlace::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.3rem; height: 2px; border-radius: 2px; background: var(--color-arena); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
  .menu-enlace:hover::after, .menu-enlace[aria-current="page"]::after { transform: scaleX(1); }
}

/* ---------- Cabecera de las paginas interiores ---------- */
/* Todas las paginas que no son la portada empiezan igual: mismo fondo claro, mismo titulo, mismo punto de marca. */
.pagina-cabecera { position: relative; overflow: hidden; padding: var(--espacio-4) 0 var(--espacio-5); background: var(--color-fondo); border-bottom: 1px solid var(--color-linea); }
.pagina-cabecera::after { content: ""; position: absolute; right: -3.5rem; top: -3.5rem; width: 12rem; height: 12rem; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 62% 38%, var(--color-crema) 0 11%, transparent 11.5%), var(--color-mar); opacity: 0.09; }
.pagina-cabecera .contenedor { position: relative; z-index: 1; }
.pagina-ante { margin: var(--espacio-3) 0 var(--espacio-2); color: var(--color-acento); font-size: 0.75rem; }
.pagina-cabecera h1 { margin: 0; max-width: 18ch; font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(2.3rem, 10vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em; }
.pagina-sub { margin: var(--espacio-3) 0 0; max-width: 36rem; font-size: 1.1rem; line-height: 1.55; color: var(--color-texto); opacity: 0.9; }
.pagina-cabecera .migas { padding-top: 0; }
@media (min-width: 700px) {
  .pagina-cabecera { padding: var(--espacio-5) 0 var(--espacio-6); }
  .pagina-cabecera::after { right: 6%; top: 50%; width: 11rem; height: 11rem; transform: translateY(-50%); opacity: 0.06; }
}

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; color: var(--color-crema); background: var(--color-profundo); }
.portada-fondo { position: absolute; inset: 0; background: var(--degradado-marca); }
.portada-imagen, .portada-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada-video { opacity: 0; transition: opacity 0.8s ease; }
.portada-video.visible { opacity: 1; }
.portada-fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 15% 30%, rgba(6, 46, 58, 0.6), transparent 70%), linear-gradient(180deg, rgba(6, 46, 58, 0.15), rgba(12, 64, 80, 0.94) 92%); }
.portada-inicio .contenedor { position: relative; padding-top: var(--espacio-5); padding-bottom: var(--espacio-5); }
.portada-lugar { display: inline-block; margin: 0 0 var(--espacio-3); padding: 0.25rem 0.85rem; border: 1px solid rgba(255, 251, 245, 0.45); border-radius: var(--radio-pastilla); font-size: 0.68rem; }
.portada h1 { margin: 0; font-family: var(--fuente-titulos); font-weight: 700; line-height: 0.98; font-size: clamp(2.5rem, 11vw, 5.4rem); letter-spacing: -0.02em; }
.h1-linea { display: block; }
.rotador { display: block; position: relative; height: 1.04em; overflow: hidden; }
.rotador span { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--color-arena); opacity: 0; transform: translateY(100%); animation: rotar 9s infinite; }
.rotador span:nth-child(2) { animation-delay: 3s; }
.rotador span:nth-child(3) { animation-delay: 6s; }
/* Cada palabra ocupa un tercio del ciclo y entra justo cuando sale la anterior: nunca queda el hueco vacio */
@keyframes rotar { 0% { opacity: 0; transform: translateY(100%); } 4%, 33.3% { opacity: 1; transform: translateY(0); } 37.3%, 100% { opacity: 0; transform: translateY(-100%); } }
.portada-sub { margin: var(--espacio-3) 0 0; max-width: 30rem; font-size: 1.05rem; color: rgba(255, 251, 245, 0.92); }
.portada-botones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-2); margin-top: var(--espacio-4); max-width: 30rem; }
.atajo { appearance: none; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.7rem 0.85rem; border-radius: var(--radio); border: 1px solid rgba(255, 251, 245, 0.28); background: rgba(255, 251, 245, 0.1); color: var(--color-crema); font-family: var(--fuente-etiquetas); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; text-align: left; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s; }
.atajo .num { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.7rem; line-height: 1.05; letter-spacing: 0; text-transform: none; order: -1; }
.atajo .num:empty::before { content: "·"; opacity: 0.5; }
.atajo:hover { background: rgba(255, 251, 245, 0.2); border-color: rgba(255, 251, 245, 0.55); }
.atajo:active { transform: scale(0.97); }

/* ---------- Secciones ---------- */
.seccion { padding-top: var(--espacio-5); }
.seccion-titulo { margin: 0 0 var(--espacio-3); font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(1.75rem, 6vw, 2.6rem); line-height: 1.08; letter-spacing: -0.015em; }
.seccion-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--espacio-3); margin-bottom: var(--espacio-3); }
.seccion-cabecera .seccion-titulo { margin-bottom: 0; }
.seccion-intro { margin: var(--espacio-2) 0 0; max-width: 34rem; color: var(--color-apagado); font-size: 0.98rem; }
.enlace-seccion { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; font-size: 0.9rem; font-weight: 500; color: var(--color-texto); text-decoration: none; white-space: nowrap; }
.enlace-seccion:hover { color: var(--color-acento); }
.flecha { display: inline-block; transition: transform 0.2s ease; }
a:hover > .flecha, a:focus-visible > .flecha { transform: translateX(3px); }
.enlace-suave { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; color: var(--color-texto); font-weight: 500; text-underline-offset: 4px; }
.enlace-suave:hover { color: var(--color-acento); }
.carrusel-seccion { padding-bottom: var(--espacio-2); }
.carrusel-seccion + .carrusel-seccion { padding-top: var(--espacio-4); }
@media (max-width: 559px) {
  .seccion-cabecera { flex-direction: column; align-items: flex-start; gap: var(--espacio-1); }
  .carrusel-seccion .seccion-cabecera { flex-direction: row; align-items: flex-end; }
  .carrusel-seccion .seccion-intro { display: none; }
}

/* Fondos por categoria: cuando un plan no tiene imagen */
.fondo-gastronomia { background: linear-gradient(150deg, #a8463d, #7d3029); }
.fondo-musica { background: linear-gradient(150deg, #075466, #04323d); }
.fondo-arte-y-cultura { background: linear-gradient(150deg, #96604a, #6d4335); }
.fondo-talleres { background: linear-gradient(150deg, #9a6049, #714635); }
.fondo-bienestar { background: linear-gradient(150deg, #526358, #37423b); }
.fondo-deporte-y-naturaleza { background: linear-gradient(150deg, #3e4e44, #26302a); }
.fondo-fiestas-y-noche { background: linear-gradient(150deg, #0c4050, #072c37); }
.fondo-mercadillos { background: linear-gradient(150deg, #b05a4e, #834037); }
.fondo-otros { background: linear-gradient(150deg, #6e6257, #4a423a); }

/* Carrusel ("Para no perderse" y planes relacionados de la ficha) */
/* El desplazamiento lateral vive SOLO dentro del carrusel (nunca en la pagina). Barra visible con los colores
   de la marca, snap suave, arrastre con raton (agenda.js) y degradado en el borde cuando hay mas tarjetas. */
.carrusel-marco { position: relative; }
.carrusel-marco::before, .carrusel-marco::after { content: ""; position: absolute; top: 0; bottom: 1.25rem; width: 2.5rem; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; }
.carrusel-marco::before { left: 0; background: linear-gradient(90deg, var(--color-fondo), rgba(244, 237, 226, 0)); }
.carrusel-marco::after { right: 0; background: linear-gradient(270deg, var(--color-fondo), rgba(244, 237, 226, 0)); }
.carrusel-marco.mas-izquierda::before, .carrusel-marco.mas-derecha::after { opacity: 1; }
.relacionados .carrusel-marco::before { background: linear-gradient(90deg, var(--color-superficie), rgba(251, 246, 238, 0)); }
.relacionados .carrusel-marco::after { background: linear-gradient(270deg, var(--color-superficie), rgba(251, 246, 238, 0)); }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 var(--espacio-3) 1rem; scroll-padding-inline: var(--espacio-3); scrollbar-width: thin; scrollbar-color: var(--color-agua) rgba(7, 84, 102, 0.1); -webkit-overflow-scrolling: touch; }
.carrusel::-webkit-scrollbar { height: 6px; }
.carrusel::-webkit-scrollbar-track { background: rgba(7, 84, 102, 0.1); border-radius: var(--radio-pastilla); margin-inline: var(--espacio-3); }
.carrusel::-webkit-scrollbar-thumb { background: var(--color-agua); border-radius: var(--radio-pastilla); }
.carrusel::-webkit-scrollbar-thumb:hover { background: var(--color-mar); }
.carrusel:focus-visible { outline: 3px solid var(--color-acento); outline-offset: -3px; }
.carrusel.arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carrusel.arrastrando .proximo { pointer-events: none; }
.carrusel img { -webkit-user-drag: none; }
.seccion-acciones { display: flex; align-items: center; gap: var(--espacio-3); flex: none; }
.carrusel-flechas { display: none; gap: 0.4rem; }
.carrusel-flecha { appearance: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--color-linea); background: var(--color-superficie); color: var(--color-mar); font-size: 1.05rem; cursor: pointer; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.carrusel-flecha:hover:not(:disabled) { background: var(--color-mar); border-color: var(--color-mar); color: var(--color-crema); }
.carrusel-flecha:disabled { opacity: 0.35; cursor: default; }
@media (min-width: 1000px) and (hover: hover) {
  .carrusel-flechas:not([hidden]) { display: flex; }
  .carrusel { cursor: grab; }
}
.proximo { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; scroll-snap-align: start; text-decoration: none; color: var(--color-crema); background: var(--color-mar); box-shadow: var(--sombra); }
.proximo img, .proximo-sin-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.proximo:hover img { transform: scale(1.05); }
.proximo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(6, 46, 58, 0.94)); }
.proximo-info { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: var(--espacio-3); display: flex; flex-direction: column; gap: 0.4rem; }
.proximo-cuando { align-self: flex-start; font-size: 0.66rem; padding: 0.18rem 0.55rem; border-radius: var(--radio-pastilla); background: var(--color-crema); color: var(--color-mar); }
.proximo-titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.15rem; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.proximo-cat { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--fuente-etiquetas); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 251, 245, 0.85); }
.proximo-cat .punto { box-shadow: 0 0 0 1.5px rgba(255, 251, 245, 0.85); }

/* ---------- Agenda ---------- */
.agenda { padding-top: var(--espacio-5); }
.agenda-cabecera .seccion-titulo { margin-bottom: var(--espacio-2); }

/* Fila fija con el "cuando" y los filtros activos */
.filtros { position: sticky; top: var(--alto-cabecera); z-index: 20; background: rgba(244, 237, 226, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-linea); }
.filtros-fila { display: flex; align-items: center; gap: 0.4rem; min-height: var(--alto-filtros); overflow-x: auto; scrollbar-width: none; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.filtros-fila::-webkit-scrollbar { display: none; }
.filtro { appearance: none; cursor: pointer; flex: none; white-space: nowrap; font-family: var(--fuente-etiquetas); font-weight: 500; font-size: 0.85rem; color: var(--color-texto); background: var(--color-superficie); border: 1px solid var(--color-linea); border-radius: var(--radio-pastilla); padding: 0.4rem 0.85rem; min-height: 2.5rem; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.filtro .num { margin-left: 0.4em; color: var(--color-apagado); font-variant-numeric: tabular-nums; }
.filtro:hover { border-color: var(--color-agua); }
.filtro[aria-pressed="true"] { background: var(--color-mar); border-color: var(--color-mar); color: var(--color-crema); }
.filtro[aria-pressed="true"] .num { color: rgba(255, 251, 245, 0.75); }
.filtros-activos { display: contents; }
.activo { appearance: none; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; min-height: 2.5rem; padding: 0.4rem 0.75rem; border-radius: var(--radio-pastilla); border: 1px solid var(--color-acento); background: transparent; color: var(--color-acento); font-weight: 500; font-size: 0.85rem; }
.activo::after { content: "×"; font-size: 1.15rem; line-height: 1; }
.activo:first-child { margin-left: 0.35rem; }

/* Tipo, zona, gratis y con ninos */
.facetas { padding-top: var(--espacio-3); }
.facetas-fila { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.2rem; }
.facetas-fila::-webkit-scrollbar { display: none; }
.faceta { appearance: none; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; min-height: 2.5rem; padding: 0.4rem 0.85rem; border-radius: var(--radio-pastilla); border: 1px solid transparent; background: rgba(7, 84, 102, 0.07); color: var(--color-texto); font-size: 0.875rem; transition: background 0.2s, color 0.2s, opacity 0.2s; }
.faceta .num { color: var(--color-apagado); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.faceta:hover { background: rgba(7, 84, 102, 0.13); }
.faceta[aria-pressed="true"] { background: var(--color-mar); color: var(--color-crema); }
.faceta[aria-pressed="true"] .num { color: rgba(255, 251, 245, 0.75); }
.faceta[aria-pressed="true"] .punto { box-shadow: 0 0 0 1.5px var(--color-crema); }
.faceta:disabled { opacity: 0.38; cursor: default; }
.faceta-zona { position: relative; padding: 0; border-color: var(--color-linea); background: var(--color-superficie); }
.faceta-zona select { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-weight: 500; color: inherit; background: transparent; border: 0; border-radius: var(--radio-pastilla); min-height: 2.5rem; padding: 0.4rem 2rem 0.4rem 0.95rem; }
.faceta-zona::after { content: ""; position: absolute; right: 0.9rem; top: 50%; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.faceta-zona.activa { background: var(--color-mar); border-color: var(--color-mar); color: var(--color-crema); }
.faceta-zona select option { color: var(--color-texto); background: #fff; }

.resumen { margin: var(--espacio-3) 0 0; font-size: 0.85rem; color: var(--color-apagado); }
.resumen:empty { display: none; }

/* Dias */
.lista { padding-bottom: var(--espacio-3); }
.dia { padding-top: var(--espacio-4); }
.dia-titulo { position: sticky; top: calc(var(--alto-cabecera) + var(--alto-filtros)); z-index: 5; display: flex; align-items: baseline; gap: 0.6rem; margin: 0 calc(-1 * var(--espacio-3)) var(--espacio-2); padding: 0.55rem var(--espacio-3) 0.45rem; background: rgba(244, 237, 226, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.dia-rel { font-family: var(--fuente-etiquetas); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-crema); background: var(--color-acento); padding: 0.2rem 0.55rem; border-radius: var(--radio-pastilla); transform: translateY(-0.15em); }
.dia-fecha::first-letter { text-transform: uppercase; }
.dia-planes { display: grid; gap: 0.6rem; }

/* Tarjeta de plan */
.plan { min-width: 0; }
.plan-enlace { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.9rem; align-items: start; height: 100%; padding: 0.7rem; border-radius: var(--radio); background: var(--color-superficie); border: 1px solid var(--color-linea); text-decoration: none; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.plan-enlace:hover { border-color: var(--color-agua); box-shadow: var(--sombra-suave); transform: translateY(-2px); }
.plan-enlace:active { transform: scale(0.99); }
.plan-cartel { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio-pequeno); overflow: hidden; background: var(--color-linea); }
.plan-cartel img, .cartel-vacio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cartel-vacio { display: grid; place-items: center; font-size: 1.6rem; }
.plan-cuerpo { min-width: 0; padding-top: 0.1rem; }
.plan-ante { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.7rem; margin: 0 0 0.3rem; }
.plan-hora { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.05rem; line-height: 1.1; color: var(--color-acento); }
.plan-cat { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--fuente-etiquetas); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-apagado); }
.plan-titulo { margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plan-lugar { margin: 0.3rem 0 0; color: var(--color-apagado); font-size: 0.84rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-pie { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; margin: 0.35rem 0 0; font-size: 0.82rem; line-height: 1.35; }
.plan-precio { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-texto); }
.gratis { color: var(--color-exito); font-weight: 500; }
.plan-precio.gratis::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; border-radius: 50%; background: currentColor; vertical-align: 0.08em; }
.rango { color: var(--color-acento); white-space: nowrap; }

.mas { display: flex; justify-content: center; padding: var(--espacio-3) 0 var(--espacio-2); }
.vacio { padding: var(--espacio-5) 0; color: var(--color-apagado); }
.vacio strong { display: block; color: var(--color-texto); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.6rem; line-height: 1.15; }
.vacio p { margin: var(--espacio-2) 0 var(--espacio-3); }

/* Enlaces a otras paginas tematicas (categorias, gratis, con ninos) */
.explorar { padding-top: var(--espacio-3); }
.explorar-fila { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.explorar-fila::-webkit-scrollbar { display: none; }
.tema { flex: none; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0.35rem 0.85rem; border-radius: var(--radio-pastilla); border: 1px solid var(--color-linea); background: var(--color-superficie); color: var(--color-texto); font-size: 0.875rem; text-decoration: none; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
.tema:hover { border-color: var(--color-agua); }
.tema[aria-current="page"] { background: var(--color-mar); border-color: var(--color-mar); color: var(--color-crema); }
.tema[aria-current="page"] .punto { box-shadow: 0 0 0 1.5px var(--color-crema); }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.4rem; border: 1px solid var(--color-mar); border-radius: var(--radio-pastilla); background: var(--color-mar); color: var(--color-crema); font-family: var(--fuente-texto); font-weight: 500; font-size: 0.98rem; letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s; }
.boton:focus-visible { outline-offset: 3px; }
.boton:hover { background: var(--color-profundo); border-color: var(--color-profundo); box-shadow: var(--sombra-suave); }
.boton:active { transform: scale(0.98); }
.boton-claro { background: transparent; color: var(--color-mar); }
.boton-claro:hover { background: var(--color-mar); color: var(--color-crema); }

/* ---------- Bloques Instagram y sugerir ---------- */
.bloques { display: grid; gap: var(--espacio-3); padding-bottom: var(--espacio-5); }
.bloque { display: flex; flex-direction: column; gap: var(--espacio-2); padding: var(--espacio-4); border-radius: var(--radio); text-decoration: none; }
.bloque strong { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.45rem; line-height: 1.15; }
.bloque .etiqueta { font-size: 0.7rem; }
.bloque-ig { background: var(--degradado-marca); color: var(--color-crema); }
.bloque-ig .etiqueta { color: rgba(255, 251, 245, 0.85); }
.bloque-accion { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: var(--espacio-2); align-self: flex-start; padding: 0.6rem 1.1rem; border-radius: var(--radio-pastilla); background: var(--color-crema); color: var(--color-mar); font-weight: 500; font-size: 0.9rem; transition: transform 0.2s; }
.bloque-ig:hover .bloque-accion { transform: translateX(3px); }
.bloque-sugerir { background: var(--color-superficie); border: 1px solid var(--color-linea); }
.bloque-sugerir .etiqueta { color: var(--color-apagado); }
.bloque-sugerir .boton { align-self: flex-start; margin-top: var(--espacio-2); }
.bloque-sugerir .enlace-suave { align-self: flex-start; font-size: 0.92rem; color: var(--color-apagado); }

/* ---------- Ficha de evento ---------- */
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; padding-top: var(--espacio-3); font-size: 0.85rem; color: var(--color-apagado); }
.migas a { color: var(--color-apagado); display: inline-flex; align-items: center; min-height: 2rem; }
.migas a:hover { color: var(--color-texto); }
.migas [aria-current="page"] { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha { display: flex; flex-direction: column; gap: var(--espacio-4); padding: var(--espacio-3) 0 var(--espacio-5); }
.ficha-cabeza, .ficha-datos { min-width: 0; }
.ficha-datos { order: 1; }
.ficha-imagen { order: 2; margin: 0; }
.ficha-cuando { margin: 0 0 var(--espacio-2); color: var(--color-acento); font-size: 0.8rem; }
.ficha h1 { margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(2rem, 8.5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ficha-resumen { font-size: 1.12rem; line-height: 1.6; margin: var(--espacio-3) 0 0; max-width: 38rem; }
.ficha-imagen img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: var(--radio); background: var(--color-superficie); box-shadow: var(--sombra); }
.ficha-imagen figcaption { margin-top: var(--espacio-2); color: var(--color-apagado); font-size: 0.75rem; }
.datos { margin: 0 0 var(--espacio-4); padding: 0.25rem var(--espacio-3); border-radius: var(--radio); background: var(--color-superficie); border: 1px solid var(--color-linea); }
.datos div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--espacio-3); padding: 0.85rem 0; border-bottom: 1px solid var(--color-linea); }
.datos div:last-child { border-bottom: 0; }
.datos dt { color: var(--color-apagado); font-family: var(--fuente-etiquetas); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; padding-top: 0.2rem; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.no-consta { color: var(--color-apagado); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); }
.acciones .boton { flex: 1 1 auto; white-space: nowrap; }
.ficha-etiquetas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--espacio-4) 0 0; }
.aviso { margin: var(--espacio-4) 0 0; color: var(--color-apagado); font-size: 0.85rem; max-width: 38rem; }
.relacionados { padding-bottom: var(--espacio-5); background: var(--color-superficie); border-top: 1px solid var(--color-linea); }

/* ---------- 404 ---------- */


/* ---------- Pie ---------- */
.pie { background: var(--color-profundo); color: rgba(255, 251, 245, 0.78); padding: var(--espacio-5) 0 var(--espacio-4); font-size: 0.875rem; }
.pie a { color: rgba(255, 251, 245, 0.88); }
.pie a:hover { color: var(--color-crema); }
.pie :focus-visible { outline-color: var(--color-arena); }
.pie-marca img { display: block; height: 2.2rem; width: auto; }
.pie-marca p { max-width: 24rem; margin: var(--espacio-3) 0; color: rgba(255, 251, 245, 0.85); }
.pie-ig { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; text-decoration: none; }
.pie-explorar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-4); margin: var(--espacio-5) 0 var(--espacio-4); }
.pie-explorar h2 { margin: 0 0 var(--espacio-2); font-family: var(--fuente-etiquetas); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; color: var(--color-arena); }
.pie-explorar nav { display: grid; gap: 0.35rem; align-content: start; }
.pie-explorar a { text-decoration: none; padding: 0.15rem 0; }
.pie-legal { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-4); padding-top: var(--espacio-4); border-top: 1px solid rgba(255, 251, 245, 0.15); }
.pie p { margin: 0; }
.pie .pie-aviso { max-width: 44rem; margin: var(--espacio-3) 0 var(--espacio-2); font-size: 0.78rem; line-height: 1.45; color: rgba(255, 251, 245, 0.6); }
.pie-copy { font-size: 0.78rem; color: rgba(255, 251, 245, 0.6); }

/* ---------- Nosotros: publicaciones de Instagram en rejilla, como en el perfil ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 38rem; }
.post { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-linea); }
.post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease, filter 0.35s ease; }
.post:hover img { transform: scale(1.04); filter: brightness(0.85); }
.post:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; }

/* ---------- Nosotros: texto y preguntas ---------- */
.sobre { max-width: 42rem; }
.sobre p { font-size: 1.12rem; line-height: 1.7; margin: 0 0 var(--espacio-3); }
.sobre-destacado { position: relative; padding: var(--espacio-3) var(--espacio-4); border-left: 3px solid var(--color-acento); background: var(--color-superficie); border-radius: 0 var(--radio) var(--radio) 0; font-family: var(--fuente-titulos); font-weight: 400; font-size: 1.3rem !important; line-height: 1.45 !important; }
.sobre .acciones { margin-top: var(--espacio-4); }
.preguntas { display: grid; gap: var(--espacio-2); max-width: 46rem; padding-bottom: var(--espacio-3); }
.pregunta { border-radius: var(--radio); background: var(--color-superficie); border: 1px solid var(--color-linea); }
.pregunta summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; flex: none; font-family: var(--fuente-etiquetas); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--color-acento); transition: transform 0.2s; }
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta p { margin: 0; padding: 0 var(--espacio-4) var(--espacio-4); color: var(--color-apagado); }

/* ---------- Paginas de texto (legal) ---------- */
.texto { padding-top: var(--espacio-4); padding-bottom: var(--espacio-6); max-width: 42rem; }
.texto h1 { font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(2rem, 6.5vw, 2.9rem); line-height: 1.1; margin: 0 0 var(--espacio-4); }
.texto h2 { font-family: var(--fuente-etiquetas); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem; color: var(--color-acento); margin: var(--espacio-5) 0 var(--espacio-2); }
.pendiente { background: var(--color-acento); color: var(--color-crema); padding: 0 0.3em; }

/* ---------- Formularios (Sugiere un plan y Colaboraciones) ---------- */
.formulario-seccion { display: grid; gap: var(--espacio-5); padding-bottom: var(--espacio-6); }
.formulario-caja { max-width: 40rem; }
.aviso-envio { display: none; margin: 0 0 var(--espacio-3); padding: var(--espacio-3); border-radius: var(--radio); background: var(--color-superficie); border-left: 3px solid var(--color-agua); font-weight: 500; }
.aviso-envio:target { display: block; }
.aviso-envio-error { border-left-color: var(--color-acento); }
.formulario { display: grid; gap: var(--espacio-4); padding: var(--espacio-4); border-radius: var(--radio); background: var(--color-superficie); border: 1px solid var(--color-linea); }
.formulario[hidden] { display: none; }
.campo { display: grid; gap: 0.45rem; }
.campo > label { font-weight: 500; font-size: 0.98rem; color: var(--color-texto); }
.obligatorio { color: var(--color-acento); }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 3rem; font: inherit; font-size: 1.05rem; color: var(--color-texto); background: var(--color-superficie-2); border: 1px solid #d3c3ad; border-radius: var(--radio-pequeno); padding: 0.75rem 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.2rem) 55%, calc(100% - 0.85rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.campo textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.campo input::placeholder { color: #8a9294; }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--color-agua); box-shadow: 0 0 0 3px rgba(59, 135, 144, 0.18); outline: none; }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 2px; }
.campo [aria-invalid="true"] { border-color: var(--color-acento); box-shadow: 0 0 0 3px rgba(168, 70, 61, 0.14); }
.campo-ayuda { color: var(--color-apagado); font-size: 0.85rem; }
.campo-ayuda span { font-variant-numeric: tabular-nums; }
.campo-error { margin: 0; color: var(--color-acento); font-size: 0.9rem; font-weight: 500; }
.campo-error::before { content: "! "; font-weight: 700; }
.campos-par { display: grid; gap: var(--espacio-4); }
.campo-casilla { grid-template-columns: auto 1fr; align-items: start; gap: 0.2rem 0.75rem; }
.campo-casilla input { width: 1.4rem; min-height: 0; height: 1.4rem; margin: 0.15rem 0 0; padding: 0; accent-color: var(--color-mar); }
.campo-casilla label { font-weight: 400; font-size: 0.92rem; line-height: 1.5; }
.campo-casilla .campo-error { grid-column: 1 / -1; }
.campo-oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario-turnstile:empty { display: none; }
.formulario-turnstile { min-height: 65px; }
.formulario-info { margin: 0; color: var(--color-apagado); font-size: 0.88rem; }
.formulario .boton { justify-self: start; min-width: 12rem; }
.formulario .boton:disabled { opacity: 0.65; cursor: progress; transform: none; }
.formulario-estado { margin: 0; min-height: 1.5em; color: var(--color-acento); font-weight: 500; }
.formulario-estado:empty { display: none; }
.formulario-lateral { align-self: start; padding: var(--espacio-4); border-radius: var(--radio); border: 1px dashed #cdb89c; }
.formulario-lateral h2 { margin: 0 0 var(--espacio-2); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.formulario-lateral p { margin: 0 0 var(--espacio-2); color: var(--color-apagado); }
.gracias { display: grid; gap: var(--espacio-2); justify-items: start; padding: var(--espacio-5) var(--espacio-4); border-radius: var(--radio); background: var(--color-superficie); border: 1px solid var(--color-linea); }
.gracias[hidden] { display: none; }
.gracias-punto { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: radial-gradient(circle at 62% 38%, var(--color-crema) 0 16%, transparent 17%), var(--color-mar); animation: aparecer 0.5s ease both; }
@keyframes aparecer { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.gracias strong { font-family: var(--fuente-titulos); font-weight: 700; font-size: 2rem; line-height: 1.1; }
.gracias p { margin: 0 0 var(--espacio-2); color: var(--color-apagado); }
.gracias:focus { outline: none; }
@media (min-width: 700px) {
  .campos-par { grid-template-columns: 1fr 1fr; }
  .formulario { padding: var(--espacio-5); }
}
@media (min-width: 1000px) {
  .formulario-seccion { grid-template-columns: minmax(0, 40rem) minmax(0, 20rem); justify-content: space-between; }
  .formulario-lateral { position: sticky; top: calc(var(--alto-cabecera) + var(--espacio-4)); }
}

/* ---------- Politica de cookies ---------- */
.texto ul { padding-left: 1.2rem; }
.texto h3 { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.25rem; line-height: 1.25; margin: var(--espacio-4) 0 var(--espacio-2); }
.texto p, .texto li { line-height: 1.65; }
.texto .actualizado { margin-top: calc(-1 * var(--espacio-3)); color: var(--color-apagado); font-size: 0.875rem; }
.texto li + li { margin-top: var(--espacio-2); }
.texto code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85em; color: var(--color-acento); }
.tabla-caja { overflow-x: auto; margin: var(--espacio-3) 0; border: 1px solid var(--color-linea); border-radius: var(--radio-pequeno); }
.tabla-cookies { width: 100%; min-width: 38rem; border-collapse: collapse; font-size: 0.875rem; background: var(--color-superficie); }
.tabla-cookies th, .tabla-cookies td { text-align: left; vertical-align: top; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--color-linea); }
.tabla-cookies thead th { font-family: var(--fuente-etiquetas); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; color: var(--color-apagado); background: var(--color-fondo); }
.tabla-cookies tbody tr:last-child th, .tabla-cookies tbody tr:last-child td { border-bottom: 0; }
.tabla-cookies tbody th { font-weight: 400; white-space: nowrap; }

/* ---------- Banner de cookies ---------- */
/* Los botones tienen el mismo aspecto a proposito: aceptar y rechazar deben pesar lo mismo (guia AEPD). */
.consent { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; padding: var(--espacio-3); pointer-events: none; }
.consent-caja { pointer-events: auto; max-width: 44rem; margin: 0 auto; max-height: calc(100vh - 2rem); overflow-y: auto; padding: var(--espacio-4); border-radius: var(--radio); background: var(--color-profundo); color: var(--color-crema); border-top: 3px solid var(--color-arena); box-shadow: 0 24px 60px -20px rgba(6, 46, 58, 0.6); }
.consent-titulo { margin: 0 0 var(--espacio-2); font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.55rem; line-height: 1.15; }
.consent-titulo:focus { outline: none; }
.consent-texto { margin: 0 0 var(--espacio-3); font-size: 0.95rem; color: rgba(255, 251, 245, 0.9); }
.consent-enlace { color: var(--color-arena); text-underline-offset: 3px; white-space: nowrap; }
.consent-botones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--espacio-2); }
.consent-boton { appearance: none; cursor: pointer; min-height: 2.9rem; padding: 0.55rem 0.8rem; border-radius: var(--radio-pastilla); border: 1px solid var(--color-crema); background: transparent; color: var(--color-crema); font-family: var(--fuente-texto); font-weight: 500; font-size: 0.95rem; line-height: 1.15; transition: background 0.2s, color 0.2s; }
.consent-boton:hover { background: var(--color-crema); color: var(--color-profundo); }
.consent-boton:focus-visible { outline: 3px solid var(--color-arena); outline-offset: 2px; }
.consent-lista { display: grid; gap: var(--espacio-2); margin: 0 0 var(--espacio-3); }
.consent-opcion { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3); padding: var(--espacio-3); border-radius: var(--radio-pequeno); background: rgba(255, 251, 245, 0.08); cursor: pointer; }
div.consent-opcion { cursor: default; }
.consent-opcion-texto { display: grid; gap: 0.15rem; font-size: 0.875rem; color: rgba(255, 251, 245, 0.82); }
.consent-opcion-texto strong { font-family: var(--fuente-etiquetas); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; color: var(--color-crema); }
.consent-fija { flex: none; font-size: 0.8rem; color: var(--color-arena); }
.consent-interruptor { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 3rem; height: 1.7rem; margin: 0; border-radius: var(--radio-pastilla); background: rgba(255, 251, 245, 0.18); border: 1px solid rgba(255, 251, 245, 0.5); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.consent-interruptor::after { content: ""; position: absolute; top: 50%; left: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--color-crema); transform: translateY(-50%); transition: left 0.2s, background 0.2s; }
.consent-interruptor:checked { background: var(--color-agua); border-color: var(--color-agua); }
.consent-interruptor:checked::after { left: calc(100% - 1.35rem); background: #fff; }
@media (max-width: 480px) {
  .consent { padding: var(--espacio-2); }
  .consent-caja { padding: var(--espacio-3); }
  .consent-botones { grid-auto-flow: row; }
}

/* ---------- Moviles muy estrechos (360-380 px): que quepan las cuatro opciones de fecha ---------- */
@media (max-width: 380px) {
  .carrusel { grid-auto-columns: 72%; }
  .filtros-fila { gap: 0.3rem; }
  .filtro { padding: 0.4rem 0.62rem; font-size: 0.82rem; }
  .filtro .num { margin-left: 0.28em; }
}

/* ---------- Tablet ---------- */
@media (min-width: 700px) {
  .menu-ig span { display: inline; }
  .portada-inicio .contenedor { padding-top: var(--espacio-6); padding-bottom: var(--espacio-6); }
  .portada-botones { grid-template-columns: repeat(3, 9.5rem); max-width: none; }
  .carrusel { grid-auto-columns: 36%; }
  .bloques { grid-template-columns: 1.3fr 1fr; }
  .dia-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie > .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--espacio-5); }
  .pie-explorar { margin-top: 0; }
  .pie-legal, .pie .pie-aviso, .pie-copy { grid-column: 1 / -1; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 1000px) {
  .contenedor { padding-left: var(--espacio-5); padding-right: var(--espacio-5); }
  .carrusel { grid-auto-columns: calc((min(100vw, var(--ancho-maximo)) - 2 * var(--espacio-5) - 3 * 0.75rem) / 4); padding-left: max(var(--espacio-5), calc((100vw - var(--ancho-maximo)) / 2 + var(--espacio-5))); padding-right: var(--espacio-5); scroll-padding-inline: max(var(--espacio-5), calc((100vw - var(--ancho-maximo)) / 2 + var(--espacio-5))); }
  .facetas-fila { flex-wrap: wrap; overflow: visible; }
  .dia { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--espacio-4); padding-top: var(--espacio-5); }
  .dia-titulo { top: calc(var(--alto-cabecera) + var(--alto-filtros) + var(--espacio-3)); align-self: start; flex-direction: column; align-items: flex-start; gap: 0.45rem; margin: 0; padding: 0.7rem 0 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 1.35rem; }
  .dia-rel { transform: none; }
  .plan-enlace { grid-template-columns: 6.5rem minmax(0, 1fr); padding: 0.8rem; gap: 1rem; }
  .plan-titulo { font-size: 1.2rem; }
  .ficha.con-imagen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "img cabeza" "img datos"; column-gap: var(--espacio-6); row-gap: var(--espacio-4); align-items: start; padding-top: var(--espacio-4); }
  .ficha.con-imagen .ficha-imagen { grid-area: img; position: sticky; top: calc(var(--alto-cabecera) + var(--espacio-4)); }
  .ficha.con-imagen .ficha-imagen img { width: auto; max-width: 100%; max-height: calc(100vh - var(--alto-cabecera) - 5rem); }
  .ficha.con-imagen .ficha-cabeza { grid-area: cabeza; }
  .ficha.con-imagen .ficha-datos { grid-area: datos; }
  .ficha:not(.con-imagen) { max-width: 46rem; }
}

/* ---------- Menos movimiento si el sistema lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .portada-video { display: none; }
  .rotador span { opacity: 0; transform: none; }
  .rotador span:first-child { opacity: 1; }
}