/* Estilos compartidos del sitio de Pretil. */
/* Fuentes servidas desde la propia página: ningún tercero recibe la IP del
   visitante (estándar de privacidad, 2026-09-27). */
@font-face { font-family: "Source Serif 4"; font-weight: 500; font-display: swap; src: url("fuentes/source-serif-4-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("fuentes/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("fuentes/source-sans-3-latin-600-normal.woff2") format("woff2"); }

/* Un solo color de marca (azul petróleo del logo) sobre neutros. El tinte
   es el mismo azul muy aclarado: da calidez a las secciones sin sumar un
   segundo color (rediseño del 2026-09-29). */
:root {
  color-scheme: light;
  --fondo: #FFFFFF;
  --fondo-alterno: #F4F6F7;
  --tinte: #EAF0F4;
  --superficie: #FFFFFF;
  --tinta: #161E26;
  --tinta-suave: #525D68;
  --linea: #DCE0E4;
  --marca: #1F3B4D;
  --marca-oscura: #132632;
  --marca-texto: #FFFFFF;
  --marca-suave: #C9D6DF;
  --error: #A13A2A;
  --titulo: "Source Serif 4", Georgia, "Times New Roman", serif;
  --texto: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); font-size: 17px; line-height: 1.6; }
.envoltura { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 400px) { .envoltura { padding-inline: 18px; } }
h1, h2, h3 { font-family: var(--titulo); font-weight: 500; text-wrap: balance; margin: 0; letter-spacing: -0.005em; }
p { margin: 0; }
strong { font-weight: 600; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.rotulo { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-suave); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--marca); color: #FFFFFF; padding: 10px 14px; text-decoration: none; }
.saltar:focus { top: 12px; }

/* Franja utilitaria sobre la barra, como en los sitios institucionales */
.utilitaria { background: var(--marca-oscura); font-size: 13px; color: #C9D4DC; }
.utilitaria .envoltura { display: flex; justify-content: space-between; gap: 16px; padding-block: 7px; }
.utilitaria a { color: #FFFFFF; text-decoration: none; }
.utilitaria a:hover { text-decoration: underline; }
.utilitaria a:focus-visible { outline-color: #FFFFFF; }
@media (max-width: 560px) { .utilitaria span { display: none; } .utilitaria .envoltura { justify-content: flex-end; } }

/* Barra superior: siempre en una línea, también a 320 px */
header.barra { position: relative; z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--linea); }
.barra > .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.barra .logo { display: block; line-height: 0; }
.barra .logo img { height: 28px; width: auto; }
nav.menu { display: flex; align-items: center; gap: 28px; font-size: 16px; white-space: nowrap; }
nav.menu > a:not(.boton) { text-decoration: none; color: var(--tinta); }
nav.menu > a:not(.boton):hover { color: var(--marca); text-decoration: underline; text-underline-offset: 4px; }
nav.menu > a[aria-current="page"]:not(.boton) { color: var(--marca); font-weight: 600; }
nav.menu .boton-barra { padding: 9px 16px; font-size: 15px; }
.menu-boton { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; font: 400 16px var(--texto); color: var(--tinta); cursor: pointer; }
.menu-boton:hover { color: var(--marca); }
.menu-boton svg { transition: none; }
.menu-boton[aria-expanded="true"] { color: var(--marca); font-weight: 600; }
.menu-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.corto { display: none; }
@media (max-width: 760px) {
  nav.menu { gap: 14px; }
  nav.menu .opcional { display: none; }
  .menu-boton .largo, .boton-barra .largo { display: none; }
  .menu-boton .corto, .boton-barra .corto { display: inline; }
  .menu-boton { border: 1px solid var(--linea); border-radius: 3px; padding: 8px 12px; font-size: 15px; }
}
@media (max-width: 360px) { nav.menu { gap: 10px; } nav.menu .boton-barra, .menu-boton { padding: 8px 10px; } .barra .logo img { height: 24px; } }

/* Panel del menú: tres columnas con líneas finas, sin sombras grandes */
.panel-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--superficie); border-top: 1px solid var(--linea); border-bottom: 3px solid var(--marca); box-shadow: 0 12px 24px rgba(19, 38, 50, 0.08); }
.panel-menu[hidden] { display: none; }
.panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 0; padding-block: 8px; }
.panel-col { padding: 24px 32px 28px 0; }
.panel-col + .panel-col { padding-left: 32px; border-left: 1px solid var(--linea); }
.panel-titulo { font-size: 14px; color: var(--tinta-suave); }
.panel-principal { display: block; margin-top: 10px; text-decoration: none; color: inherit; }
.pp-nombre { display: block; font-family: var(--titulo); font-size: 22px; line-height: 1.25; color: var(--marca); }
.pp-nombre::after { content: " →"; font-family: var(--texto); }
.panel-principal:hover .pp-nombre { text-decoration: underline; text-underline-offset: 4px; }
.pp-texto { display: block; margin-top: 6px; color: var(--tinta-suave); font-size: 15px; line-height: 1.5; }
.panel-enlaces { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--linea); }
.panel-enlaces li { border-bottom: 1px solid var(--linea); }
.panel-enlaces a { display: block; padding: 9px 0; font-size: 15px; text-decoration: none; color: var(--tinta); }
.panel-enlaces a:hover { color: var(--marca); text-decoration: underline; text-underline-offset: 3px; }
.panel-ayuda p:not(.panel-titulo) { margin: 10px 0 18px; color: var(--tinta-suave); font-size: 15px; }
.solo-movil { display: none; }
@media (max-width: 760px) {
  .panel-grid { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .panel-col, .panel-col + .panel-col { padding: 18px 0 20px; border-left: 0; }
  .panel-col + .panel-col { border-top: 1px solid var(--linea); }
  .pp-nombre { font-size: 20px; }
  .solo-movil { display: block; }
}

/* Botones */
.acciones { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; }
.boton { display: inline-flex; align-items: center; font-family: var(--texto); font-weight: 600; font-size: 16px; padding: 12px 20px; border-radius: 3px; border: 1px solid var(--marca); text-decoration: none; color: var(--marca); background: transparent; }
.boton.principal { background: var(--marca); color: var(--marca-texto); }
.boton:hover { filter: brightness(0.94); }
.boton.claro { background: #FFFFFF; color: var(--marca); border-color: #FFFFFF; }
.boton.contorno-claro { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.7); }
.boton.contorno-claro:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); filter: none; }
.portada a:focus-visible, .banda-cierre a:focus-visible, .cabecera-pagina a:focus-visible { outline-color: #FFFFFF; }
.enlace-flecha { font-weight: 600; color: var(--marca); text-decoration: none; }
.enlace-flecha::after { content: " →"; }
.enlace-flecha:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Portada: frase a la izquierda y, a la derecha, «¿Qué necesitas hoy?» */
.portada { background: var(--marca); color: #FFFFFF; padding-block: 80px 88px; }
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.portada h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.1; max-width: 12em; letter-spacing: -0.01em; }
.portada .bajada { color: #D3DEE6; font-size: 19px; max-width: 30em; margin: 20px 0 32px; }

.elige { background: var(--superficie); color: var(--tinta); border-radius: 3px; }
.elige-titulo { padding: 18px 28px; font-family: var(--titulo); font-size: 22px; border-bottom: 1px solid var(--linea); }
.opcion { display: flex; gap: 18px; align-items: flex-start; padding: 20px 28px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--linea); }
.opcion:last-child { border-bottom: 0; }
.opcion:hover { background: var(--tinte); }
.opcion:hover .opcion-nombre { text-decoration: underline; text-underline-offset: 4px; }
.opcion:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.opcion-icono { flex-shrink: 0; color: var(--marca); margin-top: 2px; }
.opcion-nombre { display: block; font-weight: 600; font-size: 18px; color: var(--marca); }
.opcion-nombre::after { content: " →"; }
.opcion-detalle { display: block; color: var(--tinta-suave); margin-top: 4px; font-size: 16px; line-height: 1.5; }
@media (max-width: 400px) { .elige-titulo, .opcion { padding-inline: 18px; } .opcion { gap: 14px; } }

/* Franja bajo la portada */
.indicadores { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.indicadores .envoltura { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.indicador { padding: 22px 24px; border-left: 1px solid var(--linea); }
.indicador:first-child { border-left: 0; padding-left: 0; }
.indicador .nombre { font-size: 14px; color: var(--tinta-suave); }
.indicador .valor { font-family: var(--titulo); font-size: 26px; line-height: 1.25; margin-top: 4px; color: var(--marca); }
.indicador .detalle { font-size: 14px; color: var(--tinta-suave); margin-top: 2px; }
@media (max-width: 860px) {
  .indicadores .envoltura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indicador { padding: 16px 0; border-left: 0; }
  .indicador:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linea); }
  .indicador:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* Secciones */
section.bloque { padding-block: 80px; border-top: 1px solid var(--linea); }
section.bloque.alterno { background: var(--fondo-alterno); }
section.bloque.tinte { background: var(--tinte); border-top: 0; }
.bloque h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.18; }
.bloque .intro { color: var(--tinta-suave); font-size: 18px; max-width: 34em; margin-top: 12px; }
.bloque .intro a { color: var(--marca); }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.dos-columnas.invertidas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dos-columnas .acciones { margin-top: 32px; }
.puntos { list-style: none; padding: 0; margin: 24px 0 0; }
.puntos li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--linea); }
.puntos li:last-child { border-bottom: 1px solid var(--linea); }
.puntos li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--marca); border-bottom: 2px solid var(--marca); transform: rotate(-45deg); }

/* Vitrina: la muestra en un computador y en un celular */
.vitrina { position: relative; margin: 0; padding-bottom: 36px; padding-right: 36px; }
.navegador { border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; background: var(--superficie); }
.navegador-barra { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; font-size: 12px; color: var(--tinta-suave); background: var(--fondo-alterno); border-bottom: 1px solid var(--linea); }
.navegador-barra::before { content: ""; width: 10px; height: 10px; border: 1.5px solid #A4AEB7; border-radius: 50%; }
.navegador img { display: block; width: 100%; height: auto; }
.telefono { position: absolute; right: 0; bottom: 0; width: 27%; border: 6px solid var(--marca-oscura); border-radius: 18px; overflow: hidden; background: var(--superficie); box-shadow: 0 10px 24px rgba(19, 38, 50, 0.16); }
.telefono img { display: block; width: 100%; height: auto; }
.vitrina figcaption { margin-top: 14px; font-size: 14px; color: var(--tinta-suave); max-width: 70%; }
.vitrina figcaption a { color: var(--marca); font-weight: 600; }

/* Desglose de $100 */
.desglose { margin: 0; padding: 28px 28px 24px; background: var(--superficie); color: var(--tinta); border-radius: 3px; }
.desglose.con-borde { border: 1px solid var(--linea); margin-top: 28px; }
.desglose figcaption { font-family: var(--titulo); font-size: 21px; }
.barra-desglose { display: flex; height: 56px; margin-top: 20px; gap: 2px; }
.seg { display: block; height: 100%; }
.d-compras { background: #9AA7B2; }
.d-fijos { background: #C3CCD3; }
.d-sii { background: #4E5B66; }
.d-queda { background: var(--marca); }
.leyenda { margin: 20px 0 0; }
.leyenda div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 16px; }
.leyenda dt { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); }
.leyenda dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.leyenda .final { border-top: 1px solid var(--tinta); padding-top: 12px; }
.leyenda .final dt { color: var(--tinta); font-weight: 600; }
.leyenda .final dd { font-family: var(--titulo); font-weight: 500; font-size: 40px; line-height: 1; color: var(--marca); }
.muestra { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; }
.nota-desglose { margin-top: 14px; font-size: 14px; color: var(--tinta-suave); }

/* Cómo trabajamos: cuatro pasos sobre una línea */
.pasos { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.pasos li { position: relative; padding-top: 22px; border-top: 2px solid var(--marca); }
.paso-num { display: block; font-family: var(--titulo); font-size: 34px; line-height: 1; color: var(--marca); }
.pasos strong { display: block; font-size: 18px; margin-top: 12px; }
.pasos li > span:last-child { display: block; color: var(--tinta-suave); margin-top: 4px; }
@media (max-width: 860px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 480px) {
  .pasos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pasos li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; padding: 16px 0; border-top: 1px solid var(--linea); }
  .pasos li:first-child { border-top: 2px solid var(--marca); }
  .paso-num { grid-row: span 2; font-size: 28px; }
  .pasos strong { margin-top: 0; }
}

/* Preguntas frecuentes: se abren de a una, sin JavaScript */
.preguntas-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.preguntas { border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 18px; cursor: pointer; list-style: none; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; color: var(--marca); flex-shrink: 0; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas summary:hover { color: var(--marca); }
.preguntas details p { padding: 0 40px 20px 0; color: var(--tinta-suave); }
.preguntas details a { color: var(--marca); }
@media (max-width: 860px) { .preguntas-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* Recorrido de la muestra y datos de TUtilidad: filas con líneas finas */
.recorrido { margin: 28px 0 0; }
.recorrido > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 20px; padding: 13px 0; border-top: 1px solid var(--linea); }
.recorrido > div:last-child { border-bottom: 1px solid var(--linea); }
.recorrido dt { font-weight: 600; }
.recorrido dd { margin: 0; color: var(--tinta-suave); }
.enlace-bloque { margin-top: 24px; }
.datos-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; margin-top: 8px; }
.datos-grid .recorrido > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
figure.captura { margin: 28px 0 0; }
figure.captura figcaption { font-size: 14px; color: var(--tinta-suave); margin-top: 10px; }

/* Índice dentro de una página */
.indice { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.indice .envoltura { display: flex; gap: 8px 28px; flex-wrap: wrap; padding-block: 14px; font-size: 15px; }
.indice a { color: var(--marca); text-decoration: none; font-weight: 600; }
.indice a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Páginas web: condiciones con líneas finas, no tarjetas */
.condiciones { list-style: none; margin: 40px 0 0; padding: 0; max-width: 50em; }
.condiciones li { display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 24px; padding: 16px 0; border-top: 1px solid var(--linea); }
.condiciones li:last-child { border-bottom: 1px solid var(--linea); }
.condiciones .que { font-weight: 600; }
.condiciones .como { color: var(--tinta-suave); }

/* Paquetes: tabla comparativa. En el celular cada fila se apila y el nombre
   del paquete aparece sobre cada dato. */
.paquetes-web { margin-top: 32px; max-width: 60em; background: var(--superficie); border: 1px solid var(--linea); border-radius: 3px; padding: 8px 28px 24px; }
.paquetes-web table { width: 100%; border-collapse: collapse; font-size: 16px; }
.paquetes-web th, .paquetes-web td { text-align: left; vertical-align: top; padding: 14px 20px 14px 0; border-top: 1px solid var(--linea); }
.paquetes-web thead th { font-family: var(--titulo); font-weight: 500; font-size: 24px; color: var(--marca); border-top: 0; padding-top: 16px; }
.paquetes-web thead td { border-top: 0; }
.paquetes-web tbody th { font-weight: 600; width: 9em; }
.paquetes-web td { color: var(--tinta-suave); }
.paquetes-web .monto-web { display: block; font-size: 24px; font-weight: 600; color: var(--tinta); }
.paquetes-web .pago { display: block; font-size: 14px; }
.nota-precios { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--tinta-suave); }
@media (max-width: 640px) {
  .paquetes-web { padding: 4px 18px 18px; }
  .paquetes-web thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .paquetes-web table, .paquetes-web tbody, .paquetes-web tr, .paquetes-web th, .paquetes-web td { display: block; width: auto; }
  .paquetes-web tbody tr { border-top: 1px solid var(--linea); padding: 14px 0; }
  .paquetes-web tbody tr:first-child { border-top: 0; }
  .paquetes-web th, .paquetes-web td { border: 0; padding: 0; }
  .paquetes-web td { margin-top: 10px; }
  .paquetes-web td::before { content: attr(data-paquete); display: block; font-size: 14px; font-weight: 600; color: var(--marca); }
}

/* Banda de cierre en azul */
.banda-cierre { background: var(--marca); color: #FFFFFF; padding-block: 64px; }
.banda-cierre .envoltura { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center; }
.banda-cierre h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; max-width: 20em; }
.banda-cierre p { color: #D3DEE6; margin-top: 12px; max-width: 36em; }

/* Cabecera azul de las páginas interiores */
.cabecera-pagina { background: var(--marca); color: #FFFFFF; padding-block: 48px 56px; }
.cabecera-pagina .rotulo { color: #A9BFCD; }
.cabecera-pagina h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.1; margin-top: 12px; }
.cabecera-pagina .bajada { color: #D3DEE6; font-size: 19px; max-width: 34em; margin-top: 14px; }
.cabecera-pagina .acciones { margin-top: 28px; }
.migas { font-size: 14px; color: #A9BFCD; }
.migas a { color: #FFFFFF; text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* Nosotros */
.quienes-texto { max-width: 46em; }
.quienes-texto p { font-size: 18px; margin-top: 14px; }
.mision-vision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 40px; border: 1px solid var(--linea); background: var(--superficie); }
.mision-vision > div { padding: 32px; }
.mision-vision > div + div { border-left: 1px solid var(--linea); }
.mision-vision h2 { font-size: 26px; }
.mision-vision h2::after { content: ""; display: block; width: 40px; height: 3px; background: var(--marca); margin-top: 14px; }
.mision-vision p { font-size: 19px; line-height: 1.55; margin-top: 18px; }
.ficha { margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; font-size: 16px; }
.ficha div { padding: 12px 0; border-top: 1px solid var(--linea); }
.ficha dt { color: var(--tinta-suave); font-size: 14px; }
.ficha dd { margin: 2px 0 0; font-weight: 600; }
.ficha a { color: var(--marca); }

/* Calculadora de TUtilidad: todo se calcula en el navegador; nada se envía. */
.seccion-calculo .envoltura { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
.calculo { background: var(--superficie); border: 1px solid var(--linea); border-radius: 3px; }
.calculo .cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.calculo .cabeza p:first-child { font-weight: 600; }
.calculo .cabeza p + p { font-size: 14px; color: var(--tinta-suave); }
.calculo .campos { padding: 8px 20px 4px; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr) 11em; align-items: center; gap: 12px; padding: 10px 0; }
.campo + .campo { border-top: 1px solid var(--linea); }
.campo label { font-size: 16px; }
.campo label span { display: block; font-size: 14px; color: var(--tinta-suave); }
.monto { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 3px; background: var(--fondo-alterno); }
.monto:focus-within { outline: 2px solid var(--marca); outline-offset: 1px; }
.monto span { padding-left: 10px; color: var(--tinta-suave); }
.monto input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--tinta); font: 600 16px var(--texto); font-variant-numeric: tabular-nums; text-align: right; padding: 9px 10px 9px 4px; }
.monto input:focus { outline: none; }
.calculo .resultado { padding: 18px 20px 20px; border-top: 1px solid var(--linea); background: var(--tinte); }
.resultado .etiqueta { font-size: 15px; color: var(--tinta-suave); }
.resultado .cifra { font-family: var(--titulo); font-weight: 500; font-size: clamp(34px, 4vw, 42px); line-height: 1.15; color: var(--marca); font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere; }
.resultado .cifra.negativa { color: var(--tinta); }
.resultado .frase { font-size: 16px; margin-top: 6px; }
.resultado .sii { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.resultado .sii strong { font-variant-numeric: tabular-nums; }
.calculo .pie-calculo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--linea); }
.calculo .pie-calculo p { font-size: 14px; color: var(--tinta-suave); max-width: 22em; }
.calculo .boton { padding: 10px 16px; font-size: 15px; }

/* Pie corporativo oscuro por columnas */
footer.pie { background: var(--marca-oscura); color: #C9D4DC; font-size: 15px; padding-block: 56px 32px; }
footer.pie a { color: #FFFFFF; text-decoration: none; }
footer.pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
footer.pie a:focus-visible { outline-color: #FFFFFF; }
.pie .columnas { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.8fr)); gap: 40px; }
.pie .logo-pie { height: 28px; width: auto; display: block; }
.pie .resena { margin-top: 16px; max-width: 26em; line-height: 1.55; }
.pie h2 { font-family: var(--texto); font-size: 15px; font-weight: 600; color: #FFFFFF; }
.pie ul { list-style: none; padding: 0; margin: 14px 0 0; }
.pie li + li { margin-top: 8px; }
.pie .legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #AFC0CC; }

@media (max-width: 860px) {
  .portada .envoltura, .dos-columnas, .dos-columnas.invertidas, .seccion-calculo .envoltura, .datos-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pie .columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 760px) {
  .portada { padding-block: 44px 48px; }
  section.bloque { padding-block: 56px; }
  .banda-cierre .envoltura { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .condiciones li, .recorrido > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mision-vision { grid-template-columns: minmax(0, 1fr); }
  .mision-vision > div + div { border-left: 0; border-top: 1px solid var(--linea); }
  .mision-vision > div { padding: 24px 20px; }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .vitrina { padding-right: 20px; padding-bottom: 28px; }
  .telefono { width: 30%; border-width: 4px; border-radius: 12px; }
  .vitrina figcaption { max-width: 66%; }
}
@media (max-width: 480px) { .pie .columnas { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 400px) {
  .desglose { padding: 22px 18px 18px; }
  .campo { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* La baranda (2026-09-29): el pretil de un puente corre por la base de las
   franjas azules, en blanco muy tenue. Sale del símbolo del logo (pasamanos
   sobre pilares), no de un fondo decorativo genérico. Al cargar, sube una
   sola vez; con «menos movimiento» se queda quieta. */
.portada, .cabecera-pagina, .banda-cierre { position: relative; overflow: hidden; isolation: isolate; }
.portada::after, .cabecera-pagina::after, .banda-cierre::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 64px; background: url("img/baranda.svg") repeat-x left bottom / 96px 64px; opacity: 0.09;
}
.portada { padding-bottom: 128px; }.cabecera-pagina::after, .banda-cierre::after { height: 40px; background-size: 60px 40px; opacity: 0.08; }
.cabecera-pagina { padding-bottom: 80px; }
.banda-cierre { padding-bottom: 88px; }
@media (max-width: 760px) { .portada { padding-bottom: 100px; } .portada::after { height: 48px; background-size: 72px 48px; } }

@media (prefers-reduced-motion: no-preference) {
  .portada::after, .cabecera-pagina::after { animation: baranda-sube 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  @keyframes baranda-sube { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Piezas que aparecen al entrar en pantalla (animaciones.js pone .anima
     en <html> solo si el navegador lo soporta). */
  .anima .aparece:not(.visto), .anima .vitrina:not(.visto) .navegador { opacity: 0; transform: translateY(16px); }
  .anima .aparece, .anima .vitrina .navegador { transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
  .anima .vitrina:not(.visto) .telefono { opacity: 0; transform: translateY(32px); }
  .anima .vitrina .telefono { transition: opacity 0.7s ease-out 0.25s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }

  /* El desglose de $100 se reparte de izquierda a derecha, tramo a tramo */
  .anima .desglose:not(.visto) .seg { transform: scaleX(0); }
  .anima .desglose .seg { transform-origin: left center; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .anima .desglose .seg:nth-child(2) { transition-delay: 0.3s; }
  .anima .desglose .seg:nth-child(3) { transition-delay: 0.6s; }
  .anima .desglose .seg:nth-child(4) { transition-delay: 0.9s; }
  .anima .desglose:not(.visto) .final dd { opacity: 0; }
  .anima .desglose .final dd { transition: opacity 0.5s ease-out 1.3s; }

  /* Los pasos se encienden en orden sobre su línea */
  .anima .pasos:not(.visto) li { opacity: 0; transform: translateY(12px); }
  .anima .pasos li { transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
  .anima .pasos li:nth-child(2) { transition-delay: 0.15s; }
  .anima .pasos li:nth-child(3) { transition-delay: 0.3s; }
  .anima .pasos li:nth-child(4) { transition-delay: 0.45s; }
}

/* Cotización: formulario a la izquierda, cómo sigue a la derecha */
.pagina-cotizar { padding-block: 16px 80px; }
.pagina-cotizar h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; }
.pagina-cotizar .bajada { font-size: 18px; color: var(--tinta-suave); max-width: 34em; margin-top: 14px; }
.cotizar-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: 56px; align-items: start; margin-top: 40px; }
.formulario { background: var(--superficie); border: 1px solid var(--linea); border-radius: 3px; padding: 8px 28px 28px; }
.formulario fieldset { border: 0; margin: 0; padding: 20px 0 4px; }
.formulario fieldset + fieldset { border-top: 1px solid var(--linea); }
.formulario legend { font-weight: 600; padding: 0; margin-bottom: 12px; float: left; width: 100%; }
.formulario legend + * { clear: left; }
.fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.control { margin-bottom: 16px; }
.control > label, .control .pregunta { display: block; font-size: 16px; margin-bottom: 6px; }
.control .opcional-texto { color: var(--tinta-suave); font-size: 14px; }
.control input[type="text"], .control input[type="email"], .control input[type="tel"], .control select, .control textarea {
  width: 100%; min-width: 0; font: 400 16px var(--texto); color: var(--tinta);
  background: var(--fondo-alterno); border: 1px solid var(--linea); border-radius: 3px; padding: 10px 12px;
}
.control textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.control input:focus-visible, .control select:focus-visible, .control textarea:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca); }
.control [aria-invalid="true"] { border-color: var(--error); }
.control .ayuda { font-size: 14px; color: var(--tinta-suave); margin-top: 4px; }
.control .error { font-size: 14px; color: var(--error); margin-top: 4px; }
.control .error:empty { display: none; }
.opciones { display: flex; flex-direction: column; gap: 2px; }
.opciones label { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 16px; cursor: pointer; }
.opciones input { width: 18px; height: 18px; margin: 0; accent-color: var(--marca); flex-shrink: 0; }
.opciones input:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.opciones.en-linea { flex-direction: row; flex-wrap: wrap; gap: 4px 24px; }
.aviso-datos { font-size: 14px; color: var(--tinta-suave); margin: 8px 0 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.aviso-datos a { color: var(--marca); }
.formulario button.boton { cursor: pointer; }

.revision { display: none; background: var(--superficie); border: 1px solid var(--linea); border-radius: 3px; padding: 24px 28px 28px; }
.revision.visible { display: block; }
.revision h2 { font-size: 24px; }
.revision .intro { color: var(--tinta-suave); margin-top: 8px; }
.revision pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/1.6 var(--texto); background: var(--fondo-alterno); border: 1px solid var(--linea); border-radius: 3px; padding: 16px; margin: 20px 0; }
.revision .boton { cursor: pointer; }
.revision .estado { font-size: 14px; color: var(--tinta-suave); margin-top: 14px; }
.enlace-simple { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.como-sigue h2 { font-size: 22px; }
.como-sigue ol { margin: 16px 0 0; padding-left: 1.3em; }
.como-sigue li { padding: 10px 0; border-top: 1px solid var(--linea); }
.como-sigue li:last-child { border-bottom: 1px solid var(--linea); }
.como-sigue li strong { display: block; }
.como-sigue li span { color: var(--tinta-suave); font-size: 15px; }
.como-sigue .directo { margin-top: 24px; font-size: 15px; color: var(--tinta-suave); }
.como-sigue .directo a { color: var(--marca); overflow-wrap: anywhere; }

@media (max-width: 860px) { .cotizar-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 560px) {
  .fila { grid-template-columns: minmax(0, 1fr); }
  .formulario, .revision { padding-inline: 18px; }
}