/* =========================================================================
   DSO LEGAL · hoja de estilos común
   Portada, landings de intención, páginas legales y 404.

   Los colores son los de siempre: verde profundo, dorado y las cremas. Lo
   que cambia es la jerarquía. El dorado deja de ser decoración y pasa a
   marcar una sola cosa: por dónde va el expediente y qué hay que pulsar.

   Regla de oro de esta web: nada debe estorbar al formulario.
   ========================================================================= */

/* Las tipografías son las que ya tenía la web, servidas desde el propio
   dominio: ni una petición a Google. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url('../fonts/cormorant-garamond-italic-c5fd40cb.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url('../fonts/cormorant-garamond-italic-1b6c6e8e.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/cormorant-garamond-normal-51cd5bb1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/cormorant-garamond-normal-4acab1e5.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/inter-normal-6e8948ff.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/inter-normal-a8e21310.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* --- verdes corporativos --- */
  --verde:        #1f3636;   /* el color de la casa */
  --verde-hondo:  #16292a;   /* fondos más cerrados */
  --verde-2:      #3c5050;
  --verde-suave:  #5f7070;   /* texto secundario */

  /* --- dorado: la señal --- */
  --oro:          #b08d57;   /* el dorado de la casa: rellenos, filetes y cifras grandes */
  --oro-texto:    #8a6a3a;   /* el mismo dorado, un punto más hondo, para texto pequeño
                                — el de la casa se queda en 3,1 sobre blanco y no llega */
  --oro-claro:    #c9a84c;
  --oro-sobre-verde: #d4b483;  /* el dorado, legible sobre el verde */

  /* --- papeles --- */
  --blanco:       #ffffff;
  --crema:        #f6f4f0;
  --crema-2:      #eef2f0;
  --linea:        #dfdcd4;
  --linea-oscura: #35494a;

  /* --- verde sobre verde --- */
  --sobre-verde:      #eef2f0;
  --sobre-verde-soft: #a9bcb8;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max: 1180px;
  --pad: 32px;
  --radio: 14px;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--sans);
  color: var(--verde);
  background: var(--blanco);
  font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
img{ display: block; max-width: 100%; }
::selection{ background: var(--oro); color: #fff; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* La voz de la casa: el serif para lo que se afirma, el sans para lo que
   se explica. Antes el serif casi no se usaba; es lo que más cambia la cara
   sin tocar un solo color. */
h1, h2, h3, .serif{
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
}
h1 em, h2 em{ font-style: italic; color: var(--oro); }

.volanta{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro); margin-bottom: 1.1rem;
}
.volanta::before{ content: ""; width: 26px; height: 1px; background: var(--oro); }
.volanta.centrada{ justify-content: center; }

.lede{ font-size: 1.06rem; line-height: 1.7; color: var(--verde-suave); max-width: 62ch; }

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn-primary, .btn-accent, .lp-btn, .hero-test-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: .98rem; font-weight: 600; letter-spacing: .005em;
  padding: 16px 28px; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; transition: background .22s, color .22s, border-color .22s, transform .22s;
}
.btn-primary, .lp-btn{ background: var(--verde); color: #fff; }
.btn-primary:hover, .lp-btn:hover{ background: var(--verde-hondo); transform: translateY(-1px); }
.btn-accent{ background: var(--oro); color: #fff; }
.btn-accent:hover{ background: #9c7b47; transform: translateY(-1px); }
.btn-ghost{
  background: transparent; color: var(--verde); border-color: var(--linea);
}
.btn-ghost:hover{ border-color: var(--oro); color: var(--oro); }
.btn-bloque{ width: 100%; }
.btn-primary svg, .btn-accent svg, .lp-btn svg{ transition: transform .22s; }
.btn-primary:hover svg, .btn-accent:hover svg, .lp-btn:hover svg{ transform: translateX(3px); }

/* =========================================================================
   BARRA SUPERIOR Y CABECERA
   ========================================================================= */
.topbar{
  background: var(--verde-hondo); color: var(--sobre-verde-soft);
  font-size: .72rem; letter-spacing: .04em;
}
.topbar .wrap{ display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 9px; padding-bottom: 9px; }
.topbar .tb-left{ display: inline-flex; align-items: center; gap: 8px; }
.topbar a{ color: var(--sobre-verde); font-weight: 600; }
.topbar a:hover{ color: var(--oro-sobre-verde); }
.punto-vivo{ width: 6px; height: 6px; border-radius: 50%; background: var(--oro-claro); display: inline-block; flex: none; }

.site-header{ position: sticky; top: 0; z-index: 90; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.navbar{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.logo{ display: inline-flex; align-items: center; gap: 10px; }
.logo img{ height: 38px; width: auto; }
.logo .marca-txt{ font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: .01em; }
.nav-links{ display: flex; align-items: center; gap: 26px; font-size: .88rem; }
.nav-links a{ color: var(--verde-suave); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav-links a:hover{ color: var(--verde); border-bottom-color: var(--oro); }
.nav-cta{ padding: 11px 20px; font-size: .88rem; }
.menu-btn{ display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 8px 0; }
.menu-btn span{ width: 22px; height: 2px; background: var(--verde); display: block; transition: .25s; }

/* =========================================================================
   PORTADA · lo primero que se ve es la decisión
   El formulario no compite con nada: ni foto de archivo, ni adornos.
   ========================================================================= */
.hero{ background: var(--verde); color: var(--sobre-verde); position: relative; overflow: hidden; }
.hero::before{
  /* una trama tenue, no una imagen: pesa cero y no distrae */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 18% 12%, rgba(176,141,87,.16), transparent 42%),
                    radial-gradient(circle at 88% 78%, rgba(176,141,87,.10), transparent 46%);
}
.hero .wrap{ position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px;
             align-items: center; padding-top: 54px; padding-bottom: 58px; }
.hero h1{ font-size: clamp(2.4rem, 4.4vw, 3.5rem); color: #fff; max-width: 17ch; }
.hero h1 em{ color: var(--oro-sobre-verde); }
.hero .lede{ color: var(--sobre-verde-soft); margin-top: 1.3rem; font-size: 1.05rem; max-width: 46ch; }
.hero .lede strong{ color: #fff; font-weight: 600; }
.hero .volanta{ color: var(--oro-sobre-verde); }
.hero .volanta::before{ background: var(--oro-sobre-verde); }

/* la fila de confianza: sin cifras, solo lo que se puede sostener */
.trust-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.trust-row .dato{ display: inline-flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--sobre-verde-soft); }
.trust-row .dato strong{ color: #fff; font-weight: 600; }
.trust-row .ic{ width: 17px; height: 17px; flex: none; color: var(--oro-sobre-verde); }

/* --- la tarjeta del formulario --- */
.form-card{
  background: #fff; border-radius: var(--radio); padding: 28px 26px 24px;
  box-shadow: 0 26px 60px rgba(11,26,26,.30);
  color: var(--verde);
}
.form-card h2{ font-size: 1.5rem; margin-bottom: .35rem; }
.form-card .sub{ font-size: .88rem; color: var(--verde-suave); margin-bottom: 1.2rem; }
.form-field{ margin-bottom: 13px; }
.form-field label{
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--verde-suave); margin-bottom: 6px;
}
.form-field input, .form-field select{
  width: 100%; padding: 13px 14px; font-family: var(--sans); font-size: .96rem;
  color: var(--verde); background: #fff;
  border: 1.5px solid var(--linea); border-radius: 10px; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.form-field input:focus, .form-field select:focus{
  border-color: var(--oro); box-shadow: 0 0 0 3px rgba(176,141,87,.16);
}
.form-field input::placeholder{ color: #a8b3b0; }
.consent{ display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; color: var(--verde-suave); margin: 4px 0 16px; line-height: 1.5; }
.consent input{ margin-top: 3px; width: 15px; height: 15px; accent-color: var(--oro); flex: none; }
.consent a{ color: var(--oro); border-bottom: 1px solid currentColor; }
.form-card .garantias{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 14px;
  font-size: .72rem; color: var(--verde-suave);
}
.form-card .garantias span{ display: inline-flex; align-items: center; gap: 6px; }
.form-msg{ font-size: .86rem; margin-top: 12px; padding: 11px 13px; border-radius: 9px; display: none; }
.form-msg.ok{ display: block; background: #e8f3ec; color: #1a5c34; }
.form-msg.err{ display: block; background: #fbecec; color: #93312a; }

/* la segunda vía: quien no quiere dar el teléfono todavía */
.otra-via{
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.otra-via p{ font-size: .86rem; color: var(--verde-suave); }
.hero-test-btn{
  padding: 11px 18px; font-size: .85rem; background: var(--crema);
  color: var(--verde); border-color: var(--linea);
}
.hero-test-btn:hover{ border-color: var(--oro); color: var(--oro); background: #fff; }

/* =========================================================================
   EL CONTADOR EN VIVO
   ========================================================================= */
.banda-vivo{ background: var(--verde-hondo); color: var(--sobre-verde); border-top: 1px solid var(--linea-oscura); }
.banda-vivo .wrap{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; align-items: center;
                   padding-top: 34px; padding-bottom: 34px; }
.live-counter .rot{ display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .18em;
                    text-transform: uppercase; color: var(--oro-sobre-verde); margin-bottom: 8px; }
.live-counter .num{ font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 500;
                    line-height: 1; color: #fff; display: flex; align-items: baseline; gap: 6px; }
.live-counter .eur{ font-size: .55em; color: var(--oro-sobre-verde); }
.live-counter .pie{ font-size: .82rem; color: var(--sobre-verde-soft); margin-top: 8px; }
.banda-vivo .cifra{ border-left: 1px solid var(--linea-oscura); padding-left: 30px; }
.banda-vivo .cifra .k{ font-family: var(--serif); font-size: 1.7rem; color: #fff; line-height: 1.1; }
.banda-vivo .cifra .d{ font-size: .8rem; color: var(--sobre-verde-soft); margin-top: 3px; }

/* =========================================================================
   SELLOS DE RESPALDO
   ========================================================================= */
.sellos{ background: var(--crema); border-bottom: 1px solid var(--linea); }
.sellos-title{ text-align: center; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
               color: var(--verde-suave); padding-top: 26px; }
.sellos-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 18px 0 30px; }
.sello{ text-align: center; padding: 8px 18px; }
.sello + .sello{ border-left: 1px solid var(--linea); }
.sello .k{ font-family: var(--serif); font-size: 1.5rem; color: var(--oro); line-height: 1; }
.sello .t{ font-size: .84rem; font-weight: 600; margin-top: 7px; }
.sello .d{ font-size: .76rem; color: var(--verde-suave); }

/* =========================================================================
   SECCIONES
   ========================================================================= */
.seccion{ padding: 84px 0; }
.seccion.crema{ background: var(--crema); }
.seccion.verde{ background: var(--verde); color: var(--sobre-verde); }
.seccion.verde h2{ color: #fff; }
.seccion.verde .lede{ color: var(--sobre-verde-soft); }
.seccion.verde .volanta{ color: var(--oro-sobre-verde); }
.seccion.verde .volanta::before{ background: var(--oro-sobre-verde); }
.cabecera-seccion{ max-width: 60ch; margin-bottom: 44px; }
.cabecera-seccion.centrada{ margin-left: auto; margin-right: auto; text-align: center; }
.cabecera-seccion h2{ font-size: clamp(1.9rem, 3.8vw, 2.9rem); margin-bottom: 1rem; }

/* --- qué es: tres definiciones --- */
.definiciones{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--linea); }
.definiciones > div{ padding: 32px 30px 4px 0; }
.definiciones > div + div{ border-left: 1px solid var(--linea); padding-left: 30px; }
.definiciones h3{ font-size: 1.35rem; margin-bottom: .6rem; }
.definiciones p{ font-size: .95rem; color: var(--verde-suave); line-height: 1.7; }

/* --- tu situación: la lista de reconocimiento --- */
.situaciones{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 46px; }
.situaciones div{ display: flex; align-items: flex-start; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--linea); font-size: .98rem; }
.situaciones .tic{ width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--oro); }

/* =========================================================================
   EL EXPEDIENTE · las cuatro fases
   La única animación de la página, y es deliberadamente lenta: quien llega
   aquí está angustiado. La línea recorre las cuatro fases y al final cae el
   sello de exonerado. El argumento entero en un gesto: esto tiene final.
   ========================================================================= */
.expediente{ position: relative; }
.fases{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.fases::before{
  content: ""; position: absolute; left: 0; right: 0; top: 27px; height: 2px;
  background: var(--linea);
}
.fases::after{
  content: ""; position: absolute; left: 0; top: 27px; height: 2px; width: 100%;
  background: var(--oro); transform-origin: left center; transform: scaleX(0);
  animation: avanceExpediente 16s cubic-bezier(.5, 0, .3, 1) infinite both;
}
@keyframes avanceExpediente{
  0%, 3%    { transform: scaleX(0); opacity: 1; }
  20%       { transform: scaleX(.25); }
  40%       { transform: scaleX(.5); }
  60%       { transform: scaleX(.75); }
  76%, 92%  { transform: scaleX(1); opacity: 1; }
  98%, 100% { transform: scaleX(1); opacity: 0; }
}
.fase{ padding: 0 28px 0 0; position: relative; }
.fase + .fase{ padding-left: 28px; }
.fase .bolo{
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
  border: 2px solid var(--linea); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.4rem; color: var(--verde-suave);
  position: relative; z-index: 2; margin-bottom: 18px;
  transition: none;
  animation: 16s ease-in-out infinite both;
}
.seccion.crema .fase .bolo{ background: var(--crema); }
.fases > .fase:nth-child(1) .bolo{ animation-name: bolo1; }
.fases > .fase:nth-child(2) .bolo{ animation-name: bolo2; }
.fases > .fase:nth-child(3) .bolo{ animation-name: bolo3; }
.fases > .fase:nth-child(4) .bolo{ animation-name: bolo4; }
@keyframes bolo1{ 0%,2%{ border-color: var(--linea); color: var(--verde-suave) } 8%,92%{ border-color: var(--oro); color: var(--oro) } 98%,100%{ border-color: var(--linea); color: var(--verde-suave) } }
@keyframes bolo2{ 0%,22%{ border-color: var(--linea); color: var(--verde-suave) } 28%,92%{ border-color: var(--oro); color: var(--oro) } 98%,100%{ border-color: var(--linea); color: var(--verde-suave) } }
@keyframes bolo3{ 0%,42%{ border-color: var(--linea); color: var(--verde-suave) } 48%,92%{ border-color: var(--oro); color: var(--oro) } 98%,100%{ border-color: var(--linea); color: var(--verde-suave) } }
@keyframes bolo4{ 0%,62%{ border-color: var(--linea); color: var(--verde-suave) } 68%,92%{ border-color: var(--oro); background: var(--oro); color: #fff } 98%,100%{ border-color: var(--linea); color: var(--verde-suave) } }
.fase h3{ font-size: 1.2rem; margin-bottom: .35rem; }
.fase .cuando{ font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); margin-bottom: .7rem; display: block; }
.fase p{ font-size: .92rem; color: var(--verde-suave); line-height: 1.68; }

/* el sello: cae cuando la línea llega al final */
.sello-exonerado{
  display: inline-flex; align-items: center; gap: 11px; margin-top: 40px;
  padding: 12px 22px; border: 2px solid var(--oro); border-radius: 8px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro);
  animation: caeSello 16s cubic-bezier(.2, 1.3, .4, 1) infinite both;
}
@keyframes caeSello{
  0%, 74%   { opacity: 0; transform: scale(1.5) rotate(-7deg); }
  80%, 92%  { opacity: 1; transform: scale(1) rotate(-2deg); }
  97%, 100% { opacity: 0; transform: scale(1) rotate(-2deg); }
}

/* =========================================================================
   TESTIMONIO
   ========================================================================= */
.testimonio{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 52px; align-items: center; }
.testimonio blockquote{ font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; font-style: italic; }
.testimonio .firma{ display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.testimonio .ini{ width: 42px; height: 42px; border-radius: 50%; background: var(--oro); color: #fff;
                  display: flex; align-items: center; justify-content: center; font-size: .84rem; font-weight: 600; flex: none; }
.testimonio .quien{ font-size: .9rem; font-weight: 600; }
.testimonio .donde{ font-size: .82rem; color: var(--verde-suave); }
.testimonio .cifra-caso{ text-align: right; }
.testimonio .cifra-caso .k{ font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); color: var(--oro); line-height: 1; }
.testimonio .cifra-caso .d{ font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-suave); margin-top: 6px; }

/* =========================================================================
   QUÉ SE CANCELA Y QUÉ NO
   ========================================================================= */
.dos-listas{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; }
.dos-listas > div{ padding: 30px 30px 34px; }
.dos-listas > div + div{ border-left: 1px solid var(--linea); }
.dos-listas h3{ font-size: 1.15rem; display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.dos-listas .si h3{ color: #1a6b3c; }
.dos-listas .no h3{ color: #8d3b34; }
.dos-listas ul{ list-style: none; }
.dos-listas li{ padding: 9px 0; border-bottom: 1px solid var(--crema-2); font-size: .94rem; color: var(--verde-2); }
.dos-listas li:last-child{ border-bottom: none; }
.nota-hacienda{ margin-top: 20px; padding: 15px 18px; background: var(--crema); border-left: 3px solid var(--oro);
                font-size: .9rem; color: var(--verde-2); border-radius: 0 8px 8px 0; }

/* =========================================================================
   POR QUÉ DSO
   ========================================================================= */
.valores{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--linea-oscura); }
.valores > div{ padding: 30px 26px 0 0; }
.valores > div + div{ border-left: 1px solid var(--linea-oscura); padding-left: 26px; }
.valores h3{ font-size: 1.15rem; margin-bottom: .5rem; }
.valores p{ font-size: .9rem; line-height: 1.68; }
.cita-equipo{ margin-top: 52px; padding-top: 34px; border-top: 1px solid var(--linea-oscura); display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; }
.cita-equipo .comilla{ font-family: var(--serif); font-size: 4.5rem; line-height: .7; color: var(--oro-sobre-verde); }
.cita-equipo blockquote{ font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.45; font-style: italic; color: #fff; }
.cita-equipo .autor{ font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oro-sobre-verde); margin-top: 14px; }

/* =========================================================================
   CIERRE
   ========================================================================= */
.cierre{ text-align: center; }
.cierre h2{ font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; margin: 0 auto 1.2rem; }
.cierre .lede{ margin: 0 auto 2rem; text-align: center; }
.cierre .acciones{ display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cierre .garantias{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 20px; font-size: .78rem; color: var(--verde-suave); }
.seccion.verde .cierre .garantias{ color: var(--sobre-verde-soft); }

/* =========================================================================
   BLOG
   ========================================================================= */
.lp-art-grid, .blog-grid{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; scrollbar-width: thin;
}
.blog-grid > article{ scroll-snap-align: start; background: #fff; border: 1px solid var(--linea);
                      border-radius: var(--radio); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 9px;
                      transition: border-color .25s, transform .25s; }
.blog-grid > article:hover{ border-color: var(--oro); transform: translateY(-2px); }
.blog-grid .cat{ font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.blog-grid h3{ font-size: 1.16rem; line-height: 1.28; }
.blog-grid p{ font-size: .89rem; color: var(--verde-suave); line-height: 1.62; flex: 1; }
.blog-grid .leer{ font-size: .84rem; font-weight: 600; color: var(--verde); display: inline-flex; align-items: center; gap: 6px; }
.blog-grid > article:hover .leer{ color: var(--oro); }
.carrusel-btns{ display: flex; gap: 9px; justify-content: flex-end; margin-bottom: 16px; }
.carrusel-btns button{ width: 38px; height: 38px; border: 1px solid var(--linea); background: #fff; border-radius: 50%;
                       cursor: pointer; color: var(--verde); display: flex; align-items: center; justify-content: center; transition: .2s; }
.carrusel-btns button:hover{ border-color: var(--oro); color: var(--oro); }

/* =========================================================================
   PIE
   ========================================================================= */
.footer{ background: var(--verde-hondo); color: var(--sobre-verde-soft); padding-top: 54px; }
.footer-cols{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; padding-bottom: 40px; }
.footer h4{ font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em;
            text-transform: uppercase; color: var(--oro-sobre-verde); margin-bottom: 14px; }
.footer a{ color: var(--sobre-verde-soft); }
.footer a:hover{ color: var(--oro-sobre-verde); }
.footer .footer-tag{ font-size: .9rem; line-height: 1.7; max-width: 42ch; margin-top: 14px; }
.footer ul{ list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: .9rem; }
.footer-bot{ border-top: 1px solid var(--linea-oscura); padding: 18px 0 26px; font-size: .78rem;
             display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer .logo .marca-txt{ color: #fff; }
/* El logotipo trae fondo claro incrustado, así que sobre el verde va en su
   propia chapa: es eso o recortarlo, y recortar el logo de un cliente no. */
.footer .logo img{ background: var(--crema); padding: 7px 12px; border-radius: 8px; }

/* =========================================================================
   VÍAS DE CONTACTO FLOTANTES
   Antes había dos elementos flotando en esquinas opuestas y compitiendo
   entre sí. Ahora van juntos, en una sola columna: se leen como una sola
   oferta de ayuda y no como dos anuncios.
   ========================================================================= */
.flotantes{ position: fixed; right: 18px; bottom: 18px; z-index: 95; display: flex; flex-direction: column; gap: 11px; align-items: flex-end; }
.flotantes .burbuja{
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(11,26,26,.28); transition: transform .2s;
}
.flotantes .burbuja:hover{ transform: translateY(-2px); }
.flotantes .wa{ background: #25d366; color: #fff; }
.flotantes .alejandro{ background: var(--verde); color: #fff; border: 1px solid var(--oro); }
.flotantes .etiqueta{
  position: absolute; right: 66px; white-space: nowrap; background: var(--verde-hondo); color: #fff;
  font-size: .74rem; padding: 7px 12px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.flotantes .burbuja{ position: relative; }
.flotantes .burbuja:hover .etiqueta{ opacity: 1; }

/* =========================================================================
   BANNER DE COOKIES
   ========================================================================= */
.ck-banner{
  position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 200; max-width: 780px; margin: 0 auto;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 20px 50px rgba(11,26,26,.22); padding: 20px 24px;
  display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  transform: translateY(190%); transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.ck-banner.show{ transform: none; }
.ck-banner p{ font-size: .84rem; color: var(--verde-suave); flex: 1; min-width: 240px; line-height: 1.6; }
.ck-banner a{ color: var(--oro); border-bottom: 1px solid currentColor; }
.ck-acciones{ display: flex; gap: 10px; flex-shrink: 0; }
.ck-btn{ font-family: var(--sans); font-size: .82rem; font-weight: 600; cursor: pointer;
         padding: 11px 20px; border-radius: 9px; border: 1px solid var(--verde); background: var(--verde); color: #fff; transition: .2s; }
.ck-btn:hover{ background: var(--verde-hondo); }
.ck-btn.ghost{ background: none; color: var(--verde-suave); border-color: var(--linea); }
.ck-btn.ghost:hover{ color: var(--verde); border-color: var(--verde); background: none; }

/* =========================================================================
   ACCESIBILIDAD
   ========================================================================= */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline: 2px solid var(--oro); outline-offset: 3px;
}
.solo-lectores{ 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: -9999px; top: 0; z-index: 300; background: var(--verde); color: #fff; padding: 12px 18px; }
.saltar:focus{ left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .fases::after{ animation: none; transform: scaleX(1); }
  .fase .bolo{ animation: none; border-color: var(--oro); color: var(--oro); }
  .sello-exonerado{ animation: none; opacity: 1; transform: none; }
  .btn-primary:hover, .btn-accent:hover, .lp-btn:hover{ transform: none; }
  .blog-grid > article:hover{ transform: none; }
  .ck-banner{ animation: none !important; transition: none !important; }
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1020px){
  :root{ --pad: 24px; }
  .hero .wrap{ grid-template-columns: 1fr; gap: 34px; padding-top: 38px; padding-bottom: 42px; }
  .hero h1{ max-width: 16ch; }
  .banda-vivo .wrap{ grid-template-columns: 1fr 1fr; gap: 26px; }
  .banda-vivo .live-counter{ grid-column: 1 / -1; }
  .banda-vivo .cifra{ border-left: none; padding-left: 0; border-top: 1px solid var(--linea-oscura); padding-top: 18px; }
  .definiciones{ grid-template-columns: 1fr; }
  .definiciones > div + div{ border-left: none; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 30px; }
  .fases{ grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .fases::before, .fases::after{ display: none; }
  .valores{ grid-template-columns: 1fr 1fr; }
  .valores > div:nth-child(3){ border-left: none; padding-left: 0; }
  .valores > div:nth-child(n+3){ border-top: 1px solid var(--linea-oscura); padding-top: 28px; margin-top: 8px; }
  .testimonio{ grid-template-columns: 1fr; gap: 26px; }
  .testimonio .cifra-caso{ text-align: left; }
  .footer-cols{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  .seccion{ padding: 56px 0; }
  .nav-links{ display: none; }
  .menu-btn{ display: flex; }
  .nav-links.abierto{
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-bottom: 1px solid var(--linea); box-shadow: 0 14px 30px rgba(11,26,26,.10);
  }
  .nav-links.abierto a{ padding: 15px var(--pad); border-bottom: 1px solid var(--linea); }
  .site-header{ position: sticky; }
  .navbar{ position: relative; }

  /* En el móvil manda el formulario: todo lo de arriba se aprieta para que
     el primer campo entre en pantalla sin tener que desplazarse. Cada línea
     que se ahorra aquí es un formulario más que se ve. */
  .hero .wrap{ padding-top: 26px; padding-bottom: 34px; gap: 24px; }
  .hero h1{ font-size: clamp(1.85rem, 8vw, 2.15rem); max-width: 17ch; line-height: 1.1; }
  .hero .lede{ font-size: .92rem; line-height: 1.6; margin-top: .75rem; }
  .hero .volanta{ margin-bottom: .8rem; font-size: .66rem; }
  .trust-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 16px; }
  .trust-row .dato{ font-size: .78rem; gap: 7px; }
  .trust-row .dato:last-child{ grid-column: 1 / -1; }
  .form-card{ padding: 20px 16px 18px; }
  .form-card h2{ font-size: 1.3rem; }
  .form-card .sub{ font-size: .84rem; margin-bottom: 1rem; }
  .form-field{ margin-bottom: 11px; }

  .situaciones{ grid-template-columns: 1fr; gap: 0; }
  .fases{ grid-template-columns: 1fr; row-gap: 26px; }
  .fase, .fase + .fase{ padding: 0; }
  .fase .bolo{ width: 46px; height: 46px; font-size: 1.15rem; margin-bottom: 12px; }
  .dos-listas{ grid-template-columns: 1fr; }
  .dos-listas > div + div{ border-left: none; border-top: 1px solid var(--linea); }
  .valores{ grid-template-columns: 1fr; }
  .valores > div, .valores > div + div{ padding: 26px 0 0; border-left: none; }
  .valores > div + div{ border-top: 1px solid var(--linea-oscura); }
  .cita-equipo{ grid-template-columns: 1fr; gap: 10px; }
  .sellos-grid{ grid-template-columns: 1fr 1fr; }
  .sello:nth-child(3){ border-left: none; }
  .sello:nth-child(n+3){ border-top: 1px solid var(--linea); padding-top: 18px; margin-top: 10px; }
  .footer-cols{ grid-template-columns: 1fr; gap: 30px; }
  .ck-banner{ left: 10px; right: 10px; bottom: 10px; flex-direction: column; align-items: stretch; }
  .ck-acciones{ justify-content: flex-end; }
  .flotantes{ right: 12px; bottom: 12px; }
}

/* =========================================================================
   EL TEST DE VIABILIDAD, YA DENTRO DE LA PÁGINA
   ========================================================================= */
.test-caja{
  max-width: 560px; margin: 0 auto; background: #fff;
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 30px 30px 28px; box-shadow: 0 16px 44px rgba(11,26,26,.07);
}
.test-barra{ height: 4px; background: var(--crema-2); border-radius: 3px; overflow: hidden; margin-bottom: 22px; }
.test-barra span{ display: block; height: 100%; background: var(--oro); transition: width .35s cubic-bezier(.4,0,.2,1); }
.test-paso{ font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-suave); margin-bottom: 10px; }
.test-q{ font-size: 1.4rem; line-height: 1.25; margin-bottom: 20px; }
.test-opts{ display: flex; flex-direction: column; gap: 9px; }
.test-opt{
  width: 100%; text-align: left; padding: 15px 17px; background: #fff;
  border: 1.5px solid var(--linea); border-radius: 10px;
  font-family: var(--sans); font-size: .96rem; font-weight: 500; color: var(--verde);
  cursor: pointer; transition: border-color .16s, background .16s, transform .16s;
}
.test-opt:hover{ border-color: var(--oro); background: var(--crema); transform: translateX(3px); }

.test-resultado{ text-align: center; }
.test-aro{
  width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--oro); background: var(--crema);
}
.test-aro .pct{ font-family: var(--serif); font-size: 2.3rem; line-height: 1; color: var(--verde); }
.test-aro .lbl{ font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-suave); margin-top: 5px; }
.test-resultado h3{ font-size: 1.6rem; margin-bottom: .5rem; }
.test-resultado > p{ font-size: .95rem; line-height: 1.62; color: var(--verde-suave); margin-bottom: 22px; }
.test-resultado form{ text-align: left; }
.test-nota{ font-size: .76rem; color: var(--verde-suave); margin-top: 14px; }

@media (max-width: 720px){
  .test-caja{ padding: 22px 18px 20px; }
  .test-q{ font-size: 1.2rem; }
}


/* =========================================================================
   LANDINGS DE INTENCIÓN · lo que ya tenían
   Estas cuatro páginas viven de campañas de pago y funcionan. Su hoja
   original se conserva entera y acotada a .lf, para no tocar ni un píxel de
   lo que ya convierte. Debajo solo se pone al día su voz tipográfica, para
   que no canten con la portada nueva.
   ========================================================================= */

    .lf *{box-sizing:border-box}
    .lf{font-family:'Inter',system-ui,sans-serif;color:#1f3636;background:#ffffff;min-height:100%;width:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased}

    .lf .topbar{background:#1f3636;color:#fff;font-size:11px;padding:9px 18px;display:flex;justify-content:space-between;align-items:center}
    .lf .topbar .tb-left{display:flex;gap:6px;align-items:center;opacity:.85;font-weight:500}
    .lf .topbar .tb-right{display:flex;gap:14px;align-items:center}
    .lf .topbar a{color:#fff;text-decoration:none;display:flex;gap:5px;align-items:center;font-weight:600}
    .lf .topbar .wa{color:#25D366}

    .lf .navbar{background:rgba(255,255,255,.85);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dfdcd4;position:sticky;top:0;z-index:5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
    .lf .logo{font-weight:800;font-size:17px;letter-spacing:-0.03em;color:#1f3636;display:flex;align-items:center;gap:9px}
    .lf .logo-mark{width:30px;height:30px;border-radius:9px;background:#1f3636;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:-0.04em;position:relative;overflow:hidden}
    .lf .logo-mark::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#3c5050 0%,#b08d57 100%);opacity:.9}
    .lf .logo-mark span{position:relative;z-index:1}
    .lf .nav-cta{padding:7px 12px;background:#1f3636;color:#fff;border-radius:8px;font-size:12px;font-weight:600;border:none}

    .lf .hero{padding:32px 18px 24px;background:#ffffff;position:relative;overflow:hidden}
    .lf .hero::before{content:'';position:absolute;top:-20%;right:-40%;width:100%;height:90%;background:radial-gradient(ellipse,#eef2f0 0%,transparent 65%);pointer-events:none;z-index:0}
    .lf .hero::after{content:'';position:absolute;bottom:-40%;left:-40%;width:90%;height:70%;background:radial-gradient(circle,#b08d5714 0%,transparent 60%);pointer-events:none;z-index:0}
    .lf .hero > *{position:relative;z-index:1}

    .lf .badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:#fff;color:#1f3636;border:1px solid #dfdcd4;border-radius:100px;font-size:11.5px;font-weight:600;margin-bottom:20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
    .lf .badge .dot{width:6px;height:6px;background:#22c55e;border-radius:50%;box-shadow:0 0 8px #22c55e;animation:pulse 1.8s ease-in-out infinite}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

    .lf h1{font-size:40px;line-height:1.02;letter-spacing:-0.04em;margin:0 0 14px;color:#1f3636;font-weight:800}
    .lf h1 .hl{background:linear-gradient(100deg,#3c5050 0%,#b08d57 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:italic;font-weight:800}
    .lf .sub{font-size:16.5px;line-height:1.5;color:#5f7070;margin-bottom:20px;max-width:560px;font-weight:450}
    .lf .sub b{color:#1f3636;font-weight:600}

    .lf .social-row{display:flex;align-items:center;gap:12px;margin-bottom:22px;padding:12px 14px;background:#fff;border:1px solid #dfdcd4;border-radius:12px}
    .lf .avatars{display:flex}
    .lf .avatar{width:30px;height:30px;border-radius:50%;border:2px solid #fff;font-size:11px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;margin-left:-8px}
    .lf .avatar:first-child{margin-left:0}
    .lf .social-txt{flex:1;font-size:12px;line-height:1.35;color:#5f7070}
    .lf .social-txt strong{color:#1f3636;font-weight:700;display:block}
    .lf .social-txt .stars{color:#f59e0b;font-size:10px;letter-spacing:1px}

    .lf .form-card{background:#fff;border:1px solid #dfdcd4;padding:22px;border-radius:20px;position:relative;box-shadow:0 1px 2px rgba(16,24,40,.04),0 20px 48px -12px rgba(16,24,40,.12)}
    .lf .form-card::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,#3c5050,transparent)}
    .lf .form-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
    .lf .form-head .ico{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#3c5050 0%,#b08d57 100%);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px #eef2f0}
    .lf .form-head h3{margin:0;font-size:16px;font-weight:800;color:#1f3636;letter-spacing:-0.015em}
    .lf .form-head p{margin:2px 0 0;font-size:12px;color:#5f7070;font-weight:500}
    .lf .form-field{margin-bottom:10px}
    .lf .form-field label{display:block;font-size:11px;font-weight:700;color:#5f7070;margin-bottom:6px;letter-spacing:.05em;text-transform:uppercase}
    .lf input,.lf select{width:100%;padding:13px 14px;border:1.5px solid #dfdcd4;background:#fff;border-radius:10px;font-size:14px;font-family:inherit;color:#1f3636;outline:none;transition:all .15s;font-weight:500}
    .lf input:focus,.lf select:focus{border-color:#3c5050;box-shadow:0 0 0 4px #eef2f0}
    .lf .btn-primary{width:100%;padding:15px;background:#1f3636;color:#fff;border:none;border-radius:11px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;transition:all .15s;position:relative;overflow:hidden}
    .lf .btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#3c5050 0%,#b08d57 100%);opacity:0;transition:opacity .2s}
    .lf .btn-primary:hover::before{opacity:1}
    .lf .btn-primary span{position:relative;z-index:1;display:flex;align-items:center;gap:8px}
    .lf .btn-accent{background:linear-gradient(100deg,#3c5050 0%,#b08d57 100%);color:#fff;box-shadow:0 8px 24px -8px #3c5050}
    .lf .trust-row{display:flex;gap:10px;margin-top:12px;font-size:10.5px;color:#5f7070;justify-content:center;align-items:center;flex-wrap:wrap;font-weight:500}
    .lf .trust-row span{display:inline-flex;gap:4px;align-items:center}
    .lf .trust-row .sep{opacity:.35}

    .lf .live-counter{background:#1f3636;color:#fff;padding:32px 20px;margin:0;position:relative;overflow:hidden}
    .lf .live-counter::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#3c5050 50%,transparent)}
    .lf .live-counter::after{content:'';position:absolute;top:-40%;right:-30%;width:80%;height:140%;background:radial-gradient(ellipse,#3c505022 0%,transparent 55%);pointer-events:none}
    .lf .counter-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;position:relative}
    .lf .lbl-live{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.85;font-weight:700}
    .lf .dot-live{width:7px;height:7px;background:#22c55e;border-radius:50%;box-shadow:0 0 10px #22c55e;animation:pulse 1.6s infinite}
    .lf .counter-head .tag{font-size:10px;padding:3px 8px;background:rgba(255,255,255,.1);border-radius:6px;opacity:.7;font-weight:600}
    .lf .live-counter .num{font-size:52px;font-weight:800;letter-spacing:-0.05em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:8px;position:relative}
    .lf .live-counter .num .eur{background:linear-gradient(135deg,#3c5050 0%,#b08d57 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .lf .live-counter .caption{font-size:13.5px;opacity:.72;line-height:1.5;position:relative;max-width:320px}
    .lf .splits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);position:relative}
    .lf .split .n{font-size:22px;font-weight:800;letter-spacing:-0.025em;color:#fff}
    .lf .split .n em{font-style:normal;color:#3c5050;font-size:14px;margin-left:2px}
    .lf .split .l{font-size:10.5px;opacity:.65;margin-top:3px;font-weight:500;line-height:1.3}

    .lf .sellos{padding:28px 18px;background:#ffffff}
    .lf .sellos-title{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#5f7070;text-align:center;margin-bottom:16px;font-weight:700}
    .lf .sellos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .lf .sello{background:#fff;border:1px solid #dfdcd4;padding:13px;border-radius:14px;display:flex;gap:11px;align-items:center;transition:all .15s}
    .lf .sello:hover{border-color:#3c505040;box-shadow:0 4px 16px rgba(16,24,40,.06)}
    .lf .sello .ic{width:38px;height:38px;border-radius:10px;background:#f6f4f0;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;color:#1f3636;flex-shrink:0;letter-spacing:-0.02em}
    .lf .sello .ic.gold{background:#fef3c7;color:#a16207}
    .lf .sello .tx strong{display:block;font-size:12.5px;font-weight:700;color:#1f3636;letter-spacing:-0.01em}
    .lf .sello .tx span{font-size:11px;color:#5f7070;display:block;margin-top:1px}

    .lf section{padding:54px 18px}
    .lf .sec-kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:#eef2f0;color:#3c5050;border-radius:100px;font-size:11px;font-weight:700;margin-bottom:14px;letter-spacing:.02em}
    .lf .sec-title{font-size:30px;line-height:1.08;letter-spacing:-0.035em;font-weight:800;color:#1f3636;margin:0 0 14px}
    .lf .sec-title em{font-style:italic;background:linear-gradient(100deg,#3c5050 0%,#b08d57 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .lf .sec-lede{font-size:15.5px;line-height:1.55;color:#5f7070;margin-bottom:28px;font-weight:450}

    .lf .lso-grid{display:grid;gap:10px}
    .lf .lso-card{background:#fff;border:1px solid #dfdcd4;padding:20px;border-radius:16px;transition:all .2s;position:relative;overflow:hidden}
    .lf .lso-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:linear-gradient(180deg,#3c5050,#b08d57);transition:height .25s}
    .lf .lso-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(16,24,40,.1);border-color:#3c505030}
    .lf .lso-card:hover::before{height:100%}
    .lf .lso-card .ico{width:40px;height:40px;border-radius:11px;background:#eef2f0;color:#3c5050;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
    .lf .lso-card h4{font-size:16.5px;font-weight:800;margin:0 0 6px;color:#1f3636;letter-spacing:-0.02em}
    .lf .lso-card p{font-size:13.5px;line-height:1.55;color:#5f7070;margin:0;font-weight:450}

    .lf .reconoces{background:#1f3636;color:#fff;padding:56px 18px;position:relative;overflow:hidden}
    .lf .reconoces::before{content:'';position:absolute;top:-20%;right:-30%;width:80%;height:80%;background:radial-gradient(circle,#3c505025 0%,transparent 60%);pointer-events:none}
    .lf .reconoces::after{content:'';position:absolute;bottom:-30%;left:-20%;width:70%;height:70%;background:radial-gradient(circle,#b08d5720 0%,transparent 60%);pointer-events:none}
    .lf .reconoces .sec-kicker{background:rgba(255,255,255,.08);color:#3c5050;border:1px solid rgba(255,255,255,.1)}
    .lf .reconoces .sec-title{color:#fff;position:relative}
    .lf .reconoces .sec-title em{background:linear-gradient(100deg,#3c5050 0%,#b08d57 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .lf .reconoces-grid{display:grid;gap:10px;position:relative}
    .lf .reconoces-chip{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:15px 16px 15px 46px;border-radius:12px;font-size:14px;line-height:1.4;position:relative;font-weight:500;color:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
    .lf .reconoces-chip::before{content:'';position:absolute;left:14px;top:17px;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#3c5050 0%,#b08d57 100%)}
    .lf .reconoces-chip::after{content:'✓';position:absolute;left:18px;top:14px;color:#fff;font-size:11px;font-weight:800}
    .lf .reconoces-cta{margin-top:24px;background:linear-gradient(100deg,#3c5050 0%,#b08d57 100%);color:#fff;padding:16px;border:none;border-radius:12px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;position:relative;box-shadow:0 12px 32px -8px #3c5050}

    .lf .proceso-card{background:#fff;border:1px solid #dfdcd4;border-radius:16px;padding:20px;margin-bottom:10px;position:relative;overflow:hidden;transition:all .2s}
    .lf .proceso-card:hover{border-color:#3c505040;transform:translateX(2px)}
    .lf .proceso-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:8px}
    .lf .proceso-num{width:38px;height:38px;border-radius:11px;background:#f6f4f0;color:#1f3636;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0;letter-spacing:-0.02em;border:1px solid #dfdcd4}
    .lf .proceso-card.hl .proceso-num{background:linear-gradient(135deg,#3c5050 0%,#b08d57 100%);color:#fff;border:none;box-shadow:0 4px 12px -2px #3c5050}
    .lf .proceso-card h4{font-size:16px;font-weight:800;margin:0;color:#1f3636;letter-spacing:-0.02em}
    .lf .proceso-card .tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:#eef2f0;color:#3c5050;border-radius:100px;font-size:10.5px;font-weight:700;margin-top:5px;letter-spacing:.02em}
    .lf .proceso-card .tag.free{background:#dcfce7;color:#16a34a}
    .lf .proceso-card p{font-size:13.5px;line-height:1.55;color:#5f7070;margin:8px 0 0 51px;font-weight:450}

    .lf .testi{background:#f6f4f0;padding:48px 18px}
    .lf .testi-card{background:#fff;border:1px solid #dfdcd4;border-radius:18px;padding:22px;position:relative}
    .lf .testi-stars{color:#f59e0b;font-size:13px;letter-spacing:2px;margin-bottom:10px}
    .lf .testi-quote{font-size:15.5px;line-height:1.55;color:#1f3636;margin:0 0 16px;font-weight:500;letter-spacing:-0.005em}
    .lf .testi-meta{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid #dfdcd4}
    .lf .testi-avatar{width:40px;height:40px;border-radius:50%;font-weight:700;font-size:14px;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .lf .testi-name{font-size:13.5px;font-weight:700;color:#1f3636;letter-spacing:-0.01em}
    .lf .testi-sub{font-size:11.5px;color:#5f7070;margin-top:1px}
    .lf .testi-amount{margin-left:auto;text-align:right}
    .lf .testi-amount .a{font-size:17px;font-weight:800;color:#16a34a;letter-spacing:-0.02em;line-height:1}
    .lf .testi-amount .l{font-size:10px;color:#5f7070;margin-top:2px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}

    .lf .deudas-tabs{background:#fff;border:1px solid #dfdcd4;border-radius:16px;overflow:hidden}
    .lf .deudas-head{display:grid;grid-template-columns:1fr 1fr;background:#f6f4f0}
    .lf .deudas-tab{padding:15px 10px;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;color:#5f7070;letter-spacing:-0.01em}
    .lf .deudas-tab.si{color:#16a34a;background:#fff;border-bottom:2.5px solid #16a34a}
    .lf .deudas-tab.no{color:#dc2626;background:#fff;border-bottom:2.5px solid #dc2626}
    .lf .deudas-body{display:grid;grid-template-columns:1fr 1fr}
    .lf .deudas-col{padding:16px 14px;font-size:13px}
    .lf .deudas-col.bdr{border-right:1px solid #dfdcd4}
    .lf .deudas-col ul{list-style:none;padding:0;margin:0}
    .lf .deudas-col li{padding:7px 0;display:flex;gap:7px;align-items:flex-start;line-height:1.35;color:#1f3636;font-size:12.5px;font-weight:500}
    .lf .deudas-col li svg{flex-shrink:0;margin-top:2px}
    .lf .deudas-col.si li svg{color:#16a34a}
    .lf .deudas-col.no li svg{color:#dc2626}
    .lf .deudas-col.no li{color:#5f7070}
    .lf .limite{padding:13px 15px;font-size:11.5px;color:#5f7070;background:#f6f4f0;border-top:1px solid #dfdcd4;line-height:1.5;font-weight:500;display:flex;gap:8px;align-items:flex-start}
    .lf .limite svg{color:#3c5050;flex-shrink:0;margin-top:1px}

    .lf .test-cta{background:#1f3636;color:#fff;padding:50px 22px;text-align:center;position:relative;overflow:hidden}
    .lf .test-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#3c505030 0%,#b08d5725 100%);opacity:1;pointer-events:none}
    .lf .test-cta::after{content:'';position:absolute;top:-40%;right:-20%;width:80%;height:140%;background:radial-gradient(circle,#3c505040 0%,transparent 55%);pointer-events:none}
    .lf .test-cta > *{position:relative}
    .lf .test-cta .ic{width:58px;height:58px;background:rgba(255,255,255,.1);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15)}
    .lf .test-cta h3{font-size:28px;font-weight:800;letter-spacing:-0.035em;margin:0 0 10px;line-height:1.1}
    .lf .test-cta h3 em{font-style:italic;background:linear-gradient(100deg,#3c5050 0%,#b08d57 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
    .lf .test-cta p{font-size:14.5px;opacity:.85;margin:0 0 22px;line-height:1.55;font-weight:450;max-width:320px;margin-left:auto;margin-right:auto}
    .lf .test-cta button{background:#fff;color:#1f3636;padding:14px 24px;border:none;border-radius:12px;font-size:14.5px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 12px 32px rgba(0,0,0,.25);transition:transform .15s}
    .lf .test-cta button:hover{transform:translateY(-1px)}
    .lf .test-cta .meta{margin-top:14px;font-size:11.5px;opacity:.65;display:flex;justify-content:center;gap:14px;font-weight:500}
    .lf .test-cta .meta span{display:inline-flex;align-items:center;gap:4px}

    .lf .footer{background:#1f3636;color:#fff;padding:38px 20px 22px;border-top:1px solid rgba(255,255,255,.06)}
    .lf .footer .logo{color:#fff;margin-bottom:18px}
    .lf .footer-tag{font-size:13.5px;opacity:.7;margin-bottom:24px;line-height:1.55;max-width:340px;font-weight:450}
    .lf .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;margin-bottom:24px}
    .lf .footer-cols h5{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;margin:0 0 12px;font-weight:700}
    .lf .footer-cols ul{list-style:none;padding:0;margin:0}
    .lf .footer-cols li{padding:4px 0;font-size:13px;opacity:.8;font-weight:500}
    .lf .footer-bot{font-size:11px;opacity:.4;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);text-align:center;line-height:1.6;font-weight:450}

    
    /* ===== BLOG SECTION ===== */
    .lf .blog-section{padding:64px 20px;background:#f8f7f4}
    .lf .blog-section-head{text-align:center;margin-bottom:40px}
    .lf .blog-section-tag{display:inline-block;background:#c9a84c22;color:#c9a84c;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:4px;margin-bottom:14px}
    .lf .blog-section-head h2{font-size:clamp(24px,4vw,36px);font-weight:800;color:#1a2e1a;line-height:1.2;margin-bottom:12px}
    .lf .blog-section-head p{font-size:16px;color:#6b7280;max-width:560px;margin:0 auto}
    .lf .blog-carousel-wrap{position:relative;max-width:1400px;margin:0 auto}
    .lf .blog-carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 8px rgba(0,0,0,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;font-size:18px;color:#1a2e1a;transition:background .2s,box-shadow .2s;padding:0}
    .lf .blog-carousel-btn:hover{background:#1a2e1a;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2)}
    .lf .blog-carousel-btn.prev{left:-20px}
    .lf .blog-carousel-btn.next{right:-20px}
    .lf .blog-carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:20px}
    .lf .blog-dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb;border:none;cursor:pointer;padding:0;transition:background .2s,transform .2s}
    .lf .blog-dot.active{background:#c9a84c;transform:scale(1.3)}
    @media(max-width:767px){
      .lf .blog-carousel-btn{display:none}
      .lf .blog-card{flex:0 0 260px;min-width:260px}
    }
    @media(min-width:768px){
      .lf .blog-card{flex:0 0 300px;min-width:300px}
    }
    @media(min-width:1024px){
      .lf .blog-card{flex:0 0 320px;min-width:320px}
    }
    .lf .blog-grid{display:flex;flex-direction:row;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px;max-width:100%;margin:0 auto;scrollbar-width:thin;scrollbar-color:#c9a84c #e5e7eb}
    .lf .blog-grid::-webkit-scrollbar{height:5px}
    .lf .blog-grid::-webkit-scrollbar-track{background:#e5e7eb;border-radius:4px}
    .lf .blog-grid::-webkit-scrollbar-thumb{background:#c9a84c;border-radius:4px}
    .lf .blog-card{display:block;background:#fff;border-radius:12px;padding:24px;border:1px solid #e5e7eb;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s;flex:0 0 280px;scroll-snap-align:start;min-width:280px}
    .lf .blog-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px)}
    .lf .blog-card-tag{display:inline-block;background:#1a2e1a11;color:#1a2e1a;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-bottom:10px}
    .lf .blog-card-title{font-size:16px;font-weight:700;color:#1a2e1a;line-height:1.35;margin-bottom:10px}
    .lf .blog-card-excerpt{font-size:13px;color:#6b7280;line-height:1.6;margin-bottom:14px}
    .lf .blog-card-link{font-size:13px;font-weight:600;color:#c9a84c}
    
    
    @media(min-width:768px){
      .lf .blog-section{padding:80px 40px}
      .lf .blog-card-title{font-size:17px}
    }
    @media(min-width:1280px){.lf .blog-section{padding:96px 120px}}

    .lf .whatsapp-float{position:absolute;right:14px;bottom:14px;width:56px;height:56px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.45),0 4px 12px rgba(37,211,102,.3);cursor:pointer;border:none;z-index:4}
    .lf .whatsapp-float::before{content:'';position:absolute;inset:-4px;border-radius:50%;background:#25D366;opacity:.35;animation:ring 2s infinite;z-index:-1}
    @keyframes ring{0%{transform:scale(1);opacity:.35}100%{transform:scale(1.4);opacity:0}}
  
    /* ============================================================
       RESPONSIVE — Tablet (768px+), Desktop (1024px+), Wide (1280px+)
       ============================================================ */

    /* ---------- TABLET (768px+) ---------- */
    @media (min-width: 768px) {
      .lf .topbar { padding: 9px 40px; font-size: 12px; }
      .lf .navbar { padding: 16px 40px; }
      .lf .logo { font-size: 19px; }

      .lf .hero {
        padding: 56px 40px 48px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 48px;
        align-items: start;
      }
      .lf .hero .badge { grid-column: 1; }
      .lf .hero h1 { grid-column: 1; font-size: 48px; }
      .lf .hero .sub { grid-column: 1; font-size: 17px; max-width: 100%; }
      .lf .hero .social-row { grid-column: 1; }
      .lf .hero .form-card {
        grid-column: 2;
        grid-row: 1 / span 5;
        margin-top: 0;
        position: sticky;
        top: 80px;
      }

      .lf .live-counter { padding: 40px 40px; }
      .lf .live-counter .num { font-size: 60px; }
      .lf .splits { grid-template-columns: repeat(3, 1fr); gap: 24px; }

      .lf .sellos { padding: 36px 40px; }
      .lf .sellos-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }

      .lf section { padding: 72px 40px; }
      .lf .sec-title { font-size: 36px; }
      .lf .sec-lede { font-size: 16px; max-width: 600px; }

      .lf .lso-grid { grid-template-columns: repeat(3, 1fr); }
      .lf .reconoces-grid { grid-template-columns: 1fr 1fr; }
      .lf .deudas-tabs { max-width: 600px; }

      .lf .test-cta { padding: 72px 40px; }
      .lf .test-cta h3 { font-size: 34px; }
      .lf .test-cta p { max-width: 480px; }

      .lf .footer { padding: 56px 40px 28px; }
      .lf .footer-cols { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
      .lf .whatsapp-float { right: 28px; bottom: 28px; width: 60px; height: 60px; }
    }

    /* ---------- DESKTOP (1024px+) ---------- */
    @media (min-width: 1024px) {
      .lf .topbar { padding: 9px 80px; }
      .lf .navbar { padding: 16px 80px; }
      .lf .hero { padding: 72px 80px 56px; gap: 0 64px; }
      .lf .hero h1 { font-size: 60px; }
      .lf .hero .sub { font-size: 18px; }

      .lf .live-counter { padding: 48px 80px; }
      .lf .live-counter .num { font-size: 68px; }
      .lf .splits { gap: 32px; }
      .lf .split .n { font-size: 26px; }

      .lf .sellos { padding: 44px 80px; }
      .lf section { padding: 88px 80px; }
      .lf .sec-title { font-size: 44px; }
      .lf .sec-lede { font-size: 17px; max-width: 680px; }
      .lf .lso-grid { gap: 16px; }
      .lf .lso-card { padding: 26px; }
      .lf .reconoces-grid { grid-template-columns: 1fr 1fr 1fr; }
      .lf .deudas-tabs { max-width: 720px; }

      .lf .test-cta { padding: 88px 80px; }
      .lf .test-cta h3 { font-size: 42px; }
      .lf .footer { padding: 72px 80px 32px; }
      .lf .footer-cols { grid-template-columns: 2fr 1fr 1fr; }
    }

    /* ---------- WIDE DESKTOP (1280px+) ---------- */
    @media (min-width: 1280px) {
      .lf .topbar { padding: 9px 120px; }
      .lf .navbar { padding: 18px 120px; }
      .lf .hero { padding: 88px 120px 72px; }
      .lf .live-counter { padding: 56px 120px; }
      .lf section { padding: 104px 120px; }
      .lf .sellos { padding: 52px 120px; }
      .lf .footer { padding: 80px 120px 36px; }
      .lf .hero h1 { font-size: 68px; }
      .lf .sec-title { font-size: 50px; }
      .lf .live-counter .num { font-size: 76px; }
    }

    /* ============================================================
       MEJORAS TIPOGRÁFICAS Y DE ENCUADRE
       ============================================================ */

    /* Escala tipográfica base consistente */
    .lf h1 { font-size: 42px; line-height: 1.04; letter-spacing: -0.04em; }
    .lf h2, .lf .sec-title { font-size: 32px; line-height: 1.1; letter-spacing: -0.035em; }
    .lf h3 { font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; }
    .lf h4 { font-size: 15px; line-height: 1.35; letter-spacing: -0.01em; }
    .lf p, .lf .sub { font-size: 15px; line-height: 1.6; }
    .lf .sec-lede { font-size: 15px; line-height: 1.65; max-width: 520px; }

    /* Formulario sin cabecera: padding superior compensado */
    .lf .form-card { padding: 22px; }
    .lf .form-field label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
    .lf .form-field input,
    .lf .form-field select { font-size: 14px; }

    /* Navbar: logo bien centrado verticalmente */
    .lf .navbar { align-items: center; }
    .lf .logo { display: flex; align-items: center; }

    /* Topbar: texto más legible */
    .lf .topbar { font-size: 11px; letter-spacing: 0.02em; }

    /* Secciones: consistencia de kicker */
    .lf .sec-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }

    /* Cards: padding consistente */
    .lf .lso-card { padding: 20px; }
    .lf .sello { padding: 14px 12px; }
    .lf .proceso-card { padding: 20px; }
    .lf .testi-card { padding: 22px; }

    /* Botones: tamaño consistente */
    .lf .btn-primary { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
    .lf .nav-cta { font-size: 13px; font-weight: 700; }

    /* Footer: texto más legible */
    .lf .footer { font-size: 13px; line-height: 1.7; }
    .lf .footer h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }

    /* ============================================================
       CORRECCIÓN SELLOS — Respaldo institucional
       ============================================================ */

    /* Base móvil: 2 columnas que ocupan todo el ancho */
    .lf .sellos {
      padding: 32px 18px;
    }
    .lf .sellos-title {
      text-align: center;
      margin-bottom: 20px;
      font-size: 11px;
      letter-spacing: 0.18em;
    }
    .lf .sellos-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
    }
    .lf .sello {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 14px;
      border-radius: 10px;
      width: 100%;
      box-sizing: border-box;
    }
    .lf .sello .ic {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
    }
    .lf .sello .tx strong {
      font-size: 13px;
    }
    .lf .sello .tx span {
      font-size: 11.5px;
    }

    /* Tablet (768px+): 4 columnas, ancho completo */
    @media (min-width: 768px) {
      .lf .sellos {
        padding: 40px 40px !important;
      }
      .lf .sellos-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
      }
      .lf .sello {
        padding: 18px 16px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .lf .sello .ic {
        width: 44px;
        height: 44px;
      }
      .lf .sello .tx strong {
        font-size: 14px;
      }
      .lf .sello .tx span {
        font-size: 12px;
      }
    }

    /* Desktop (1024px+) */
    @media (min-width: 1024px) {
      .lf .sellos {
        padding: 48px 80px !important;
      }
      .lf .sellos-grid {
        gap: 20px !important;
      }
      .lf .sello {
        padding: 22px 20px !important;
      }
      .lf .sello .ic {
        width: 48px;
        height: 48px;
      }
      .lf .sello .tx strong {
        font-size: 15px;
      }
      .lf .sello .tx span {
        font-size: 12.5px;
      }
    }

    /* Wide (1280px+) */
    @media (min-width: 1280px) {
      .lf .sellos {
        padding: 56px 120px !important;
      }
      .lf .sellos-grid {
        gap: 24px !important;
      }
      .lf .sello {
        padding: 24px 22px !important;
      }
    }

    /* ============================================================
       WHATSAPP FLOTANTE FIJO — siempre visible en scroll
       ============================================================ */

    /* El botón ya existe en el JSX con clase .whatsapp-float.
       Solo necesitamos cambiar position:absolute → fixed y
       asegurarnos de que el z-index sea alto. */
    .lf .whatsapp-float {
      position: fixed !important;
      right: 18px !important;
      bottom: 18px !important;
      z-index: 9999 !important;
      width: 56px !important;
      height: 56px !important;
    }

    @media (min-width: 768px) {
      .lf .whatsapp-float {
        right: 24px !important;
        bottom: 24px !important;
        width: 60px !important;
        height: 60px !important;
      }
    }

    @media (min-width: 1024px) {
      .lf .whatsapp-float {
        right: 32px !important;
        bottom: 32px !important;
        width: 64px !important;
        height: 64px !important;
      }
    }

    /* ============================================================
       HEADER FIJO (STICKY) — topbar + navbar siempre visibles
       ============================================================ */

    .lf .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

    /* Navbar: logo más grande y fondo sólido (no translúcido) al estar sticky */
    .lf .navbar {
      background: rgba(255,255,255,0.97) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 12px 18px !important;
    }

    /* Logo más grande en navbar */
    .lf .logo img {
      height: 48px !important;
      width: auto !important;
    }

    /* Compensar el espacio del header fijo para que el hero no quede tapado */
    .lf .hero {
      padding-top: 48px;
    }

    /* Botón Contactar más visible */
    .lf .nav-cta {
      font-size: 13px !important;
      font-weight: 700 !important;
      padding: 9px 20px !important;
    }

    /* Tablet y desktop: logo aún más grande */
    @media (min-width: 768px) {
      .lf .logo img {
        height: 54px !important;
      }
      .lf .navbar {
        padding: 14px 40px !important;
      }
      .lf .hero {
        padding-top: 40px;
      }
    }

    @media (min-width: 1024px) {
      .lf .logo img {
        height: 58px !important;
      }
      .lf .navbar {
        padding: 14px 80px !important;
      }
    }

    @media (min-width: 1280px) {
      .lf .logo img {
        height: 62px !important;
      }
      .lf .navbar {
        padding: 16px 120px !important;
      }
    }

    /* ============================================================
       HEADER FIJO — position:fixed (sticky no funciona con overflow:auto en .lf)
       ============================================================ */

    /* El .lf tiene overflow:auto, así que usamos fixed en lugar de sticky */
    .lf .site-header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 1000 !important;
      box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important;
    }

    /* Compensar la altura del header fijo:
       topbar ~34px + navbar ~68px = ~102px */
    .lf {
      padding-top: 102px !important;
    }

    /* Navbar con fondo sólido y blur */
    .lf .navbar {
      background: rgba(255,255,255,0.97) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Logo más grande */
    .lf .logo img {
      height: 48px !important;
      width: auto !important;
    }

    /* Tablet */
    @media (min-width: 768px) {
      .lf .logo img {
        height: 54px !important;
      }
      .lf {
        padding-top: 108px !important;
      }
    }

    /* Desktop */
    @media (min-width: 1024px) {
      .lf .logo img {
        height: 58px !important;
      }
      .lf {
        padding-top: 112px !important;
      }
    }

    /* Wide */
    @media (min-width: 1280px) {
      .lf .logo img {
        height: 62px !important;
      }
    }

    /* ============================================================
       FOTOGRAFÍAS — separadores y secciones
       ============================================================ */

    /* --- SEPARADORES PANORÁMICOS --- */
    .lf .photo-divider {
      width: 100%;
      height: 220px;
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      position: relative;
      overflow: hidden;
    }
    .lf .photo-divider::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(15, 35, 30, 0.45);
    }
    @media (min-width: 768px) {
      .lf .photo-divider { height: 280px; }
    }
    @media (min-width: 1024px) {
      .lf .photo-divider { height: 320px; }
    }

    /* Separadores específicos */
    .lf .pd-urbana1 {
      background-image: image-set(url('img/c185b409f5-1400.webp') type('image/webp'), url('img/c185b409f5-1400.jpg') type('image/jpeg'));
    }
    .lf .pd-urbana2 {
      background-image: image-set(url('img/c5429d357b-1400.webp') type('image/webp'), url('img/c5429d357b-1400.jpg') type('image/jpeg'));
      background-attachment: scroll;
    }
    .lf .pd-urbana3 {
      background-image: image-set(url('img/537a365eaf-1400.webp') type('image/webp'), url('img/537a365eaf-1400.jpg') type('image/jpeg'));
    }
    .lf .pd-urbana4 {
      background-image: image-set(url('img/e52aa8eb68-1400.webp') type('image/webp'), url('img/e52aa8eb68-1400.jpg') type('image/jpeg'));
      background-attachment: scroll;
    }

    /* --- FOTO HERO (consulta abogado+cliente) --- */
    .lf .hero-photo-wrap {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      margin-top: 24px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    }
    .lf .hero-photo-wrap img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
    }
    @media (min-width: 768px) {
      .lf .hero-photo-wrap {
        margin-top: 0;
        height: 100%;
        min-height: 360px;
      }
      .lf .hero-photo-wrap img {
        height: 100%;
        object-fit: cover;
      }
    }

    /* --- FOTO ALEJANDRO EN JUZGADO (sección "Por qué DSO") --- */
    .lf .alejandro-wrap {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 16px 48px rgba(0,0,0,0.15);
      margin-bottom: 32px;
    }
    .lf .alejandro-wrap img {
      width: 100%;
      max-height: 420px;
      object-fit: cover;
      object-position: top;
      display: block;
    }
    @media (min-width: 768px) {
      .lf .alejandro-wrap {
        float: right;
        width: 280px;
        margin: 0 0 24px 32px;
      }
      .lf .alejandro-wrap img {
        max-height: 380px;
      }
    }
    @media (min-width: 1024px) {
      .lf .alejandro-wrap {
        width: 320px;
        margin: 0 0 24px 40px;
      }
    }
.lf .hero-alt-cta{margin-top:14px;padding-top:14px;border-top:1px solid #e8e5dd;display:flex;flex-direction:column;gap:8px;align-items:stretch;text-align:center}.lf .hero-alt-cta > span{font-size:12.5px;color:#5f7070;font-weight:500}.lf .hero-test-btn{display:flex;flex-direction:column;gap:2px;align-items:center;padding:11px 14px;background:#fff;color:#1f3636;border:1.5px solid #dfdcd4;border-radius:10px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s;width:100%}.lf .hero-test-btn:hover{border-color:#b08d57;background:#f6f4f0}.lf .hero-test-btn em{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#7a8a84}.lf .hero-test-btn:focus-visible{outline:2px solid #b08d57;outline-offset:2px}

/* --- puesta al día de las landings: la misma voz que la portada --------- */
.lf h1, .lf h2, .lf h3, .lf .lp-h2, .lf .lp-hero h1{
  font-family: var(--serif); font-weight: 500; letter-spacing: -.015em;
}
.lf .lp-hero h1{ font-weight: 500; letter-spacing: -.02em; }
.lf h1 .hl, .lf .lp-hero h1 em{
  -webkit-text-fill-color: initial; background: none; color: var(--oro);
  font-style: italic; font-weight: 500;
}
.lf .lp-eyebrow, .lf .lp-btn{ font-family: var(--sans); }

/* --- el asistente Alejandro, dentro de la columna flotante -------------- */
#dso-tab-wrapper{ position: relative; }
#dso-tab-toggle{ border: 1px solid var(--oro); background: var(--verde); padding: 0; overflow: hidden; }
#dso-tab-toggle img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
#dso-tab-panel{
  position: absolute; right: 0; bottom: 66px; width: 356px; height: 520px; max-height: 72vh;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 22px 60px rgba(11,26,26,.28);
}
#dso-tab-panel iframe{ width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 460px){
  #dso-tab-panel{ position: fixed; right: 10px; left: 10px; bottom: 82px; width: auto; height: 62vh; }
}


/* =========================================================================
   LEGIBILIDAD DEL DORADO
   El dorado corporativo (#b08d57) es precioso pero sobre blanco se queda en
   3,1 de contraste: vale para un relleno o una cifra grande, no para una
   línea de 12 px. Así que el color de la casa se conserva donde es una
   superficie, y el texto pequeño usa el mismo tono un punto más hondo.
   ========================================================================= */
.volanta,
.fase .cuando,
.blog-grid .cat,
.sello .k,
.otra-via p + .hero-test-btn:hover,
h1 em, h2 em,
.consent a, .ck-banner a,
.form-card .garantias span{ color: var(--oro-texto); }
.volanta::before{ background: var(--oro-texto); }
.hero-test-btn:hover{ color: var(--oro-texto); border-color: var(--oro-texto); }
.blog-grid > article:hover .leer{ color: var(--oro-texto); }
.nav-links a:hover{ border-bottom-color: var(--oro-texto); }
.carrusel-btns button:hover{ border-color: var(--oro-texto); color: var(--oro-texto); }
.test-aro .pct{ color: var(--verde); }

/* El botón principal es lo único que hay que pulsar: su texto tiene que
   leerse. El relleno baja un escalón de tono y el blanco pasa de 3,1 a 5,0. */
.btn-accent{ background: var(--oro-texto); }
.btn-accent:hover{ background: #75592f; }

/* Sobre el verde el dorado claro ya llega de sobra (6,5), así que allí no
   se toca nada. */
.seccion.verde .volanta, .hero .volanta{ color: var(--oro-sobre-verde); }
.seccion.verde .volanta::before, .hero .volanta::before{ background: var(--oro-sobre-verde); }
.hero .btn-accent{ background: var(--oro); color: #16292a; }
.hero .btn-accent:hover{ background: var(--oro-sobre-verde); }
.testimonio .ini{ background: var(--oro-texto); }
.testimonio .cifra-caso .k{ color: var(--oro-texto); }

/* =========================================================================
   LAS FOTOS
   No son de banco de imágenes: en ellas sale Alejandro. Por eso no van de
   relleno, van donde una cara hace trabajo — al lado del formulario, al lado
   del proceso que él dirige y al lado de la frase que firma el equipo.
   Ninguna se pone por encima del formulario en el móvil.
   ========================================================================= */

/* --- quién te atiende: la cara, en la cabecera del formulario --- */
.quien-atiende{ display: flex; align-items: flex-start; gap: 14px; margin-bottom: 1.1rem; }
.quien-atiende img{
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid var(--oro); box-shadow: 0 4px 12px rgba(11,26,26,.14);
}
.quien-atiende h2{ font-size: 1.35rem; margin-bottom: .2rem; }
.quien-atiende .sub{ margin-bottom: 0; }
.quien-atiende .sub strong{ color: var(--verde); font-weight: 600; }

/* --- la consulta, junto a la cabecera del proceso --- */
.cabecera-con-foto{
  display: grid; grid-template-columns: 1fr 470px; gap: 56px; align-items: center;
  margin-bottom: 48px;
}
.foto-consulta{ position: relative; border-radius: var(--radio); overflow: hidden; }
.foto-consulta img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }
.foto-consulta::after{
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px; pointer-events: none;
}

/* --- el retrato, junto a la cita que firma el equipo --- */
.cita-equipo.con-retrato{ grid-template-columns: 300px 1fr; gap: 46px; align-items: center; }
.cita-equipo .retrato{ border-radius: var(--radio); overflow: hidden; position: relative; }
/* El original trae una lámpara de techo cortada por el borde de arriba: un
   punto blanco que se lleva la mirada antes que la cara. Se recorta esa
   franja anclando la imagen abajo. */
.cita-equipo .retrato img{
  width: 100%; height: auto; display: block;
  aspect-ratio: 800 / 1023; object-fit: cover; object-position: 50% 100%;
}
.cita-equipo .retrato::after{
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 -70px 90px -40px rgba(22,41,42,.55); pointer-events: none;
}
.cita-equipo.con-retrato .comilla{ display: block; margin-bottom: -18px; }

/* --- las bandas: un respiro entre secciones, a sangre --- */
.banda-foto{ position: relative; overflow: hidden; background: var(--verde-hondo); }
.banda-foto img{ width: 100%; height: 190px; object-fit: cover; display: block; opacity: .82; }
.banda-foto::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,41,42,.45), rgba(22,41,42,.15) 45%, rgba(22,41,42,.55));
}

@media (max-width: 1020px){
  .cabecera-con-foto{ grid-template-columns: 1fr; gap: 30px; }
  .cita-equipo.con-retrato{ grid-template-columns: 240px 1fr; gap: 30px; }
  .banda-foto img{ height: 150px; }
}
@media (max-width: 720px){
  /* En el móvil la foto del proceso va DEBAJO del texto, nunca delante del
     formulario, y el retrato se queda en una medida cómoda. */
  .cabecera-con-foto{ gap: 24px; }
  .foto-consulta img{ aspect-ratio: 3/2; }
  .cita-equipo.con-retrato{ grid-template-columns: 1fr; gap: 22px; }
  .cita-equipo .retrato{ max-width: 220px; }
  .banda-foto img{ height: 120px; }
  .quien-atiende img{ width: 46px; height: 46px; }
  .quien-atiende h2{ font-size: 1.2rem; }
}

/* =========================================================================
   LA PORTADA, EN MOVIMIENTO
   Tres capas, ninguna decorativa porque sí:
     1. el fondo respira, para que la página no parezca una captura;
     2. la cuenta se va tachando sola, que es literalmente lo que se vende;
     3. la entrada, una sola vez por sesión, para que la primera mirada
        aterrice en el titular y de ahí caiga al formulario.
   Todo es CSS: cero kilobytes, cero peticiones, y quieto para quien tenga
   activado «reducir movimiento».
   ========================================================================= */

/* --- 1. el fondo respira ------------------------------------------------- */
.hero::before{
  inset: -18% -12%;
  animation: respiraLuz 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes respiraLuz{
  from{ transform: translate3d(0,0,0) scale(1);          opacity: .42 }
  to  { transform: translate3d(2.6%, -2.2%, 0) scale(1.09); opacity: .72 }
}

/* la trama de expediente: reglas finísimas que suben muy despacio */
.hero::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(180deg,
      rgba(255,255,255,.038) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.95), transparent 58%);
          mask-image: linear-gradient(100deg, rgba(0,0,0,.95), transparent 58%);
  animation: rejillaExpediente 34s linear infinite;
}
@keyframes rejillaExpediente{
  from{ background-position: 0 0 } to{ background-position: 0 -34px }
}

/* el subrayado de «hoy»: se dibuja, no aparece */
.hero h1 em{ position: relative; }
.hero h1 em::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 3px;
  background: var(--oro-sobre-verde); border-radius: 2px;
  transform: scaleX(1); transform-origin: left center;
}

/* --- 2. la cuenta que se tacha sola -------------------------------------- */
.cuenta-viva{
  margin-top: 34px; padding-top: 22px; max-width: 420px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cuenta-viva .cv-tit{
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oro-sobre-verde); margin-bottom: 12px;
}
.cuenta-viva ul{ list-style: none; margin: 0; padding: 0; }
/* fit-content y no inline-block: cada deuda ocupa su propia línea, pero la
   tachadura mide exactamente lo que mide el texto, no la columna entera. */
.cuenta-viva li{
  position: relative; display: block; width: -moz-fit-content; width: fit-content;
  font-size: .95rem; line-height: 2.05; color: var(--sobre-verde-soft);
  animation: none 15s linear infinite both;
}
.cuenta-viva li::after{
  content: ""; position: absolute; left: -3px; right: -3px; top: 53%; height: 2px;
  background: var(--oro-sobre-verde); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  animation: none 15s linear infinite both;
}
.cuenta-viva li:nth-child(1)::after{ animation-name: tacha-a }
.cuenta-viva li:nth-child(2)::after{ animation-name: tacha-b }
.cuenta-viva li:nth-child(3)::after{ animation-name: tacha-c }
.cuenta-viva li:nth-child(4)::after{ animation-name: tacha-d }
.cuenta-viva li:nth-child(5)::after{ animation-name: tacha-e }
.cuenta-viva li:nth-child(1){ animation-name: apaga-a }
.cuenta-viva li:nth-child(2){ animation-name: apaga-b }
.cuenta-viva li:nth-child(3){ animation-name: apaga-c }
.cuenta-viva li:nth-child(4){ animation-name: apaga-d }
.cuenta-viva li:nth-child(5){ animation-name: apaga-e }

.cuenta-viva .cv-sello{
  display: inline-block; margin-top: 16px; padding: 7px 15px;
  border: 1.5px solid var(--oro-sobre-verde); border-radius: 4px;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-sobre-verde); transform: rotate(-2.5deg);
  animation: caeSelloPortada 15s cubic-bezier(.2,1.25,.4,1) infinite both;
}
@keyframes caeSelloPortada{
  0%,52%   { opacity: 0; transform: rotate(-2.5deg) scale(1.5) translateY(-8px) }
  60%,84%  { opacity: 1; transform: rotate(-2.5deg) scale(1)   translateY(0)    }
  92%,100% { opacity: 0; transform: rotate(-2.5deg) scale(1)   translateY(0)    }
}
@keyframes tacha-a{ 0%,8%{ transform: scaleX(0) } 12%,84%{ transform: scaleX(1) } 92%,100%{ transform: scaleX(0) } }
@keyframes tacha-b{ 0%,17%{ transform: scaleX(0) } 21%,84%{ transform: scaleX(1) } 92%,100%{ transform: scaleX(0) } }
@keyframes tacha-c{ 0%,26%{ transform: scaleX(0) } 30%,84%{ transform: scaleX(1) } 92%,100%{ transform: scaleX(0) } }
@keyframes tacha-d{ 0%,35%{ transform: scaleX(0) } 39%,84%{ transform: scaleX(1) } 92%,100%{ transform: scaleX(0) } }
@keyframes tacha-e{ 0%,44%{ transform: scaleX(0) } 48%,84%{ transform: scaleX(1) } 92%,100%{ transform: scaleX(0) } }
@keyframes apaga-a{ 0%,8%{ opacity: 1 } 12%,84%{ opacity: .62 } 92%,100%{ opacity: 1 } }
@keyframes apaga-b{ 0%,17%{ opacity: 1 } 21%,84%{ opacity: .62 } 92%,100%{ opacity: 1 } }
@keyframes apaga-c{ 0%,26%{ opacity: 1 } 30%,84%{ opacity: .62 } 92%,100%{ opacity: 1 } }
@keyframes apaga-d{ 0%,35%{ opacity: 1 } 39%,84%{ opacity: .62 } 92%,100%{ opacity: 1 } }
@keyframes apaga-e{ 0%,44%{ opacity: 1 } 48%,84%{ opacity: .62 } 92%,100%{ opacity: 1 } }

/* en el móvil no cabe sin empujar el formulario fuera de pantalla: fuera. */
@media (max-width: 980px){
  .cuenta-viva{ display: none; }
}

/* --- 3. la entrada, una sola vez por sesión ------------------------------ */
html.entrada-dso .hero .volanta { animation: dsoSube .55s cubic-bezier(.22,.68,.28,1) .05s both }
html.entrada-dso .hero h1       { animation: dsoRevela .9s cubic-bezier(.22,.68,.28,1) .16s both }
html.entrada-dso .hero h1 em::after{ transform: scaleX(0); animation: dsoSubraya .65s cubic-bezier(.6,0,.2,1) .95s forwards }
html.entrada-dso .hero .lede    { animation: dsoSube .6s cubic-bezier(.22,.68,.28,1) .44s both }
html.entrada-dso .trust-row .dato:nth-child(1){ animation: dsoSube .5s ease-out .62s both }
html.entrada-dso .trust-row .dato:nth-child(2){ animation: dsoSube .5s ease-out .70s both }
html.entrada-dso .trust-row .dato:nth-child(3){ animation: dsoSube .5s ease-out .78s both }
html.entrada-dso .cuenta-viva   { animation: dsoSube .6s ease-out .88s both }
html.entrada-dso .form-card     { animation: dsoEntraTarjeta .75s cubic-bezier(.22,.9,.3,1) .26s both }
/* la cuenta no empieza a tacharse hasta que ha terminado de entrar */
html.entrada-dso .cuenta-viva li,
html.entrada-dso .cuenta-viva li::after,
html.entrada-dso .cuenta-viva .cv-sello{ animation-delay: 1.2s; }

@keyframes dsoSube{ from{ opacity: 0; transform: translateY(14px) } to{ opacity: 1; transform: none } }
@keyframes dsoRevela{
  from{ clip-path: inset(0 0 104% 0); transform: translateY(14px) }
  to  { clip-path: inset(0 0 -10% 0); transform: none }
}
@keyframes dsoSubraya{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }
@keyframes dsoEntraTarjeta{
  from{ opacity: 0; transform: translateY(22px) scale(.985) }
  to  { opacity: 1; transform: none }
}

/* --- quien pide quietud, la tiene ---------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after,
  .cuenta-viva li, .cuenta-viva li::after, .cuenta-viva .cv-sello,
  html.entrada-dso .hero .volanta, html.entrada-dso .hero h1,
  html.entrada-dso .hero h1 em::after, html.entrada-dso .hero .lede,
  html.entrada-dso .trust-row .dato, html.entrada-dso .cuenta-viva,
  html.entrada-dso .form-card{
    animation: none !important;
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .cuenta-viva li::after{ transform: scaleX(1) !important }
  .hero h1 em::after{ transform: scaleX(1) !important }
}