/* ═══ 40-especialidad.css ═══ */
/* ============================================================================
   40 · PÁGINA DE ESPECIALIDAD — /especialidades/<id>/
   -------------------------------------------------------------------------
   Este archivo lleva además el «chrome» de las páginas de especialidad (aire
   bajo la barra fija y migas de pan), porque el paquete `especialidad` no
   carga 43-ficha.css. Todo va SCOPADO a `.esp-pagina`, así que en las páginas
   que sí cargan los dos archivos (fichas, laboratorio) nada se pisa.

   El bloque «Qué se atiende aquí» imita la lámina oficial del cliente: icono
   circular de línea fina, nombre del servicio y una línea de puntos que se
   aleja hacia la derecha. Es el corazón de la página y manda en el ritmo.

   Sólo se animan transform y opacity. El CSS pinta todo visible: ningún
   estado oculto vive aquí.
   ========================================================================== */

/* ── Chrome de la página ──────────────────────────────────────────────────── */
.esp-pagina {
  display: block;
  padding-top: calc(var(--alto-nav) + clamp(.75rem, 3vw, 1.5rem));
  padding-bottom: var(--s-seccion);
}

.esp-pagina .migas { margin-bottom: clamp(1rem, 3vw, 1.75rem); }
.esp-pagina .migas-lista {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .1rem;
  font-size: var(--t-peq); line-height: 1.4; color: var(--mudo);
}
.esp-pagina .migas-lista li { display: inline-flex; align-items: center; }
.esp-pagina .migas-lista li + li::before {
  content: '›'; margin-inline: .45em; color: var(--turquesa-600); font-weight: 600;
}
.esp-pagina .migas-lista a { color: var(--tinta-2); font-weight: 500; border-radius: 4px; }
.esp-pagina .migas-lista a:hover { color: var(--turquesa-900); text-decoration: underline; text-underline-offset: 3px; }
.esp-pagina .migas-lista [aria-current='page'] { color: var(--mudo); font-weight: 600; }

/* ── Portada del área ─────────────────────────────────────────────────────── */
.esp-portada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
/* El resplandor NO se sale por la derecha (right: 0, nada de valores
   negativos): en un iPhone eso son 15 px de desplazamiento horizontal. */
.esp-portada__resplandor {
  position: absolute; z-index: -1; inset: -16% 0 auto auto;
  width: min(58vw, 500px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(86, 184, 171, .22), transparent 68%);
  pointer-events: none;
}
.esp-titulo { margin-top: .1rem; font-size: clamp(2.1rem, 1.2rem + 3.8vw, 3.6rem); }
.esp-entradilla {
  margin-top: 1.1rem; max-width: 38ch;
  font-size: var(--t-grande); line-height: 1.55; color: var(--tinta-2);
}
.esp-portada__etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.esp-portada__figura { position: relative; }
.esp-portada__mancha {
  position: absolute; inset: 8% -4% -6% 6%; z-index: 0;
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
  background: linear-gradient(150deg, var(--turquesa-100), var(--turquesa-50) 70%, transparent);
}
.esp-portada__forma {
  position: relative; z-index: 1; overflow: hidden; isolation: isolate;
  aspect-ratio: 1; background: var(--turquesa-50);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  transform: translateZ(0);
  box-shadow: var(--sombra-1);
}
.esp-portada__forma > * { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* ── Bloques ──────────────────────────────────────────────────────────────── */
.esp-bloque { margin-top: clamp(2.75rem, 7vw, 5rem); }
.esp-bloque__titulo {
  display: flex; align-items: center; gap: .85rem;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.15;
  margin-bottom: clamp(1.1rem, 3vw, 1.75rem);
}
.esp-bloque__titulo--peq { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
.esp-bloque__icono {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--turquesa-800); background: var(--turquesa-50);
  box-shadow: inset 0 0 0 1.5px var(--turquesa-200);
}
.esp-bloque__icono svg { width: 24px; height: 24px; }
.esp-bloque__titulo--peq .esp-bloque__icono { width: 38px; height: 38px; }
.esp-bloque__titulo--peq .esp-bloque__icono svg { width: 20px; height: 20px; }
.esp-bloque__bajada {
  max-width: var(--ancho-texto); margin: -.6rem 0 1.5rem;
  font-size: var(--t-cuerpo); line-height: 1.6; color: var(--tinta-2);
}

/* ── Qué se atiende aquí ──────────────────────────────────────────────────── */
.esp-servicios {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.5rem;
}
.esp-servicio {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .85rem 1.1rem .85rem .85rem;
  border-radius: var(--r-m);
  background: #fff; border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  transition: transform var(--d-rapido) var(--e-salida), box-shadow var(--d-rapido) var(--e-salida);
}
.esp-servicio:hover { transform: translateX(3px); box-shadow: var(--sombra-2); }
.esp-servicio__icono {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  color: var(--turquesa-800); background: var(--turquesa-50);
  box-shadow: inset 0 0 0 1.5px var(--turquesa-200);
}
.esp-servicio__icono svg { width: 27px; height: 27px; }
.esp-servicio__cuerpo { display: grid; gap: .2rem; min-width: 0; }
.esp-servicio__nombre { font-weight: 600; font-size: .98rem; line-height: 1.35; color: var(--tinta); }
.esp-servicio__nota { font-size: var(--t-peq); line-height: 1.45; color: var(--mudo); }
/* La línea que se aleja, como en la lámina */
.esp-servicio__linea {
  width: 34px; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--turquesa-300), var(--turquesa));
  position: relative;
}
.esp-servicio__linea::after {
  content: ''; position: absolute; right: -3px; top: -2.5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--turquesa);
}

/* ── Quién te atiende ─────────────────────────────────────────────────────── */
/* auto-fill (y no auto-fit): con un solo profesional la tarjeta NO se estira a
   todo el ancho — se queda en su columna y la fila respira. */
.esp-pros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.esp-pro { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem; height: 100%; }
.esp-pro__figura {
  display: block; width: 92px; flex: none;
  border-radius: var(--r-m); overflow: hidden;
  background: linear-gradient(160deg, var(--turquesa-100), var(--turquesa-50));
}
.esp-pro__img { width: 100%; height: 100%; object-fit: cover; }
.esp-pro__mono { font-size: 1.6rem; border-radius: var(--r-m); }
.esp-pro__cuerpo { min-width: 0; }
.esp-pro__nombre { font-size: 1.08rem; font-weight: 500; line-height: 1.2; }
.esp-pro__area { margin-top: .3rem; font-size: var(--t-peq); line-height: 1.45; color: var(--tinta-2); }
.esp-pro__enlaces { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .6rem; }
.esp-pro__enlace { font-size: var(--t-peq); }
.esp-pro__enlace svg { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }

.esp-nota {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-top: 1rem; padding: .9rem 1rem;
  border-radius: var(--r-m);
  background: var(--turquesa-50); border: 1px solid var(--turquesa-200);
  font-size: var(--t-peq); line-height: 1.5; color: var(--turquesa-900);
}
.esp-nota svg { width: 22px; height: 22px; flex: none; color: var(--turquesa-800); }

/* Huecos de la sesión de fotos dentro de la página. Con el ancho contenido:
   un hueco a toda página pesa más que la foto que va a ocupar su sitio. */
.esp-hueco { margin-top: 1.25rem; max-width: 620px; }
.esp-hueco--vertical { max-width: 340px; }

/* ── Cómo se atiende ──────────────────────────────────────────────────────── */
.esp-como {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start;
}
.esp-como__parrafo { max-width: 52ch; font-size: var(--t-cuerpo); line-height: 1.65; color: var(--tinta-2); }
.esp-como__parrafo + .esp-como__parrafo { margin-top: .9rem; }
.esp-como__parrafo--fuerte { font-size: var(--t-grande); color: var(--tinta); }

.esp-horario { padding: 1.25rem 1.35rem; }
.esp-horario__titulo { font-size: 1.15rem; }
.esp-horario__quien {
  margin-top: .25rem; font-size: var(--t-mini); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--turquesa-900);
}
.esp-horario__lista { margin: 1rem 0 0; }
.esp-horario__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .6rem 0; border-top: 1px solid var(--linea); }
.esp-horario__fila dt { font-size: var(--t-peq); color: var(--mudo); }
.esp-horario__fila dd { margin: 0; font-size: var(--t-peq); font-weight: 600; color: var(--tinta); text-align: right; }
.esp-horario__donde {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linea);
  font-size: var(--t-peq); line-height: 1.5; color: var(--tinta-2);
}
.esp-horario__donde svg { width: 20px; height: 20px; flex: none; color: var(--turquesa-800); }

/* ── Avisos ───────────────────────────────────────────────────────────────── */
.esp-avisos__lista { display: grid; gap: .7rem; }
.esp-aviso {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  padding: 1rem 1.1rem;
  border-radius: var(--r-m);
  background: var(--papel-2); border: 1px solid var(--linea-2);
  border-left: 3px solid var(--madera);
}
.esp-aviso__icono { display: inline-flex; color: #7A5A2C; }
.esp-aviso__icono svg { width: 22px; height: 22px; }
.esp-aviso__texto { font-size: var(--t-peq); line-height: 1.6; color: var(--tinta-2); }

/* ── Área en preparación ──────────────────────────────────────────────────── */
.esp-pendiente__caja {
  display: grid; justify-items: start; gap: .75rem;
  padding: clamp(1.35rem, 4vw, 2.25rem);
  border: 1px solid var(--turquesa-200);
  background: linear-gradient(160deg, var(--turquesa-50), #fff 60%);
}
.esp-pendiente__icono {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  color: var(--turquesa-800); background: #fff; box-shadow: inset 0 0 0 1.5px var(--turquesa-200);
}
.esp-pendiente__icono svg { width: 24px; height: 24px; }
.esp-pendiente__titulo { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.esp-pendiente__texto { max-width: 56ch; font-size: var(--t-cuerpo); line-height: 1.65; color: var(--tinta-2); }

/* ── Otras áreas ──────────────────────────────────────────────────────────── */
.esp-otras__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.esp-otra {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
  height: 100%; padding: .85rem 1rem;
  border-radius: var(--r-m);
  background: #fff; border: 1px solid var(--linea);
  box-shadow: var(--sombra-1);
  transition: transform var(--d-rapido) var(--e-salida), box-shadow var(--d-rapido) var(--e-salida), border-color var(--d-rapido);
}
.esp-otra:hover { transform: translateY(-2px); border-color: var(--turquesa-300); box-shadow: var(--sombra-2); }
.esp-otra__icono {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--turquesa-800); background: var(--turquesa-50);
  box-shadow: inset 0 0 0 1.5px var(--turquesa-200);
}
.esp-otra__icono svg { width: 22px; height: 22px; }
.esp-otra__cuerpo { display: grid; gap: .15rem; min-width: 0; }
.esp-otra__nombre { font-family: var(--f-titulo); font-weight: 500; font-size: 1.02rem; line-height: 1.2; color: var(--tinta); }
.esp-otra__que { font-size: var(--t-peq); line-height: 1.4; color: var(--mudo); }
.esp-otra__flecha { display: inline-flex; color: var(--turquesa-800); opacity: .6; transition: transform var(--d-rapido) var(--e-salida), opacity var(--d-rapido); }
.esp-otra__flecha svg { width: 20px; height: 20px; }
.esp-otra:hover .esp-otra__flecha { transform: translateX(3px); opacity: 1; }
.esp-otras__pie { margin-top: 1.25rem; }
/* Scopado a mis páginas: 43-ficha.css define su propia `.flecha--atras` y
   este archivo se carga DESPUÉS en las fichas. No le pisamos la suya. */
.esp-pagina .flecha--atras { transform: scaleX(-1); }
.esp-pagina .boton:hover .flecha--atras { transform: scaleX(-1) translateX(4px); }

/* ── Pantallas medianas y móvil ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .esp-otras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .esp-portada { grid-template-columns: 1fr; gap: 1.75rem; }
  .esp-portada__figura { max-width: 420px; width: 100%; }
  .esp-entradilla { max-width: none; }
  .esp-servicios { grid-template-columns: 1fr; }
  .esp-como { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .esp-bloque__titulo { gap: .65rem; }
  .esp-bloque__icono { width: 38px; height: 38px; }
  .esp-bloque__icono svg { width: 20px; height: 20px; }
  .esp-servicio { padding: .7rem .85rem; gap: .75rem; }
  .esp-servicio:hover { transform: none; }
  .esp-servicio__icono { width: 44px; height: 44px; }
  .esp-servicio__icono svg { width: 23px; height: 23px; }
  .esp-servicio__linea { display: none; }
  .esp-pro { grid-template-columns: auto 1fr; padding: .8rem; gap: .8rem; }
  .esp-pro__figura { width: 74px; }
  .esp-otras__lista { grid-template-columns: 1fr; }
  .esp-otra:hover { transform: none; }
  .esp-hueco--vertical { max-width: none; }
}

/* En pantallas muy estrechas, 38-huecos.css esconde el encuadre con
   `display: none`. Un texto de contenido a 0×0 es exactamente lo que la sonda
   de visibilidad considera un fallo (y quien lee la página se queda sin saber
   qué foto va ahí). Aquí el hueco deja de estar atado a su proporción, el
   marco pasa a flujo normal y el texto vuelve, entero.
   El !important es para ganarle al `style="aspect-ratio:…"` que escribe
   u.huecoFoto en línea; es la única forma de soltar esa proporción. */
@media (max-width: 420px) {
  .esp-hueco { aspect-ratio: auto !important; }
  .esp-hueco .hueco-marco { position: static; }
  .esp-hueco .hueco-encuadre { display: block; }
}


/* ═══ 42-formulario.css ═══ */
/* ============================================================================
   42 · FORMULARIO DE CITA POR WHATSAPP  (§3 del CONTRATO-V2)
   -------------------------------------------------------------------------
   El formulario no envía nada a ningún servidor: compone un mensaje y abre
   wa.me. Por eso la pieza principal no es un botón «enviar», sino la VISTA
   PREVIA del mensaje: el paciente ve exactamente qué va a salir de su
   teléfono antes de mandarlo. Es información de salud.

   Consecuencias para el CSS:
   · Nada nace oculto. La burbuja tiene contenido desde el HTML (el mensaje
     base) y nunca se vacía. No hay reglas de display:none para los campos.
   · El estado marcado de las opciones lo pinta `:checked + .fw-chip`, sin
     :has() y sin JavaScript.
   · El anillo de foco va en dos sitios: en el radio (aunque esté recortado,
     para que ninguna auditoría lo dé por perdido) y en el chip visible.
   · Sólo se animan transform y opacity.
   ========================================================================== */

.fw {
  padding: clamp(1.35rem, 4vw, 2.5rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(86, 184, 171, .12), transparent 60%),
    var(--papel-2);
  border: 1px solid var(--linea);
}
.fw .esp-bloque__icono { background: #fff; }

.fw-form {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin: 0;
}

/* ── Campos ───────────────────────────────────────────────────────────────── */
.fw-campos { display: grid; gap: clamp(1.1rem, 3vw, 1.6rem); }

.fw-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.fw-legend {
  display: block; padding: 0; margin-bottom: .7rem;
  font-family: var(--f-titulo); font-weight: 500;
  font-size: 1.12rem; line-height: 1.25; color: var(--tinta);
}
.fw-opcional {
  display: inline-block; margin-left: .5em;
  padding: .2em .6em; border-radius: var(--r-pill);
  font-family: var(--f-cuerpo); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--turquesa-900); background: var(--turquesa-100);
  vertical-align: 2px;
}

.fw-opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.fw-opcion { display: block; max-width: 100%; min-width: 0; cursor: pointer; }
.fw-chip-texto { min-width: 0; overflow-wrap: break-word; }

.fw-chip {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  min-height: 46px; padding: .55rem 1rem .55rem .7rem;
  border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--linea-2);
  box-shadow: inset 0 1px 0 #fff, var(--sombra-1);
  font-size: .93rem; font-weight: 600; line-height: 1.3; color: var(--navy);
  user-select: none;
  transition: transform var(--d-rapido) var(--e-salida), box-shadow var(--d-rapido) var(--e-salida),
              background-color var(--d-rapido), border-color var(--d-rapido), color var(--d-rapido);
}
.fw-opcion:hover .fw-chip { border-color: var(--turquesa-300); transform: translateY(-1px); }

/* El punto del radio, dibujado (el input real está recortado, no ausente) */
.fw-marca {
  position: relative; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--turquesa-600); background: #fff;
  transition: border-color var(--d-rapido), background-color var(--d-rapido);
}
.fw-marca::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--turquesa-800);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--d-rapido), transform var(--d-rapido) var(--e-rebote);
}

.fw-radio:checked + .fw-chip {
  color: #fff;
  background: linear-gradient(135deg, var(--turquesa-800), #1D6B68);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--sombra-turquesa);
}
.fw-radio:checked + .fw-chip .fw-marca { border-color: #fff; background: #fff; }
.fw-radio:checked + .fw-chip .fw-marca::after { opacity: 1; transform: scale(1); }

/* Foco de teclado: en el input (recortado) y, visible, en el chip */
.fw-radio:focus { outline: 3px solid var(--turquesa-800); outline-offset: 2px; }
.fw-radio:focus + .fw-chip { outline: 3px solid var(--turquesa-800); outline-offset: 3px; }

/* Campo de texto de una línea */
.fw-grupo--texto { display: block; }
.fw-entrada {
  display: block; width: 100%; min-height: 52px;
  padding: .8rem 1rem;
  border-radius: var(--r-m);
  border: 1px solid var(--linea-2); background: #fff; color: var(--tinta);
  font-family: var(--f-cuerpo); font-size: 1rem; line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(9, 22, 38, .04);
  transition: border-color var(--d-rapido), box-shadow var(--d-rapido);
}
.fw-entrada::placeholder { color: var(--mudo); }
.fw-entrada:hover { border-color: var(--turquesa-300); }
.fw-entrada:focus { outline: 3px solid var(--turquesa-800); outline-offset: 2px; border-color: var(--turquesa); }

/* Aviso de campo sensible: opcional, y por qué */
.fw-sensible {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: .6rem;
  font-size: var(--t-peq); line-height: 1.5; color: var(--turquesa-900);
}
.fw-sensible svg { width: 18px; height: 18px; flex: none; color: var(--turquesa-800); margin-top: .15em; }

/* ── Vista previa del mensaje ─────────────────────────────────────────────── */
.fw-vista { position: sticky; top: calc(var(--alto-nav) + 1.25rem); display: grid; gap: .9rem; }

.fw-chat {
  position: relative; overflow: hidden;
  border-radius: var(--r-l);
  background:
    radial-gradient(circle at 12% 18%, rgba(86, 184, 171, .10) 0 3px, transparent 4px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 62%, rgba(9, 22, 38, .05) 0 2px, transparent 3px) 0 0 / 58px 58px,
    var(--papel-3);
  border: 1px solid var(--linea-2);
  box-shadow: var(--sombra-2);
}
.fw-chat__cab {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1.1rem;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid var(--linea);
}
.fw-chat__avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
  color: #fff; background: linear-gradient(135deg, var(--turquesa-800), #1D6B68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.fw-chat__avatar svg { width: 22px; height: 22px; }
.fw-chat__quien { display: grid; line-height: 1.25; }
.fw-chat__quien strong { font-size: .95rem; color: var(--navy); }
.fw-chat__quien span { font-size: var(--t-mini); color: var(--mudo); }

.fw-burbuja {
  position: relative;
  margin: 1.35rem 1.1rem 1.35rem 2.4rem;
  padding: 1rem 1.1rem 1.5rem 1.2rem;
  border-radius: 20px 20px 4px 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(9, 22, 38, .08), 0 12px 28px -14px rgba(9, 22, 38, .28);
  transform-origin: bottom right;
}
.fw-burbuja::after {                       /* cola de la burbuja */
  content: ''; position: absolute; right: -9px; bottom: 0;
  width: 0; height: 0;
  border-left: 12px solid #fff; border-top: 12px solid transparent;
}
.fw-burbuja__texto {
  font-size: 1rem; line-height: 1.55; color: var(--tinta);
  white-space: pre-line;                   /* el mensaje lleva saltos de línea */
  overflow-wrap: break-word;
}
.fw-burbuja__hora {
  position: absolute; right: 1rem; bottom: .5rem;
  font-size: .68rem; font-weight: 500; color: var(--mudo);
}
.fw-burbuja.es-nueva { animation: fw-burbuja-entra 240ms var(--e-salida) both; }
@keyframes fw-burbuja-entra {
  from { opacity: .35; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fw-enviar { width: 100%; }
.fw-enviar span { white-space: normal; }

.fw-ayuda, .fw-privacidad {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--t-peq); line-height: 1.5; color: var(--tinta-2);
}
.fw-privacidad {
  padding: .85rem 1rem; border-radius: var(--r-m);
  background: var(--turquesa-50); border: 1px solid var(--turquesa-200);
  color: var(--turquesa-900);
}
.fw-privacidad svg { width: 20px; height: 20px; flex: none; color: var(--turquesa-800); margin-top: .05em; }

.fw-respaldo { display: flex; justify-content: center; }
/* Turquesa-900 y no -800: el fondo del formulario es papel-2 y el tono claro
   se quedaba en 4,27:1. Aquí llega a 6,6:1. */
.fw-respaldo__enlace { gap: .45rem; font-size: var(--t-peq); color: var(--turquesa-900); }
.fw-respaldo__enlace:hover { color: var(--navy); }
.fw-respaldo__enlace svg { width: 18px; height: 18px; }

/* ── Móvil: una columna; la vista previa y el botón cierran el formulario ── */
@media (max-width: 900px) {
  .fw-form { grid-template-columns: 1fr; }
  .fw-vista { position: static; }
}
@media (max-width: 700px) {
  .fw { padding: 1.1rem 1rem 1.35rem; border-radius: var(--r-l); }
  .fw-legend { font-size: 1.05rem; }
  .fw-chip { min-height: 44px; font-size: .88rem; padding: .5rem .85rem .5rem .6rem; }
  .fw-opcion:hover .fw-chip { transform: none; }
  .fw-burbuja { margin: 1.1rem .85rem 1.1rem 1.6rem; }
  .fw-burbuja__texto { font-size: .95rem; }
}