/* Bresdi — hoja de estilos del sitio
   Paleta de marca: cian #0096b0 y gris #555555 (Bresdi/estilo-corporativo.md).
   Tipografía Poppins. Todo el sitio usa estas variables. */

/* Poppins servida desde el propio sitio (pendiente 22, 25-sep-2026). Antes
 * venía de Google Fonts, que detenía el primer dibujo unos 750 ms en celular
 * y recibía la IP de cada visitante. Son los mismos archivos WOFF2 de Google,
 * subconjuntos latin y latin-ext; el navegador baja latin-ext solo si la
 * página usa alguno de sus caracteres. Licencia en css/fuentes/OFL.txt */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/poppins-400-latin.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: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fuentes/poppins-400-latin-ext.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: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fuentes/poppins-500-latin.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: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fuentes/poppins-500-latin-ext.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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/poppins-600-latin.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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fuentes/poppins-600-latin-ext.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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/poppins-700-latin.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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fuentes/poppins-700-latin-ext.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;
}

:root {
  --cian: #0096b0;
  --cian-texto: #007e96;
  --cian-hover: #006678;
  --tinte: #f1f8fa;
  --borde-suave: #d5eaf0;
  --borde-punteado: #a9d6e1;
  --gris: #555555;
  --gris-2: #6e7173;
  --borde: #e3e6e8;
  --borde-nav: #eceff1;
  /* Verde de WhatsApp de marca. El blanco sobre #25d366 da 1.98 de contraste (mínimo 4.5);
     se probó #15803d el 29-sep-2026 y Bruno lo descartó: se queda el verde de WhatsApp,
     con excepción anotada en el checklist de pre-vuelo (punto 33) */
  --wa: #25d366;
  --wa-hover: #1ebe5b;
  /* Texto corrido. construir.py cambia los tamaños escritos en el HTML por
     estas variables; en escritorio valen lo de siempre y en celular 16 px
     (1-oct-2026, punto 9 del checklist de pre-vuelo) */
  --texto-13: 13px;
  --texto-135: 13.5px;
  --texto-14: 14px;
  --texto-145: 14.5px;
  --texto-15: 15px;
  --texto-155: 15.5px;
}
@media (max-width: 640px) {
  :root {
    --texto-13: 16px;
    --texto-135: 16px;
    --texto-14: 16px;
    --texto-145: 16px;
    --texto-15: 16px;
    --texto-155: 16px;
  }
}

html { scroll-behavior: smooth; }
/* Margen de desplazamiento del tamaño de la barra fija arriba y de la píldora
   de WhatsApp abajo. Sirve a los saltos a secciones y al recorrido con Tab, que
   dejaba el elemento enfocado debajo de la barra o de la píldora (1-oct-2026,
   punto 35 del checklist de pre-vuelo). Sustituye a scroll-margin-top en
   section[id] y en los títulos de artículo: los dos se sumarían */
html { scroll-padding-top: 88px; scroll-padding-bottom: 96px; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--gris);
  font-family: Poppins, system-ui, sans-serif;
  text-wrap: pretty;
}

a { color: var(--cian-texto); }
a:hover { color: var(--cian-hover); }

img { max-width: 100%; }

/* Salto al contenido, visible solo al tabular */
.bd-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--cian-texto);  /* blanco sobre #007e96: 4.69, pasa AA */
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.bd-saltar:focus {
  left: 0;
  color: #fff;
}

/* ------------------------------------------------------------------ nav */
.bd-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde-nav);
}
.bd-nav-fila {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  gap: 28px;
}
.bd-logo { display: flex; align-items: center; }
.bd-logo img { height: 34px; width: auto; display: block; }

.bd-navlinks {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 500;
}
.bd-navlinks a {
  text-decoration: none;
  color: var(--gris);
  font-weight: 500;
}
.bd-navlinks a:hover { color: var(--cian-texto); }
.bd-navlinks a.bd-activo { color: var(--cian-texto); font-weight: 600; }
.bd-navlinks a:focus-visible,
.bd-menu a:focus-visible {
  outline: 2px solid var(--cian);
  outline-offset: 3px;
}

/* Desplegable de Servicios (23-sep-2026): se abre al pasar el cursor, con
   el teclado o con el botón de la flecha (js/bresdi.js) */
.bd-drop { position: relative; display: flex; align-items: center; gap: 2px; }
.bd-drop-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gris);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-drop-btn svg { transition: transform .18s; }
.bd-drop-btn:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.bd-drop-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: -24px;
  width: 360px;
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--borde-suave);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(40, 50, 55, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* Puente invisible para que el cursor llegue al panel sin cerrarlo */
.bd-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.bd-drop:hover .bd-drop-panel,
.bd-drop:focus-within .bd-drop-panel,
.bd-drop.bd-abierto .bd-drop-panel { opacity: 1; visibility: visible; transform: none; }
.bd-drop:hover .bd-drop-btn svg,
.bd-drop.bd-abierto .bd-drop-btn svg { transform: rotate(180deg); }
.bd-drop-panel a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--gris);
}
.bd-drop-panel a:hover, .bd-drop-panel a:focus-visible { background: var(--tinte); color: var(--gris); outline: none; }
.bd-drop-panel .bd-serv-ico { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
.bd-drop-panel b { display: block; font-size: 14.5px; font-weight: 600; }
.bd-drop-panel small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--gris-2); margin-top: 2px; }
.bd-drop-panel .bd-drop-todos {
  border-top: 1px solid var(--borde-nav);
  border-radius: 0 0 10px 10px;
  margin-top: 4px;
  padding: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cian-texto);
}

/* Botón hamburguesa, solo en móvil */
.bd-menu-btn {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.bd-menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--gris);
  transition: transform .18s, opacity .18s;
}
.bd-menu-btn:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.bd-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bd-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bd-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.bd-menu {
  display: none;
  border-top: 1px solid var(--borde-nav);
  padding: 8px clamp(20px, 5vw, 72px) 16px;
  background: #fff;
}
.bd-menu a {
  display: block;
  padding: 13px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid var(--borde-nav);
}
.bd-menu a:last-child { border-bottom: 0; }
.bd-menu a.bd-activo { color: var(--cian-texto); font-weight: 600; }
/* Áreas de servicio bajo "Servicios" en el menú móvil */
.bd-menu a.bd-menu-sub {
  padding: 11px 0 11px 18px;
  font-size: 15px;
  color: var(--gris-2);
  border-bottom: 0;
  border-left: 2px solid var(--borde-suave);
}
.bd-menu a.bd-menu-sub + a:not(.bd-menu-sub) { border-top: 1px solid var(--borde-nav); }

/* Sin el botón de WhatsApp (24-sep-2026) los cinco enlaces caben hasta 700 px */
@media (max-width: 700px) {
  .bd-navlinks { display: none; }
  .bd-menu-btn { display: flex; }
  .bd-menu:not([hidden]) { display: block; }
}

/* -------------------------------------------------------------- rejillas */
.bd-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.bd-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 48px;
}
.bd-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.bd-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.bd-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 48px;
  align-items: center;
}
.bd-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 48px;
  align-items: center;
}
.bd-post {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 56px;
  align-items: start;
}
/* La columna lateral ocupa todo el alto del artículo para que su índice
   pueda quedarse fijo mientras se lee */
.bd-post > aside { align-self: stretch; }

@media (max-width: 1000px) {
  .bd-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-hero { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* minmax(0, 1fr): sin esto, una tabla ancha estira la columna y la página
     se desborda en móvil en lugar de desplazarse dentro de su contenedor */
  .bd-post { grid-template-columns: minmax(0, 1fr); }
  .bd-toc { position: static !important; }
  /* Índice del artículo: área de toque cómoda en pantallas táctiles */
  .bd-toc nav { gap: 2px !important; }
  .bd-toc nav a { padding: 8px 0; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
}
@media (max-width: 860px) {
  .bd-2, .bd-split, .bd-cta { grid-template-columns: 1fr; }
  .bd-split { align-items: start; }
  /* Regla general (23-sep-2026): todo botón de WhatsApp dentro del contenido
     ocupa el ancho completo. La barra y el círculo flotante quedan fuera de main.
     El relleno del prototipo va en línea; aquí se reduce para que el texto quepa */
  main .bd-wa {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-self: stretch;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-align: center;
    text-wrap: balance;
  }
}
@media (max-width: 380px) {
  main .bd-wa { font-size: 15px !important; }
}
@media (max-width: 640px) {
  .bd-3, .bd-4 { grid-template-columns: 1fr; }
}

/* Tablas de artículos con tres columnas o más: en móvil cada fila es una
   tarjeta. La primera celda es el título; las demás llevan su encabezado
   como etiqueta. Un valor corto queda junto a su etiqueta y uno largo baja
   a la línea siguiente. */
@media (max-width: 640px) {
  .bd-apilada thead { display: none; }
  .bd-apilada,
  .bd-apilada tbody,
  .bd-apilada tr { display: block; width: 100%; }
  .bd-apilada tr {
    border: 1px solid var(--borde);
    border-radius: 14px;
    padding: 4px 16px;
    margin: 0 0 12px;
    background: #fff;
    box-sizing: border-box;
  }
  .bd-apilada td {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 2px;
    border: 0 !important;
    border-top: 1px solid var(--borde-nav) !important;
    padding: 9px 0 !important;
  }
  .bd-apilada td:first-child {
    display: block;
    border-top: 0 !important;
    padding-top: 12px !important;
    font-weight: 600;
    color: var(--gris);
  }
  .bd-apilada td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    min-width: 7.5em;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cian-texto);
  }
}

/* -------------------------------------------------------------- tarjetas */
.bd-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 24px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.bd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 150, 176, .14);
  border-color: var(--cian);
  color: inherit;
}
.bd-card:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.bd-card h3 { overflow-wrap: anywhere; hyphens: auto; }

.bd-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(165deg, #ffffff 0%, #eef7f9 100%);
  border: 1px solid var(--borde-suave);
  border-radius: 22px;
  padding: 28px;
  transition: background .18s, transform .18s, box-shadow .18s, border-color .18s;
}
.bd-tile:hover {
  background: linear-gradient(165deg, #ffffff 0%, #e6f4f7 100%);
  border-color: var(--cian);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 150, 176, .18);
  color: inherit;
}
.bd-tile:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.bd-tile h3 { overflow-wrap: anywhere; }
/* Con cuatro columnas, el título reserva tres líneas para que las
   descripciones queden alineadas entre tarjetas */
@media (min-width: 1001px) {
  .bd-tile h3 { min-height: calc(1.35em * 3); }
}
/* Tarjetas del bloque 01 del Inicio (4-oct-2026): en pantallas medianas,
   cuatro columnas dejan cada tarjeta en unos 250 px y los CTA se parten en
   dos renglones; ahí van de dos en dos, con el título en dos líneas */
@media (min-width: 1001px) and (max-width: 1299px) {
  .bd-4:has(> .bd-tile) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-4 > .bd-tile h3 { min-height: calc(1.35em * 2); }
}
.bd-tile-desc {
  margin: 0;
  font-size: var(--texto-145);
  line-height: 1.55;
  color: var(--gris-2);
}
/* Ícono protagonista: cuadro con degradado cian y volumen suave */
.bd-tile .bd-ico {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(150deg, #26c0da 0%, var(--cian) 55%, var(--cian-texto) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px rgba(0, 150, 176, .28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: 4px;
  transition: transform .2s, box-shadow .2s;
}
.bd-tile .bd-ico svg { width: 28px; height: 28px; stroke-width: 1.75; }
.bd-tile:hover .bd-ico {
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 26px rgba(0, 150, 176, .34);
}
.bd-tile .bd-go {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cian-texto);
}
.bd-tile .bd-arrow {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--cian);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s;
}
.bd-tile:hover .bd-arrow { transform: translateX(5px); }
/* Pantalla intermedia elige-repse.html (24-sep-2026): dos tarjetas lado a
   lado con el lenguaje de .bd-tile; en una columna se apilan */
/* La sección ocupa el alto de la ventana para que el pie no suba a media
   pantalla; svh evita saltos con la barra del navegador en celular */
.bd-elige-sec { padding: 28px 0 72px; min-height: calc(100svh - 190px); box-sizing: border-box; }
.bd-elige {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
}
.bd-elige .bd-elige-t { min-height: 0; font-size: 21px; line-height: 1.3; font-weight: 600; margin: 0; color: var(--gris); }
.bd-elige .bd-tile-desc { font-size: var(--texto-15); }
.bd-elige .bd-tile .bd-go { font-size: 15px; padding-top: 6px; }
/* En escritorio la pregunta y las tarjetas van al centro, a lo ancho y a lo
   alto de la sección; la ruta se queda arriba a la izquierda como en las
   demás páginas */
@media (min-width: 701px) {
  .bd-elige-sec { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
  .bd-elige { width: 100%; }
  .bd-elige .bd-tile { align-items: center; text-align: center; }
}
@media (max-width: 700px) {
  .bd-elige { grid-template-columns: 1fr; gap: 14px; }
  .bd-elige .bd-tile { padding: 22px; gap: 10px; }
  .bd-elige .bd-tile .bd-ico { width: 52px; height: 52px; border-radius: 16px; }
  .bd-elige .bd-elige-t { font-size: 19px; }
}

/* Razones del bloque 02 del Inicio: mismo lenguaje que .bd-tile, sin enlace */
.bd-razon {
  background: linear-gradient(165deg, #ffffff 0%, #eef7f9 100%);
  border: 1px solid var(--borde-suave);
  border-radius: 22px;
  padding: 32px 28px;
  transition: background .18s, transform .18s, box-shadow .18s, border-color .18s;
}
.bd-razon:hover {
  background: linear-gradient(165deg, #ffffff 0%, #e6f4f7 100%);
  border-color: var(--cian);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 150, 176, .18);
}
.bd-razon img { transition: transform .2s; }
.bd-razon:hover img { transform: translateY(-2px) rotate(-4deg); }

/* --------------------------------------------------------- servicios
   Página de Servicios, versión B: ícono del área arriba del título y un
   ícono por servicio, con el mismo lenguaje que las tarjetas del Inicio. */
.bd-area-ico {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(150deg, #26c0da 0%, var(--cian) 55%, var(--cian-texto) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px rgba(0, 150, 176, .28);
  margin-bottom: 22px;
}
.bd-serv {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(165deg, #ffffff 0%, #eef7f9 100%);
  border: 1px solid var(--borde-suave);
  border-radius: 18px;
  padding: 20px 22px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.bd-serv:hover {
  transform: translateX(4px);
  border-color: var(--cian);
  box-shadow: 0 12px 30px rgba(0, 150, 176, .14);
}
.bd-serv h3 { margin-top: 2px !important; }
.bd-serv p { margin-top: 6px !important; }
.bd-serv-ico {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--cian);
  border: 1px solid var(--borde-suave);
  box-shadow: 0 6px 14px rgba(0, 150, 176, .12);
}
/* Correo y teléfono de Contacto: mismo ícono que los servicios. Las tarjetas
   van lado a lado solo si caben completas; si no, se apilan */
.bd-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.bd-dato {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  background: linear-gradient(165deg, #ffffff 0%, #eef7f9 100%);
  border: 1px solid var(--borde-suave);
  border-radius: 18px;
  padding: 16px 20px;
}
.bd-dato > div { min-width: 0; overflow-wrap: anywhere; }
.bd-dato a { text-decoration: none; }
.bd-dato a:hover { text-decoration: underline; }
.bd-serv-mas {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px dashed var(--borde-punteado);
  border-radius: 18px;
  padding: 14px 22px;
  font-size: var(--texto-145);
  color: var(--cian-texto);
  font-weight: 600;
}
.bd-serv-areas {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--texto-14);
  line-height: 1.5;
  color: var(--gris-2);
}
.bd-serv-areas li { padding-left: 14px; position: relative; }
.bd-serv-areas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cian);
}
.bd-serv-areas b { color: var(--gris); font-weight: 600; }
.bd-serv-ico-chico { width: 36px; height: 36px; border-radius: 12px; box-shadow: none; }

/* -------------------------------------------------------------- WhatsApp */
.bd-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--wa);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.bd-wa:hover { background: var(--wa-hover); color: #fff; }
.bd-wa:focus-visible { outline: 2px solid var(--wa); outline-offset: 2px; }

.bd-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  padding: 15px 24px;
  font-size: 15.5px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .42);
}
.bd-float span { white-space: nowrap; }
/* En móvil el CTA flotante es un círculo en la esquina, separado 24 px de
   los bordes para tocarlo cómodo con funda (23-sep-2026). El texto
   se conserva para lectores de pantalla. js/bresdi.js lo oculta mientras el
   botón de WhatsApp del hero siga a la vista, o en los primeros 300 px de
   scroll si la página no tiene ese botón. En escritorio no cambia nada. */
@media (max-width: 640px) {
  .bd-float {
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 50%;
  }
  .bd-wa.bd-float { transition: background .15s, opacity .25s, transform .25s, visibility .25s; }
  .bd-float svg { width: 28px; height: 28px; }
  .bd-float span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .bd-float.bd-float-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.9);
  }
}

/* ------------------------------------------------------------ acordeones */
details summary::-webkit-details-marker { display: none; }
details summary span svg { transition: transform .18s; }
details[open] summary span svg { transform: rotate(180deg); }
/* Toda la tarjeta abre la respuesta (23-sep-2026): el relleno pasa de la
   tarjeta a la pregunta, así el área de toque es la tarjeta completa. El
   prototipo trae el relleno en línea, por eso el !important */
main details { padding: 0 !important; }
main details > summary { padding: 18px 22px; border-radius: 16px; }
main details > summary:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
main details > p { margin: -6px 0 0 !important; padding: 0 22px 18px; }

/* --------------------------------------------------------------- footer */
.bd-footer {
  background: var(--gris);
  color: rgba(255, 255, 255, .78);
  font-size: 13.5px;
  line-height: 1.9;
}
.bd-footer-rejilla {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 72px) 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px;
}
.bd-footer-logo {
  filter: brightness(0) invert(1);
  height: 30px;
  width: auto;
  display: block;
  margin-bottom: 14px;
}
.bd-footer-desc {
  margin: 0;
  max-width: 34ch;
  /* Texto corrido del pie: 16 px en celular como el resto (2-oct-2026, punto 9) */
  font-size: var(--texto-135);
}
.bd-footer h2 {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}
.bd-footer a {
  display: block;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
}
.bd-footer a:hover { color: #fff; }
.bd-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bd-footer-barra {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 72px) 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px;
}
.bd-footer-barra a { display: inline; color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 3px; }
.bd-footer-barra .bd-sep { margin: 0 8px; opacity: .5; }
/* En escritorio la píldora flotante tapaba los últimos enlaces del pie
   (pendiente 17, 25-sep-2026). La barra final mide lo mismo que la píldora
   más su margen, así que al llegar al final la píldora queda dentro de la
   barra y no encima de los enlaces */
@media (min-width: 641px) {
  .bd-footer-barra {
    min-height: 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: calc(clamp(20px, 5vw, 72px) + 250px);
  }
}
/* El CTA flotante no debe tapar el aviso del pie en móvil */
@media (max-width: 640px) {
  .bd-footer-barra { padding-bottom: 96px; }
  /* Enlaces del pie más altos para tocarlos sin error (23-sep-2026) */
  .bd-footer a { padding: 11px 0; line-height: 1.6; min-height: 44px; box-sizing: border-box; }
  /* Filtros en píldora de Artículos y Servicios (1-oct-2026, punto 9) */
  .bd-chip { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
  /* Área de toque de 44 px sin mover nada: el relleno vertical de un enlace
     en línea no cambia el alto del renglón, y el margen negativo compensa el
     del logo (1-oct-2026, punto 9) */
  .bd-ruta a, .bd-toc div > a, .bd-dato a { padding: 13px 0; }
  .bd-footer-barra a { padding: 14px 0; }
  .bd-logo { padding: 5px 0; margin: -5px 0; }
  .bd-menu-btn { width: 44px; height: 44px; }
  .bd-footer h2 { margin-bottom: 4px; }
}

/* Píldora a la página propia del área en servicios.html. Sustituyó al botón
   de WhatsApp de cada área el 24-sep-2026; el flotante queda como único CTA */
.bd-sv-ir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--cian);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.bd-sv-ir:hover {
  background: var(--cian-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 150, 176, .28);
}
.bd-sv-ir:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.bd-sv-pildoras { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Con dos píldoras van apiladas y del mismo ancho; en laptops chicas la
   segunda puede partirse en dos líneas y así se ven parejas */
.bd-sv-pildoras:has(.bd-sv-ir-2) { align-items: stretch; max-width: 400px; }
.bd-sv-pildoras:has(.bd-sv-ir-2) .bd-sv-ir { text-align: center; text-wrap: balance; }
/* Segunda píldora de un área (REPSE lleva registro y cumplimiento): contorno cian */
.bd-sv-ir-2 { background: #fff; color: var(--cian-texto); box-shadow: inset 0 0 0 1.5px var(--cian); }
.bd-sv-ir-2:hover { background: var(--tinte); color: var(--cian-hover); }
@media (max-width: 860px) {
  .bd-sv-ir { display: flex; width: 100%; box-sizing: border-box; text-align: center; }
}

/* ---------------------------------------------------- páginas de servicio
   Una página por área (construir-servicios.py). Nació con REPSE el
   23-sep-2026. Reutiliza .bd-razon, .bd-serv y .bd-cta del resto del sitio. */
.bd-sv-hero-datos { display: grid; gap: 14px; }
.bd-sv-dato {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(165deg, #ffffff 0%, #eef7f9 100%);
  border: 1px solid var(--borde-suave);
  border-radius: 20px;
  padding: 22px 24px;
}
.bd-sv-valor { font-size: 30px; font-weight: 700; color: var(--cian); line-height: 1.1; }
.bd-sv-texto { font-size: var(--texto-145); line-height: 1.5; color: var(--gris-2); }
.bd-sv-tile { text-align: left; }
/* Datos del hero centrados a lo ancho, con los números alineados arriba
   (opción B, 24-sep-2026). Los plazos siguen a la izquierda porque sus
   textos son largos */
.bd-sv-hero-datos .bd-sv-dato { align-items: center; text-align: center; }
/* «Qué está en juego» (4-oct-2026, variante B del comparador de pruebas/):
   sin caja, entre dos líneas finas, y cada riesgo con un ícono de alerta en
   ámbar, el único acento cálido. Antes era una caja gris oscuro que cortaba
   la página */
.bd-sv-riesgo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 48px;
  align-items: center;
  border-top: 1px solid var(--borde-suave);
  border-bottom: 1px solid var(--borde-suave);
  padding: 48px 0;
  margin: 24px 0;
  --ico-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.bd-sv-riesgo-lista { display: grid; }
.bd-sv-riesgo-lista div {
  position: relative;
  border-bottom: 1px solid var(--borde-suave);
  padding: 18px 0 18px 48px;
  font-size: var(--texto-145);
  line-height: 1.6;
  color: var(--gris-2);
}
.bd-sv-riesgo-lista div:last-child { border-bottom: 0; }
.bd-sv-riesgo-lista div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fdf3e2;
}
.bd-sv-riesgo-lista div::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 23px;
  width: 18px;
  height: 18px;
  background: #b86e00;
  -webkit-mask: var(--ico-alerta) center / contain no-repeat;
  mask: var(--ico-alerta) center / contain no-repeat;
}
.bd-sv-riesgo-lista b { color: var(--gris); }
/* Cómo lo hacemos: línea de tiempo (4-oct-2026, variante A del comparador
   de pruebas/). Cada paso centrado en su columna y la línea del centro del
   primer círculo al del último: columnas de (100% - 3 huecos de 28px) / 4 */
.bd-sv-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
  position: relative;
}
.bd-sv-pasos::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc((100% - 84px) / 8);
  right: calc((100% - 84px) / 8);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--borde-suave) 0%, var(--cian) 100%);
}
.bd-sv-pasos li { position: relative; text-align: center; }
.bd-sv-punto {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid var(--cian);
  color: var(--cian-texto);
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 0 0 8px #fff;
}
/* Lo que recibe el cliente: relleno plano y nítido, sin sombra difusa */
.bd-sv-pasos li:last-child .bd-sv-punto { background: var(--cian); color: #fff; }
.bd-sv-etq {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cian-texto);
  margin: 22px 0 6px;
}
.bd-sv-pasos li:last-child .bd-sv-etq { color: #fff; background: var(--cian-texto); padding: 3px 10px; border-radius: 999px; }
.bd-sv-pasos h3 { font-size: 17px; font-weight: 600; line-height: 1.35; margin: 0; color: var(--gris); }
.bd-sv-pasos p { font-size: var(--texto-15); line-height: 1.6; max-width: 30ch; margin: 8px auto 0; color: var(--gris-2); }
.bd-sv-precio {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px 48px;
  align-items: start;
  border: 1px solid var(--borde-suave);
  border-radius: 24px;
  padding: 36px clamp(24px, 4vw, 48px);
  background: #fff;
}
/* Alcance del precio: lo que incluye y lo que se cotiza aparte (23-sep-2026) */
.bd-sv-alcance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.bd-sv-alcance h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: var(--gris); }
.bd-sv-alcance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bd-sv-alcance li {
  position: relative;
  padding-left: 26px;
  font-size: var(--texto-14);
  line-height: 1.5;
  color: var(--gris-2);
}
.bd-sv-alcance li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.bd-sv-si li::before { content: "✓"; background: var(--tinte); color: var(--cian-texto); border: 1px solid var(--borde-suave); }
.bd-sv-no li::before { content: "+"; background: #f4f5f6; color: var(--gris-2); border: 1px solid var(--borde); }
/* Textos del bloque de precio (20-oct-2026: antes en atributos style) */
.bd-sv-precio-etq { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cian-texto); margin-bottom: 12px; }
.bd-sv-precio-monto { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; margin: 0; color: var(--gris); line-height: 1.1; }
.bd-sv-precio-iva { font-size: 17px; font-weight: 500; color: var(--gris-2); }
.bd-sv-precio-cond { font-size: 16px; font-weight: 600; margin: 10px 0 0; color: var(--cian-texto); }
.bd-sv-precio-nota { font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; color: var(--gris-2); }
/* Variante sobre cian, con el degradado de la portada. Todo el texto va en
   blanco puro: sobre el cian claro del degradado, el blanco translúcido y el
   cian pálido quedan debajo del contraste AA */
.bd-sv-precio-cian { position: relative; overflow: hidden; border: 0; background: linear-gradient(150deg, var(--cian-texto) 0%, var(--cian-hover) 100%); box-shadow: 0 24px 50px rgba(0, 60, 75, .22); }
.bd-sv-precio-cian::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 65%); pointer-events: none; }
.bd-sv-precio-cian > * { position: relative; z-index: 1; }
.bd-sv-precio-cian .bd-sv-precio-etq,
.bd-sv-precio-cian .bd-sv-precio-monto,
.bd-sv-precio-cian .bd-sv-precio-iva,
.bd-sv-precio-cian .bd-sv-precio-cond,
.bd-sv-precio-cian .bd-sv-precio-nota,
.bd-sv-precio-cian .bd-sv-alcance h3,
.bd-sv-precio-cian .bd-sv-alcance li { color: #fff; }
.bd-sv-precio-cian .bd-sv-precio-cond { font-weight: 700; }
.bd-sv-precio-cian .bd-sv-alcance { border-left: 1px solid rgba(255, 255, 255, .22); padding-left: 32px; }
.bd-sv-precio-cian .bd-sv-si li::before { background: var(--wa); color: #fff; border-color: var(--wa); }
.bd-sv-precio-cian .bd-sv-no li::before { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); }
/* Preguntas del área a todo el ancho; la respuesta conserva un largo de línea legible */
.bd-sv-preguntas { display: grid; gap: 12px; }
.bd-sv-preguntas details p { max-width: 75ch; }
@media (max-width: 860px) {
  .bd-sv-riesgo, .bd-sv-precio { grid-template-columns: 1fr; }
  .bd-sv-precio-cian .bd-sv-alcance { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 24px; }
  /* Línea de tiempo vertical a la izquierda; cada tramo une un círculo con el siguiente */
  .bd-sv-pasos { grid-template-columns: 1fr; }
  .bd-sv-pasos::before { display: none; }
  .bd-sv-pasos li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 18px; padding-bottom: 28px; text-align: left; }
  .bd-sv-pasos li:last-child { padding-bottom: 0; }
  .bd-sv-pasos li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 26.5px;
    top: 56px;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--borde-suave) 0%, var(--cian) 100%);
  }
  .bd-sv-punto { margin: 0; }
  .bd-sv-etq { margin-top: 4px; }
  .bd-sv-pasos p { max-width: none; margin-left: 0; }
  .bd-sv-hero-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .bd-sv-dato { padding: 16px 14px; border-radius: 16px; }
  .bd-sv-valor { font-size: 22px; }
  .bd-sv-texto { font-size: 12.5px; }
}
@media (max-width: 480px) {
  .bd-sv-hero-datos .bd-sv-dato { padding: 14px 10px; }
  .bd-sv-hero-datos .bd-sv-valor { font-size: 19px; }
}
@media (max-width: 640px) {
  .bd-sv-alcance { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- formulario */
.bd-form-estado {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.bd-form-estado[data-tipo="error"] { color: #b3261e; }
.bd-form-estado[data-tipo="ok"] { color: var(--cian-texto); }

/* Medio de contacto: desplegable WhatsApp o Correo junto al campo */
.bd-medio-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.bd-medio select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23007e96' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
.bd-medio-ayuda { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--gris-2); }

/* Confirmación del formulario (opción C, 24-sep-2026): la tarjeta del
   formulario conserva su alto y muestra la hoja entrando a la carpeta del
   paso 3, la palomita en verde, el folio y el WhatsApp para lo urgente. */
.bd-form-tarjeta { box-sizing: border-box; }
.bd-form-tarjeta > * { transition: opacity .3s ease; }
.bd-form-tarjeta.bd-saliendo > * { opacity: 0; }
.bd-form-tarjeta.bd-enviado { display: flex; flex-direction: column; justify-content: center; }
/* !important: el formulario trae display:grid en línea */
.bd-form-tarjeta.bd-enviado > :not(.bd-confirma) { display: none !important; }
.bd-confirma { display: flex; flex-direction: column; align-items: center; text-align: center; outline: none; }
.bd-confirma[hidden] { display: none; }
.bd-conf-caja { width: min(260px, 78%); container-type: inline-size; margin: 0 auto 6px; }
.bd-conf-escena { position: relative; width: 100cqw; height: 75cqw; }
.bd-conf-escena img { position: absolute; display: block; max-width: none; }
.bd-conf-carpeta { left: 18.64cqw; top: 13.36cqw; width: 58.01cqw; }
.bd-conf-carpeta:first-child { filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 50, 70, .12)); }
.bd-conf-hoja { left: 28.84cqw; top: 11.27cqw; width: 28.62cqw; transform: rotate(2deg); }
.bd-conf-palomita { left: 60cqw; top: 47cqw; width: 22cqw; filter: drop-shadow(0 1cqw 1.2cqw rgba(0, 60, 30, .2)); }
.bd-conf-titulo { font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--gris); margin: 4px 0 10px; }
.bd-conf-folio {
  margin: 0;
  font-size: 13.5px;
  color: var(--gris-2);
  background: #fff;
  border: 1px dashed var(--borde-punteado);
  border-radius: 999px;
  padding: 6px 16px;
}
.bd-conf-folio strong { color: var(--cian-texto); font-weight: 600; letter-spacing: .04em; }
.bd-conf-texto { max-width: 34ch; margin: 16px auto 24px; font-size: var(--texto-145); line-height: 1.6; color: var(--gris-2); }
/* Doble clase para ganarle a "main .bd-wa", que en móvil permite el salto de línea */
.bd-confirma .bd-conf-wa { width: 100%; box-sizing: border-box; padding: 14px 12px !important; gap: 8px; font-size: 15px; text-align: center; text-wrap: nowrap; white-space: nowrap; }

.bd-js .bd-conf-anima .bd-conf-hoja { animation: bd-conf-cae .9s cubic-bezier(.5, 0, .3, 1) .15s both; }
.bd-js .bd-conf-anima .bd-conf-escena { animation: bd-conf-recibe .35s ease-out .95s both; }
.bd-js .bd-conf-anima .bd-conf-palomita { animation: bd-conf-palomita .6s cubic-bezier(.3, 1.5, .5, 1) 1s both; }
.bd-js .bd-conf-anima .bd-conf-titulo { animation: bd-conf-sube .5s ease-out 1.15s both; }
.bd-js .bd-conf-anima .bd-conf-folio { animation: bd-conf-sube .5s ease-out 1.28s both; }
.bd-js .bd-conf-anima .bd-conf-texto { animation: bd-conf-sube .5s ease-out 1.4s both; }
.bd-js .bd-conf-anima .bd-conf-wa { animation: bd-conf-sube .5s ease-out 1.55s both; }
@keyframes bd-conf-cae {
  0% { transform: translateY(-38cqw) rotate(-8deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: rotate(2deg); opacity: 1; }
}
@keyframes bd-conf-recibe { 0%, 100% { transform: none; } 45% { transform: translateY(1.5cqw); } }
@keyframes bd-conf-palomita { 0% { transform: scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bd-conf-sube { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* -------------------------------------------------------------- movimiento
   Todo lo de esta sección depende de la clase bd-js, que js/bresdi.js pone
   solo si el visitante no pidió reducir animaciones. Sin JavaScript el sitio
   se ve completo y estático. */

/* Barra con sombra al bajar */
.bd-nav { transition: box-shadow .2s; }
.bd-nav.bd-nav-sombra { box-shadow: 0 6px 24px rgba(40, 50, 55, .07); }

/* Botones de WhatsApp: se elevan un poco al pasar el cursor */
.bd-wa { transition: background .15s, transform .15s, box-shadow .15s; }
.bd-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, .32); }
.bd-float:hover { box-shadow: 0 14px 34px rgba(37, 211, 102, .5); }

/* La ilustración del hero ya no flota (1-oct-2026): el video no flotaba y, al
   entrar, la imagen brincaba hasta 10 px a su lugar. El movimiento lo da el video */
/* Hero de Nosotros (4-oct-2026, variante A del comparador de pruebas/): la
   ilustración clay del equipo como tarjeta a la derecha del texto en
   escritorio y debajo en celular. Sustituye la foto de oficina con el isotipo
   3D (24-sep-2026), que no le gustó a Perla. Imagen generada en ChatGPT con
   los personajes del hero y el isotipo en las tazas */
main { overflow-x: clip; }
.bd-equipo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 60, 75, .16);
}
.bd-hero-equipo > figure { margin: 0; align-self: center; }
@media (max-width: 1000px) {
  .bd-hero-equipo > figure { margin-top: 8px; }
}

/* Video del hero: el blanco del video se funde con el de la página aunque la
   compresión lo altere un par de tonos */
/* El video del hero entra encima de la imagen fija con un fundido corto
   (1-oct-2026). Sin mix-blend-mode: con el fundido, multiplicar el video por
   la imagen de abajo oscurecía el hero mientras aparecía.
   El video queda 1 px por lado más chico que la imagen (13-oct-2026): a la
   misma medida, Chrome lo cuenta 2 px más grande por su capa propia, lo toma
   como contenido principal (LCP) y lo marca hasta que aparece, después de
   cargar la página. Con 1 px menos la imagen sigue siendo el contenido
   principal en celular y escritorio */
.bd-portada figure { position: relative; }
.bd-hero-video {
  position: absolute;
  inset: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  object-fit: contain;
  background: #fff;
  opacity: 0;
  transition: opacity .4s ease;
}
.bd-hero-video.bd-listo { opacity: 1; }

/* Aparición al hacer scroll. Más ágil desde el 25-sep-2026 (pendiente 14,
   auditoría externa): antes 0.65 s con 90 ms entre elementos. Ahora arranca
   antes de que el bloque entre a la pantalla (rootMargin en js/bresdi.js),
   dura 0.4 s y el retraso escalonado no pasa de 180 ms. En celular no se usa;
   ahí solo se llena la línea de los pasos. */
.bd-js .bd-rev {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(min(var(--i, 0), 3) * 60ms);
}
.bd-js .bd-rev.bd-visto { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .bd-js .bd-rev { opacity: 1; transform: none; transition: none; }
}

/* Línea superior de los pasos: se llena de izquierda a derecha */
.bd-js .bd-linea {
  position: relative;
  border-top-color: var(--borde-suave) !important;
}
.bd-js .bd-linea::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cian);
  transform-origin: left center;
  transform: scaleX(var(--lleno, 1));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1) .25s;
}
.bd-js .bd-linea.bd-rev:not(.bd-visto)::before { transform: scaleX(0); }

/* Los tres pasos del Inicio avanzan con el scroll (solo pantallas amplias) */
.bd-pasos-scroll {
  height: 230vh;
  padding: 0 !important;
}
.bd-pasos-scroll .bd-pasos-fijo {
  position: sticky;
  top: var(--nav-alto, 64px);
  min-height: calc(100vh - var(--nav-alto, 64px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0;
  box-sizing: border-box;
}
.bd-pasos-scroll .bd-pasos-interior { transform: scale(var(--pasos-escala, 1)); transform-origin: center; }
.bd-pasos-scroll .bd-linea::before { transition: none; }
.bd-pasos-scroll .bd-linea { transition: opacity .4s ease, transform .4s ease; }
.bd-pasos-scroll .bd-linea.bd-paso-pendiente { opacity: .32; transform: translateY(10px); }

/* Ilustraciones animadas del bloque 03 del Inicio. Cada escena se arma con
   piezas transparentes en una caja 4:3; las medidas van en cqw para que todo
   escale con la caja. Sin JS se ve la escena completa. js/bresdi.js mueve las
   piezas al ritmo de la línea de cada paso. */
.bd-esc-caja { width: 100%; container-type: inline-size; margin-bottom: 18px; }
.bd-esc { position: relative; width: 100cqw; height: 75cqw; transform: scale(.86); }
/* Chrome no debe usar las piezas animadas como ancla del scroll */
.bd-esc, .bd-conf-escena { overflow-anchor: none; }
.bd-esc img { position: absolute; display: block; max-width: none; }
/* Paso 1: teléfono y burbujas */
.bd-esc-tel { left: 32.08cqw; top: 6.5cqw; width: 35.83cqw; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 50, 70, .10)); }
.bd-esc-gris { transform-origin: 0 100%; }
.bd-esc-verde { transform-origin: 100% 100%; }
/* Paso 2: documento y lupa. --x y --y son el centro del cristal. */
.bd-esc[data-anim="lupa"] { --x: 57cqw; --y: 31.5cqw; --r: 10.9cqw; --o: 1; --s: 1; }
.bd-esc-doc { left: 20cqw; top: 6.5cqw; width: 50.6cqw; filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 50, 70, .10)); }
.bd-esc-lente { position: absolute; inset: 0; opacity: var(--o); transform: scale(var(--s)); transform-origin: var(--x) var(--y); }
.bd-esc-cristal {
  position: absolute;
  left: calc(var(--x) - var(--r));
  top: calc(var(--y) - var(--r));
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  overflow: hidden;
}
/* Dentro del cristal se ve el mismo documento 20 % más grande */
.bd-esc-cristal img {
  left: calc(20cqw - var(--x) + var(--r));
  top: calc(6.5cqw - var(--y) + var(--r));
  width: 50.6cqw;
  transform: scale(1.2);
  transform-origin: calc(var(--x) - 20cqw) calc(var(--y) - 6.5cqw);
}
.bd-esc-cristal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0 12%, rgba(255, 255, 255, 0) 34%), rgba(0, 150, 176, .06);
  box-shadow: inset 0 0 1.2cqw rgba(0, 90, 110, .18);
}
.bd-esc-aro { left: calc(var(--x) - 15.15cqw); top: calc(var(--y) - 14.5cqw); width: 41.07cqw; filter: drop-shadow(0 1.4cqw 1.4cqw rgba(0, 50, 70, .18)); }
/* Paso 3: carpeta, hojas entre el fondo y el frente, y palomita */
.bd-esc-carpeta { left: 18.64cqw; top: 13.36cqw; width: 58.01cqw; }
.bd-esc-fondo { filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 50, 70, .12)); }
.bd-esc-hoja { width: 28.62cqw; transform: rotate(var(--giro)); }
.bd-esc-palomita { left: 62.22cqw; top: 49.12cqw; width: 18.48cqw; filter: drop-shadow(0 1cqw 1.2cqw rgba(0, 50, 70, .18)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------ portada del Inicio
   Variante C, elegida el 25-sep-2026. En escritorio (al menos 901 × 700 px)
   el hero ocupa la pantalla, con una franja al pie que invita a bajar; al
   hacer scroll queda fijo y .bd-cortina, que envuelve el resto del Inicio,
   sube encima como una hoja. construir.py arma la estructura y js/bresdi.js
   desvanece el hero, pausa el video y lo oculta cuando la hoja lo tapa.

   Aviso: position: sticky deja de funcionar en silencio si algún ancestro
   del hero lleva overflow: hidden, auto o scroll. main usa overflow-x: clip,
   que sí es compatible. No cambiarlo sin revisar la portada. */
.bd-franja { display: none; }
@media (min-width: 901px) and (min-height: 700px) {
  .bd-portada {
    position: relative;
    min-height: min(calc(100svh - var(--nav-alto, 71px)), 900px);
    box-sizing: border-box;
    padding: 40px 0 104px !important;
    align-content: center;
  }
  .bd-franja {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid var(--borde);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris-2);
  }
  /* La píldora flotante espera a que se empiece a bajar (js/bresdi.js) */
  .bd-wa.bd-float { transition: background .15s, transform .25s, box-shadow .15s, opacity .25s, visibility .25s; }
  .bd-float.bd-float-arriba { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
  .bd-desliza { display: flex; align-items: center; gap: 14px; color: var(--cian-texto); white-space: nowrap; }
  .bd-desliza i {
    display: block;
    position: relative;
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: var(--borde-suave);
    overflow: hidden;
  }
  .bd-js .bd-desliza i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cian);
    transform: translateX(-100%);
    animation: bd-desliza 2.2s ease-in-out infinite;
  }

  /* La cortina depende de bd-js: sin JavaScript o con animaciones reducidas
     el hero se ve a pantalla completa, sin quedarse fijo */
  .bd-js .bd-portada { position: sticky; top: var(--nav-alto, 71px); z-index: 0; }
  .bd-js .bd-portada > div:first-child,
  .bd-js .bd-portada figure { will-change: transform, opacity; }
  .bd-js .bd-cortina { position: relative; z-index: 1; isolation: isolate; }
  .bd-js .bd-cortina::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background: #fff;
    border-radius: 36px 36px 0 0;
    box-shadow: 0 -20px 44px rgba(40, 50, 55, .09);
  }
}
@keyframes bd-desliza {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Sin halo detrás de la ilustración del Inicio desde el 1-oct-2026: Bruno lo
   retiró. En Safari de iOS el blanco del video tiñe el cian hacia el verde */

/* Inicio en celular, más compacto (pendiente 16, 25-sep-2026). La
   ilustración del hero ocupaba casi una pantalla entre el botón de WhatsApp
   y el contenido; ahora es más chica y los bloques tienen menos aire. El
   relleno del prototipo va en línea, por eso el !important */
@media (max-width: 640px) {
  .bd-portada { padding: 40px 0 32px !important; gap: 0; }
  /* La ilustración va entre el texto y el botón de WhatsApp (Bruno,
     25-sep-2026). La columna de texto se deshace para que sus piezas y la
     figura se ordenen en la misma rejilla */
  .bd-portada > div:first-child { display: contents; }
  /* Ilustración casi a todo el ancho (variante B del comparador de
     pruebas/, Bruno, 1-oct-2026). A 180 px el hero no se sentía hero. El
     botón de WhatsApp queda bajo la primera pantalla y el círculo flotante
     se ve desde el principio (js/bresdi.js) */
  .bd-portada figure { order: 1; width: 88%; max-width: 330px; margin: 14px auto 0 !important; }
  .bd-portada > div:first-child > div:last-child { order: 2; margin-top: 14px !important; }
  #quien, #porque, #como, #servicios { padding-top: 44px !important; padding-bottom: 44px !important; }
  #contacto.bd-cta { margin-top: 12px !important; margin-bottom: 56px !important; }
}

/* Aviso de privacidad (pendiente 13, 25-sep-2026): línea de aceptación del
   formulario y enlaces del texto legal */
.bd-form-aviso { margin: -4px 0 0; font-size: var(--texto-13); line-height: 1.5; color: var(--gris-2); }
.bd-form-aviso a, .bd-legal a { color: var(--cian-texto); text-underline-offset: 3px; }
.bd-legal li { margin-bottom: 4px; }

/* Servicios en celular: el desglose de cada área se pliega detrás de un
   botón (idea C, 25-sep-2026). js/bresdi.js crea el botón y marca la lista
   con .bd-plegable; sin JavaScript la lista se ve completa. En pantallas
   anchas el botón no aparece y la lista siempre se ve */
.bd-ver-serv { display: none; }
@media (max-width: 640px) {
  .bd-ver-serv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--cian-texto);
    background: var(--tinte);
    border: 1px solid var(--borde-suave);
    border-radius: 16px;
    cursor: pointer;
  }
  .bd-ver-serv svg { flex: none; transition: transform .2s; }
  .bd-ver-serv[aria-expanded="true"] svg { transform: rotate(180deg); }
  .bd-ver-serv:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
  .bd-plegable:not(.bd-abierto) { display: none !important; }
}

/* Página 404 con ilustración (1-oct-2026). En celular la ilustración va
   arriba del título y más chica, para que las tarjetas queden a la vista */
.bd-404 {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px 48px;
  align-items: center;
  margin-bottom: 40px;
}
.bd-404-img { width: 100%; max-width: 360px; height: auto; justify-self: center; }
@media (max-width: 640px) {
  .bd-404 { grid-template-columns: 1fr; margin-bottom: 32px; text-align: center; }
  .bd-404-img { order: -1; max-width: 180px; justify-self: center; }
}

/* Entrada del Inicio (1-oct-2026, variante B elegida por Bruno en el
   comparador de pruebas/). Solo el Inicio, solo CSS y sin esperar al script.
   Nada arranca invisible: Chrome no cuenta como pintado un elemento en
   opacidad 0 y retrasaría el contenido principal (LCP). Solo se mueven
   posición, escala y opacidad, en menos de 0.8 s. Con «Reducir movimiento»
   no hay entrada.
   La ilustración del hero no puede pintarse más chica ni más recortada por
   la orilla de la pantalla que el video que entra encima (13-oct-2026): Chrome
   cambia el contenido principal al elemento más grande y tomaba el video, que
   aparece después de cargar la página (LCP de 4.3 s en celular). Por eso en
   celular entra solo con fundido: con escala arrancaba al 96 % y, al subir
   desde abajo, en pantallas bajas quedaba más recortada que el video */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bd-entra-sube { from { opacity: .35; transform: translateY(var(--bd-d, 14px)); } to { opacity: 1; transform: none; } }
  @keyframes bd-entra-aparece { from { opacity: .35; } to { opacity: 1; } }
  @keyframes bd-entra-lado { from { opacity: .35; transform: translateX(32px); } to { opacity: 1; transform: none; } }
  @keyframes bd-entra-baja { from { opacity: .35; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  body:has(.bd-portada) .bd-nav { animation: bd-entra-baja .55s ease-out both; }
  .bd-portada > div:first-child > span { --bd-d: 18px; animation: bd-entra-sube .6s cubic-bezier(.16, .8, .24, 1) both; }
  .bd-portada > div:first-child > h1 { --bd-d: 32px; animation: bd-entra-sube .6s .08s cubic-bezier(.16, .8, .24, 1) both; }
  .bd-portada > div:first-child > p { --bd-d: 22px; animation: bd-entra-sube .6s .16s cubic-bezier(.16, .8, .24, 1) both; }
  .bd-portada > div:first-child > div { --bd-d: 22px; animation: bd-entra-sube .55s .2s cubic-bezier(.16, .8, .24, 1) both; }
  .bd-portada figure img { animation: bd-entra-lado .65s .1s cubic-bezier(.16, .8, .24, 1) both; }
  .bd-franja { animation: bd-entra-aparece .5s .28s ease-out both; }
  @media (max-width: 900px) { .bd-portada figure img { animation-name: bd-entra-aparece; } }
}

/* Misión, visión y valores en Nosotros (3-oct-2026, variante B «Editorial»
   del comparador de pruebas/). La misión va como frase grande con su idea
   central en cian, la visión con barra cian a la izquierda y los valores en
   lista numerada de dos columnas con filetes. El HTML lo pone
   mision_vision_valores() en construir.py */
.bd-mvv-etiqueta { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cian-texto); margin-bottom: 12px; }
.bd-mvv-h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; font-weight: 700; margin: 0; color: var(--gris); }
.bd-mvv p { font-size: var(--texto-155); line-height: 1.7; margin: 0; color: var(--gris-2); }
.bd-mvv .bd-mvv-frase { font-size: clamp(21px, 2.3vw, 29px); line-height: 1.45; font-weight: 600; color: var(--gris); max-width: 42ch; }
.bd-mvv-frase em { font-style: normal; color: var(--cian-texto); }
.bd-mvv-vision { border-left: 3px solid var(--cian); padding: 4px 0 4px clamp(18px, 2vw, 28px); max-width: 68ch; }
.bd-mvv .bd-mvv-vision p { font-size: 17px; color: var(--gris); }
.bd-mvv-lista { gap: 0 56px; }
.bd-mvv-valor { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; border-top: 1px solid var(--borde); padding: 26px 0; }
.bd-mvv-num { font-size: 34px; line-height: 1; font-weight: 700; color: var(--cian); }
.bd-mvv-valor h3 { font-size: 20px; font-weight: 600; margin: 0; color: var(--gris); }
.bd-mvv-lema { display: block; font-size: var(--texto-15); font-weight: 600; color: var(--cian-texto); margin: 2px 0 10px; }
@media (max-width: 640px) {
  .bd-mvv-lista { grid-template-columns: 1fr; }
  .bd-mvv-valor { grid-template-columns: 48px minmax(0, 1fr); padding: 22px 0; }
  .bd-mvv-num { font-size: 28px; }
  .bd-mvv .bd-mvv-vision p { font-size: 16px; }
}

/* Portada de página de destino (7-oct-2026, variante F del comparador de
   pruebas/). Hoy solo en repse.html, la página del anuncio; la pone
   portada() en construir-servicios.py con la clave «portada». Bloque cian a
   todo el ancho, texto centrado y precio, revisión sin costo y botón en la
   primera pantalla. Sin animación de entrada: esa queda solo en el Inicio.
   Alto todo o nada: el cian llega al borde de la pantalla o deja ver al
   menos 150 px de la sección siguiente; una franja blanca delgada con texto
   cortado se ve como error. El tope de 820 px entra solo cuando sobra
   pantalla para ese asomo: 820 + 63 de menú + 150 = 1033 px. bresdi.js
   publica --nav-alto en todas las páginas; el respaldo es la medida real
   del menú, 63 px y 73 en celular */
.bd-pt {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  min-height: calc(100svh - var(--nav-alto, 63px));
  padding: 40px 0;
  color: #fff;
}
/* Blanco sobre #007e96 da 4.69 (AA) */
.bd-pt::before { content: ""; position: absolute; inset: 0 -50vw; z-index: -1; background: linear-gradient(150deg, var(--cian-texto) 0%, var(--cian-hover) 100%); }
@media (min-height: 1033px) { .bd-pt { min-height: 820px; } }
.bd-pt-texto { max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.bd-pt-etq { display: block; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin-bottom: 16px; }
.bd-pt h1 { font-size: clamp(36px, 5.2vw, 66px); line-height: 1.08; font-weight: 700; margin: 0; color: #fff; letter-spacing: -.015em; text-wrap: balance; max-width: 18ch; }
.bd-pt-claro { color: #9fe3ef; }
.bd-pt-bajada { font-size: 17px; line-height: 1.6; max-width: 54ch; margin: 20px auto 0; color: rgba(255, 255, 255, .92); }
.bd-pt-precio { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin-top: 24px; padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px rgba(0, 40, 50, .25); font-size: 15px; color: var(--gris-2); }
.bd-pt-precio em { font-style: normal; }
.bd-pt-precio b { font-size: 18px; color: var(--gris); }
.bd-pt-precio i { width: 1px; height: 18px; background: var(--borde-suave); }
.bd-pt-precio span { color: var(--cian-texto); font-weight: 600; }
.bd-pt-acciones { display: flex; justify-content: center; margin-top: 24px; }
.bd-pt-boton { padding: 18px 32px; font-size: 17px; box-shadow: 0 12px 28px rgba(37, 211, 102, .35); }
/* QR de WhatsApp junto al botón (20-oct-2026): solo con mouse y pantalla ancha,
   donde wa.me abre WhatsApp Web; en celular y tableta no aparece */
.bd-pt-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1001px) {
  .bd-pt-acciones:has(.bd-pt-qr) { align-items: center; gap: 22px; }
  .bd-pt-qr { display: flex; align-items: center; gap: 14px; max-width: 320px; padding: 10px 18px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); text-align: left; }
}
.bd-pt-qr-codigo { position: relative; flex: none; width: 92px; padding: 7px; border-radius: 12px; background: #fff; }
.bd-pt-qr-img svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.bd-pt-qr-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 22%; aspect-ratio: 1; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff; }
.bd-pt-qr-logo svg { width: 62%; height: 62%; }
.bd-pt-qr p { margin: 0; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.bd-pt-qr b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.bd-pt-datos { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; }
.bd-pt-datos li { padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, .25); font-size: 14px; color: rgba(255, 255, 255, .85); }
.bd-pt-datos li:first-child { padding-left: 0; border-left: 0; }
.bd-pt-datos b { font-size: 16px; color: #fff; }
.bd-pt-zona { margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, .85); text-wrap: balance; }
/* Indicador de que hay más abajo, al pie del bloque. Mismo lenguaje que
   «Desliza para conocer más» del Inicio, en vertical y en blanco. La línea
   solo se mueve con bd-js, que respeta «Reducir movimiento» */
.bd-pt { padding-bottom: 96px; }
.bd-pt-mas { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, .8); }
.bd-pt-mas i { display: block; position: relative; width: 2px; height: 30px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.bd-js .bd-pt-mas i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(-100%); animation: bd-pt-baja 2.2s ease-in-out infinite; }
@keyframes bd-pt-baja { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
/* En escritorio el botón del hero y la píldora flotante no se ven a la vez:
   la píldora espera a que el botón salga de pantalla, como ya pasa en
   celular (js/bresdi.js pone bd-float-oculto) */
body:has(.bd-pt) .bd-wa.bd-float { transition: background .15s, transform .25s, box-shadow .15s, opacity .25s, visibility .25s; }
body:has(.bd-pt) .bd-float.bd-float-oculto { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
/* Laptops bajas: se compacta el texto para que el bloque completo quepa */
@media (min-width: 641px) and (max-height: 820px) {
  .bd-pt { padding: 24px 0 84px; }
  .bd-pt h1 { font-size: clamp(34px, 6.6vh, 54px); }
  .bd-pt-etq { margin-bottom: 12px; }
  .bd-pt-bajada { margin-top: 14px; }
  .bd-pt-precio, .bd-pt-acciones { margin-top: 18px; }
  .bd-pt-datos { margin-top: 20px; }
  .bd-pt-zona { margin-top: 12px; }
}
@media (max-width: 1000px) {
  .bd-pt { padding: 48px 0 104px; }
}
@media (max-width: 640px) {
  .bd-pt { min-height: calc(100svh - var(--nav-alto, 73px)); padding: 28px 0 96px; }
  .bd-pt h1 { font-size: 33px; }
  .bd-pt-bajada { font-size: 16px; margin-top: 14px; }
  .bd-pt-precio { flex-direction: column; gap: 2px; border-radius: 18px; margin-top: 18px; font-size: 14px; padding: 8px 14px; }
  .bd-pt-precio b { font-size: 16px; }
  .bd-pt-precio i { display: none; }
  .bd-pt-acciones { width: 100%; margin-top: 18px; }
  .bd-pt-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .bd-pt-datos li { padding: 0 6px; font-size: 12.5px; line-height: 1.35; }
  .bd-pt-datos li:first-child { padding-left: 6px; }
  .bd-pt-datos li span { display: block; }
  .bd-pt-datos b { font-size: 15px; }
}

/* ------------------------------------------------------- portada de /flyer
   flyer.html, la página del QR del volante impreso (19-oct-2026, variante C
   «Conversación» del comparador de pruebas/). Los asesores preguntan con un
   globo y las cuatro áreas son respuestas rápidas que abren WhatsApp, cada
   una con el documento dibujado del volante. El círculo verde lleva también
   la clase bd-wa: js/bresdi.js oculta el flotante mientras está en pantalla. */
.fh { position: relative; isolation: isolate; }
.fh h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; font-weight: 700; margin: 0; color: var(--gris); letter-spacing: -.015em; text-wrap: balance; }
.fh-cian { color: var(--cian); }
.fh-c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 24px 56px; min-height: calc(100svh - var(--nav-alto, 71px)); box-sizing: border-box; padding: clamp(24px, 5vh, 56px) 0; }
.fh-c::before { content: ""; position: absolute; inset: 0 -50vw; z-index: -1; background: radial-gradient(55% 70% at 22% 45%, #e3f4f8 0%, rgba(241, 248, 250, 0) 70%); }
/* El globo va arriba de los asesores, sin taparlos, con la cola hacia el asesor:
   encimado sobre la imagen le tapaba la cabeza en celular */
.fh-c figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.fh-asesores { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.fh-globo { position: relative; z-index: 1; margin: 0 0 14px -12%; padding: 12px 18px; border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(0, 102, 120, .16); font-weight: 600; font-size: 16px; color: var(--gris); }
.fh-globo::after { content: ""; position: absolute; left: 34%; bottom: -9px; width: 18px; height: 18px; background: #fff; transform: rotate(45deg); border-radius: 0 0 4px 0; }
.fh-filas { display: grid; gap: 10px; margin-top: 24px; max-width: 520px; }
.fh-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--borde-suave); color: var(--gris); text-decoration: none; box-shadow: 0 4px 14px rgba(0, 102, 120, .06); transition: transform .15s, box-shadow .15s, border-color .15s; }
.fh-fila:hover { transform: translateY(-2px); border-color: var(--cian); box-shadow: 0 10px 24px rgba(0, 102, 120, .14); }
.fh-fila:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.fh-fila b { display: block; font-size: 17px; font-weight: 600; }
.fh-fila i { display: block; font-style: normal; font-size: 14px; color: var(--gris-2); }
.fh-doc { width: 40px; height: 50px; overflow: visible; }
/* Doble clase para ganarle a «main .bd-wa», que en móvil ocupa el ancho completo */
.fh .fh-fila-wa { display: grid; place-items: center; width: 40px; min-width: 0; height: 40px; padding: 0 !important; box-sizing: border-box; flex: none; border-radius: 50%; background: var(--wa); color: #fff; }
.fh-nota { font-size: 14.5px; line-height: 1.5; margin: 18px 0 0; color: var(--gris-2); }
.fh-nota b { color: var(--cian-texto); font-weight: 600; }
/* La imagen termina a media pierna. En escritorio baja hasta el borde de la
   portada, que en la primera pantalla es el borde de la ventana, y el corte se
   lee como el piso; en celular, donde va arriba del título, se desvanece
   (variante 1 «Al piso» de pruebas/comparador-pies-flyer.html, 19-oct-2026) */
@media (min-width: 861px) {
  .fh-c { padding-bottom: 0; }
  .fh-c figure { align-self: end; }
  .fh-c .fh-texto { padding-bottom: clamp(24px, 5vh, 56px); }
}
@media (max-width: 860px) {
  .fh-c { grid-template-columns: 1fr; min-height: 0; padding-top: 12px; gap: 8px; }
  .fh-asesores { -webkit-mask-image: linear-gradient(#000 72%, transparent 100%); mask-image: linear-gradient(#000 72%, transparent 100%); }
  .fh-asesores { max-width: 190px; }
  .fh-globo { margin-bottom: 10px; font-size: 15px; padding: 10px 16px; }
  .fh-c h1, .fh-c .fh-nota { text-align: center; }
  .fh-filas { margin-top: 18px; }
}
@media (max-width: 640px) {
  .fh h1 { font-size: 34px; }
}
/* Entrada como la del Inicio: solo CSS, sin arrancar en opacidad 0 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fh-sube { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .fh-texto > *, .fh figure { animation: fh-sube .6s cubic-bezier(.16, .8, .24, 1) both; }
  .fh-texto > :nth-child(n+2) { animation-delay: .1s; }
  .fh-filas { animation-delay: .18s !important; }
}