/* =========================================================================
   DÍAZ TEALDE · components.css
   Cabecera, navegación, botones, tarjetas, formularios, pie y flotantes
   ========================================================================= */

/* ======================= BOTONES ========================================= */
.btn {
  --btn-fondo: var(--azul-700);
  --btn-texto: #fff;
  --btn-borde: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  min-block-size: 52px;
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: .012em;
  line-height: 1.2;
  text-align: center;
  color: var(--btn-texto);
  background: var(--btn-fondo);
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--t-1) var(--e-suave),
    color var(--t-1) var(--e-suave),
    border-color var(--t-1) var(--e-suave),
    box-shadow var(--t-2) var(--e-suave),
    transform var(--t-1) var(--e-suave);
}
.btn .ic { inline-size: 19px; block-size: 19px; }

/* Barrido de luz muy sutil al pasar el cursor */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--t-3) var(--e-suave);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover  { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.btn:active { transform: translateY(0); box-shadow: var(--sombra-1); }

/* — Principal: azul institucional — */
.btn--principal { --btn-fondo: var(--azul-700); }
.btn--principal:hover { --btn-fondo: var(--azul-600); }
.tema-oscuro .btn--principal { --btn-fondo: var(--champagne); --btn-texto: var(--azul-950); }
.tema-oscuro .btn--principal:hover { --btn-fondo: var(--champagne-claro); }

/* — Secundario: contorno — */
.btn--secundario {
  --btn-fondo: transparent;
  --btn-texto: var(--titulo);
  --btn-borde: var(--linea-firme);
}
.btn--secundario:hover {
  --btn-fondo: rgba(11,44,89,.05);
  --btn-borde: var(--azul-700);
}
/* El contorno secundario nace en versión clara (texto azul sobre fondo claro).
   Estas superficies tienen fondo oscuro propio y NO llevan la clase .tema-oscuro,
   así que sin esta regla el botón queda azul oscuro sobre azul oscuro: invisible.
   Es el mismo inventario de superficies oscuras documentado en base.css junto a
   la regla de <strong>: si se agrega una sección oscura nueva hay que sumarla en
   LOS DOS lugares (o usar .btn--vidrio, que ya nace en versión clara). */
.tema-oscuro .btn--secundario,
.hero .btn--secundario,
.franja .btn--secundario,
.programa .btn--secundario,
.diagnostico .btn--secundario,
.columna--prevenir .btn--secundario,
.filosofia .btn--secundario,
.cierre .btn--secundario,
.cabeza-interna .btn--secundario,
.estado-pagina .btn--secundario,
.menu-movil .btn--secundario,
.pie .btn--secundario {
  --btn-texto: #fff;
  --btn-borde: rgba(255,255,255,.32);
}
.tema-oscuro .btn--secundario:hover,
.hero .btn--secundario:hover,
.franja .btn--secundario:hover,
.programa .btn--secundario:hover,
.diagnostico .btn--secundario:hover,
.columna--prevenir .btn--secundario:hover,
.filosofia .btn--secundario:hover,
.cierre .btn--secundario:hover,
.cabeza-interna .btn--secundario:hover,
.estado-pagina .btn--secundario:hover,
.menu-movil .btn--secundario:hover,
.pie .btn--secundario:hover {
  --btn-fondo: rgba(255,255,255,.08);
  --btn-borde: rgba(255,255,255,.6);
}

/* — Sobre imagen oscura (hero) — */
.btn--vidrio {
  --btn-fondo: rgba(255,255,255,.07);
  --btn-texto: #fff;
  --btn-borde: rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--vidrio:hover { --btn-fondo: rgba(255,255,255,.15); --btn-borde: rgba(255,255,255,.55); }

/* — WhatsApp — */
/* El verde de marca de WhatsApp (#25D366) y su versión oscura (#1DA851) dan
   3,1:1 con texto blanco, por debajo del 4,5:1 que pide el texto normal. Este
   tono conserva la lectura "WhatsApp" y llega a 4,8:1. El verde de marca sigue
   usándose en el botón flotante, que es solo icono y solo necesita 3:1. */
.btn--whatsapp { --btn-fondo: #14833F; --btn-texto: #fff; }
.btn--whatsapp:hover { --btn-fondo: #0F6B32; }

.btn--ancho { inline-size: 100%; }
.btn--grande { padding: 1.1rem 2rem; min-block-size: 58px; font-size: var(--fs-md); }

/* Enlace con flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--titulo);
  padding-block: .4rem;
  border-bottom: 1px solid var(--linea-firme);
  transition: color var(--t-1) var(--e-suave), border-color var(--t-1) var(--e-suave), gap var(--t-1) var(--e-suave);
}
.enlace-flecha .ic { inline-size: 17px; block-size: 17px; transition: transform var(--t-1) var(--e-suave); }
.enlace-flecha:hover { color: var(--acento); border-color: var(--acento); gap: .75rem; }
.enlace-flecha:hover .ic { transform: translateX(3px); }

/* ======================= CABECERA ======================================== */
.cabecera {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  block-size: var(--alto-header);
  display: flex;
  align-items: center;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition:
    background-color var(--t-2) var(--e-suave),
    border-color var(--t-2) var(--e-suave),
    box-shadow var(--t-2) var(--e-suave),
    block-size var(--t-2) var(--e-suave);
}
.cabecera__interior {
  inline-size: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

/* Estado sólido al hacer scroll */
.cabecera.solida {
  background: rgba(251,250,246,.93);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-block-end-color: var(--linea);
  box-shadow: 0 1px 24px rgba(6,23,41,.07);
}

/* Se retira al bajar y vuelve al subir, para ganar altura de lectura */
.cabecera { transform: translateY(0); transition: transform var(--t-2) var(--e-suave), background-color var(--t-2) var(--e-suave), border-color var(--t-2) var(--e-suave), box-shadow var(--t-2) var(--e-suave); }
.cabecera.oculta { transform: translateY(-100%); }

/* Bloqueo del fondo mientras el menú móvil está abierto */
body.sin-scroll { overflow: hidden; }

/* Logo con cruce de opacidad entre versión clara y oscura */
.cabecera__logo {
  position: relative;
  display: block;
  block-size: 52px;
  flex: none;
  margin-inline-end: auto;
}
.cabecera__logo img {
  block-size: 100%;
  inline-size: auto;
  transition: opacity var(--t-2) var(--e-suave);
}
.cabecera__logo img + img { position: absolute; inset-block-start: 0; inset-inline-start: 0; }
.cabecera__logo .logo-claro  { opacity: 1; }   /* blanco, sobre el hero */
.cabecera__logo .logo-oscuro { opacity: 0; }   /* azul, con cabecera sólida */
.cabecera.solida .logo-claro  { opacity: 0; }
.cabecera.solida .logo-oscuro { opacity: 1; }

@media (max-width: 900px) { .cabecera__logo { block-size: 44px; } }

/* Navegación de escritorio */
.nav { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 2rem); }
.nav a {
  position: relative;
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgba(255,255,255,.86);
  padding-block: .5rem;
  white-space: nowrap;
  transition: color var(--t-1) var(--e-suave);
}
.nav a::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1.5px;
  background: var(--champagne);
  transition: inline-size var(--t-2) var(--e-suave);
}
.nav a:hover, .nav a[aria-current="page"], .nav a.activo { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.activo::after { inline-size: 100%; }

.cabecera.solida .nav a { color: var(--grafito); }
.cabecera.solida .nav a:hover,
.cabecera.solida .nav a.activo,
.cabecera.solida .nav a[aria-current="page"] { color: var(--azul-700); }
.cabecera.solida .nav a::after { background: var(--bronce); }

.cabecera__cta { flex: none; }
.cabecera__cta .btn {
  padding: .7rem 1.25rem;
  min-block-size: 44px;
  font-size: var(--fs-sm);
}
.cabecera .btn--vidrio { --btn-borde: rgba(255,255,255,.42); }
.cabecera.solida .cabecera__cta .btn {
  --btn-fondo: var(--azul-700);
  --btn-texto: #fff;
  --btn-borde: transparent;
  backdrop-filter: none;
}
.cabecera.solida .cabecera__cta .btn:hover { --btn-fondo: var(--azul-600); }

@media (max-width: 1080px) { .nav, .cabecera__cta { display: none; } }

/* Botón hamburguesa */
.hamburguesa {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  margin-inline-start: auto;
  border-radius: var(--r-sm);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  transition: color var(--t-1) var(--e-suave), border-color var(--t-1) var(--e-suave), background-color var(--t-1) var(--e-suave);
}
.cabecera.solida .hamburguesa { color: var(--azul-700); border-color: var(--linea-firme); }
.hamburguesa:hover { background: rgba(255,255,255,.12); }
.cabecera.solida .hamburguesa:hover { background: rgba(11,44,89,.06); }

@media (max-width: 1080px) { .hamburguesa { display: inline-flex; } }

/* Acceso directo a WhatsApp en la cabecera móvil */
.cabecera__wa {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-sm);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  margin-inline-start: .5rem;
}
.cabecera.solida .cabecera__wa { color: #1DA851; border-color: var(--linea-firme); }
@media (max-width: 1080px) { .cabecera__wa { display: inline-flex; } }
@media (max-width: 420px)  { .cabecera__wa { display: none; } }

/* ======================= MENÚ MÓVIL ====================================== */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--azul-900);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-2) var(--e-suave), visibility var(--t-2);
  overscroll-behavior: contain;
}
.menu-movil[data-abierto="true"] { visibility: visible; opacity: 1; }

.menu-movil__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  block-size: var(--alto-header);
  padding-inline: var(--pad-x);
  border-block-end: 1px solid rgba(255,255,255,.1);
}
.menu-movil__barra img { block-size: 44px; inline-size: auto; }
.menu-movil__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px; block-size: 46px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-sm);
}

.menu-movil__lista {
  padding: 1.5rem var(--pad-x) 1rem;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: .15rem;
}
.menu-movil__lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem .25rem;
  font-family: var(--f-serif);
  font-size: 1.35rem;
  color: #fff;
  border-block-end: 1px solid rgba(255,255,255,.09);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-2) var(--e-suave), transform var(--t-2) var(--e-suave), color var(--t-1);
}
.menu-movil[data-abierto="true"] .menu-movil__lista a {
  opacity: 1;
  transform: none;
  transition-delay: calc(90ms + var(--i, 0) * 45ms);
}
.menu-movil__lista a .ic { color: var(--champagne); inline-size: 18px; block-size: 18px; }
.menu-movil__lista a:hover { color: var(--champagne-claro); }

.menu-movil__pie {
  padding: 1.25rem var(--pad-x) calc(1.5rem + env(safe-area-inset-bottom));
  border-block-start: 1px solid rgba(255,255,255,.1);
  display: grid;
  gap: .7rem;
}
.menu-movil__contacto {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: var(--fs-sm);
  color: #9DB0C9;
}
.menu-movil__contacto a { display: inline-flex; align-items: center; gap: .45rem; }
.menu-movil__contacto a:hover { color: #fff; }

/* ======================= TARJETAS ======================================== */
.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  transition:
    transform var(--t-2) var(--e-suave),
    box-shadow var(--t-2) var(--e-suave),
    border-color var(--t-2) var(--e-suave);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: var(--linea-firme); }
.tarjeta h3, .tarjeta h4 { color: var(--titulo); }
.tarjeta p { font-size: var(--fs-base); line-height: 1.6; }

.tarjeta__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 50px;
  block-size: 50px;
  border-radius: var(--r-sm);
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 22%, transparent);
  transition: background-color var(--t-2) var(--e-suave), color var(--t-2) var(--e-suave);
}
.tarjeta:hover .tarjeta__icono { background: color-mix(in srgb, var(--acento) 17%, transparent); }

/* Numeración editorial */
.numero {
  font-family: var(--f-serif);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* ======================= LISTA DE VIÑETAS CON TILDE ====================== */
.lista-check { display: grid; gap: .85rem; }
.lista-check li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  align-items: start;
  font-size: var(--fs-base);
  line-height: 1.55;
}
.lista-check .ic {
  inline-size: 20px;
  block-size: 20px;
  stroke-width: 2;
  color: var(--acento);
  margin-block-start: 2px;
}

/* ======================= ACORDEÓN ======================================== */
.acordeon { border-block-start: 1px solid var(--linea); }
.acordeon__item { border-block-end: 1px solid var(--linea); }

.acordeon__disparador {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  text-align: start;
  padding: 1.35rem .25rem;
  font-family: var(--f-serif);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--titulo);
  transition: color var(--t-1) var(--e-suave);
}
.acordeon__disparador:hover { color: var(--acento); }

.acordeon__signo {
  position: relative;
  inline-size: 34px;
  block-size: 34px;
  flex: none;
  border: 1px solid var(--linea-firme);
  border-radius: var(--r-full);
  transition: background-color var(--t-2) var(--e-suave), border-color var(--t-2) var(--e-suave), transform var(--t-2) var(--e-suave);
}
.acordeon__signo::before,
.acordeon__signo::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 13px;
  block-size: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t-2) var(--e-suave), opacity var(--t-2) var(--e-suave);
}
.acordeon__signo::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeon__disparador[aria-expanded="true"] .acordeon__signo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.tema-oscuro .acordeon__disparador[aria-expanded="true"] .acordeon__signo { color: var(--azul-950); }
.acordeon__disparador[aria-expanded="true"] .acordeon__signo::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-2) var(--e-suave);
}
.acordeon__panel[data-abierto="true"] { grid-template-rows: 1fr; }
.acordeon__panel > div { overflow: hidden; }
.acordeon__panel p {
  padding: 0 3.5rem 1.5rem .25rem;
  font-size: var(--fs-base);
  line-height: 1.68;
  max-width: 58ch;
}

/* ======================= FORMULARIO ====================================== */
.formulario { display: grid; gap: 1.1rem; }

.campo { display: grid; gap: .45rem; }
.campo--doble { grid-column: span 2; }

.campo label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--titulo);
}
.campo label .req { color: var(--acento); }

.campo input,
.campo select,
.campo textarea {
  inline-size: 100%;
  padding: .85rem 1rem;
  min-block-size: 50px;
  font-size: var(--fs-base);
  color: var(--titulo);
  background: var(--superficie);
  border: 1px solid var(--linea-firme);
  border-radius: var(--r-sm);
  transition: border-color var(--t-1) var(--e-suave), box-shadow var(--t-1) var(--e-suave), background-color var(--t-1);
}
.campo textarea { min-block-size: 118px; resize: vertical; line-height: 1.6; }

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7482' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-inline-end: 2.75rem;
}
[dir="rtl"] .campo select { background-position: left 1rem center; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--tenue); opacity: 1; }

/* El realce de borde y el halo son la señal "este campo está activo", pero no
   sirven como indicador de foco accesible: el halo tiene 14% de opacidad (bajo
   el 3:1 que pide WCAG 2.2 / 1.4.11) y sobre las tarjetas oscuras del formulario
   directamente no se ve. Por eso acá NO se pone `outline: none`: el anillo
   global de :focus-visible sigue dibujándose encima, con el color que
   corresponda a la superficie (ver --foco en base.css). */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--azul-600);
  box-shadow: 0 0 0 3px rgba(20,65,124,.14);
}
.tema-oscuro .campo input,
.tema-oscuro .campo select,
.tema-oscuro .campo textarea {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.tema-oscuro .campo input:focus,
.tema-oscuro .campo select:focus,
.tema-oscuro .campo textarea:focus {
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px rgba(200,169,107,.22);
}

.campo[data-error="true"] input,
.campo[data-error="true"] select,
.campo[data-error="true"] textarea { border-color: #B4472F; }

.campo__error {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #C0563C;
  min-block-size: 0;
  display: none;
}
.tema-oscuro .campo__error { color: #F0A48E; }
.campo[data-error="true"] .campo__error { display: block; }

.campo--consentimiento {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .75rem;
}
.campo--consentimiento input[type="checkbox"] {
  /* 24px es el mínimo de área táctil de WCAG 2.2 (SC 2.5.8) */
  inline-size: 24px;
  block-size: 24px;
  min-block-size: 0;
  margin-block-start: 2px;
  accent-color: var(--azul-700);
  padding: 0;
  flex: none;
}
.tema-oscuro .campo--consentimiento input[type="checkbox"] { accent-color: var(--champagne); }
.campo--consentimiento label { font-weight: 400; font-size: var(--fs-sm); line-height: 1.55; color: var(--texto); }

.formulario__aviso {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--tenue);
}
.formulario__aviso .ic { inline-size: 16px; block-size: 16px; margin-block-start: 2px; }

.formulario__estado {
  display: none;
  gap: .7rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  line-height: 1.55;
  border: 1px solid;
}
.formulario__estado[data-visible="true"] { display: flex; }
.formulario__estado[data-tipo="ok"]    { color: #1F6B45; background: rgba(31,107,69,.07); border-color: rgba(31,107,69,.3); }
.formulario__estado[data-tipo="error"] { color: #A8442C; background: rgba(168,68,44,.07); border-color: rgba(168,68,44,.3); }
.tema-oscuro .formulario__estado[data-tipo="ok"]    { color: #8FE0B4; background: rgba(143,224,180,.1); border-color: rgba(143,224,180,.28); }
.tema-oscuro .formulario__estado[data-tipo="error"] { color: #F5AE99; background: rgba(245,174,153,.1); border-color: rgba(245,174,153,.28); }

/* ======================= PIE ============================================= */
.pie {
  background: var(--azul-950);
  color: #A9BAD1;
  padding-block: clamp(3.5rem, 2.4rem + 4vw, 5.5rem) 0;
  font-size: var(--fs-base);
}
.pie a { transition: color var(--t-1) var(--e-suave); }
.pie a:hover { color: #fff; }

.pie__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  padding-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
@media (max-width: 1000px) { .pie__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .pie__grid { grid-template-columns: 1fr; gap: 2.25rem; } }

.pie__marca { display: grid; gap: 1.1rem; align-content: start; max-width: 24rem; }
.pie__marca img { block-size: 58px; inline-size: auto; }
.pie__lema {
  font-family: var(--f-serif);
  font-size: var(--fs-lg);
  color: #fff;
  line-height: 1.4;
}
.pie__lema span { color: var(--champagne); }

.pie h3 {
  font-family: var(--f-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-block-end: 1.1rem;
}
.pie__lista { display: grid; gap: .25rem; }
/* El padding vertical eleva el área táctil por encima de 24px sin cambiar
   el ritmo visual: se compensa reduciendo el gap de la grilla. */
.pie__lista a {
  display: inline-flex;
  align-items: start;
  gap: .55rem;
  line-height: 1.5;
  padding-block: .3rem;
}
.pie__lista .ic { inline-size: 17px; block-size: 17px; color: var(--champagne); margin-block-start: 3px; flex: none; }

.pie__legal {
  border-block-start: 1px solid rgba(255,255,255,.11);
  padding-block: 1.75rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: var(--fs-sm);
  color: #7D91AC;
}
.pie__legal nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie__legal nav a { display: inline-block; padding-block: .3rem; }

.pie__descargo {
  border-block-start: 1px solid rgba(255,255,255,.07);
  padding-block: 1.5rem 2.25rem;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: #6E82A0;
  max-width: 78ch;
}

/* ======================= FLOTANTES / BARRA MÓVIL ========================= */
.flotantes {
  position: fixed;
  inset-block-end: clamp(1.25rem, 3vw, 2rem);
  inset-inline-end: clamp(1.25rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  gap: .7rem;
  justify-items: end;
}

.wa-flotante {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 58px;
  block-size: 58px;
  border-radius: var(--r-full);
  background: #1DA851;
  color: #fff;
  box-shadow: 0 8px 26px rgba(29,168,81,.4);
  transition: transform var(--t-2) var(--e-suave), box-shadow var(--t-2) var(--e-suave);
}
.wa-flotante .ic { inline-size: 29px; block-size: 29px; }
.wa-flotante:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(29,168,81,.5); }

/* Pulso muy leve, una sola onda */
.wa-flotante::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #1DA851;
  animation: pulso-wa 3.2s var(--e-suave) infinite;
}
@keyframes pulso-wa {
  0%       { transform: scale(1);    opacity: .55; }
  70%,100% { transform: scale(1.55); opacity: 0; }
}

.subir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.92);
  color: var(--azul-700);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-2), visibility var(--t-2), transform var(--t-2) var(--e-suave), background-color var(--t-1);
}
.subir[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
.subir:hover { background: #fff; color: var(--azul-600); }
.subir .ic { inline-size: 20px; block-size: 20px; transform: rotate(-90deg); }

/* Barra fija inferior en móvil */
.barra-movil {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 95;
  display: none;
  gap: .6rem;
  padding: .6rem var(--pad-x) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(251,250,246,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--linea);
  transform: translateY(105%);
  transition: transform var(--t-2) var(--e-suave);
}
.barra-movil[data-visible="true"] { transform: none; }
.barra-movil .btn { flex: 1; min-block-size: 50px; padding-inline: .9rem; font-size: var(--fs-sm); }
.barra-movil .btn--whatsapp { flex: 0 0 54px; padding: 0; }

@media (max-width: 760px) {
  .barra-movil { display: flex; }
  .flotantes { inset-block-end: calc(74px + env(safe-area-inset-bottom)); }
  .wa-flotante { display: none; }          /* ya está en la barra inferior */
  body { padding-block-end: 0; }
}

/* ======================= MARCADORES DE PLACEHOLDER ====================== */
/* Sello discreto sobre las imágenes provisionales. Se quita borrando
   la clase "es-placeholder" del contenedor de la imagen. */
.es-placeholder { position: relative; }
.es-placeholder::after {
  content: attr(data-placeholder);
  position: absolute;
  inset-block-end: .55rem;
  inset-inline-start: .55rem;
  z-index: 3;
  padding: .28rem .5rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.82);
  background: rgba(6,23,41,.6);
  border-radius: var(--r-xs);
  pointer-events: none;
  backdrop-filter: blur(3px);
}
@media (max-width: 560px) { .es-placeholder::after { display: none; } }