/* ==========================================================================
   Fomal Haut — estilos del sitio.

   Estilo propio, distinto de los demás sitios de la cuenta: «crema clínica» (referencia: el
   estilo de August Health en styles.refero.design). Lienzo crema en lugar del blanco frío de
   lo médico, menú flotante en píldora, tarjetas blancas con sombra cálida, tarjetas teñidas
   con los colores de la marca, fotos de portada en círculo y botones en píldora.
   Identidad de la carpeta del cliente (Fomal-Haut---Branding.png):
     Strippy   → títulos · Manrope → todo lo demás
     #4e0040   morado: títulos, texto fuerte, botón principal (texto blanco, 13:1) y pie
     #00e1af / #00bb89 aqua y verde · #fb6c00 naranja: tarjetas teñidas y círculos decorativos
     #f8f3eb   crema: el lienzo
   La base de abajo es la estructura común; la capa «crema clínica» va al final.
   ========================================================================== */

@font-face {
  font-family: "Strippy";
  src: url("/recursos/fuentes/strippy-regular.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/recursos/fuentes/manrope-variable.woff") format("woff");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --morado: #4e0040;
  --morado-hondo: #3a0030;
  --naranja: #fb6c00;
  --naranja-claro: #ff8a2e;
  --aqua: #00e1af;
  --verde: #00bb89;
  --aqua-claro: #c8faf0;
  --papel: #ffffff;
  --niebla: #f5f5f8;
  --texto: #5c5f68;
  --texto-suave: #6f737b;
  --linea: #dcdde3;
  --linea-fuerte: #8b8e99;

  --f-titulo: "Strippy", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-texto: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r: 12px;
  --r-chico: 6px;
  --ancho: 1200px;
  --margen: 24px;
  --seccion: clamp(56px, 8vw, 96px);
  --cabecera: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 16px); scroll-padding-bottom: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; color: var(--morado); }
ul { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
a, button, summary, label, select, input { touch-action: manipulation; }

:focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; border-radius: 4px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--morado); color: #fff; padding: 10px 16px; border-radius: var(--r);
  font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }

.icono { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.envoltura { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }

/* --------------------------------------------------------------- tipografía */

.titular {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--morado);
  text-wrap: balance;
}
.titular--display { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--morado);
}
.etiqueta::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--aqua); }

.entrada { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--texto); max-width: 56ch; margin: 20px 0 0; }

.cabeza { max-width: 780px; margin-bottom: 40px; }
.cabeza .entrada { margin-top: 16px; }

/* ------------------------------------------------------------------ botones */

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.acciones--centro { justify-content: center; margin-top: 40px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--r);
  font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.boton .icono { width: 18px; height: 18px; transition: transform .18s ease; }
.boton--principal { background: var(--naranja); color: var(--morado); }
.boton--secundario { background: var(--papel); color: var(--morado); border-color: var(--morado); }
.boton--fantasma { color: var(--morado); padding-inline: 6px; }
.boton--fantasma .icono:first-child { color: var(--verde); width: 22px; height: 22px; }
.boton[aria-busy="true"] { opacity: .75; cursor: progress; }

.enlace-accion {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; min-height: 44px;
  font-size: 15px; font-weight: 700; color: var(--morado); text-decoration: none;
}
.enlace-accion .icono { width: 18px; height: 18px; color: var(--naranja); transition: transform .18s ease; }

/* ----------------------------------------------------------- barra superior */

.barra-sup { background: var(--morado); color: #fff; font-size: 13px; font-weight: 500; }
.barra-sup__dentro { display: flex; justify-content: flex-end; gap: 28px; min-height: 40px; align-items: stretch; }
.barra-sup a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; text-decoration: none; color: #fff; }
.barra-sup .icono { color: var(--aqua); width: 15px; height: 15px; }
.barra-sup :focus-visible { outline-color: var(--aqua); }

/* ------------------------------------------------------------------ cabecera */

.cabecera {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__dentro { display: flex; align-items: center; gap: 24px; min-height: var(--cabecera); }
.cabecera__logo { flex-shrink: 0; margin-right: auto; }
.cabecera__logo img { height: 40px; width: auto; }

.menu { display: flex; align-items: center; gap: 20px; }
.menu__lista { display: flex; list-style: none; gap: 2px; }
.menu__lista a {
  display: block; padding: 8px 12px; border-radius: var(--r);
  font-size: 15px; font-weight: 600; color: var(--morado); text-decoration: none;
  transition: background-color .18s ease;
}
.menu__lista a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--morado); border-radius: var(--r) var(--r) 0 0; }
.menu__cta { min-height: 44px; padding: 10px 20px; }

.cabecera__menu {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: var(--r);
  background: var(--papel); color: var(--morado); cursor: pointer;
}
.cabecera__menu .icono { width: 22px; height: 22px; }
.cabecera__menu .icono--cerrar { display: none; }
.cabecera__menu[aria-expanded="true"] .icono--abrir { display: none; }
.cabecera__menu[aria-expanded="true"] .icono--cerrar { display: block; }

@media (max-width: 1080px) {
  .js .cabecera__menu { display: inline-flex; }
  .menu { flex-wrap: wrap; }
  .js .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 12px var(--margen) 24px;
    background: var(--papel); border-bottom: 1px solid var(--linea);
    max-height: calc(100vh - var(--cabecera)); max-height: calc(100dvh - var(--cabecera)); overflow-y: auto; overscroll-behavior: contain;
  }
  .js .menu[data-abierto] { display: flex; }
  .js .menu__lista { flex-direction: column; }
  .js .menu__lista a { font-size: 18px; padding: 14px 12px; border-bottom: 1px solid var(--linea); border-radius: 0; }
  .js .menu__lista a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--morado); background: var(--aqua-claro); }
  .js .menu__cta { width: 100%; }
}

/* ----------------------------------------------------------------- secciones */

.seccion { padding-block: var(--seccion); }
.seccion--aqua { background: var(--aqua-claro); }
.seccion--borde { border-top: 1px solid var(--linea); }
.seccion--sin-arriba { padding-top: 0; }

.heroe { padding-block: clamp(40px, 7vw, 88px) var(--seccion); }
.heroe__rejilla { display: grid; gap: 56px; align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.heroe--solo .heroe__rejilla { grid-template-columns: minmax(0, 860px); }
.heroe--solo { padding-bottom: clamp(40px, 6vw, 72px); }
.heroe__texto .titular { margin: 0; }
.heroe__texto .etiqueta + .titular { margin-top: 0; }

/* Las curvas de la lámina «Comunicación» de la guía de marca: aqua abajo a la izquierda,
   verde arriba a la derecha, asomando detrás de la foto. */
.foto-marca { position: relative; isolation: isolate; padding: 18px; }
.foto-marca::before, .foto-marca::after { content: ""; position: absolute; z-index: -1; aspect-ratio: 1; }
.foto-marca::before { left: 0; bottom: 0; width: 42%; background: var(--aqua); border-radius: 0 100% 0 var(--r); }
.foto-marca::after { right: 0; top: 0; width: 26%; background: var(--verde); border-radius: var(--r) 0 0 100%; }
.foto-marca img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.seccion--aqua .foto-marca::before { background: var(--morado); }

.dividida { display: grid; gap: 48px 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.dividida .titular { margin: 0; }

.declaracion { display: grid; gap: 24px 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.declaracion p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--morado); margin: 0; font-weight: 500; }

/* ------------------------------------------------------------------ rejillas */

.rejilla { display: grid; gap: 24px; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rasgo {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 28px;
}
.seccion--aqua .rasgo { border-color: transparent; }
.rasgo__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--r);
  background: var(--morado); color: var(--aqua);
}
.rasgo__icono .icono { width: 24px; height: 24px; }
.rasgo__titulo { margin: 20px 0 8px; font-family: var(--f-texto); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.rasgo__texto { margin: 0; font-size: 15px; line-height: 1.6; }
.credenciales .rasgo { padding: 24px; }
.credenciales .rasgo__titulo { margin-bottom: 0; font-size: 17px; }

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  overflow: hidden;
}
.seccion--aqua .tarjeta { border-color: transparent; }
.tarjeta__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.tarjeta__foto { overflow: hidden; }
.tarjeta__cuerpo { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px 22px 14px; }
.tarjeta__titulo { font-family: var(--f-texto); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.tarjeta__texto { font-size: 15px; margin: 0 0 8px; }

.plan { padding: 32px; gap: 16px; }
.plan__nombre { font-family: var(--f-titulo); font-weight: 400; font-size: 32px; line-height: 1.05; }
.plan .tarjeta__texto { flex: 1; margin: 0; }
.plan .boton { align-self: flex-start; margin-top: 8px; }
.plan--destacado { background: var(--morado); color: #f1e6ef; }
.plan--destacado .plan__nombre { color: #fff; }
.plan--destacado .rasgo__icono { background: var(--aqua); color: var(--morado); }
.plan--destacado :focus-visible { outline-color: var(--aqua); }

.lista-check { list-style: none; border-top: 1px solid var(--linea); }
.lista-check li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
  font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--morado);
}
.lista-check .icono {
  width: 28px; height: 28px; padding: 5px; border-radius: 50%;
  background: var(--aqua); color: var(--morado); stroke-width: 2.5;
}

.galeria { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galeria__foto { margin: 0; border-radius: var(--r); overflow: hidden; }
.galeria__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }

/* ----------------------------------------------------------- preguntas */

.preguntas { max-width: 860px; border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta__titulo { font-family: var(--f-texto); font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; }
.pregunta summary .icono { width: 24px; height: 24px; color: var(--morado); transition: transform .2s ease; }
.pregunta[open] summary .icono { transform: rotate(180deg); }
.pregunta p { margin: -8px 0 24px; max-width: 64ch; font-size: 17px; }

/* ------------------------------------------------------------ contacto */

.contacto { display: grid; gap: 48px 64px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.contacto__texto .titular { margin: 0; }
.datos { list-style: none; display: grid; gap: 20px; margin-top: 32px; }
.datos li { display: flex; gap: 16px; align-items: flex-start; }
.datos__icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r); flex-shrink: 0;
  background: var(--morado); color: var(--aqua);
}
.datos__icono .icono { width: 20px; height: 20px; }
.datos strong { display: block; font-size: 13px; font-weight: 600; color: var(--texto); letter-spacing: 0; }
.datos li > span:last-child { font-size: 17px; font-weight: 600; color: var(--morado); line-height: 1.45; }
.datos a { display: inline-block; padding-block: 10px; margin-block: -10px; text-decoration: none; }

/* ----------------------------------------------------------- formulario */

.formulario {
  position: relative;
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: clamp(24px, 3vw, 36px);
}
.seccion--aqua .formulario { border-color: transparent; }
.formulario__titulo { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.1; }
.formulario__nota { margin: 8px 0 24px; font-size: 14px; color: var(--texto-suave); }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.campo-fila { display: grid; gap: 0 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo label { font-size: 14px; font-weight: 600; color: var(--morado); }
.pista { font-weight: 500; color: var(--texto-suave); }
.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r);
  background: var(--papel); color: var(--morado); font-size: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e0040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 1px var(--morado), 0 0 0 5px rgba(0, 225, 175, .55); }
.campo [aria-invalid="true"] { border-color: var(--naranja); box-shadow: 0 0 0 1px var(--naranja); }
.campo__error {
  display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0;
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--morado);
}
.campo__error::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d45500' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}
.campo__error[hidden] { display: none; }
.casilla-caja { margin-bottom: 24px; }
.casilla-caja .casilla { margin-bottom: 0; }
.casilla-caja .campo__error { margin-top: 8px; }
.campo__nota { margin: 2px 0 0; font-size: 13px; color: var(--morado); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulario__aviso {
  margin: 6px 0 16px; padding: 14px 16px;
  background: var(--niebla); border-radius: var(--r);
  font-size: 14px; line-height: 1.55; color: var(--texto);
}
.formulario__aviso a, .casilla a { color: var(--morado); font-weight: 600; }
.casilla { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; font-size: 15px; color: var(--morado); cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--morado); flex-shrink: 0; }
.formulario__enviar { width: 100%; }
.aviso-form {
  margin: 0 0 20px; padding: 12px 16px;
  border: 1px solid var(--naranja); border-radius: var(--r);
  background: #fff3ea; color: var(--morado); font-size: 15px; font-weight: 500;
}

/* ------------------------------------------------------- mapa de la oficina */

.oficina { display: grid; gap: 40px 64px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.oficina__texto .titular { margin: 0; }
.oficina__texto .entrada { color: var(--morado); font-weight: 600; }
.mapa {
  position: relative; aspect-ratio: 16 / 10; max-width: 100%;
  border-radius: var(--r); overflow: hidden;
  background: var(--papel); border: 1px solid var(--linea);
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------- texto legal */

.prosa { max-width: 600px; }
.prosa h2 { margin: 48px 0 12px; font-family: var(--f-texto); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.prosa h2:first-child { margin-top: 0; }
.prosa p, .prosa li { font-size: 17px; }
.prosa ul { padding-left: 22px; margin: 0 0 1em; }
.prosa li { margin-bottom: 6px; }
.prosa li::marker { color: var(--verde); }
.prosa a { color: var(--morado); font-weight: 600; }
.prosa strong { color: var(--morado); }
.prosa__fecha { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--texto-suave); }

/* ----------------------------------------------------------------------- pie */

.pie { background: var(--morado); color: #e9dde6; padding: 72px 0 32px; font-size: 15px; }
.pie__rejilla { display: grid; gap: 40px; grid-template-columns: 1.3fr 1fr 1.3fr .8fr; }
.pie__marca img { width: 150px; height: auto; }
.pie__marca p { margin: 20px 0 0; max-width: 28ch; color: #e9dde6; }
.pie__titulo { margin-bottom: 16px; font-family: var(--f-texto); font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0; }
.pie ul { list-style: none; display: grid; gap: 10px; }
.pie a { color: #e9dde6; text-decoration: none; }
.pie__datos li { display: flex; gap: 10px; align-items: flex-start; }
.pie__datos .icono { color: var(--aqua); margin-top: 3px; width: 17px; height: 17px; }
.pie__final { margin: 56px 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; color: #d9c8d5; }
.pie :focus-visible { outline-color: var(--aqua); }

/* --------------------------------------------------------- WhatsApp flotante */

.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; min-width: 56px; padding: 0 16px; justify-content: center;
  border-radius: 999px; background: var(--morado); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  /* El aro blanco lo separa del pie, que también es morado. */
  box-shadow: 0 0 0 2px #fff, 0 8px 24px rgba(78, 0, 64, .28);
  transition: box-shadow .18s ease, transform .25s ease, opacity .25s ease;
}
.wa-flotante .icono { width: 26px; height: 26px; }
.wa-flotante:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
.wa-flotante__texto { display: none; }
.wa-flotante--fuera { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 900px) { .wa-flotante { padding: 0 20px 0 16px; } .wa-flotante__texto { display: inline; } }

/* ------------------------------------------------------------------- estados
   El hover solo aplica donde hay ratón: en el celular se quedaba «pegado» después del
   toque (por ejemplo, el botón secundario seguía morado al volver de WhatsApp). */

@media (hover: hover) {
  .boton:hover .icono:last-child { transform: translateX(3px); }
  .boton--principal:hover { background: var(--naranja-claro); }
  .boton--secundario:hover { background: var(--morado); color: #fff; }
  .boton--fantasma:hover { text-decoration: underline; text-underline-offset: 4px; }
  .enlace-accion:hover { text-decoration: underline; text-underline-offset: 4px; }
  .enlace-accion:hover .icono { transform: translateX(3px); }
  .barra-sup a:hover { color: var(--aqua); }
  .menu__lista a:hover { background: var(--aqua-claro); }
  .tarjeta--producto:hover .tarjeta__foto img { transform: scale(1.03); }
  .galeria__foto:hover img { transform: scale(1.03); }
  .datos a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .campo input:hover, .campo select:hover { border-color: var(--morado); }
  .pie a:hover { color: var(--aqua); text-decoration: underline; text-underline-offset: 3px; }
  .wa-flotante:hover { box-shadow: 0 0 0 3px var(--aqua), 0 8px 24px rgba(78, 0, 64, .28); }
}
.boton:active { transform: scale(.98); }
.boton--principal:active { background: var(--naranja-claro); }
.boton--secundario:active { background: var(--aqua-claro); }
.wa-flotante:active { transform: scale(.95); }
.menu__lista a:active { background: var(--aqua-claro); }
.enlace-accion:active, .boton--fantasma:active { text-decoration: underline; text-underline-offset: 4px; }
.pregunta summary:active .pregunta__titulo { color: var(--morado-hondo); }

/* En pantallas táctiles (y en cualquier pantalla angosta) los enlaces del pie y de la barra
   superior crecen a 44 px de alto. */
@media (pointer: coarse), (max-width: 640px) {
  .pie ul { gap: 0; }
  .pie ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .pie__datos li { align-items: center; }
  .pie__datos .icono { margin-top: 0; }
  .pie__datos li:first-child { padding-block: 10px; align-items: flex-start; }
  .pie__datos li:first-child .icono { margin-top: 3px; }
  .barra-sup__dentro, .barra-sup a { min-height: 44px; }
}

/* ---------------------------------------------------------------- adaptable */

@media (max-width: 1100px) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .heroe__rejilla, .dividida, .declaracion, .contacto, .oficina { grid-template-columns: minmax(0, 1fr); }
  .mapa { aspect-ratio: 4 / 3; }
  .heroe__rejilla { gap: 40px; }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --margen: 16px; --cabecera: 64px; }
  .barra-sup__dentro { justify-content: center; gap: 16px; }
  .barra-sup a:last-child { display: none; }
  .cabecera__logo img { height: 34px; }
  .rejilla--2, .rejilla--3, .rejilla--4, .galeria, .campo-fila, .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
  .foto-marca { padding: 12px; }
  .acciones .boton { flex: 1 1 100%; }
  .acciones .boton--fantasma { justify-content: flex-start; }
  .rasgo, .plan { padding: 24px; }
  .wa-flotante { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Fomal Haut: capa «crema clínica». Va al final para ganarle a la base.
   ========================================================================== */

:root {
  --crema: #f8f3eb; --crema-hondo: #efe6d8;
  --sombra: 0 12px 24px rgba(75, 68, 57, .08), 0 48px 48px -24px rgba(75, 68, 57, .10);
  --r: 16px; --r-grande: 32px; --pildora: 999px; --cabecera: 88px;
}
body { background: var(--crema); }
.titular { color: var(--morado); }
.titular--display { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; }
.etiqueta { display: inline-flex; padding: 8px 16px; border-radius: var(--pildora); background: #fff; box-shadow: var(--sombra); font-size: 12px; letter-spacing: .1em; }
.etiqueta::before { background: var(--aqua); }

/* Botones en píldora: el principal morado con texto blanco. */
.boton { border-radius: var(--pildora); padding-inline: 26px; }
.boton--principal { background: var(--morado); color: #fff; box-shadow: var(--sombra); }
.boton--secundario { background: #fff; color: var(--morado); border-color: transparent; box-shadow: var(--sombra); }
.boton--aqua { background: var(--aqua); color: var(--morado); }
.enlace-accion .icono { color: var(--verde); }

/* Menú flotante: una píldora blanca sobre el lienzo crema. */
.cabecera { background: transparent; backdrop-filter: none; border: 0; padding-top: 12px; }
.cabecera__dentro { background: #fff; border-radius: var(--pildora); box-shadow: var(--sombra); min-height: 64px; padding-inline: 12px 10px; max-width: calc(var(--ancho) + 24px); width: calc(100% - 2 * var(--margen)); }
.cabecera__logo { padding-left: 12px; }
.cabecera__logo img { height: 36px; }
.menu__lista a { border-radius: var(--pildora); font-size: 14px; padding: 8px 14px; }
.menu__lista a[aria-current="page"] { box-shadow: none; border-radius: var(--pildora); background: var(--aqua-claro); }
.cabecera__menu { border-radius: var(--pildora); border-color: var(--linea); }
@media (max-width: 1080px) {
  .js .menu { top: calc(100% + 8px); left: var(--margen); right: var(--margen); border-radius: 24px; border: 0; box-shadow: var(--sombra); background: #fff; }
  .js .menu__lista a { border-radius: 12px; border-bottom: 0; }
  .js .menu__lista a[aria-current="page"] { box-shadow: none; background: var(--aqua-claro); }
}

/* Portada: texto a la izquierda; la foto en un círculo, sobre círculos de colores de la marca. */
.heroe { padding-top: clamp(40px, 6vw, 72px); }
.heroe__foto.foto-marca { padding: 0; isolation: isolate; width: min(100%, 520px); justify-self: center; }
.heroe__foto.foto-marca img { aspect-ratio: 1; border-radius: 50%; border: 10px solid #fff; box-shadow: var(--sombra); }
.heroe__foto.foto-marca::before { left: -6%; bottom: -4%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--aqua); }
.heroe__foto.foto-marca::after { right: -2%; top: -3%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--naranja); }
.foto-marca:not(.heroe__foto) { padding: 0; }
.foto-marca:not(.heroe__foto)::before, .foto-marca:not(.heroe__foto)::after { display: none; }
.foto-marca:not(.heroe__foto) img { border-radius: var(--r-grande); box-shadow: var(--sombra); }

/* Encabezados de sección centrados, con la etiqueta en píldora arriba. */
.cabeza { margin-inline: auto; text-align: center; }
.cabeza .entrada { margin-inline: auto; }

/* Bandas aqua: ya no van de orilla a orilla; son paneles redondeados sobre el crema. */
.seccion--aqua { background: transparent; }
.seccion--aqua > .envoltura { background: var(--aqua-claro); border-radius: var(--r-grande); padding: clamp(32px, 5vw, 64px); width: calc(100% - 2 * var(--margen)); max-width: var(--ancho); }
.seccion--borde { border-top: 0; }

/* Tarjetas blancas con sombra cálida; los rasgos, teñidos con los colores de la marca. */
.tarjeta, .rasgo { border: 0; border-radius: var(--r); box-shadow: var(--sombra); }
.tarjeta { background: #fff; padding: 10px; }
.tarjeta__foto { border-radius: 10px; }
.tarjeta__foto img { border-radius: 10px; }
.rasgo { position: relative; padding: 32px; }
.rejilla > .rasgo:nth-child(4n+1) { background: var(--aqua); }
.rejilla > .rasgo:nth-child(4n+2) { background: var(--naranja); }
.rejilla > .rasgo:nth-child(4n+3) { background: var(--verde); }
.rejilla > .rasgo:nth-child(4n+4) { background: var(--morado); }
.rejilla > .rasgo .rasgo__titulo, .rejilla > .rasgo .rasgo__texto { color: var(--morado); }
.rejilla > .rasgo:nth-child(4n+4) .rasgo__titulo, .rejilla > .rasgo:nth-child(4n+4) .rasgo__texto { color: #fff; }
.rasgo__icono { border-radius: 50%; background: #fff; color: var(--morado); }
.rasgo::after {
  content: ""; position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .9)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e0040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M7 7h10v10'/%3E%3C/svg%3E") no-repeat center / 18px;
}
.seccion--aqua .rasgo, .seccion--aqua .tarjeta { box-shadow: none; }
.plan { background: #fff; padding: 36px; }
.plan--destacado { background: var(--morado); }
.lista-check { border-top: 0; display: grid; gap: 10px; }
.lista-check li { border: 0; background: #fff; border-radius: var(--pildora); padding: 12px 20px 12px 12px; box-shadow: var(--sombra); font-size: 16px; align-items: center; }
.lista-check .icono { background: var(--aqua); }
.galeria__foto { border-radius: var(--r); box-shadow: var(--sombra); }
.declaracion p { font-weight: 600; }

/* Preguntas: cada una, una tarjeta blanca. */
.preguntas { border-top: 0; display: grid; gap: 12px; margin-inline: auto; }
.pregunta { border: 0; background: #fff; border-radius: var(--r); box-shadow: var(--sombra); padding-inline: 24px; }
.pregunta summary .icono { color: var(--verde); }

/* Contacto y formulario. */
.datos__icono { border-radius: 50%; background: var(--morado); color: var(--aqua); }
.formulario { border: 0; border-radius: 24px; background: #fff; box-shadow: var(--sombra); }
.campo input, .campo select { border-radius: 12px; background: var(--crema); border-color: #d9cfbf; }
.formulario__aviso { border-radius: 12px; background: var(--crema); }
.mapa { border: 0; border-radius: var(--r-grande); box-shadow: var(--sombra); }

/* Pie: morado, con esquinas superiores redondas y una llamada a la acción arriba. */
.pie { border-radius: 40px 40px 0 0; margin-top: clamp(48px, 7vw, 96px); padding-top: 56px; }
.pie__llamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 32px; margin-bottom: 56px; border-radius: var(--r-grande); background: rgba(255, 255, 255, .08); }
.pie__frase { margin: 0; font-family: var(--f-titulo); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; color: #fff; }

.wa-flotante { box-shadow: var(--sombra), 0 0 0 2px #fff; }

@media (hover: hover) {
  .boton--principal:hover { background: var(--morado-hondo); }
  .boton--secundario:hover { background: var(--morado); color: #fff; }
  .boton--aqua:hover { background: #fff; }
  .menu__lista a:hover { background: var(--crema); }
}
.boton--principal:active { background: var(--morado-hondo); }

@media (max-width: 960px) {
  .heroe__foto.foto-marca { width: min(86%, 420px); margin-top: 16px; }
}
@media (max-width: 640px) {
  :root { --cabecera: 80px; }
  .cabecera__logo img { height: 32px; }
  .rasgo { padding: 28px 24px; }
  .pie { border-radius: 28px 28px 0 0; }
  .pie__llamada { padding: 24px; }
  .pie__llamada .boton { width: 100%; }
  .seccion--aqua > .envoltura { width: calc(100% - 24px); padding: 32px 18px; border-radius: 24px; }
}

/* Correos largos: que se partan antes de salirse en 320 px. */
.datos li > span:last-child, .pie__datos li > span, .pie__datos li > a { min-width: 0; }
.datos a, .pie__datos a, .pie__datos span, .formulario__aviso a, .prosa a { overflow-wrap: anywhere; }


/* ==========================================================================
   Revisión de accesibilidad (8 nov 2026, ui-ux-pro-max).
   - Enlaces del pie de al menos 24 px de alto (WCAG 2.2, tamaño mínimo de objetivo).
   - En celular, el texto de tarjetas y rasgos sube a 16 px.
   ========================================================================== */
.pie__col li a, .pie__datos a { display: inline-block; min-height: 24px; padding-block: 2px; }
@media (max-width: 600px) { .tarjeta__texto, .rasgo__texto { font-size: 16px; } }
:root { --texto-suave: #5a5e66; } /* el gris de notas y fechas no alcanzaba 4.5:1 sobre el fondo de color */
/* El botón aqua del pie heredaba el color claro de los enlaces del pie (1.3:1). */
.pie .boton--aqua, .pie .boton--aqua:hover { color: var(--morado); text-decoration: none; }