/* ============================================================================
   publica.css — Sistema de diseño del sitio público (rediseño 2026)
   Especificación: new-design/README.md + prototipos new-design/*.dc.html
   Solo para plantillas que extienden base_publica.html. El CRM no usa este CSS.

   CONTRATO — clases públicas del sistema (usar estas en las páginas):

   Estructura
     .contenedor-publica   contenedor centrado max-width 1256px (lo pone la base)
     body.portada          variante de portada: nav fija y transparente sobre el hero
     body.nav-min          la pone publica.js al pasar 90px de scroll

   Nav / pie (los monta base_publica.html; no replicar en páginas)
     .nav-publica .nav-contenido .nav-logo .nav-marca .logo-corazon
     .nav-subtitulo .nav-enlaces .nav-seguir .nav-cita
     .pie-publica .pie-contenido .pie-lockup .pie-antetitulo .pie-marca
     .pie-lema .pie-enlaces .pie-copyright

   Superficies de cristal
     .tarjeta-cristal      panel claro rgba(255,255,255,.55) + blur 18px, radio 22px
     .tarjeta-cristal.elevable   añade elevación al hover
     .cristal-sobre-foto   panel sobre fotografía rgba(255,255,255,.14) + blur 20px

   Botones y píldoras
     .btn-terracota        CTA principal #B0664B (hover #974E37)
     .btn-verde            acción #56705E (hover #4C6353)
     .btn-blanco           botón blanco sobre foto (texto #3C5145)
     .pildora              píldora de cristal sobre foto (hero)
     .pildora-filtro       botón de filtro; con .activa se pinta #56705E

   Comportamiento (emparejar con publica.js)
     .marquee              contenedor con máscara de desvanecido en los bordes
     .marquee-pista        pista animada (translateX 0→-50%, 32s, pausa al hover);
                           con [data-marquee] publica.js duplica el contenido
     .contador             cifra Lora 38px #8A7359; animar con [data-contador="3500"]
     .carrusel-testimonios [data-carrusel]; diapositivas [data-diapositiva],
                           puntos en [data-puntos] (los genera publica.js)
     .anima-entrada        animación cardIn (usada también al filtrar)
     [data-filtros] [data-filtro] [data-categoria]   filtrado instantáneo
     .whatsapp-flotante    botón fijo abajo-derecha (lo pone la base)
     .aviso-cookies        banner de cookies (lo pone la base)
   ========================================================================== */

/* ----- Fuentes locales (variables; un woff2 cubre todos los pesos) -------- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/publica/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/publica/lora-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/publica/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----- Tokens de diseño (new-design/README.md § Design Tokens) ------------ */
:root {
  /* Colores */
  --fondo: #F2EDE3;
  --fondo-gradiente: radial-gradient(120% 60% at 70% -5%, #EBE7DC 0%, #F2EDE3 45%, #F1ECE2 100%);
  --texto: #2B322B;
  --texto-secundario: #5C6258;
  --texto-suave: #6C7268;
  --texto-terciario: #9AA093;
  --texto-apagado: #979C90;
  --marca-taupe: #A58E77;
  --titulo-taupe: #8A7359;          /* títulos de página y cifras */
  --terracota: #B0664B;
  --terracota-hover: #974E37;
  --verde: #56705E;
  --verde-hover: #4C6353;
  --verde-oscuro: rgba(38, 54, 44, 0.74);      /* píldoras nav-min */
  --verde-oscuro-denso: rgba(38, 54, 44, 0.92);/* aviso de cookies */
  --estrellas: #D6A24A;
  --cristal-claro: rgba(255, 255, 255, 0.55);
  --cristal-sobre-foto: rgba(255, 255, 255, 0.14);
  --cristal-pildora: rgba(255, 255, 255, 0.16);
  --nav-solida: rgba(244, 239, 231, 0.82);
  --linea-suave: rgba(43, 50, 43, 0.08);

  /* Forma */
  --radio-boton: 13px;
  --radio-tarjeta: 22px;
  --radio-panel: 32px;
  --radio-pildora: 999px;

  /* Sombras flotantes en dos capas */
  --sombra-flotante: 0 14px 24px -16px rgba(40, 55, 45, 0.28),
                     0 42px 76px -34px rgba(40, 55, 45, 0.42);
  --sombra-elevada: 0 20px 32px -18px rgba(40, 55, 45, 0.34),
                    0 58px 96px -38px rgba(40, 55, 45, 0.5);

  /* Tipografía */
  --fuente-titulos: 'Lora', Georgia, serif;
  --fuente-cuerpo: 'Manrope', system-ui, -apple-system, sans-serif;
  --fs-hero: 50px;            /* H1 del hero de portada */
  --fs-titulo-pagina: 46px;   /* H1 de página interior */
  --fs-seccion: 40px;         /* H2 de sección */
  --fs-seccion-menor: 38px;
  --fs-tarjeta: 20px;         /* título de tarjeta */
  --fs-logo: 23px;
  --fs-contador: 38px;

  --ancho-contenido: 1256px;

  /* Altura del botón «Pedir cita» de la barra. La barra mide 1,3 veces esto
     (pedido por el usuario el 2026-10-12: «como máximo un 30 % más que el botón»):
     su relleno vertical sale de aquí y el logotipo no puede ser más alto. */
  --alto-cita: 42px;
  --relleno-barra: calc(var(--alto-cita) * 0.15);
}

/* ----- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--texto);
  background: var(--fondo-gradiente);
  background-color: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--verde); color: #fff; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.contenedor-publica {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 28px;
}

/* ----- Nav ---------------------------------------------------------------- */
/* Por defecto (blog y páginas interiores): barra flotante de cristal plano,
   «planar spatial design» (pedido por el usuario el 2026-10-02). Antes era una
   franja sólida pegada al borde con línea inferior. Misma receta que la caja del
   logo de la portada al desplazarse: blanco translúcido con desenfoque, esquinas
   redondeadas, borde apenas insinuado y una sola sombra ligera, sin relieves. */
.nav-publica {
  position: sticky;
  top: 10px;
  z-index: 80;
  width: calc(100% - 28px);
  max-width: calc(var(--ancho-contenido) - 28px);
  margin: 10px auto 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 18px -12px rgba(40, 55, 45, 0.18);
}
.nav-contenido {
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: calc(var(--relleno-barra) - 1px) 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 767.98px) {
  .nav-publica { top: 8px; width: calc(100% - 16px); margin-top: 8px; border-radius: 16px; }
  .nav-contenido { padding: calc(var(--relleno-barra) - 1px) 14px; }
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  /* En reposo el logotipo va limpio, sin relleno ni fondo (2026-10-02). El
     relleno aparece solo con la caja de cristal del estado nav-min, y el margen
     negativo lo compensa para que el logo no se mueva al desplazarse. */
  padding: 0;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease,
              margin .35s ease, border-color .35s ease;
}
.nav-marca {
  font-family: var(--fuente-titulos);
  font-size: var(--fs-logo);
  font-weight: 600;
  color: var(--texto);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  transition: color .35s ease;
}
.logo-corazon {
  width: 19px;
  height: 16px;
  flex: none;
  margin: 2px 0 0;
  color: var(--marca-taupe);   /* el SVG usa stroke="currentColor" */
}
/* Logotipo PNG del centro en la barra y el pie (desde 2026-10-02). */
/* `align-self: flex-start` + `object-fit: contain`: dentro de un flex en
   columna (el pie) el <img> se estiraba a todo el ancho y se deformaba. */
.nav-logo-img, .pie-logo-img, .acceso-logo-img {
  width: auto; max-width: 100%; display: block; flex: none; align-self: flex-start;
  object-fit: contain;
}
/* 52 px como el logo de la barra de ag-photonics.com, referencia dada por el
   usuario (2026-10-02); el relleno vertical de la barra (16 px) es el mismo. */
/* 78 px (52 de la referencia + 50 %) desde el 2026-10-02; desde el 2026-10-12 lo
   limita la regla de la barra: no más alto que el botón «Pedir cita». */
/* Menos 2 px: el borde transparente de .nav-logo (1 px por lado) cuenta en la altura. */
.nav-logo-img { height: calc(var(--alto-cita) - 2px); }
.pie-logo-img { height: 39px; }
.acceso-logo-img { height: 44px; align-self: center; margin: 0 auto 10px; }
.nav-subtitulo {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: #8A8F84;
  margin-top: 3px;
  font-weight: 600;
  transition: color .35s ease;
}
.nav-derecha { display: flex; align-items: center; gap: 30px; }
.nav-enlaces {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 500;
  color: #4A4F45;
  transition: opacity .3s ease, transform .3s ease, color .35s ease;
}
.nav-enlaces a { color: inherit; }
/* Enlace de la página actual: los prototipos lo marcan oscurecido (#2B322B). */
.nav-enlaces a.activa { color: var(--texto); font-weight: 600; }
.nav-seguir {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  background: rgba(86, 112, 94, 0.1);
  color: var(--verde);
  font-size: 14px;
  font-weight: 600;
  transition: background .35s ease, color .35s ease, transform .2s ease, box-shadow .35s ease;
}
.nav-seguir:hover { background: rgba(86, 112, 94, 0.2); transform: translateY(-1px); }
.nav-seguir svg { width: 19px; height: 19px; flex: none; }
/* En las páginas interiores el botón de Instagram es solo-icono (cuadrado 40×40),
   como en los tres prototipos interiores; el texto "Síguenos" es de la portada. */
body:not(.portada) .nav-seguir span { display: none; }
body:not(.portada) .nav-seguir { width: 40px; padding: 0; justify-content: center; }

/* Variante de portada: nav fija y transparente sobre el hero. Desde el
   2026-10-02 el velo del hero es claro (#E5E4D8), así que el texto va en los
   mismos tonos oscuros que en las páginas interiores. */
body.portada .nav-publica {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.portada .nav-contenido { padding: var(--relleno-barra) 28px; }
body.portada .nav-seguir {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.portada .nav-seguir:hover { background: rgba(255, 255, 255, 0.85); }

/* nav-min (portada, >90px de scroll): enlaces desvanecidos; el logo y Síguenos
   quedan flotando en cajas de cristal con esquinas redondeadas, al estilo
   «spatial design»: blanco translúcido con desenfoque, borde claro, brillo
   interior en el canto superior y sombra suave. La clase la pone publica.js.
   (Pedido por el usuario el 2026-10-02; antes eran píldoras verde oscuro.) */
body.portada.nav-min .nav-enlaces {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}
body.portada.nav-min .nav-logo,
body.portada.nav-min .nav-seguir {
  /* Plana, sin relieve (ajuste del usuario): nada de brillos interiores, borde
     apenas insinuado y una sola sombra muy ligera. */
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: saturate(150%) blur(20px);
  -webkit-backdrop-filter: saturate(150%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 18px -12px rgba(40, 55, 45, 0.18);
}
body.portada.nav-min .nav-logo {
  padding: calc(var(--relleno-barra) - 1px) 18px;
  margin: calc(1px - var(--relleno-barra)) 0 calc(1px - var(--relleno-barra)) -18px;
}
body.portada.nav-min .nav-seguir:hover { background: rgba(255, 255, 255, 0.85); }

/* ----- Superficies de cristal --------------------------------------------- */
.tarjeta-cristal {
  background: var(--cristal-claro);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-flotante);
}
.tarjeta-cristal.elevable {
  transition: transform .3s ease, box-shadow .3s ease;
}
.tarjeta-cristal.elevable:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-elevada);
}
.cristal-sobre-foto {
  background: var(--cristal-sobre-foto);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 26px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.4);
}

/* ----- Botones y píldoras ------------------------------------------------- */
.btn-terracota,
.btn-verde,
.btn-blanco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background .25s ease, transform .2s ease;
}
.btn-terracota {
  background: var(--terracota);
  color: #fff;
  font-size: 14.5px;
  padding: 11px 22px;
  border-radius: var(--radio-boton);
  box-shadow: 0 12px 26px -12px rgba(151, 78, 55, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.btn-terracota:hover { background: var(--terracota-hover); transform: translateY(-1px); }
/* El "Pedir cita" de la nav va en taupe: los CUATRO prototipos coinciden en
   #8A7359 (hover #6F5B45); el terracota del README quedó desactualizado y por su
   propia regla mandan los ficheros. El terracota sigue disponible para otros CTA. */
.nav-cita {
  height: var(--alto-cita);
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;   /* en móvil se partía en «Pedir / cita» y la barra crecía */
  background: var(--titulo-taupe);
  box-shadow: 0 12px 26px -12px rgba(111, 91, 69, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.nav-cita:hover { background: #6F5B45; }
.btn-verde {
  background: var(--verde);
  color: #fff;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: var(--radio-boton);
  box-shadow: 0 14px 30px -14px rgba(78, 99, 86, 0.7);
}
.btn-verde:hover { background: var(--verde-hover); transform: translateY(-2px); }
.btn-blanco {
  background: #fff;
  color: #3C5145;
  font-size: 15px;
  padding: 15px 24px;
  border-radius: 14px;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.4);
}
.btn-blanco:hover { transform: translateY(-2px); }

.pildora {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radio-pildora);
  background: var(--cristal-pildora);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.pildora-filtro {
  font-family: inherit;
  cursor: pointer;
  border: none;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radio-pildora);
  background: rgba(255, 255, 255, 0.6);
  color: #4A4F45;
  box-shadow: 0 10px 22px -16px rgba(40, 55, 45, 0.35);
  transition: all .25s ease;
}
.pildora-filtro.activa {
  background: var(--verde);
  color: #fff;
  box-shadow: 0 12px 26px -12px rgba(78, 99, 86, 0.7);
}

/* ----- Marquee de servicios ----------------------------------------------- */
@keyframes marquee-desplaza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  overflow: hidden;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.marquee-pista {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee-desplaza 32s linear infinite;
}
.marquee-pista:hover { animation-play-state: paused; }

/* ----- Contadores --------------------------------------------------------- */
.contador {
  font-family: var(--fuente-titulos);
  font-size: var(--fs-contador);
  font-weight: 700;
  color: var(--titulo-taupe);
  line-height: 1;
}

/* ----- Carrusel de testimonios -------------------------------------------- */
.carrusel-testimonios [data-diapositiva] {
  transition: opacity .45s ease;
  opacity: 1;
}
.carrusel-testimonios [data-diapositiva].oculta { opacity: 0; }
.carrusel-puntos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}
.carrusel-puntos button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(43, 50, 43, 0.18);
  transition: all .3s ease;
}
.carrusel-puntos button.activo {
  width: 18px;
  border-radius: 4px;
  background: var(--verde);
}

/* ----- Animación de entrada (mosaicos y filtros) --------------------------- */
/* Importante: fill-mode backwards, NUNCA both/forwards (bloquearía el hover). */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.anima-entrada { animation: cardIn .5s ease backwards; }

/* ----- WhatsApp flotante --------------------------------------------------- */
.whatsapp-flotante {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--verde);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: var(--radio-pildora);
  box-shadow: 0 14px 28px -12px rgba(40, 55, 45, 0.5), 0 34px 60px -26px rgba(40, 55, 45, 0.55);
  transition: background .25s ease, transform .2s ease;
}
.whatsapp-flotante:hover { background: var(--verde-hover); transform: translateY(-3px); }
.whatsapp-flotante svg { width: 20px; height: 20px; flex: none; }

/* ----- Aviso de cookies ---------------------------------------------------- */
.aviso-cookies {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 120;
  width: min(680px, calc(100vw - 48px));
  background: var(--verde-oscuro-denso);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5), 0 50px 90px -30px rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  transition: opacity .3s ease, transform .3s ease;
}
.aviso-cookies.oculto {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
}
.aviso-cookies-texto { flex: 1; min-width: 260px; }
.aviso-cookies-titulo {
  font-family: var(--fuente-titulos);
  font-size: 16px;
  font-weight: 700;
}
.aviso-cookies-detalle {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 6px;
}
.aviso-cookies-detalle a { color: #D9CBB8; text-decoration: underline; }
.aviso-cookies-botones { display: flex; gap: 10px; flex: none; }
/* Rechazar y Aceptar con el MISMO estilo: la guía de cookies de la AEPD (2023)
   exige que rechazar esté al mismo nivel que aceptar y considera patrón engañoso
   darle más peso visual al botón de aceptar. */
.aviso-cookies .btn-rechazar,
.aviso-cookies .btn-aceptar {
  font-family: inherit;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #fff;
  padding: 10px 20px;
  transition: background .2s ease;
}
.aviso-cookies .btn-rechazar:hover,
.aviso-cookies .btn-aceptar:hover { background: rgba(255, 255, 255, 0.14); }

/* ----- Pie ----------------------------------------------------------------- */
.pie-publica { margin-top: 80px; border-top: 1px solid rgba(43, 50, 43, 0.07); }
.pie-contenido {
  /* 1136px útiles como el prototipo (1200 − 2×32 de padding). */
  max-width: 1192px;
  margin: 0 auto;
  padding: 34px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pie-lockup { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.pie-antetitulo {
  font-size: 8px;
  letter-spacing: 0.24em;
  color: var(--marca-taupe);
  font-weight: 600;
}
.pie-marca {
  font-family: var(--fuente-titulos);
  font-size: 19px;
  font-weight: 600;
  color: var(--texto);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
}
.pie-marca .logo-corazon { width: 16px; height: 14px; }
.pie-lema {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--marca-taupe);
  font-weight: 500;
}
.pie-enlaces {
  display: flex;
  gap: 24px;
  font-size: 13.5px;
  color: var(--texto-suave);
  font-weight: 500;
  flex-wrap: wrap;
}
.pie-copyright { font-size: 12.5px; color: var(--texto-apagado); }

/* ----- Móvil (los prototipos son de escritorio ~1200px) --------------------- */
@media (max-width: 1024px) {
  .nav-enlaces { display: none; }
  .nav-derecha { gap: 14px; }
}
@media (max-width: 760px) {
  :root {
    --fs-hero: 34px;
    --fs-titulo-pagina: 32px;
    --fs-seccion: 28px;
    --fs-seccion-menor: 27px;
    --fs-contador: 30px;
  }
  .contenedor-publica { padding: 0 18px; }
  .nav-contenido { padding: calc(var(--relleno-barra) - 1px) 18px; }
  body.portada .nav-contenido { padding: var(--relleno-barra) 18px; }
  .nav-seguir span { display: none; }        /* solo el icono de Instagram */
  .nav-seguir { padding: 0 11px; }
  .marquee {
    -webkit-mask-image: none;                /* la máscara recorta demasiado en pantallas estrechas */
    mask-image: none;
  }
  .pie-contenido { flex-direction: column; align-items: flex-start; }
  .whatsapp-flotante { right: 16px; bottom: 16px; padding: 13px 16px; }
  .whatsapp-flotante span { display: none; } /* solo el icono */
}

/* ----- Páginas interiores (terapias, online, becas, talleres, contacto) ----
   Patrón común tomado de las páginas interiores del prototipo (Equipo.dc.html):
   H1 Lora 46px/700 (terracota en terapias/contacto, taupe en el resto),
   contenido en tarjetas de cristal, imágenes radius 22px + doble sombra. */
.cabecera-pagina { text-align: center; padding: 58px 0 38px; }
.titulo-pagina {
  font-family: var(--fuente-titulos);
  font-size: var(--fs-titulo-pagina);
  font-weight: 700;
  color: var(--titulo-taupe);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.titulo-pagina.terracota { color: var(--terracota); }
.entradilla {
  max-width: 840px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--texto-secundario);
}
.entradilla + .entradilla { margin-top: 14px; }

.seccion-publica { margin: 46px 0 0; }
.titulo-seccion {
  font-family: var(--fuente-titulos);
  font-size: 28px;
  font-weight: 700;
  color: var(--texto);
  text-align: center;
  margin: 0 0 22px;
}
.titulo-apartado {
  font-family: var(--fuente-titulos);
  font-size: 20px;
  font-weight: 700;
  color: var(--texto);
  margin: 26px 0 10px;
}

/* Tarjeta de cristal usada como panel de texto */
.tarjeta-texto { padding: 34px 38px; }
.tarjeta-texto p { font-size: 15px; line-height: 1.75; color: var(--texto-secundario); margin: 0 0 14px; }
.tarjeta-texto p:last-child { margin-bottom: 0; }

/* Rejillas sencillas */
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* Lista con icono de verificación (check de Lucide en data-URI local) */
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.lista-check li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.65;
  color: var(--texto-secundario);
}
.lista-check li::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(86, 112, 94, 0.12)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356705E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
    center / 14px 14px no-repeat;
}
.lista-check .titulo-item {
  font-family: var(--fuente-titulos);
  font-size: 18px;
  font-weight: 700;
  color: var(--texto);
  margin: 0 0 6px;
}
.lista-check li p { margin: 0; }
.lista-check.anidada { margin: 10px 0 0 18px; gap: 10px; }
.lista-check.anidada li::before { width: 20px; height: 20px; background-size: 11px 11px; }

/* Imagen suelta con la forma del sistema */
.foto-publica {
  display: block;
  width: 100%;
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-flotante);
}

/* CTA final de página ("Pedir cita") */
.cta-final { text-align: center; margin-top: 54px; }
.cta-final p { font-size: 15px; color: var(--texto-suave); margin: 0 0 16px; }

/* Fila de botones/acciones */
.fila-acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Enlaces dentro de texto corrido */
.enlace-verde { color: var(--verde); font-weight: 600; text-decoration: underline; }
.enlace-verde:hover { color: var(--verde-hover); }

/* Formulario público (contacto): inputs con fondo de cristal */
.formulario-publica input[type="text"],
.formulario-publica input[type="email"],
.formulario-publica textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  padding: 14px 18px;
  font-family: inherit;
  font-size: 15px;
  color: var(--texto);
  box-shadow: 0 10px 22px -18px rgba(40, 55, 45, 0.35);
  transition: border-color .2s ease, background .2s ease;
}
.formulario-publica input:focus,
.formulario-publica textarea:focus {
  outline: none;
  border-color: var(--verde);
  background: rgba(255, 255, 255, 0.85);
}
.formulario-publica ::placeholder { color: var(--texto-terciario); }
.formulario-publica textarea { min-height: 150px; resize: vertical; }
.formulario-publica .campo { margin-bottom: 16px; }
.formulario-publica .errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--terracota-hover);
  font-weight: 600;
}
.formulario-publica .acepto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--texto-suave);
  margin-bottom: 20px;
}
.formulario-publica .acepto input { accent-color: var(--verde); margin-top: 2px; }

/* Página sencilla centrada (gracias, 404) */
.pagina-sencilla { max-width: 640px; margin: 0 auto; text-align: center; padding: 84px 0 40px; }
.pagina-sencilla .titulo-pagina { margin-bottom: 12px; }
.pagina-sencilla p { font-size: 16px; line-height: 1.7; color: var(--texto-secundario); margin: 0 0 28px; }

@media (max-width: 860px) {
  .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; }
  .tarjeta-texto { padding: 26px 22px; }
  .cabecera-pagina { padding: 40px 0 28px; }
}

/* ----- Accesibilidad: sin movimiento -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-pista { animation: none; }
  .anima-entrada { animation: none; }
  .carrusel-testimonios [data-diapositiva] { transition: none; }
  .nav-enlaces, .nav-logo, .nav-seguir, .aviso-cookies { transition: none; }
  .tarjeta-cristal.elevable,
  .btn-terracota, .btn-verde, .btn-blanco,
  .whatsapp-flotante { transition: none; }
  /* publica.js también lo respeta: contadores sin animar y carrusel sin autoplay */
}