/*
 * Cabecera y pie 2026. Valores de la API del Figma:
 *   cabecera  -> componente Hero-top (2192:401 escritorio, 2192:400 / 2204:228 móvil)
 *   pie       -> Footer (2067:2309)
 *
 * Este fichero se carga antes que styles.css (el tema encola assets/css por orden
 * alfabético), así que los selectores van algo más específicos para ganar a las
 * reglas antiguas de "header" y "footer".
 */

/* ------------------------------------------------------------------ CABECERA */

/* Píldora flotante y fija: en el Figma está a 40px del borde superior, con 64px
   a la izquierda y 67 a la derecha (1309 de ancho sobre 1440). */
header#header.site-header {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 111111;
  padding: 0 67px 0 64px;
  background: transparent;
  border: 0;
  pointer-events: none;
}

.admin-bar header#header.site-header { top: 72px; }

.site-header__pildora {
  position: relative;
  pointer-events: auto;
  max-width: 1309px;
  margin: 0 auto;
  /* 16/24 de relleno menos el borde de 1px, que en el Figma va por dentro. La
     píldora mide 73 fijos con el selector de 42 dentro: 1 + 15 + 42 + 14 + 1. */
  padding: 15px 23px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: #fff;
  border: 1px solid #D9D9D9;
  border-radius: 40px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, .1);
}

.site-header__barra {
  display: flex;
  align-items: center;
  flex: none;
}

.site-header__logo { display: block; }

/* Logo-Fundación: caja de 135 x 40,98. */
.site-header__logo img {
  display: block;
  width: 135px;
  height: 41px;
  object-fit: contain;
}

.site-header__menu-btn { display: none; }

/* El envoltorio del menú solo sirve para la animación de móvil; en escritorio
   no cuenta y el menú y el teléfono siguen siendo hijos directos de la fila. */
.site-header__desplegable { display: contents; }

/* En escritorio el <nav> tampoco cuenta: logo, menú, teléfono e idioma son los
   cuatro hijos de la píldora y se reparten con space-between. */
.site-header__nav { display: contents; }

.site-header__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-header__lista a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px !important;
  color: #212121;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__lista a:hover,
.site-header__lista a:focus-visible { color: var(--VerdeOscuro); }

.site-header__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.site-header__llamanos {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px !important;
  color: #212121;
  white-space: nowrap;
}

/* boton-primario-blanco: 159 x 40, relleno 8/16, hueco 9, radio 39. */
.site-header__telefono {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 8px 16px;
  border-radius: 39px;
  background: var(--VerdeOscuro);
  color: #fff;
  font-size: 18.5px;
  font-weight: 600;
  line-height: 24px !important;
  letter-spacing: -0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s;
}

.site-header__telefono--enlace:hover,
.site-header__telefono--enlace:focus-visible { background: var(--VerdeHoja); color: #fff; }

/* En escritorio el teléfono es solo texto (no se puede llamar); el enlace tel:
   solo existe en móvil (ver el bloque de móvil). */
.site-header__telefono--texto { cursor: default; }
.site-header__telefono--enlace { display: none; }

/* Selector de idioma (Figma 2493:650): píldora de 119 x 42, borde 1 verde por
   dentro (relleno 2 - 1), radio 64. El id en el selector gana a las reglas
   antiguas de "header.sticky" y de las páginas legales. */
header#header.site-header .site-header__idioma {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* 119 de ancho fijo en el Figma: las dos opciones (58 + 55) dejan 2px libres. */
  width: 119px;
  height: 42px;
  padding: 1px;
  background: #fff;
  border: 1px solid var(--VerdeOscuro);
  border-radius: 64px;
}

/* Opciones de 58 (activa) y 55 x 38; texto 14/16,8 centrado. */
header#header.site-header .site-header__idioma-opcion {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 38px;
  border-radius: 64px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.8px !important;
  color: #212121;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}

header#header.site-header .site-header__idioma-opcion:hover,
header#header.site-header .site-header__idioma-opcion:focus-visible { color: var(--VerdeOscuro); }

header#header.site-header .site-header__idioma-opcion:focus-visible {
  outline: 1px solid var(--VerdeOscuro);
  outline-offset: 3px;
}

header#header.site-header .site-header__idioma-opcion.is-activo {
  width: 58px;
  background: var(--VerdeOscuro);
  color: #fff;
  font-weight: 600;
}

/* Marca de selección: 18 x 2 blanca con radio 1, a 6 del borde inferior. */
header#header.site-header .site-header__idioma-opcion.is-activo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 1px;
  background: #fff;
}

/* Por debajo de los 1440 del diseño los cuatro grupos de la píldora (logo, menú,
   teléfono, idioma) no caben con el hueco de 40: se aprieta por tramos. */
@media (max-width: 1399px) {
  .site-header__pildora { gap: 16px; }
  .site-header__llamanos { display: none; }
}

@media (max-width: 1199px) {
  header#header.site-header { padding: 0 24px; top: 24px; }
  .site-header__lista { gap: 14px; }
  .site-header__lista a { font-size: 15px; }
}

@media (max-width: 1100px) {
  .site-header__pildora { padding-left: 15px; padding-right: 15px; gap: 12px; }
  .site-header__lista { gap: 12px; }
  .site-header__lista a { font-size: 14px; }
}

/* --- Móvil: píldora de 56 cerrada; al abrir, el menú se despliega dentro. --- */
@media (max-width: 991px) {
  header#header.site-header { top: 21px; padding: 0 16px; }
  .admin-bar header#header.site-header { top: 67px; }

  .site-header__pildora {
    display: block;
    border-radius: 32px;
    padding: 11px 23px;
    transition: padding .35s ease;
  }

  /* En móvil el <nav> vuelve a ser la caja que se despliega. */
  .site-header__nav { display: grid; }

  .site-header__barra { justify-content: space-between; }

  .site-header__logo img { width: 87px; height: 26.4px; }

  .site-header__menu-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 20px;
    color: #212121;
    cursor: pointer;
  }

  /* Cerrado: el menú está en el DOM pero plegado (fila de rejilla a 0fr) e
     invisible, y fuera del orden de tabulación gracias a visibility. */
  .site-header__nav {
    display: grid;
    grid-template-rows: 0fr;
    /* El align-items: center de escritorio centraría el contenido en la fila a
       medio crecer y lo dejaría asomar por arriba: el menú se descubre de arriba abajo. */
    align-items: start;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    /* Sin borde cuando está cerrado: si no, la píldora mide 57 y no 56. */
    border-top: 0 solid #D9D9D9;
    padding-top: 0;
    transition: grid-template-rows .35s ease, opacity .25s ease, margin-top .35s ease,
                padding-top .35s ease, border-top-width .35s ease, visibility 0s linear .35s;
  }

  .site-header__desplegable { display: block; min-height: 0; }

  .site-header__barra { transition: min-height .35s ease; }

  /* Abierto: relleno 16/24/24, barra de 48 y 8 entre bloques. Con zoom al 400 % el
     panel medía más que la pantalla y no se podía recorrer (accesibilidad, punto 14):
     altura máxima la de la ventana menos los 21 de arriba y 16 de abajo, con scroll
     propio. */
  .site-header__pildora.is-abierta {
    padding: 15px 23px 23px;
    max-height: calc(100vh - 37px);
    max-height: calc(100dvh - 37px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .admin-bar .site-header__pildora.is-abierta { max-height: calc(100vh - 83px); }
  .site-header__pildora.is-abierta .site-header__barra { min-height: 48px; }

  .site-header__pildora.is-abierta .site-header__nav {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    margin-top: 8px;
    border-top-width: 1px;
    padding-top: 8px;
    transition-delay: 0s, .05s, 0s, 0s, 0s, 0s;
  }

  /* Los enlaces entran con un pequeño desplazamiento escalonado. */
  .site-header__lista li,
  .site-header__cta {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .3s ease;
  }

  .site-header__pildora.is-abierta .site-header__lista li,
  .site-header__pildora.is-abierta .site-header__cta { opacity: 1; transform: none; }

  .site-header__pildora.is-abierta .site-header__lista li:nth-child(1) { transition-delay: .08s; }
  .site-header__pildora.is-abierta .site-header__lista li:nth-child(2) { transition-delay: .12s; }
  .site-header__pildora.is-abierta .site-header__lista li:nth-child(3) { transition-delay: .16s; }
  .site-header__pildora.is-abierta .site-header__lista li:nth-child(4) { transition-delay: .2s; }
  .site-header__pildora.is-abierta .site-header__lista li:nth-child(5) { transition-delay: .24s; }
  .site-header__pildora.is-abierta .site-header__cta { transition-delay: .28s; }

  @media (prefers-reduced-motion: reduce) {
    .site-header__pildora,
    .site-header__barra,
    .site-header__nav,
    .site-header__lista li,
    .site-header__cta,
    .site-header__idioma { transition-duration: 0s !important; transition-delay: 0s !important; }
  }

  .site-header__lista {
    display: block;
    margin: 0;
    padding: 8px 0;
  }

  .site-header__lista a {
    padding: 14px 8px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 22px !important;
    white-space: normal;
  }

  /* Fila «Llámanos gratis: [teléfono]» (Figma 2204:250, versión del 06/10):
     centrada, hueco 12, a 8 de la línea; botón de 177 x 38, relleno 8/24,
     radio 100, 16/21,86, sin icono. */
  .site-header__cta {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    border-top: 1px solid #D9D9D9;
    padding: 8px 0 0;
  }

  .site-header__llamanos { display: block; line-height: 19.12px !important; }

  .site-header__telefono {
    width: auto;
    height: 38px;
    justify-content: center;
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 16px;
    line-height: 21.86px !important;
    letter-spacing: 0;
  }

  .site-header__telefono svg { display: none; }

  .site-header__telefono--texto { display: none; }
  .site-header__telefono--enlace { display: inline-flex; }

  /* Selector de idioma a 16 de la fila del teléfono, pegado a la izquierda. */
  header#header.site-header .site-header__idioma {
    display: inline-flex;
    margin-top: 16px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .3s ease;
  }

  /* Con el id delante para ganar a la regla de arriba (también lleva id): si no, el
     selector se quedaba invisible en el menú abierto. */
  header#header.site-header .site-header__pildora.is-abierta .site-header__idioma { opacity: 1; transform: none; transition-delay: .32s; }

  /* El botón del menú enseña las tres rayas cerrado y el aspa abierto. */
  .site-header__menu-icono--cerrar { display: none; }
  .site-header__pildora.is-abierta .site-header__menu-icono--abrir { display: none; }
  .site-header__pildora.is-abierta .site-header__menu-icono--cerrar { display: block; }
}

/* ----------------------------------------------------------------------- PIE */

footer.site-footer {
  background: transparent;
  border-radius: 0;
  color: #fff;
}

/* Accesibilidad (punto 4, segunda vuelta): al final de la página el scroll ya no
   puede seguir, así que scroll-padding-bottom no aparta los últimos enlaces del
   pie de los flotantes (icono de cookies, «¿Hablamos?»). Se reserva hueco. */
@media (min-width: 769px) {
  footer.site-footer { padding-bottom: 96px; }
}

/* Footer Info: #5A4C46, radio 24 arriba, relleno 36/80, reparto space-between. */
.site-footer__info {
  background: #5A4C46;
  border-radius: 24px 24px 0 0;
  padding: 36px 0;
}

.site-footer__fila {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* Caja de 425 en el Figma, donde el lema parte en dos líneas. En Chrome el
   texto mide 424,9 y cabría por un pelo en una: se estrecha 2px para que parta
   igual que en el diseño. */
.site-footer__marca { width: 423px; max-width: 100%; }

/* Logo: caja de 187 x 51,34. */
.site-footer__marca img {
  display: block;
  width: 187px;
  height: 51.34px;
  object-fit: contain;
  object-position: left center;
}

/* El .container de Bootstrap mete 12px de relleno lateral; el diseño va a 80
   justos del borde (1280 de contenido a 1440). Por debajo de 1360 el contenedor
   ocupa todo el ancho, así que se le deja un margen de 40 a cada lado. */
.site-footer .container { padding-left: 40px; padding-right: 40px; }
@media (min-width: 1360px) { .site-footer .container { padding-left: 0; padding-right: 0; } }

.site-footer__slogan {
  font-size: 24px;
  font-weight: 700;
  line-height: 26px !important;
  letter-spacing: -0.2px;
  color: #fff;
  margin: 16px 0 0;
}

.site-footer__cta {
  /* 380,97 en el diseño; con el teléfono real (más ancho que el del Figma) el botón
     se salía 11px de la caja, así que la caja crece con su contenido. */
  width: auto;
  min-width: 380.97px;
  max-width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Call Us Container: hueco 47, alineado abajo, línea blanca debajo a 24. */
.site-footer__llamada {
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  gap: 47px;
  padding-bottom: 23px;
  border-bottom: 1px solid #fff;
}

.site-footer__telefono-bloque {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-footer__llamanos {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px !important;
  white-space: nowrap;
}

.site-footer__telefono {
  font-size: 24px;
  font-weight: 700;
  line-height: 26px !important;
  letter-spacing: -0.2px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__telefono:hover { color: #fff; text-decoration: underline; }

/* boton-primario-blanco: 204 x 35, relleno 8/16, hueco 9, radio 39. */
.site-footer__boton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  background: #fff;
  border: 0;
  border-radius: 39px;
  color: var(--VerdeOscuro);
  font-size: 16px;
  font-weight: 600;
  line-height: 19px !important;
  letter-spacing: -0.5px;
  white-space: nowrap;
  text-decoration: none; /* en modo llamada es un enlace tel: */
  cursor: pointer;
  transition: background-color .2s;
}

.site-footer__boton:hover { background: #D9D9D9; color: var(--VerdeOscuro); }

.site-footer__enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px !important;
  letter-spacing: -0.25px;
  color: #fff;
  text-decoration: none;
}

.site-footer__enlace:hover { color: #fff; text-decoration: underline; }

/* Footer Links: #212121, línea #EBEAE3 arriba, relleno 12/80. */
.site-footer__legal {
  background: #212121;
  border-top: 1px solid #EBEAE3;
  padding: 11px 0 12px;
}

.site-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}

.site-footer__menu a {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px !important;
  color: #fff;
  text-decoration: none;
}

.site-footer__menu a:hover { text-decoration: underline; }

/* Móvil (Figma 2137:562): radio 24 arriba, relleno 24/16 y 24 entre bloques;
   lema 24/26,4 a 16 del logo; teléfono y botón en columna con 16 y línea a 20;
   enlace centrado 16/19,2; enlaces legales en columna, relleno 12/16 y 12. */
@media (max-width: 991px) {
  .site-footer .container { padding-left: 16px; padding-right: 16px; }
  .site-footer__info { border-radius: 24px 24px 0 0; padding: 24px 0; }
  .site-footer__fila { flex-direction: column; gap: 24px; }
  .site-footer__marca { width: 100%; }
  .site-footer__slogan { font-size: 24px; font-weight: 600; line-height: 26.4px !important; letter-spacing: -0.6px; margin-top: 16px; }
  .site-footer__cta { width: 100%; min-width: 0; gap: 24px; }
  .site-footer__llamada { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 20px; }
  .site-footer__telefono-bloque { gap: 8px; }
  .site-footer__llamanos { line-height: 21.86px !important; }
  .site-footer__telefono { font-weight: 600; }
  .site-footer__enlace { width: 100%; justify-content: space-between; gap: 10px; line-height: 19.2px !important; }
  .site-footer__enlace svg { flex: none; }
  .site-footer__legal { padding: 12px 0; }
  .site-footer__menu { flex-direction: column; align-items: stretch; gap: 12px; }
  .site-footer__menu a { line-height: 17.6px !important; }
  /* No está en el diseño: aire para que el aviso fijo "¿Hablamos?" (53 + 11 de
     margen) no tape el último enlace legal. */
  .site-footer__legal { padding-bottom: 76px; }
}

/* ------------------------------------------------------------- ¿HABLAMOS? */

/* Panel «¿Hablamos?» abierto (sticky-boton 2180:239): 342 x 419, blanco, radio 16,
   relleno 40/24/32/24 y 20 entre bloques. En el Figma de escritorio ocupa el sitio
   del aviso del hero; como lo abre también el CTA de media página, va fijo abajo a
   la derecha, con los márgenes de la cabecera (64/40). La sombra es la del aviso
   cerrado (0 4 8 al 15%): el panel abierto no la trae y sobre fondo blanco se
   perdería.
   El formulario real (correo, consentimiento, reCAPTCHA y etiquetas de
   accesibilidad) hace que el panel mida 695 y no los 419 del Figma: en portátil
   (1366x768 o 1280x720) se salía por arriba y la aspa quedaba fuera de pantalla
   (cliente, 27/10). Ahora el panel no supera la altura de la ventana: título y
   aspa quedan fijos y el formulario se desplaza dentro si hace falta. */
.hablamos {
  position: fixed;
  right: 64px;
  bottom: 40px;
  /* Por encima de la cabecera fija (111111): en pantallas bajas el panel llega
     hasta ella y, siendo un diálogo modal con el resto inerte, debe quedar delante. */
  z-index: 111112;
  display: flex;
  flex-direction: column;
  width: 342px;
  max-width: calc(100% - 32px);
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  padding: 40px 24px 32px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
  color: #212121;
  text-align: left;
}

.admin-bar .hablamos { max-height: calc(100vh - 88px); }

.hablamos[hidden] { display: none; }

/* Zona que se desplaza. El margen negativo y el relleno equivalentes dejan sitio
   a los contornos de foco (1 + 3 de separación) sin que el recorte los corte. */
.hablamos__formulario {
  flex: 1 1 auto;
  min-height: 0;
  margin: -4px -8px;
  padding: 4px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* basil:cancel-outline a 13 del borde superior y 17 del derecho (x = 301 de 342). */
.hablamos__cerrar {
  position: absolute;
  top: 13px;
  right: 17px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #212121;
  cursor: pointer;
}

.hablamos__cerrar:hover { color: var(--VerdeOscuro); }

.hablamos__titulo {
  font-size: 20px;
  font-weight: 800;
  line-height: 27.32px !important;
  letter-spacing: -0.2px;
  color: #242424;
  margin: 0 0 8px;
}

.hablamos__texto {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px !important;
  color: #212121;
  margin: 0 0 20px;
}

/* El formulario es el de Salesforce de siempre, vestido como los campos del
   Figma: 48 de alto, radio 999, borde 1 #959595, relleno 0/16, 16 entre campos.
   (El Figma solo dibuja Nombre y Teléfono; el formulario real lleva además
   correo, consentimiento y reCAPTCHA.) */
.hablamos__formulario form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hablamos__formulario br { display: none; }

.hablamos__formulario input[type="text"],
.hablamos__formulario input[type="tel"],
.hablamos__formulario input[type="email"] {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #959595;
  border-radius: 999px;
  background: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 21.86px !important;
  color: #212121;
}

.hablamos__formulario input::placeholder { color: #212121; opacity: .7; }

/* Accesibilidad (punto 10, segunda vuelta): etiquetas visibles encima de cada
   campo, con el asterisco en la etiqueta. 14/18,2 600, 8 de hueco con el campo. */
.hablamos__formulario .dv-etiqueta {
  display: block;
  margin: 0 0 -8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18.2px !important;
  color: #212121;
}

/* Accesibilidad (puntos 10 y 11): nota de obligatorios y mensajes de error
   persistentes junto a cada campo. Rojo #B3261E sobre blanco: 6,3:1. */
.hablamos__formulario .dv-nota-obligatorios {
  margin: -4px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px !important;
  color: #212121;
}

.hablamos__formulario input.is-invalido { border-color: #B3261E; border-width: 2px; }

.hablamos__formulario .dv-error {
  margin: -8px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 18.2px !important;
  color: #B3261E;
}

.hablamos__formulario input:focus-visible {
  outline: 1px solid var(--VerdeOscuro);
  outline-offset: 3px;
  border-color: var(--VerdeOscuro);
}

.hablamos__formulario .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px !important;
  color: #212121;
}

/* El tema le quita la apariencia nativa a la casilla y no se veía: se recupera. */
.hablamos__formulario .checkbox-label input {
  -webkit-appearance: auto;
  appearance: auto;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--VerdeOscuro);
}

/* Enlace a la política de privacidad dentro de la casilla de consentimiento. */
.hablamos__formulario .dv-consentimiento a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hablamos__formulario .dv-consentimiento a:hover {
  color: var(--VerdeOscuro);
}

.hablamos__formulario .dv-consentimiento a:focus-visible {
  outline: 1px solid var(--VerdeOscuro);
  outline-offset: 2px;
}

/* El reCAPTCHA mide 304 fijos: se escala a los 294 del panel. */
.hablamos__formulario .g-recaptcha {
  transform: scale(.967);
  transform-origin: 0 0;
  height: 75.5px;
}

/* boton-primario: 294 x 56, relleno 16, radio 39, 18,5/24,05. */
.hablamos__formulario .btnenviar {
  width: 100%;
  height: 56px;
  margin: 4px 0 0;
  padding: 16px;
  border: 0;
  border-radius: 39px;
  background: var(--VerdeOscuro);
  color: #fff;
  font-size: 18.5px;
  font-weight: 600;
  line-height: 24.05px !important;
  letter-spacing: -0.5px;
  cursor: pointer;
  transition: background-color .2s;
}

.hablamos__formulario .btnenviar:hover { background: var(--VerdeHoja); }
.hablamos__formulario .btnenviar:active { opacity: .6; }
.hablamos__formulario .btnenviar:focus-visible { outline: 1px solid var(--VerdeOscuro); outline-offset: 3px; }

/* Móvil (sticky-boton-mb 2297:1563): 311 x 419, relleno 40/16/32/16, centrado y a
   11 del borde inferior, donde va el aviso fijo al que sustituye. */
@media (max-width: 768px) {
  .hablamos {
    right: auto;
    left: 50%;
    bottom: 11px;
    transform: translateX(-50%);
    width: 311px;
    max-height: calc(100vh - 22px);
    max-height: calc(100dvh - 22px);
    padding: 40px 16px 32px;
  }

  .hablamos__formulario .g-recaptcha { transform: scale(.918); height: 71.6px; }
}

/* Pantallas bajas (portátil y la mayoría de móviles): menos aire para que quepa
   entero sin desplazar en 1280x720 (695 → 635). Va después de las reglas base y
   de móvil para ganarles. */
@media (max-height: 820px) {
  .hablamos { padding-top: 32px; padding-bottom: 24px; }
  .hablamos__texto { margin-bottom: 12px; }
  .hablamos__formulario form { gap: 12px; }
}

@media (min-width: 769px) and (max-height: 820px) {
  .hablamos {
    bottom: 24px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }
}

/* ------------------------------------------------------------- COOKIES */
/* Accesibilidad (punto 18, acordado con la agencia el 20/10): el icono flotante
   de Borlabs Cookie pasa a gris oscuro (#212121 sobre su fondo #fafafa, 15,7:1).
   Borlabs lo pinta con la variable --widget-color (por defecto #555). */
:root { --widget-color: #212121; }
#BorlabsCookieWidget .brlbs-cmpnt-widget svg { color: #212121 !important; }

/* En móvil el flotante del teléfono va centrado abajo (a 11 del borde, 48 de alto)
   y pisaba el icono de cookies, que Borlabs ancla abajo a la izquierda (72 x 72).
   Se sube el icono por encima del flotante (visto en producción el 27/10). */
@media (max-width: 768px) {
  #BorlabsCookieWidget .brlbs-cmpnt-widget { bottom: 68px !important; }
}