/**
 * Formularios nuevos · decesos.seguratis.com
 *
 * PORTADO TAL CUAL de seguratis.com: `assets/css/formularios.css` (la tarjeta
 * `formx` y el bloque `salidas`) mas el sello de Trustpilot de
 * `componentes.css`. Los valores no se han retocado; lo unico que cambia son
 * las tres variables del sello, resueltas a su color porque aqui no existe
 * `tokens.css`:
 *
 *   var(--c-trustpilot)   -> #00B67A
 *   var(--c-white)        -> #FFFFFF
 *   var(--c-ink-article)  -> #33424D
 *
 * Anadido que NO esta en el original: `font-family: inherit` en los dos botones.
 * Alla no hace falta porque el theme normaliza la tipografia de los controles;
 * aqui, sin eso, el boton salia con la fuente del sistema.
 *
 * Si algun dia hay que retocar el diseno, se retoca ALLI y se vuelve a portar.
 * Que las dos webs no se separen es mas valioso que cualquier arreglo local.
 *
 * Hoja aparte de main.css a proposito: main.css son 263 KB de la agencia y no
 * se toca.
 */

/* ============================================================================
   ARREGLO AJENO A LOS FORMULARIOS · desbordamiento horizontal en movil
   ============================================================================
   Medido con un viewport real de 345 px: `scrollWidth` 415 contra 345 de ancho,
   o sea 70 px de desbordamiento en TODA la web.

     img.logo__image   [12 a 379]   <- el logo mide 367 px de ancho
     div.navbar-brand  [0 a 391]
     div#navbarMenu    [391 a 415]

   La causa es que `main.css` le pone al logo `max-height: 50px !important` y
   NUNCA un `max-width`. Con un logo apaisado, a esa altura le salen 367 px de
   ancho, empuja la marca y arrastra el menu detras. Por eso la pagina se podia
   arrastrar de lado, y por eso pasaba tambien antes de tocar nada.

   Se arregla aqui y no en `main.css` porque esa hoja es de la agencia. Solo
   actua por debajo de 600 px, asi que en escritorio no cambia nada.

   El limite no esta elegido a ojo: se midio. Con un viewport de 345 px,
   290 px de logo no desbordan y 310 si (scrollWidth 358). Se toma 290 como
   tope, y el `calc` lo encoge solo en pantallas mas estrechas para que en un
   movil pequeno tampoco se salga. En un iPhone de 390 sale a 290 completos.
   ============================================================================ */
@media (max-width: 600px) {
  .navbar .logo__image {
    max-width: min(290px, calc(100vw - 60px));
    height: auto;
  }
}

/* ---- Lo que alli pone el theme y aqui hay que traer ------------------------
   El porte daba por hecho el `tokens.css` de seguratis: Manrope, box-sizing
   heredado, controles con la fuente del documento y los margenes de titulares
   y parrafos a cero. Sin esto el diseno es el mismo pero no lo parece, que es
   justo lo que pasaba: salia con la Lato del theme de la agencia.
   Se acota a .formx y .fn-franja para no cambiar nada de lo que ya hay. */
.formx, .formx *, .formx *::before, .formx *::after,
.fn-franja, .fn-franja *, .fn-franja *::before, .fn-franja *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

.formx, .fn-franja {
  font-family: Manrope, "Helvetica Neue", Helvetica, sans-serif;
}

.formx button, .formx input, .formx select, .formx textarea { font-family: inherit; }

.formx h1, .formx h2, .formx h3, .formx h4, .formx p,
.fn-franja p { margin: 0; text-align: left; hyphens: none; }

/* El theme de la agencia viste `blockquote` como una cita de articulo (fondo
   gris, barra a la izquierda, padding) y ademas le anade comillas con
   `::before`/`::after`; y a `figure` le pone 2em de margen a cada lado y texto
   centrado. Encima del testimonio portado eso salia con comillas dobles y todo
   apretujado hacia dentro. Aqui se desviste.

   Va con `:where()` a proposito: asi el selector no suma especificidad y las
   clases del porte siguen mandando. Sin eso, `.formx figure` (0,1,1) le ganaba
   a `.salidas__cita` (0,1,0) y le quitaba a la tarjeta del testimonio su fondo
   blanco, su borde y su padding. */
.formx :where(blockquote, figure, figcaption),
.fn-bloque :where(blockquote, figure, figcaption) {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
}
.formx :where(blockquote)::before,
.formx :where(blockquote)::after,
.fn-bloque :where(blockquote)::before,
.fn-bloque :where(blockquote)::after { content: none; }

/* ---- La tarjeta que contiene el formulario -------------------------------- */
.formx {
  position: relative; z-index: 1;
  margin: 18px -8px 0; padding: 18px 14px 20px;
  border-radius: 8px; background: #ffffff; border: 1px solid #EFE7E1;
  box-shadow: 0 2px 4px -2px rgba(16,24,32,.08),
              0 16px 28px -18px rgba(16,24,32,.3),
              0 34px 60px -34px rgba(16,24,32,.42);
  text-align: left;
}
/* `bare` en el documento: el formulario va suelto, sin tarjeta. */
.formx--desnudo { margin: 18px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }

/* ---- Titular y entradilla -------------------------------------------------
   La cabecera de marca del original (logo de la compania + distintivo de «30
   segundos») esta quitada a peticion de Jorge, y con ella sus estilos. Por eso
   el titular ya no necesita separarse de nada: va el primero de la tarjeta. */
.formx__titulo { margin-top: 0; font-size: 21px; line-height: 1.18; font-weight: 800; letter-spacing: -.025em; color: #101820; }
.formx__sub    { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #69737E; }

/* ---- Campos --------------------------------------------------------------- */
.formx__campos { display: grid; gap: 10px; margin-top: 18px; }

.formx__campo { position: relative; display: block; }
.formx__campo-ico {
  position: absolute; left: 14px; top: 0; height: 54px;
  display: flex; align-items: center; pointer-events: none;
}
.formx__input {
  width: 100%; height: 54px; padding: 0 14px;
  border: 1px solid #E4DCD6; border-radius: 8px; background: #ffffff;
  font-size: 16px; font-weight: 600; color: #101820;
  box-shadow: 0 1px 2px rgba(16,24,32,.04);
}
.formx__campo--ico .formx__input { padding-left: 43px; }
.formx__input::placeholder { color: #69737E; font-weight: 500; }
/* «El foco visible es un anillo de 2 px en #E9714A; jamas outline: none». */
.formx__input:focus-visible,
.formx__cta:focus-visible { outline: 2px solid #E9714A; outline-offset: 2px; }

.formx__error { margin-top: 6px; font-size: 13px; font-weight: 600; color: #B0453A; }
.formx__campo--error .formx__input { border-color: #B0453A; }

/* ---- Consentimiento ------------------------------------------------------- */
.formx__consent {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: 13.5px; line-height: 1.45; color: #55636B;
}
.formx__consent input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; accent-color: #E9714A; }
.formx__consent a { text-decoration: underline; color: #044268; }
.formx__consent--error { color: #B0453A; }

/* ---- Boton principal ------------------------------------------------------ */
.formx__cta {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; height: 56px; margin-top: 16px;
  border: 0; border-radius: 999px; background: #E9714A; color: #ffffff;
  font-family: inherit;
  font-size: 19px; font-weight: 700; cursor: pointer;
  box-shadow: 0 14px 26px -14px rgba(233,113,74,.8);
  transition: transform .12s ease-out, background-color .16s ease-out, box-shadow .18s ease-out;
}
.formx__cta:hover  { background: #D25E38; }
/* El boton se hunde al pulsarlo. Sin eso el primer toque parece no haber
   contado y la gente vuelve a pulsar. */
.formx__cta:active { transform: translateY(1px) scale(.995); box-shadow: 0 8px 16px -12px rgba(233,113,74,.8); }

.formx__cta.is-loading { pointer-events: none; }
.formx__cta.is-loading::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.45); border-top-color: #ffffff;
  animation: giro .7s linear infinite;
}

@keyframes giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .formx__cta { transition: none; }
  .formx__cta.is-loading::before { animation-duration: 2.4s; }
}

/* ---- Pies ----------------------------------------------------------------- */
.formx__verde {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 14px; font-size: 13.5px; font-weight: 700; color: #1E7A4F;
}
.formx__verde-punto { width: 7px; height: 7px; border-radius: 50%; background: #1E7A4F; }

.formx__trustpilot { margin-top: 16px; }

/* El aviso de error del envio. */
.form__aviso {
  margin: 12px 0 0; font-size: 13.5px; font-weight: 600;
  color: #B0453A; text-align: center;
}

/* ======================================================================
   Sin formulario · los dos botones                       (formO del documento)
   ============================================================================ */
/* Las pastillas del original («Un asesor real», «Sin compromiso»,
   «+15 aseguradoras») estan quitadas a peticion de Jorge, y con ellas sus
   estilos. Por eso el testimonio va el primero: lleva `--sola`. */
.salidas__cita {
  margin: 16px 0 0; padding: 18px 20px 20px; border-radius: 8px;
  background: #ffffff; border: 1px solid #F3E7DE;
  box-shadow: 0 18px 40px -26px rgba(16,24,32,.4);
}
.salidas__cita--sola { margin-top: 0; }
.salidas__comilla   { font-family: Georgia, serif; font-size: 30px; line-height: .7; color: #F0BFA0; }
.salidas__cita-txt  {
  margin: 16px 0 0; padding: 0; border: 0;
  font-family: Georgia, serif; font-style: italic;
  font-size: 16.5px; line-height: 1.5; color: #3A4650; text-wrap: pretty;
}
.salidas__cita-pie  { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.salidas__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: #044268; color: #ffffff; font-size: 13px; font-weight: 800;
}
.salidas__quien { flex: 1 1 auto; display: block; line-height: 1.3; }
.salidas__quien strong { display: block; font-size: 15.5px; font-weight: 800; }
.salidas__quien span   { display: block; font-size: 13.5px; color: #69737E; }
/* Verdes: son las del testimonio, no las de Trustpilot. */
.salidas__estrellas { flex: 0 0 auto; color: #1E7A4F; font-size: 15px; letter-spacing: 2px; }

.salidas__cta { margin-top: 20px; }

/* El segundo boton. En seguratis es el de WhatsApp; aqui es «Te llamamos», con
   las mismas medidas y el mismo verde para no separar los dos disenos. */
.salidas__segundo {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; height: 54px; margin-top: 10px; border-radius: 999px;
  background: #ffffff; border: 1.5px solid #9FC9B4; color: #1E7A4F;
  font-family: inherit;
  font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
}
.salidas__segundo:hover { color: #1E7A4F; background: #F0F7F2; }
.salidas__segundo:focus-visible { outline: 2px solid #E9714A; outline-offset: 2px; }

/* ============================================================================
   MODO CONVERT · las tres variantes en el HTML
   ============================================================================
   WordPress solo pinta la variante elegida, asi que las otras dos viven en el
   servidor y desde la consola de Convert no hay nada que tocar. Con el
   interruptor de ACF encendido se pintan las tres y aqui se enseña una.

   Es `display: none` a proposito, no `visibility` ni un `hidden` fuera de
   pantalla: asi los formularios ocultos no ocupan sitio, no reciben el foco
   con el tabulador y no salen en el lector de pantalla. Convert cambia de
   variante quitando y poniendo la clase `is-activa`.
   ============================================================================ */
.fn-variante { display: none; }
.fn-variante.is-activa { display: block; }

/* El bloque de prueba social (testimonio + valoracion) de la variante de lead.
   En movil no sale: alli el hero ya es largo y manda el formulario. El CSS de
   escritorio lo enciende. */
.fn-prueba { display: none; }

/* La nota: cifra grande a la izquierda y, a su derecha, estrellas encima del
   texto. Es el `.rating` de seguratis. */
.salidas__prueba { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.salidas__prueba-num { flex: 0 0 auto; font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: #044268; }
.salidas__prueba-bloque { display: flex; flex-direction: column; gap: 1px; }
.salidas__prueba-estrellas { color: #E8A400; letter-spacing: 1px; font-size: 14px; }
.salidas__prueba-txt { font-size: 13px; color: #55636B; }

/* ============================================================================
   Modal de «Te llamamos»
   ============================================================================
   Propio, y no el `#modal` de la cabecera: aquel solo pide telefono y lo que
   hace falta aqui es nombre Y telefono. Dentro va el mismo formulario de dos
   campos que la otra variante, asi que el envio a Salesforce es el que ya
   funciona, sin nada nuevo por medio.
   ============================================================================ */
.fn-modal { display: none; }
.fn-modal.is-active {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 9999;
  padding: 20px;
}
.fn-modal__capa {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(16,24,32,.55);
}
.fn-modal__caja {
  position: relative; z-index: 1;
  width: 100%; max-width: 390px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
/* La tarjeta ya trae su fondo y su sombra; aqui solo se le quita el margen
   negativo que usa cuando vive dentro del hero. */
.fn-modal .formx { margin: 0; }

.fn-modal__cerrar {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  font-family: inherit; font-size: 26px; line-height: 1; color: #69737E;
  cursor: pointer;
}
.fn-modal__cerrar:hover { color: #101820; }
.fn-modal__cerrar:focus-visible { outline: 2px solid #E9714A; outline-offset: 2px; }

/* Con el modal abierto la pagina de detras no se desplaza. */
.srlx-modal-abierto, .srlx-modal-abierto body { overflow: hidden; }

/* ============================================================================
   Sello de Trustpilot   (componentes.css §14, con los tokens resueltos)
   ============================================================================ */
/* En seguratis va en una linea y no encoge (`nowrap` + `flex: 0 0 auto`), pero
   alli el ancho disponible es otro. Aqui, en un movil estrecho, esa fila no
   cabia y desbordaba a lo ancho: la pagina se movia de lado al desplazarse.
   Se deja envolver, que es preferible a una barra horizontal en toda la web. */
.tp-sello {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: .5em .67em;
  max-width: 100%;
  font-size: clamp(10px, calc(3.75vw - 2.6px), 13.5px);
}
.tp-sello__estrellas { display: flex; gap: .15em; flex: 0 0 auto; }
.tp-sello__estrella {
  display: flex; align-items: center; justify-content: center;
  width: 1.33em; height: 1.33em; background: #00B67A;
}
.tp-sello__estrella svg { width: .96em; height: .96em; fill: #FFFFFF; }

.tp-sello__texto {
  flex: 0 0 auto;
  font-size: 1em; font-weight: 600; color: #33424D;
  letter-spacing: -.01em; white-space: nowrap;
}
.tp-sello__texto strong { font-weight: 800; }
.tp-sello__barra { margin: 0 .44em; opacity: .35; font-weight: 500; }

/* ============================================================================
   Cabecera · titular y entradilla
   El titular usa el `.h1` de tokens.css de seguratis (32 px / 1.07 / -.032em /
   800). El fondo melocoton del resalte y el degradado del bloque NO estan en
   su CSS: se han sacado de las capturas, que es lo unico que hay de ellos.
   ============================================================================ */
/* Valores tomados del `chrome()` de `Formularios.dc.html`, que es el documento
   del que salio todo. El degradado NO es el de `tokens.css`: el del documento
   tiene otras paradas y otro tamano, y es el que se ve en las capturas. */
/* El degradado lo lleva la SECCION, no este bloque. Si lo lleva el bloque hay
   que sacarlo a todo el ancho con `100vw`, y `100vw` cuenta la barra de
   desplazamiento: de ahi que saliera descentrado y con una franja del color
   del theme por arriba y por abajo. */
.fn-bloque {
  position: relative;
  /* SIN recorte propio. Lo tuvo (`overflow-x: clip`) como guarda del
     desbordamiento movil, pero eso cortaba las auroras justo en el borde del
     bloque y el halo verde salia como un rectangulo de bordes duros en vez de
     un circulo difuminado. La guarda ya no hace falta: el desbordamiento venia
     del logo de la cabecera y esta arreglado arriba; y de contener las auroras
     ya se encarga la seccion, que lleva `overflow: hidden`. */
  font-family: Manrope, "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 22px 20px 26px;
  max-width: 100%;
  text-align: left;
}
.fn-bloque > * { position: relative; z-index: 1; }
.fn-bloque *, .fn-bloque *::before, .fn-bloque *::after { box-sizing: border-box; }

/* ---- Decoracion del hero --------------------------------------------------
   Portada de `home.css` de seguratis: dos auroras difuminadas y tres motas.
   La `--fria` es el halo VERDE de abajo a la izquierda, que es lo que se veia
   en las capturas de Jorge y aqui faltaba.

   Va en su propia capa con `overflow: hidden` porque las auroras se salen del
   bloque a proposito (bottom: -90px, left: -120px). Clipar el bloque entero
   habria recortado tambien el sello «Sin presion», que asoma por la esquina de
   la tarjeta. Asi cada cosa se recorta donde toca.

   Colores de `tokens.css`: --c-blob-warm #F7C4A6, --c-blob-cool #8FCBAE,
   --c-blob-soft #F3D3C0. */
/* Sin recorte propio: recorta la seccion, que ya lleva `overflow: hidden`. Si
   recortaba aqui, la aurora se cortaba en seco en el borde del bloque y se
   veia una linea vertical donde terminaba. Asi se difumina hacia fuera. */
.fn-deco {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

.fn-deco__aurora { position: absolute; border-radius: 50%; filter: blur(40px); }
.fn-deco__aurora--calida {
  top: -120px; right: -110px; width: 264px; height: 264px;
  background: radial-gradient(circle at 35% 35%, rgba(232,110,77,.20), rgba(233,113,74,0) 100%);
  animation: fn-aurora 18s ease-in-out infinite;
}
.fn-deco__aurora--fria {
  bottom: -90px; left: -120px; width: 279px; height: 279px;
  background: radial-gradient(circle at 60% 40%, rgba(0,182,122,.13), rgba(30,122,79,0) 100%);
  animation: fn-aurora 24s ease-in-out infinite reverse;
}

.fn-deco__mota { position: absolute; border-radius: 50%; }
.fn-deco__mota--1 { top: 34px; right: 42px; width: 13px; height: 13px; background: #F7C4A6; animation: fn-drift 9s ease-in-out infinite; }
.fn-deco__mota--2 { top: 58%;  right: 76px; width: 10px; height: 10px; background: #8FCBAE; animation: fn-drift 11s ease-in-out infinite 1s; }
.fn-deco__mota--3 { top: 42%;  left: 26px;  width: 7px;  height: 7px;  background: #F3D3C0; animation: fn-floaty 7.5s ease-in-out infinite .4s; }

@keyframes fn-drift  { 0% { transform: translate(0,0); } 50% { transform: translate(14px,-18px); } 100% { transform: translate(0,0); } }
@keyframes fn-floaty { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-9px, -13px); } }
@keyframes fn-aurora { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-26px) scale(1.12); } 66% { transform: translate(-26px,24px) scale(.92); } 100% { transform: translate(0,0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .fn-deco__aurora, .fn-deco__mota { animation: none; }
}

/* El degradado, en la seccion entera. Asi ocupa todo el ancho sin trucos y no
   queda ninguna franja del fondo del theme ni por arriba ni por abajo.
   `presentation.php` ya pone la variante como clase en la <section>, asi que
   esto solo toca a las paginas que llevan uno de los formularios nuevos. */
.presentation.is-form-type-version-lead_nombre_telefono,
.presentation.is-form-type-version-botones {
  background: radial-gradient(125% 92% at 100% -6%,
    #FBDFCC 0%, #FCEEE3 38%, #FBF6EF 74%, #FFFFFF 100%) !important;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* Los contenedores intermedios del theme dejan de imponer fondo, ancho y
   sangrado: entre `.hero-body`, `.container`, `.columns` y `.column` sumaban
   maximos y paddings que dejaban el contenido en una columna estrecha mientras
   el degradado sí ocupaba todo. Aqui el ancho lo manda el bloque, y solo el. */
.presentation.is-form-type-version-lead_nombre_telefono .hero-body,
.presentation.is-form-type-version-botones .hero-body,
.presentation.is-form-type-version-lead_nombre_telefono .container,
.presentation.is-form-type-version-botones .container,
.presentation.is-form-type-version-lead_nombre_telefono .columns,
.presentation.is-form-type-version-botones .columns,
.presentation.is-form-type-version-lead_nombre_telefono .column,
.presentation.is-form-type-version-botones .column {
  background: none;
  width: 100%;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
}

/* Las columnas dejan de repartirse el ancho: aqui solo hay una cosa. */
.presentation.is-form-type-version-lead_nombre_telefono .columns,
.presentation.is-form-type-version-botones .columns { display: block; }

/* La foto de fondo del theme, fuera.
   `presentation.php` pinta una capa `.presentation__cover` con un <img>
   (FONDO-DK1) colocada en absoluto sobre toda la seccion. No es un
   `background`, asi que apagar los fondos no la quitaba: seguia asomando por
   debajo del degradado y se veia una mancha verdosa abajo a la izquierda.
   El hero del diseno no lleva foto: solo el degradado y sus dos manchas. */
.presentation.is-form-type-version-lead_nombre_telefono .presentation__cover,
.presentation.is-form-type-version-botones .presentation__cover { display: none; }

/* El titular y la entradilla los pinta ya el bloque nuevo, asi que la columna
   de textos del theme sobraria y saldrian los dos.
   OJO: se oculta SOLO esa columna. El formulario vive dentro del mismo
   `.hero-body`, asi que ocultar el hero entero lo hace desaparecer con el —
   que es exactamente lo que paso la primera vez. */
.presentation.is-form-type-version-lead_nombre_telefono .column.is-two-thirds-desktop,
.presentation.is-form-type-version-botones .column.is-two-thirds-desktop { display: none; }

/* Y la columna del formulario pasa a ocupar todo el ancho, que se habia
   quedado a un tercio. */
.presentation.is-form-type-version-lead_nombre_telefono .column.is-one-thirds-desktop,
.presentation.is-form-type-version-botones .column.is-one-thirds-desktop {
  width: 100%; max-width: none; flex: 1 1 100%;
}

/* El ancho lo fija el BLOQUE, no cada hijo.
   Antes centraba hijo por hijo con margenes automaticos y se peleaba con los
   margenes que traen las piezas portadas (`.formx` tiene `margin: 18px -8px 0`):
   la cabecera salia centrada y la franja de precio pegada a la izquierda.
   `Formularios.dc.html` dibuja el marco a 390 px con `padding: 22px 20px 26px`,
   o sea 350 px de contenido. Se reproduce tal cual y se centra el conjunto. */
/* El ancho por defecto: 390 px, el marco del diseno.
   Vale para el movil y tambien para la variante de nombre y telefono en
   escritorio, que NO se estira: es una tarjeta de dos campos y a 1180 px
   quedaba absurda. Solo la variante de botones lo pisa, mas abajo, con un
   selector mas especifico —no con orden ni con `!important`— para que este
   claro cual manda. */
.fn-bloque { max-width: 390px; margin-left: auto; margin-right: auto; }
.fn-bloque > * { max-width: none; margin-left: 0; margin-right: 0; }

/* La pastilla verde de arriba. Medidas de `.pill--vivo` de seguratis en movil:
   13 px y 7px 12px, con el punto a 6. En escritorio crece (mas abajo). */
.fn-cab__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: #F0F7F2; color: #1E7A4F;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
/* `pill__dot`: del color del texto, no un verde aparte. */
.fn-cab__badge-punto {
  flex: 0 0 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.fn-cab__h1 {
  margin: 16px 0 0;
  font-size: 33px; line-height: 1.06; letter-spacing: -.034em; font-weight: 800;
  color: #101820; text-wrap: balance;
}
/* El resaltado NO es un bloque de color: es un degradado que solo pinta de la
   mitad de la linea hacia abajo, como un subrayado grueso. */
.fn-cab__hl {
  padding: 0 4px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(247,185,143,0) 52%, rgba(247,185,143,.75) 52%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.fn-cab__sub {
  margin: 12px 0 0;
  font-size: 16px; line-height: 1.5; color: #55636B; text-wrap: pretty;
}

/* Dentro del bloque, la franja y la tarjeta ya no necesitan sangrar. */
.fn-bloque .fn-franja { margin-left: 0; margin-right: 0; }
.fn-bloque .formx { margin-left: 0; margin-right: 0; }

/* Sin crecidas en escritorio: el documento no dibuja una version grande de
   esto, y agrandar el titular por mi cuenta seria separarme del diseno. */

/* ============================================================================
   Franja de precio
   NO viene de seguratis.com: sus formularios no llevan franja. Sale en las
   capturas que paso Jorge y se ha construido con la misma paleta que el porte
   para que no desentone. Si seguratis incorpora una, portar aquella y tirar esta.
   ============================================================================ */
/* Caja blanca translucida sobre el degradado, `priceBlock` v1 del documento. */
.fn-franja {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-top: 18px; padding: 14px 16px; border-radius: 8px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  text-align: left;
}

.fn-franja__etiqueta {
  margin: 0; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #69737E;
}
.fn-franja__cifra { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #044268; }
.fn-franja__cifra span { font-size: 15px; font-weight: 700; color: #55636B; }

.fn-franja__valoracion { text-align: right; line-height: 1.4; }
.fn-franja__estrellas { margin: 0; font-size: 14px; letter-spacing: 1px; color: #E8A400; }
.fn-franja__texto { margin: 0; font-size: 12.5px; color: #55636B; }
.fn-franja__texto strong { color: #101820; }

/* ---- Accesibilidad -------------------------------------------------------- */
.formx .screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================================
   NOTA DE ORDEN · este bloque va EL ULTIMO a proposito.
   Un @media no suma especificidad: si va antes que las reglas base, estas le
   ganan. Estando arriba, el `max-width: 100%` de .fn-bloque pisaba al
   `max-width: 1180px` de aqui y el hero de escritorio salia a todo lo ancho,
   con el texto pegado al borde izquierdo. Al final de la hoja, manda este.
   ============================================================================ */

/* ============================================================================
   ESCRITORIO · hero a dos columnas          (solo la variante «botones»)
   ============================================================================
   Portado del hero de la home de seguratis: `home.css` (.home-hero__*) mas los
   componentes que arrastra de `componentes.css` (.card--floating, .pill, .btn,
   .rating) y `tokens.css`. Los tokens van resueltos a su valor porque aqui no
   existe `tokens.css`:

     --c-primary #044268   --c-ink #101820      --c-ink-2 #55636B
     --c-ink-3 #69737E     --c-positive #1E7A4F --c-surface-2 #FCF8F5
     --c-divider #F0EAE5   --c-border #E9E3DE   --c-border-soft #EDE7E2
     --c-cta-bg #FDF1EA    --c-action-ink #B04A28  --c-tag-soft #F0F7F2
     --c-star #E8A400      --r 8px              --r-pill 999px
     --bd 1px              --bd-strong 1.5px

   Por debajo de 1024 px no aplica NADA de esto: el movil se queda tal cual.
   ============================================================================ */

/* En movil la tarjeta de comparativa no existe, igual que en el original. */
.fn-aside { display: none; }

@media (min-width: 1024px) {

  /* ACOTADO A LA VARIANTE DE BOTONES.
     El ancho de 1180 y el titular gigante son del hero a dos columnas. Sin
     acotar, el formulario de nombre y telefono tambien se estiraba a 1180 y
     salia una tarjeta de dos campos del ancho de la pantalla.
     La variante de lead se queda en sus 390 px a cualquier tamano. */
  /* El contenedor del original es `.wrap`: 1280 px con 24 px de margen lateral
     (`--max-w` y `--pad-x-d` de tokens.css). Yo habia puesto 1180 con 40, que
     son 132 px menos de ancho util: por eso todo se veia mas pequeno y el
     titular partia antes de tiempo. */
  .presentation.is-form-type-version-botones .fn-bloque {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 56px 24px 60px;
  }

  /* OJO: el hero de la home usa `.h1--home`, NO `.h1`. Son escalas distintas
     —clamp(42,5.4vw,76) frente a clamp(38,4.2vw,56)— y yo habia portado la
     pequena. A 1293 px eso son 70 px contra 54: por eso se veia menor que la
     referencia. */
  .presentation.is-form-type-version-botones .fn-cab__h1 {
    margin-top: 26px;
    font-size: clamp(42px, 5.4vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
    max-width: 13ch;
  }
  /* `.body` de escritorio, que tambien es un clamp y no un tamano fijo. */
  .presentation.is-form-type-version-botones .fn-cab__sub {
    margin-top: 30px; max-width: 46ch;
    font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55;
  }

  /* Dos rejillas distintas, una por variante, como en seguratis:
       · botones  -> la de la home  (.home-hero__inner)
       · lead     -> la de ramo     (.ramo-hero__inner), con la columna del
                     formulario acotada entre 320 y 420 px para que la tarjeta
                     no se ensanche y siga leyendose como un formulario. */
  .presentation.is-form-type-version-botones .fn-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
    gap: 80px;
    align-items: center;
  }

  .presentation.is-form-type-version-lead_nombre_telefono .fn-bloque {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 24px 68px;
  }
  .presentation.is-form-type-version-lead_nombre_telefono .fn-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 64px;
    align-items: start;
  }
  /* Misma escala de titular que la otra variante (`.h1--home`): Jorge quiere el
     texto grande tambien aqui. El original de ramo usa la escala pequena, pero
     manda lo que se ve. */
  .presentation.is-form-type-version-lead_nombre_telefono .fn-cab__h1 {
    margin-top: 26px;
    font-size: clamp(42px, 5.4vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
    max-width: 15ch;
  }
  .presentation.is-form-type-version-lead_nombre_telefono .fn-cab__sub {
    margin-top: 26px; max-width: 46ch;
    font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55;
  }

  /* La pastilla en escritorio, con las medidas de `.pill--vivo` del hero de la
     home: 14px y 9px 15px, con el punto a 7. */
  .fn-cab__badge { padding: 9px 15px; font-size: 14px; gap: 9px; }
  .fn-cab__badge-punto { flex-basis: 7px; width: 7px; height: 7px; }
  /* La tarjeta ya no necesita salirse por los lados: aqui tiene su columna. */
  .presentation.is-form-type-version-lead_nombre_telefono .formx { margin: 0; padding: 26px 28px 28px; }

  /* En escritorio la franja de precio deja su sitio al testimonio, que es lo
     que pidio Jorge. En movil la franja se queda y el testimonio no sale. */
  .presentation.is-form-type-version-lead_nombre_telefono .fn-franja { display: none; }
  .presentation.is-form-type-version-lead_nombre_telefono .fn-prueba { display: block; margin-top: 34px; }
  /* La tarjeta del testimonio no ocupa toda la columna: en el diseno es una
     pieza estrecha, del ancho del formulario de enfrente. */
  .presentation.is-form-type-version-lead_nombre_telefono .fn-prueba .salidas__cita { max-width: 460px; }
  .presentation.is-form-type-version-lead_nombre_telefono .fn-prueba .salidas__prueba { margin-top: 20px; }

  /* La columna de texto crece: en escritorio el titular es el protagonista. */



  /* Los dos botones, uno al lado del otro y con las medidas del hero de la
     home: los DOS de 64 px de alto. Antes puse 60 y 54, que son las medidas
     genericas de `.btn`, no las del hero: por eso se veian pequenos. */
  .form-salidas .salidas__cta,
  .form-salidas .salidas__segundo { width: auto; margin-top: 0; height: 64px; }
  .form-salidas .salidas__cta     { padding: 0 36px; }
  .form-salidas .salidas__segundo { padding: 0 34px; font-size: 17px; }
  .fn-acciones { display: flex; gap: 12px; margin-top: 38px; }

  /* El testimonio no sale en escritorio: alli manda la tarjeta. */
  .form-salidas .salidas__cita { display: none; }

  /* La franja de precio tampoco: en el hero de escritorio de la referencia no
     esta, porque el precio ya lo da la tarjeta de comparativa. En movil si se
     mantiene, que alli no hay tarjeta. Para recuperarla, borrar esta regla. */
  .presentation.is-form-type-version-botones .fn-franja { display: none; }

  /* ---- La tarjeta de comparativa ---- */
  .fn-aside { display: block; position: relative; }

  .fn-aside__sello {
    position: absolute; bottom: -20px; right: -18px; z-index: 2;
    padding: 12px 20px; border-radius: 999px;
    background: #101820; color: #FFFFFF;
    font-size: 15px; font-weight: 700;
    box-shadow: 0 18px 34px -22px rgba(16,24,32,.6);
  }

  .fn-card {
    position: relative; z-index: 1;
    display: block; padding: 26px 28px 28px;
    border: 1px solid #EBDDD2; border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 8px -3px rgba(16,24,32,.10),
                0 30px 56px -28px rgba(16,24,32,.50);
  }

  .fn-card__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .fn-card__overline {
    font-size: 13px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #69737E;
  }
  .fn-card__titulo { display: block; margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: -.025em; color: #101820; }
  .fn-card__pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 999px;
    background: #F0F7F2; color: #1E7A4F;
    font-size: 13px; font-weight: 700; white-space: nowrap;
  }

  .fn-card__filas { display: grid; gap: 8px; margin-top: 18px; }
  .fn-card__fila {
    position: relative; display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 8px;
    background: #FCF8F5; border: 1px solid #F0EAE5;
  }
  .fn-card__fila--mejor { background: #FFFFFF; border: 1.5px solid #1E7A4F; }

  .fn-card__badge {
    position: absolute; top: -11px; left: 14px;
    padding: 3px 10px; border-radius: 999px;
    background: #1E7A4F; color: #FFFFFF;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
  }

  /* El hueco del logo mide siempre lo mismo, haya imagen o no, para que la
     fila no se mueva ni un pixel al ponerla. */
  .fn-card__logo {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px;
    background: #E9E3DE;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .fn-card__logo--img { background: #FFFFFF; border: 1px solid #EDE7E2; }
  .fn-card__logo--img img { max-width: 84%; max-height: 84%; width: auto; height: auto; object-fit: contain; }

  .fn-card__cia { flex: 1 1 auto; font-size: 15.5px; font-weight: 600; color: #55636B; }
  .fn-card__fila--mejor .fn-card__cia { font-weight: 800; color: #101820; }

  .fn-card__precio { flex: 0 0 auto; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #101820; }
  .fn-card__precio span { font-size: 13px; font-weight: 600; color: #69737E; }
  .fn-card__fila--mejor .fn-card__precio { color: #1E7A4F; }

  .fn-card__ahorro {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 14px; padding: 14px 16px; border-radius: 8px;
    background: #FDF1EA; color: #B04A28;
    font-size: 15px; font-weight: 700;
  }
  .fn-card__ahorro-num { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
  .fn-card__ahorro-num span { font-size: 14px; font-weight: 600; }

  /* La nota de Trustpilot. En movil es una linea pequena; en escritorio el
     original la agranda: la nota como cifra grande en azul marino, las
     estrellas encima y el numero de opiniones debajo en gris.
     Se consigue con la misma marca, poniendo la fila en columna. */
  .form-salidas .salidas__prueba { gap: 14px; margin-top: 32px; }
  .form-salidas .salidas__prueba-num { font-size: 40px; letter-spacing: -.035em; }
  .form-salidas .salidas__prueba-estrellas { font-size: 15px; }
  .form-salidas .salidas__prueba-txt { font-size: 14.5px; color: #55636B; }
}