/* ==========================================================================
   Dolorfin landing v2 — correcciones de móvil/tablet y jerarquía de CTAs.
   Se carga DESPUÉS de styles.css y styles-v3.css. No modifica el molde.
   Tokens locales para no repetir literales.
   ========================================================================== */
:root{
  --df-ink:#14263f;
  --df-ink-soft:#41546e;
  --df-blue:#0B5AA4;
  --df-blue-dark:#153d6e;
  --df-line:#e2e8f0;
  --df-bar-h:64px;
  --df-tap:44px;
}

/* --------------------------------------------------------------------------
   1. NADA se sale de lado. El body jamás scrollea horizontal.
   -------------------------------------------------------------------------- */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video,iframe{max-width:100%;}
.container{overflow-wrap:break-word;}

/* --------------------------------------------------------------------------
   2. HERO — contraste sólido detrás del texto en TODOS los anchos.
   Causa del defecto original: el overlay del molde es un degradado horizontal
   (opaco a la izquierda, casi transparente a la derecha). En escritorio el
   texto vive en la columna izquierda y se lee; al apilarse en móvil el texto
   invade la zona translúcida y la fotografía de la fachada (con su rótulo y
   su teléfono) se ve a través de las letras. Aquí el velo pasa a ser vertical
   y opaco bajo el bloque de texto, y el texto recibe su propio color sólido.
   -------------------------------------------------------------------------- */
.hero-premium{position:relative;}
/* En escritorio la fotografía se queda de fondo, con el velo del molde.
   De 991px hacia abajo la fotografía SALE de debajo del texto: pasa a ser una
   banda dentro del flujo, encima del bloque de copia. Ningún velo puede
   garantizar legibilidad sobre un rótulo con letras y números; separar las
   capas sí. Es el mismo <img>, así que la métrica de carga no cambia. */
@media(max-width:991.98px){
  .hero-premium{
    /* el molde lo declara flex; al sacar la imagen del fondo pasaría a ser una
       columna y se repartiría el ancho con el texto. Aquí vuelve a apilar. */
    display:block!important;
    min-height:0!important;
    background:linear-gradient(180deg,#ffffff 0%,#f2f7fd 100%);
    padding-top:0!important;
  }
  .hero-premium__bg{
    position:relative;
    inset:auto;
    display:block;
    width:100%!important;
    flex:none!important;
    height:clamp(150px,34vw,220px);
    overflow:hidden;
    border-bottom:1px solid var(--df-line);
  }
  .hero-premium__bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 42%;
  }
  .hero-premium__overlay{display:none;}
  .hero-premium__content{padding-top:24px;}
  .hero-specs{background:#fff;}
}
@media(min-width:992px){
  .hero-premium__overlay{
    background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 48%,rgba(255,255,255,.78) 74%,rgba(255,255,255,.36) 100%);
  }
}
.hero-copy .hero-title-premium,
.hero-copy .hero-description{
  color:var(--df-ink);
  text-shadow:none;
}
.hero-copy .hero-description strong{color:var(--df-ink);}
/* Las especificaciones eran blancas sobre velo blanco (heredado del molde):
   ilegibles. Pasan a tinta sólida sobre tarjeta translúcida. */
.hero-specs{
  color:var(--df-ink-soft)!important;
  text-shadow:none!important;
  background:rgba(255,255,255,.72);
  border:1px solid var(--df-line);
  border-radius:14px;
  padding:14px 16px;
}
.hero-specs strong{color:var(--df-ink);}
.hero-specs a{color:var(--df-blue)!important;}

/* --------------------------------------------------------------------------
   3. UN SOLO CTA PRIMARIO. El hero lleva un botón y nada más.
   -------------------------------------------------------------------------- */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.hero-actions .btn{min-height:var(--df-tap);}
.hero-cta-single{width:100%;max-width:340px;justify-content:center;}
@media(min-width:576px){.hero-cta-single{width:auto;min-width:260px;}}
.hero-badge-card{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.86);border:1px solid var(--df-line);
  border-radius:999px;padding:8px 14px;font-size:13px;color:var(--df-ink-soft);
}

/* --------------------------------------------------------------------------
   4. ENCABEZADO — el selector de idioma es discreto, no compite con la venta.
   -------------------------------------------------------------------------- */
.site-header__desktop-row{row-gap:8px;}
.lang-toggle{
  display:inline-flex;align-items:center;
  border:1px solid var(--df-line);border-radius:999px;
  overflow:hidden;background:#fff;line-height:1;
}
.lang-toggle a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;min-height:34px;padding:0 10px;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--df-ink-soft);text-decoration:none;
}
.lang-toggle a[aria-current="true"]{background:var(--df-blue);color:#fff;}
.lang-toggle a:not([aria-current="true"]):hover{background:#f1f5f9;color:var(--df-blue);}
.header-tools{display:flex;align-items:center;gap:10px;}

/* --------------------------------------------------------------------------
   5. BARRA FIJA INFERIOR (móvil y tablet vertical). Caminos secundarios donde
   alcanza el pulgar. En escritorio no aparece: ahí el encabezado ya los ofrece
   sin estorbar y una barra fija robaría alto útil de pantalla.
   -------------------------------------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:1040;
  display:flex;align-items:stretch;
  background:#fff;border-top:1px solid var(--df-line);
  box-shadow:0 -6px 24px rgba(15,47,87,.12);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.sticky-cta__item{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:var(--df-bar-h);padding:8px 6px;
  font-size:12px;font-weight:600;line-height:1.15;text-align:center;
  color:var(--df-ink-soft);text-decoration:none;
  border-right:1px solid var(--df-line);
}
.sticky-cta__item:last-child{border-right:0;}
.sticky-cta__item:hover,.sticky-cta__item:focus{color:var(--df-blue);text-decoration:none;}
.sticky-cta__item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.sticky-cta__item--primary{background:var(--df-blue);color:#fff;}
.sticky-cta__item--primary:hover,.sticky-cta__item--primary:focus{background:var(--df-blue-dark);color:#fff;}
@media(min-width:1025px){.sticky-cta{display:none;}}
/* Dos destinos: cada uno con la mitad del ancho y sobrado para el pulgar. */
.sticky-cta__item{font-size:13px;}
.sticky-cta__item svg{width:22px;height:22px;}

/* --------------------------------------------------------------------------
   5b. LOS DOS FLOTANTES DEL WIDGET, POR ENCIMA DE LA BARRA.
   Medido antes del arreglo: las burbujas quedaban en 768-824px y la barra
   arranca en 779px; se montaban 45px, justo sobre los botones. Ahora se
   apoyan sobre la altura real de la barra más el resguardo inferior del
   dispositivo. El webchat es el canal que califica al prospecto, así que
   se le da más presencia que a la burbuja de WhatsApp.
   -------------------------------------------------------------------------- */
:root{--df-float-gap:14px;}
@media(max-width:1024.98px){
  /* El widget lee --omb-wc-launcher-bottom para colocar burbujas, menú y panel.
     Fijándola aquí, todo lo suyo se recoloca solo por encima de la barra. */
  :root{
    --omb-wc-launcher-bottom:calc(var(--df-bar-h) + env(safe-area-inset-bottom,0px) + var(--df-float-gap))!important;
  }
  .omb-wc-corner-wa,
  .omb-wc-corner-chat{
    bottom:calc(var(--df-bar-h) + env(safe-area-inset-bottom,0px) + var(--df-float-gap))!important;
  }
  /* el panel desplegable de WhatsApp también sube */
  .omb-wc-waform{
    bottom:calc(var(--df-bar-h) + env(safe-area-inset-bottom,0px) + 84px)!important;
    max-height:calc(100vh - var(--df-bar-h) - 140px)!important;
    overflow:auto!important;
  }
}
/* Jerarquía: la burbuja del webchat manda sobre la de WhatsApp. */
.omb-wc-corner-chat{
  transform:scale(1.14);
  transform-origin:bottom right;
  box-shadow:0 10px 28px rgba(11,90,164,.34)!important;
}
.omb-wc-corner-wa{transform:scale(.94);transform-origin:bottom left;}

/* Invitación breve junto al webchat: que se entienda que alguien responde.
   Aparece una sola vez, se descarta y no vuelve en la misma visita. */
.df-chat-nudge{
  position:fixed;right:16px;z-index:999998;
  bottom:calc(var(--df-bar-h) + env(safe-area-inset-bottom,0px) + var(--df-float-gap) + 78px);
  display:none;align-items:center;gap:10px;
  max-width:min(268px,calc(100vw - 110px));
  padding:10px 12px 10px 14px;
  background:#fff;border:1px solid var(--df-line);border-radius:14px;
  box-shadow:0 12px 30px rgba(15,47,87,.16);
  font-size:13px;line-height:1.35;color:var(--df-ink);
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease;
}
.df-chat-nudge[data-visible="true"]{display:flex;opacity:1;transform:translateY(0);}
.df-chat-nudge__text{flex:1 1 auto;}
.df-chat-nudge__close{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:#f1f5f9;color:var(--df-ink-soft);cursor:pointer;
}
.df-chat-nudge__close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.df-chat-nudge__close:hover{background:#e2e8f0;color:var(--df-ink);}
@media(min-width:1025px){
  .df-chat-nudge{bottom:calc(var(--df-float-gap) + 86px);}
}
@media(prefers-reduced-motion:reduce){
  .df-chat-nudge{transition:none;}
}
/* El contenido nunca queda debajo de la barra: el espaciador solo se emite en
   las páginas que llevan barra, así /gracias y 404 no arrastran hueco. */
.sticky-cta-spacer{height:calc(var(--df-bar-h) + env(safe-area-inset-bottom,0px) + 24px);}
@media(min-width:1025px){.sticky-cta-spacer{display:none;}}
@media(max-width:1024.98px){
  /* el botón flotante del molde chocaba con la barra */
  .floating-whatsapp{bottom:calc(var(--df-bar-h) + 16px)!important;}
}

/* --------------------------------------------------------------------------
   6. ÁREAS TÁCTILES — mínimo 44px en todo lo que se toca.
   -------------------------------------------------------------------------- */
.btn,.site-nav a,.mobile-nav__inner a,.footer-links a{min-height:var(--df-tap);}
.site-nav a,.mobile-nav__inner a,.footer-links a{display:inline-flex;align-items:center;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
/* Identidad y llamados dentro de tarjetas: también son destinos táctiles. */
.site-brand{display:inline-flex;align-items:center;min-height:var(--df-tap);}
.service-inline-link{display:inline-flex;align-items:center;min-height:var(--df-tap);}
/* Controles del formulario embebido (mapa corporal, escala 0-10). */
.omb-form-widget button,
.omb-form-widget .omb-wf-chip,
.omb-form-widget [role="button"]{min-height:var(--df-tap)!important;}
.omb-form-widget input,
.omb-form-widget select,
.omb-form-widget textarea{min-height:var(--df-tap)!important;font-size:16px!important;}

/* --------------------------------------------------------------------------
   7. SECCIÓN DE FORMULARIO propia (ya no vive dentro del hero).
   -------------------------------------------------------------------------- */
.form-section{padding:56px 0;background:linear-gradient(180deg,#f8fafc 0%,#eef4fb 100%);scroll-margin-top:16px;}
.form-section__head{text-align:center;max-width:720px;margin:0 auto 28px;}
.form-section .lead-card{max-width:640px;margin:0 auto;}
@media(max-width:575.98px){.form-section{padding:40px 0;}}

/* Anclas: que el encabezado no tape el título al saltar. */
section[id]{scroll-margin-top:12px;}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* --------------------------------------------------------------------------
   8. TABLET Y MÓVIL — tipografía, imágenes y el mapa.
   -------------------------------------------------------------------------- */
@media(max-width:1024.98px){
  .location-premium__map{min-height:340px;}
  .location-premium__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
}
.location-premium__map{position:relative;overflow:hidden;border-radius:18px;}
@media(max-width:767.98px){
  .hero-title-premium{font-size:clamp(26px,7vw,34px);line-height:1.18;overflow-wrap:break-word;}
  .hero-description{font-size:15px;line-height:1.6;}
  .section-title-premium{font-size:clamp(22px,5.6vw,28px);line-height:1.25;}
  .hero-premium{padding:24px 0 30px;}
  /* La ficha de datos cede protagonismo al botón en pantallas chicas. */
  .hero-specs{margin-top:16px;font-size:13px;padding:12px 14px;}
  .hero-actions{margin-top:18px;}
  .hero-chip{margin-bottom:10px;}
  .location-premium__map{min-height:300px;}
  .promo-price__new{font-size:28px;}
  .symptoms-heading-image img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px;}
}
/* Tablet en horizontal: el hero no debe empujar todo fuera de pantalla. */
@media(min-width:768px) and (max-width:1024.98px) and (orientation:landscape){
  .hero-premium{padding:24px 0 32px;}
  .hero-title-premium{font-size:30px;}
}
/* La tabla comparativa se desplaza dentro de su caja, nunca arrastra la página. */
.comparativa-wrapper{-webkit-overflow-scrolling:touch;max-width:100%;}

/* Fotografías: proporción estable, sin deformar. */
.promo-card__image{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;}
.service-main__image img{width:100%;height:100%;object-fit:cover;}

/* Icono de trazo en la ficha de cómo llegar (sustituye al emoji del molde). */
.location-item__icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}


/* ══ CAPTACIÓN EN EL HERO (sólo escritorio) ════════════════════════════════
   En pantallas grandes la mitad derecha del hero se iba en foto y nada más.
   Ahí va el MISMO formulario de la sección de abajo, para que quien llega
   decidido no tenga que buscar dónde dejar sus datos.
   En móvil no aparece: el hero ya ocupa toda la pantalla y la sección de
   abajo hace ese trabajo sin repetir el formulario dos veces. */
.hero-lead-card{display:none;}
@media(min-width:992px){
  .hero-premium__content .row{align-items:flex-start;}
  .hero-lead-card{
    display:block;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:20px;
    box-shadow:0 22px 50px rgba(11,90,164,.18);
    padding:24px 22px 18px;
  }
  .hero-lead-card__kicker{
    margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:#16886f;
  }
  .hero-lead-card__title{
    margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:800;
    color:var(--df-ink,#0f172a);
  }
  .hero-lead-card__sub{
    margin:0 0 14px;font-size:14px;line-height:1.55;color:#475569;
  }
}