/* Sitio público. Conserva los colores de main.css sin alterar los paneles. */
.web { background: #fff; color: var(--text); font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7; }
.web *, .web *::before, .web *::after { box-sizing: border-box; }
.web h1, .web h2, .web h3, .web p, .web ul, .web ol { margin: 0; }
.web a { text-decoration: none; }
.web img { max-width: 100%; display: block; }
.web button, .web input, .web select, .web textarea { font: inherit; }
.web button, .web summary { cursor: pointer; }
.web :focus-visible { outline: 3px solid var(--azul-500); outline-offset: 5px; }
.web main:focus { outline: none; }
.web [hidden] { display: none !important; }
.web-wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.web h1, .web h2 { font-family: 'Source Serif 4', Georgia, serif; color: var(--azul-900); font-weight: 600; letter-spacing: -.04em; line-height: 1.12; }
.web h1 { font-size: clamp(40px, 4.6vw, 64px); }
.web h2 { font-size: clamp(30px, 3vw, 42px); }
.web h3, .web .web-h3 { font-family: 'Inter', sans-serif; color: var(--azul-900); font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; }
.web h1 em, .web h2 em { color: var(--azul-600); font-style: normal; }
.web p { color: var(--text-2); }
.web-etiqueta { display: inline-flex; align-items: center; gap: 9px; color: var(--azul-700); font-size: 11px; line-height: 1.6; font-weight: 700; letter-spacing: .115em; text-transform: uppercase; margin-bottom: 20px; }
.web-punto { width: 7px; height: 7px; background: #147d72; border-radius: 50%; box-shadow: 0 0 0 4px #e6f4ef; }
.web .web-entrada { font-size: 17px; line-height: 1.85; max-width: 510px; margin-top: 25px; }
.web-btn { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 13px 22px; color: #fff; background: var(--azul-600); border: 1px solid var(--azul-600); border-radius: 7px; font-size: 13px; font-weight: 600; line-height: 1.5; transition: background .18s, box-shadow .18s, transform .18s; text-align: center; }
.web-btn:hover { color: #fff; background: var(--azul-700); border-color: var(--azul-700); box-shadow: 0 6px 18px #0b4f9f1c; transform: translateY(-2px); }
.web-btn:disabled { cursor: wait; opacity: .7; transform: none; }
.web-btn-sm { min-height: 42px; padding: 9px 15px; font-size: 12px; }
.web-btn-borde { background: #fff; color: var(--azul-700); border-color: var(--line-2); }
.web-btn-claro { color: var(--azul-900); background: #fff; border-color: #fff; }
.web-btn-claro:hover { color: var(--azul-900); background: var(--azul-100); border-color: var(--azul-100); }
.web-enlace { display: inline-flex; align-items: center; gap: 12px; color: var(--azul-700); font-size: 13px; font-weight: 600; text-underline-offset: 5px; }
.web-enlace:hover { text-decoration: underline; }
.web-acciones { display: flex; align-items: center; gap: 24px; margin: 28px 0 20px; flex-wrap: wrap; }
.web .web-nota { color: #596b80; font-size: 11px; line-height: 1.8; }
.web-nota i { color: #147d72; margin-right: 5px; }
.web-nota span { margin-inline: 6px; }
.web-saltar { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 20px; color: #fff; background: var(--azul-900); transform: translateY(-150%); }
.web-saltar:focus { transform: translateY(0); }
.web-franja { background: var(--azul-900); color: #d9e9ff; font-size: 10px; letter-spacing: .035em; }
.web-franja .web-wrap { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 32px; }
.web-franja i { margin-right: 7px; color: var(--cian-claro); }
.web-cabecera { position: sticky; top: 0; z-index: 30; background: #fffffff5; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.web-barra { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; position: relative; }
.web-marca { display: inline-flex; align-items: center; gap: 11px; color: var(--azul-900); flex-shrink: 0; }
.web-marca img { width: 42px; height: 42px; }
.web-marca > span { font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.web-marca b { display: block; color: var(--azul-600); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; margin-top: 5px; }
.web-navegacion { display: flex; align-items: center; gap: 20px; }
.web-navegacion > a:not(.web-btn) { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 12.5px; font-weight: 500; color: #47576e; white-space: nowrap; }
.web-navegacion > a:not(.web-btn):hover, .web-navegacion > a[aria-current]:not(.web-btn) { color: var(--azul-600); text-decoration: underline; text-underline-offset: 8px; }
.web-navegacion .web-entrar { border-left: 1px solid var(--line); padding-left: 22px; }
.web-navegacion > a.web-enlace-planes:not(.web-btn) {
  padding: 0 13px; border: 1px solid #81b6ee; border-radius: 7px;
  background: #e8f3ff; color: #074885; font-weight: 700;
  text-decoration: none;
}
.web-navegacion > a.web-enlace-planes:not(.web-btn):is(:hover, :focus-visible, [aria-current]) {
  background: #0b5fc0; border-color: #0b5fc0; color: #fff;
}
.web-menu-boton { display: none; }
.web-hero { background: linear-gradient(110deg, #fff 42%, #f3f8fe); padding: 65px 0 78px; overflow: hidden; }
.web-hero-rejilla { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 60px; }
.web-hero h1 { font-size: clamp(46px, 4.7vw, 67px); line-height: 1.055; }
.web-hero-visual { position: relative; padding: 0 0 65px; }
.web-hero-foto { width: 100%; height: 510px; object-fit: cover; object-position: 50% 0%; border-radius: 140px 16px 16px 16px; }
.web-foto-etiqueta { position: absolute; top: -15px; right: -18px; display: flex; align-items: center; gap: 10px; background: #fff; padding: 13px 16px; border-radius: 9px; box-shadow: 0 8px 32px #0a2c5614; font-size: 11px; font-weight: 600; color: var(--azul-900); }
.web-foto-etiqueta > i { font-size: 25px; color: var(--azul-600); }
.web-foto-etiqueta small { display: block; font-size: 10px; font-weight: 400; color: var(--text-2); }
.web-expediente { position: absolute; bottom: 0; left: -28px; width: calc(100% - 12px); background: #fff; padding: 20px 22px 14px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 48px #0a2c561a; }
.web-expediente-titulo { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.web-expediente-titulo b { display: block; color: var(--azul-900); font-size: 12px; }
.web-expediente-titulo small { font-size: 10px; color: var(--text-2); }
.web-icono { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 11px; background: var(--azul-50); color: var(--azul-600); font-size: 21px; flex-shrink: 0; }
.web-expediente .web-icono { width: 38px; height: 38px; font-size: 19px; }
.web-expediente-fila { display: flex; align-items: center; gap: 12px; font-size: 11px; padding: 10px 0; border-bottom: 1px solid #edf2f8; }
.web-expediente-fila > span { color: var(--azul-600); background: var(--azul-50); font-weight: 600; padding: 2px 7px; border-radius: 4px; font-size: 10px; }
.web-expediente-fila b { font-weight: 500; }
.web-expediente-fila i { color: #147d72; margin-left: auto; }
.web-expediente-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 11px; color: var(--text-2); font-size: 9px; }
.web-expediente-pie > span { margin-left: auto; color: #64748b; font-size: 8px; }
.web-visual-cruz { position: absolute; bottom: 3px; right: -28px; color: var(--azul-200); font-weight: 400; font-size: 80px; line-height: 1; z-index: 0; }
.web-confianza { border-block: 1px solid var(--line); background: #f8fbfe; }
.web-confianza .web-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 23px; }
.web-confianza span { display: flex; align-items: center; justify-content: center; gap: 11px; font-size: 11px; font-weight: 500; color: #47576e; }
.web-confianza i { color: var(--azul-600); font-size: 18px; }
.web-seccion { padding: 82px 0; }
.web-titulo-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 34px; }
.web-titulo-fila p { max-width: 540px; font-size: 14px; margin-top: 18px; }
.web-titulo-fila .web-enlace { margin-bottom: 7px; }
.web-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.web-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.web-tarjeta { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); padding: 30px; border-radius: 12px; background: #fff; }
.web-tarjeta-enlace { transition: transform .2s, border-color .2s, box-shadow .2s; }
.web-tarjeta-enlace:hover { transform: translateY(-4px); border-color: var(--azul-300); box-shadow: 0 10px 28px #0a2c560a; }
.web-tarjeta .web-icono { margin-bottom: 24px; }
.web-numero { color: #64748b; font-size: 9px; font-weight: 600; letter-spacing: .09em; margin-bottom: 10px; }
.web-tarjeta p { font-size: 13px; line-height: 1.85; margin-top: 12px; margin-bottom: 24px; }
.web-tarjeta-pie { display: flex; width: 100%; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); margin-top: auto; color: var(--azul-700); font-size: 11px; font-weight: 600; }
.web-asistente-seccion { background: var(--azul-900); padding: 78px 0; }
.web-asistente { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 100px; }
.web-asistente .web-etiqueta { color: var(--cian-claro); }
.web-asistente h2 { color: #fff; font-size: clamp(32px, 3.2vw, 44px); }
.web-asistente h2 em { color: var(--cian-claro); }
.web-asistente p { color: #bfd3eb; font-size: 14px; margin-top: 20px; max-width: 490px; line-height: 1.85; }
.web-asistente .web-btn { margin-top: 28px; }
.web-asistente-nota { display: block; color: #adc5e3; font-size: 10px; margin-top: 14px; max-width: 370px; }
.web-asistente-flujo { border: 1px solid #33557b; border-radius: 16px; background: #123660; padding: 30px; }
.web-asistente-simbolo { display: flex; align-items: center; gap: 14px; color: #bfd3eb; font-size: 10px; padding-bottom: 24px; border-bottom: 1px solid #33557b; }
.web-asistente-simbolo > i { width: 48px; height: 48px; display: grid; place-items: center; background: #214b76; border-radius: 12px; color: var(--cian-claro); font-size: 25px; }
.web-asistente-simbolo b { color: #fff; font-size: 13px; }
.web-asistente-flujo ol { list-style: none; padding: 0; }
.web-asistente-flujo li { display: flex; gap: 18px; padding-top: 25px; }
.web-asistente-flujo li > span { flex-shrink: 0; color: var(--cian-claro); border: 1px solid #47688b; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font-size: 10px; }
.web-asistente-flujo h3 { font-size: 14px; color: #fff; }
.web-asistente-flujo p { margin-top: 6px; font-size: 12px; }
.web-asistente-control { color: #d9e9ff; font-size: 11px; margin-top: 25px; padding-top: 18px; border-top: 1px solid #33557b; }
.web-asistente-control i { color: var(--cian-claro); margin-right: 9px; }
.web-cta .web-wrap { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.web-cta p { margin-top: 20px; font-size: 14px; }
.web-cta .web-nota { display: block; text-align: center; margin-top: 13px; }
.web-pie { background: var(--azul-950); padding-top: 54px; }
.web-pie-rejilla { display: grid; grid-template-columns: 1.15fr .8fr 1fr; gap: 75px; padding-bottom: 42px; }
.web-pie .web-marca { color: #fff; }
.web-pie .web-marca b { color: var(--azul-300); }
.web-pie p { color: #b0c4de; font-size: 12px; margin-top: 20px; margin-bottom: 20px; }
.web-pie h2 { color: #fff; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0; margin: 6px 0 18px; }
.web-pie-pais { color: #a2b9d5; font-size: 10px; }
.web-pie nav a { display: block; color: #b0c4de; font-size: 12px; width: fit-content; margin-bottom: 9px; }
.web-pie a:not(.web-btn):hover { color: #fff; }
.web-pie-acceso { display: block; color: #b0c4de; font-size: 10px; margin-top: 16px; }
.web-pie-legal { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #29415f; padding-block: 23px; color: #a2b9d5; font-size: 10px; }
.web-pagina-hero { background: #f3f8fe; border-bottom: 1px solid var(--line); padding: 64px 0 60px; }
.web-pagina-hero h1 { font-size: clamp(36px, 4.1vw, 56px); }
.web-pagina-hero p { max-width: 650px; font-size: 16px; line-height: 1.85; margin-top: 25px; }
.web-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.web-chips > span, .web-periodo { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; background: #fff; border: 1px solid var(--line); color: var(--azul-700); border-radius: 5px; font-size: 11px; }
.web-catalogo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.web-formulario { border: 1px solid var(--line); border-radius: 10px; padding: 25px; display: flex; flex-direction: column; }
.web-formulario-top { display: flex; align-items: center; justify-content: space-between; color: var(--azul-600); margin-bottom: 18px; }
.web-codigo { font-family: 'Source Serif 4', Georgia, serif; font-size: 36px; line-height: 1; }
.web-formulario-top > i { background: var(--azul-50); padding: 12px; border-radius: 9px; font-size: 18px; }
.web-formulario h2 { font-family: 'Inter', sans-serif; font-size: 17px; letter-spacing: -.02em; line-height: 1.5; padding-bottom: 20px; }
.web-formatos { display: flex; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.web-formatos span { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-2); }
.web-info { display: flex; align-items: flex-start; gap: 14px; background: #f3f8fe; border: 1px solid var(--line); padding: 22px; border-radius: 9px; margin-top: 30px; }
.web-info > i { color: var(--azul-600); margin-top: 4px; font-size: 18px; }
.web-info p { font-size: 13px; }
.web-banda-suave { background: #f3f8fe; padding: 64px 0; }
.web-banda-suave .web-titulo-fila { margin-bottom: 0; align-items: center; }
.web-funciones-extra { align-items: center; gap: 65px; }
.web-funciones-extra > img { width: 100%; height: 430px; object-fit: cover; border-radius: 12px 90px 12px 12px; }
.web-funciones-extra p { margin-top: 20px; font-size: 14px; }
.web-funciones-extra .web-btn { margin-top: 24px; }
.web .web-lista { list-style: none; padding: 0; margin-top: 24px; }
.web-lista li { position: relative; padding-left: 23px; font-size: 12px; color: var(--text-2); margin-bottom: 13px; }
.web-lista li::before { content: '✓'; position: absolute; left: 0; color: #147d72; font-weight: 600; }
.web-centrado { text-align: center; }
.web-centrado p { margin-inline: auto; }
.web-periodo { margin-top: 25px; }
.web-planes-seccion { padding-top: 32px; }
.web-planes-titulo { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.web-planes-titulo h1 { font-size: clamp(28px, 4vw, 38px); }
.web-planes-titulo p { margin: 0; font-size: 13px; color: #596b80; }
.web-planes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.web-plan { position: relative; border: 1px solid var(--line); padding: 27px 23px 23px; border-radius: 10px; display: flex; flex-direction: column; background: #fff; }
.web-plan .web-etiqueta { font-size: 9px; margin-bottom: 13px; }
.web-plan h2 { font-size: 27px; }
.web-plan-para { font-size: 11px; margin-top: 12px !important; min-height: 55px; }
.web-precio { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.web-precio strong { font-size: 43px; font-weight: 600; letter-spacing: -.07em; color: var(--azul-900); }
.web-precio span { font-size: 10px; color: var(--text-2); }
.web-plan-medicos { font-size: 11px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.web-plan .web-lista { margin-bottom: 23px; }
.web-plan .web-lista li { font-size: 11px; }
.web-plan .web-btn { font-size: 11px; gap: 10px; padding-inline: 10px; width: 100%; margin-top: auto; }
.web-plan-destacado { border: 2px solid var(--azul-600); background: #f8fbff; }
.web-plan-cinta { position: absolute; left: -2px; right: -2px; top: -27px; height: 30px; background: var(--azul-600); color: #fff; border-radius: 9px 9px 0 0; text-align: center; padding: 5px; font-size: 10px; font-weight: 600; }
.web-panel { border: 1px solid var(--line); padding: 36px; border-radius: 12px; }
.web-panel-suave { background: #f8fbfe; }
.web-panel > h2 { font-size: 29px; margin: 22px 0; }
.web-panel p { font-size: 13px; }
.web .web-lista-detalle { list-style: none; padding: 0; margin-top: 12px; }
.web-lista-detalle li { padding: 21px 0; border-top: 1px solid var(--line); }
.web-lista-detalle h3 { font-size: 14px; margin-bottom: 7px; }
.web-faq-rejilla { display: grid; grid-template-columns: .75fr 1.6fr; gap: 70px; align-items: start; }
.web-faq-ayuda { background: #f3f8fe; border: 1px solid var(--line); border-radius: 12px; padding: 30px; position: sticky; top: 118px; }
.web-faq-ayuda h2 { font-size: 30px; margin-top: 22px; }
.web-faq-ayuda p { font-size: 13px; margin-top: 18px; }
.web-faq-ayuda .web-btn { margin-top: 24px; font-size: 12px; gap: 12px; padding-inline: 15px; }
.web-faq details { border-bottom: 1px solid var(--line); }
.web-faq details:first-child { border-top: 1px solid var(--line); }
.web-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0; font-size: 15px; line-height: 1.65; font-weight: 600; color: var(--azul-900); }
.web-faq summary::-webkit-details-marker { display: none; }
.web-faq summary::after { content: '+'; color: var(--azul-600); font-size: 24px; font-weight: 400; }
.web-faq details[open] summary::after { content: '−'; }
.web-faq details > div { padding: 0 25px 24px 0; }
.web-faq p { font-size: 14px; margin-bottom: 12px; line-height: 1.85; }
.web-faq a { color: var(--azul-700); text-decoration: underline; text-underline-offset: 3px; }
.web-demo-seccion { background: #f3f8fe; padding: 68px 0 80px; }
.web-demo-rejilla { display: grid; grid-template-columns: .88fr 1.12fr; align-items: start; gap: 70px; }
.web-demo-presentacion { padding-top: 20px; }
.web-demo-presentacion h1 { font-size: clamp(38px, 3.8vw, 52px); }
.web-demo-presentacion .web-entrada { font-size: 15px; }
.web .web-demo-pasos { list-style: none; padding: 0; margin-top: 36px; }
.web-demo-pasos li { display: flex; gap: 17px; padding: 21px 0; border-top: 1px solid var(--line); }
.web-demo-pasos li > span { font-size: 11px; color: var(--azul-600); padding-top: 2px; }
.web-demo-pasos h2 { font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: -.01em; line-height: 1.5; }
.web-demo-pasos p { font-size: 12px; margin-top: 7px; }
.web-demo-confianza { display: flex; align-items: center; gap: 15px; padding-top: 27px; color: var(--azul-900); font-size: 12px; }
.web-demo-confianza > i { font-size: 25px; color: var(--azul-600); }
.web-demo-confianza small { display: block; font-size: 11px; color: var(--text-2); }
.web-demo-panel { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px; box-shadow: 0 12px 38px #0a2c5608; }
.web-form .web-etiqueta { font-size: 9px; margin-bottom: 12px; }
.web-form h2 { font-size: 30px; }
.web-form-intro { font-size: 12px; margin: 14px 0 27px !important; }
.web-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.web-campo { min-width: 0; }
.web-campo-completo { grid-column: 1 / -1; }
.web-campo label { display: block; font-size: 11px; color: var(--azul-900); font-weight: 600; margin-bottom: 7px; }
.web-campo input:not([type='checkbox']), .web-campo select, .web-campo textarea { width: 100%; min-height: 45px; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 11px; color: var(--text); font-size: 12px; line-height: 1.6; }
.web-campo input::placeholder, .web-campo textarea::placeholder { color: #68798e; opacity: 1; }
.web-campo textarea { display: block; min-height: 94px; resize: vertical; }
.web-campo input[aria-invalid] { border-color: #a5342d; }
.web-campo-nota, .web-opcional { font-size: 10px; font-weight: 400; color: #596b80; }
.web-opcional { float: right; }
.web-campo .web-checkbox { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--azul-200); border-radius: 7px; padding: 16px; background: #f3f8fe; margin-bottom: 0; cursor: pointer; }
.web-checkbox input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--azul-600); flex-shrink: 0; }
.web-checkbox b { font-size: 11px; font-weight: 600; }
.web-checkbox small { display: block; font-size: 10px; font-weight: 400; color: var(--text-2); margin-top: 4px; }
.web-form > .web-btn { width: 100%; margin-top: 24px; }
.web-form-privacidad { font-size: 10px; line-height: 1.8; margin-top: 16px !important; }
.web-form-privacidad i { color: var(--azul-600); margin-right: 4px; }
.web-cebo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.web-error-resumen { padding: 16px; border-radius: 7px; background: #fff1ef; border: 1px solid #e5b1ab; color: #8c2923; font-size: 12px; margin-bottom: 24px; }
.web-error-resumen ul { padding-left: 20px; margin-top: 8px; }
.web-error-resumen a { color: #8c2923; text-decoration: underline; }
.web-error { color: #a5342d; display: block; font-size: 11px; margin-top: 6px; }
.web-demo-exito { padding: 22px 0; }
.web-demo-exito .web-icono { background: #e6f4ef; color: #147d72; margin-bottom: 25px; }
.web-demo-exito .web-etiqueta { display: block; }
.web-demo-exito p { margin-top: 25px; }
.web-demo-exito .web-btn { margin-top: 32px; }
.web-demo-exito .web-enlace { display: block; margin-top: 20px; }
@media (min-width: 1440px) { .web-hero-rejilla { gap: 85px; } }
@media (max-width: 1180px) {
  .web-wrap { width: calc(100% - 64px); }
  .web-barra { min-height: 76px; flex-wrap: wrap; }
  .web-navegacion { width: 100%; flex-wrap: wrap; padding-bottom: 20px; }
  .web-js .web-navegacion { display: none; position: absolute; top: 100%; left: -32px; width: calc(100% + 64px); background: #fff; padding: 16px 32px 26px; border-bottom: 1px solid var(--line); box-shadow: 0 20px 28px #0a2c5610; }
  .web-js .web-navegacion.web-menu-abierto { display: flex; }
  .web-js .web-menu-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; color: var(--azul-900); padding: 9px 14px; font-size: 12px; }
  .web-hero-rejilla { gap: 45px; }
  .web-hero h1 { font-size: 54px; }
  .web-hero-foto { height: 475px; }
  .web-hero .web-etiqueta { font-size: 9px; }
  .web-asistente { gap: 60px; }
  .web-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 22px; }
  .web-plan-para { min-height: 0; }
  .web-plan h2 { font-size: 31px; }
  .web-plan .web-lista li { font-size: 13px; }
  .web-faq-rejilla { gap: 35px; grid-template-columns: .85fr 1.5fr; }
  .web-demo-rejilla { gap: 36px; }
  .web-demo-panel { padding: 28px; }
}
@media (max-width: 850px) {
  .web-hero { padding-top: 44px; }
  .web-hero-rejilla { grid-template-columns: 1fr 1fr; gap: 30px; }
  .web-hero h1 { font-size: 43px; }
  .web-hero .web-entrada { font-size: 14px; }
  .web-hero .web-acciones { gap: 16px; }
  .web-hero-foto { height: 420px; }
  .web-foto-etiqueta { right: -10px; padding: 10px; }
  .web-expediente { left: -12px; width: calc(100% + 6px); padding: 15px; }
  .web-expediente-titulo b { font-size: 10px; }
  .web-expediente-titulo small { font-size: 9px; }
  .web-expediente-pie > span { display: none; }
  .web-visual-cruz { display: none; }
  .web-confianza .web-wrap { grid-template-columns: repeat(2, 1fr); }
  .web-confianza span { justify-content: flex-start; }
  .web-seccion { padding: 60px 0; }
  .web-tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-tarjeta { padding: 24px; }
  .web-asistente { grid-template-columns: 1fr 1fr; gap: 35px; }
  .web-asistente-flujo { padding: 23px; }
  .web-pie-rejilla { gap: 30px; grid-template-columns: 1fr 1fr; }
  .web-pie-rejilla > div:last-child { grid-column: 1 / -1; }
  .web-catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .web-funciones-extra { gap: 35px; }
  .web-faq-rejilla { grid-template-columns: 1fr; }
  .web-faq-ayuda { position: static; }
  .web-demo-rejilla { grid-template-columns: 1fr; }
  .web-demo-presentacion { max-width: 580px; }
  .web-demo-pasos, .web-demo-confianza { display: none; }
  .web-demo-panel { padding: 36px; }
  .web-proteccion { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .web-wrap { width: calc(100% - 40px); }
  .web-franja { font-size: 9px; }
  .web-franja .web-wrap > span:last-child { display: none; }
  .web-barra { min-height: 70px; gap: 16px; }
  .web-marca img { width: 35px; height: 35px; }
  .web-marca > span { font-size: 19px; }
  .web-marca b { font-size: 10px; }
  .web-js .web-navegacion { left: -20px; width: calc(100% + 40px); padding: 12px 20px 24px; }
  .web-navegacion { gap: 4px; }
  .web-navegacion > a { width: 100%; }
  .web-navegacion > a:not(.web-btn) { font-size: 14px; min-height: 46px; }
  .web-navegacion .web-entrar { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 8px; }
  .web-navegacion .web-btn { margin-top: 10px; }
  .web-hero { padding: 38px 0 40px; }
  .web-hero-rejilla { grid-template-columns: 1fr; gap: 38px; }
  .web-hero .web-etiqueta { font-size: 9px; }
  .web-hero h1 { font-size: clamp(43px, 11.5vw, 62px); }
  .web-hero h1 br:nth-of-type(1), .web-hero h1 em br { display: none; }
  .web-hero .web-entrada { font-size: 15px; margin-top: 23px; }
  .web-acciones { gap: 17px; margin-top: 23px; }
  .web-hero .web-btn { width: 100%; }
  .web-hero .web-enlace { margin-inline: auto; }
  .web-hero .web-nota { font-size: 10px; text-align: center; }
  .web-hero-visual { padding: 0 0 95px; }
  .web-hero-foto { height: 350px; border-radius: 85px 12px 12px 12px; }
  .web-foto-etiqueta { right: 9px; top: -15px; }
  .web-expediente { left: 12px; width: calc(100% - 24px); padding: 17px; }
  .web-expediente-titulo b { font-size: 11px; }
  .web-expediente-titulo small { font-size: 9px; }
  .web-confianza .web-wrap { gap: 18px 12px; padding-block: 22px; }
  .web-confianza span { font-size: 9px; gap: 8px; }
  .web-confianza i { font-size: 16px; }
  .web-seccion { padding: 48px 0; }
  .web-etiqueta { font-size: 10px; margin-bottom: 15px; }
  .web h2 { font-size: 32px; }
  .web-titulo-fila { flex-direction: column; align-items: flex-start; gap: 22px; }
  .web-tres, .web-dos, .web-asistente, .web-catalogo, .web-planes { grid-template-columns: 1fr; }
  .web-tarjeta .web-icono { margin-bottom: 19px; }
  .web-tarjeta .web-h3 { font-size: 19px; }
  .web-tarjeta p { font-size: 14px; }
  .web-asistente-seccion { padding: 48px 0; }
  .web-asistente { gap: 35px; }
  .web-asistente h2 { font-size: 34px; }
  .web-asistente p { font-size: 14px; }
  .web-asistente-flujo p { font-size: 12px; }
  .web-asistente .web-btn { width: 100%; }
  .web-cta .web-wrap { flex-direction: column; align-items: flex-start; }
  .web-cta .web-wrap > div:last-child { width: 100%; }
  .web-cta .web-btn { width: 100%; }
  .web-pie { padding-top: 42px; }
  .web-pie-rejilla { grid-template-columns: 1fr; gap: 30px; }
  .web-pie h2 { font-size: 13px; }
  .web-pie nav a { min-height: 32px; }
  .web-pie-legal { flex-direction: column; gap: 7px; }
  .web-pagina-hero { padding: 44px 0; }
  .web-pagina-hero h1 { font-size: 38px; }
  .web-pagina-hero p { font-size: 15px; }
  .web-chips > span { font-size: 10px; }
  .web-formulario h2 { font-size: 19px; }
  .web-formulario-top { margin-bottom: 10px; }
  .web-formulario { padding: 24px; }
  .web-banda-suave { padding: 46px 0; }
  .web-banda-suave .web-titulo-fila { align-items: flex-start; }
  .web-banda-suave .web-btn { width: 100%; }
  .web-funciones-extra > img { height: 290px; }
  .web-planes { gap: 40px; }
  .web-plan { padding: 27px; }
  .web-plan .web-btn, .web-plan .web-lista li { font-size: 13px; }
  .web-plan-para, .web-plan-medicos { font-size: 13px; }
  .web-panel { padding: 26px; }
  .web-panel h2 { font-size: 29px; }
  .web-faq-ayuda { padding: 25px; }
  .web-faq-ayuda .web-btn { width: 100%; }
  .web-faq summary { font-size: 14px; }
  .web-demo-seccion { padding: 30px 0 45px; }
  .web-demo-presentacion h1 { font-size: 40px; }
  .web-demo-panel { padding: 25px 20px; }
  .web-form h2 { font-size: 28px; }
  .web-campos { grid-template-columns: 1fr; }
  .web-campo input:not([type='checkbox']), .web-campo select, .web-campo textarea { font-size: 16px; }
  .web-campo label, .web-checkbox b { font-size: 12px; }
  .web-campo-nota, .web-form-privacidad, .web-checkbox small { font-size: 11px; }
  .web-form > .web-btn { font-size: 12px; padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) { .web *, .web *::before, .web *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* ── PORTADA: LA ESCENA DE LA MARCA ─────────────────────────────
   La misma escena de la entrada (dos médicos y el 002 que se llena en
   el monitor), aquí como una tarjeta oscura de esquinas redondeadas. El
   marco deja de ser absoluto: toma el ancho de la columna. */
.web-hero-escena { margin: 0; }
.web-escena {
  position: relative; border-radius: 22px; overflow: hidden;
  background: #01091f;
  box-shadow: 0 30px 70px rgba(7,29,58,.28), 0 0 0 1px rgba(7,29,58,.06);
}
.web-escena .escena-marco {
  position: relative; left: auto; right: auto; bottom: auto; translate: none;
  width: 100%; -webkit-mask-image: none; mask-image: none;
}
.web-hero-escena figcaption { margin-top: 12px; font-size: 12px; color: #596b80; }

/* Los once formularios, con su código en la serif */
.web-msp {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.web-msp a {
  display: flex; align-items: baseline; gap: 12px; height: 100%;
  padding: 16px 18px; border: 1px solid #dde7f3; border-radius: 12px;
  background: #fff; color: var(--azul-900); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.web-msp a:hover { border-color: var(--azul-300); box-shadow: 0 8px 22px rgba(13,99,200,.10); }
.web-msp a:focus-visible { outline: 3px solid var(--azul-300); outline-offset: 2px; }
.web-msp-codigo {
  flex: none; min-width: 2.2em;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; font-weight: 600;
  color: var(--azul-600); font-variant-numeric: lining-nums tabular-nums;
}
.web-msp-nombre { font-size: 14px; line-height: 1.35; font-weight: 500; }

/* Vertex: su esfera en el bloque del asistente */
.web-asistente-simbolo > img { width: 48px; height: 48px; flex: none; }
.web-asistente-simbolo span { font-size: 12px; }

/* Planes en una línea; el destacado, en azul noche */
.web-planes-mini {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.web-planes-mini a {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 20px 20px 18px; border: 1px solid #dde7f3; border-radius: 14px;
  background: #fff; color: var(--azul-900); text-decoration: none; font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
.web-planes-mini a:hover { border-color: var(--azul-300); box-shadow: 0 8px 22px rgba(13,99,200,.10); }
.web-planes-mini a:focus-visible { outline: 3px solid var(--azul-300); outline-offset: 2px; }
.web-planes-mini b { font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; font-weight: 600; }
.web-planes-mini-precio { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--azul-900); }
.web-planes-mini-precio small { font-size: 12px; font-weight: 500; color: #596b80; }
.web-planes-mini > li > a > span:last-child { color: #596b80; }
.web-planes-mini li.destacado a { background: var(--azul-950); border-color: var(--azul-950); color: #fff; }
.web-planes-mini li.destacado .web-planes-mini-precio,
.web-planes-mini li.destacado b { color: #fff; }
.web-planes-mini li.destacado .web-planes-mini-precio small,
.web-planes-mini li.destacado a > span:last-child { color: #bcd8fb; }
.web-planes-mini-cinta {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--azul-950); background: var(--cian);
}
.web-planes-mini-nota { margin: 16px 0 0; font-size: 13px; color: #596b80; }

@media (max-width: 1180px) {
  .web-msp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .web-planes-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .web-msp, .web-planes-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .web-msp a { flex-direction: column; gap: 2px; padding: 12px 14px; }
  .web-msp-nombre { font-size: 13px; }
  .web-escena { border-radius: 16px; }
}
@media (max-width: 360px) { .web-msp { grid-template-columns: 1fr; } }

/* ── FORMULARIOS: EL IMPRESO Y EL CATÁLOGO POR MOMENTO ───────────
   Arriba, la hoja 1 del 002 tal como sale impresa, como un papel
   levemente girado sobre el azul claro de la cabecera. Debajo, los
   grupos de la aplicación, cada formulario con su código en la serif y
   su edición del MSP. */
.web-form-hero { padding: 56px 0 64px; overflow: hidden; }
.web-form-hero-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.web-form-muestra { margin: 0; }
.web-form-hoja {
  background: #fff; padding: 14px; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(7,29,58,.05), 0 30px 60px rgba(7,29,58,.18);
  transform: rotate(-1.4deg); transform-origin: 60% 40%;
  max-height: 560px; overflow: hidden; position: relative;
}
/* La hoja se corta por abajo y se funde con el papel: se ve completa la
   cabecera y las primeras secciones, que es lo que se reconoce */
.web-form-hoja::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.web-form-hoja img { display: block; width: 100%; height: auto; }
.web-form-muestra figcaption { margin-top: 18px; font-size: 12.5px; color: #596b80; }

/* Los siete grupos en tres columnas que se llenan en orden, como en
   «Atender» de la aplicación: sin huecos por grupos de uno o dos */
.web-form-grupos { columns: 3; column-gap: 24px; }
.web-form-grupo { break-inside: avoid; margin: 0 0 32px; }
.web-catalogo.web-form-lista { display: flex; flex-direction: column; gap: 12px; }
.web-form-lista .web-formulario { padding: 20px 22px; }
.web-form-grupo > h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; font-weight: 600;
  color: var(--azul-900); letter-spacing: -.02em;
}
.web-form-grupo > h3 i { color: var(--azul-600); font-size: 17px; }
.web-formulario { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.web-formulario:hover { border-color: var(--azul-300); box-shadow: 0 10px 26px rgba(13,99,200,.09); }
.web-formulario h4 { margin: 0 0 6px; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; color: var(--azul-900); }
.web-formulario-ayuda { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: #596b80; flex: 1; }
.web-formulario .web-codigo { font-family: 'Source Serif 4', Georgia, serif; font-size: 34px; font-weight: 600; color: var(--azul-600); line-height: 1; }
.web-edicion {
  font-size: 11.5px; font-weight: 600; color: var(--azul-800);
  background: var(--azul-50); border: 1px solid #d9e9ff; padding: 4px 10px; border-radius: 999px;
}

@media (max-width: 1100px) { .web-form-grupos { columns: 2; } }
@media (max-width: 700px) { .web-form-grupos { columns: 1; } }
@media (max-width: 1000px) {
  .web-form-hero-rejilla { grid-template-columns: 1fr; gap: 36px; }
  .web-form-hoja { max-height: 420px; transform: rotate(-1deg); }
}
@media (max-width: 620px) {
  .web-form-hero { padding: 36px 0 44px; }
  .web-form-hoja { max-height: 320px; padding: 8px; }
  .web-form-grupo > h3 { font-size: 20px; }
}

/* ── CABECERAS CON IMAGEN ───────────────────────────────────────
   Qué incluye, Protección de datos, Preguntas y Demostración: el texto
   a la izquierda y, a la derecha, una escena de la misma familia que la
   portada (estudio azul noche, luz cian) en tarjeta de esquinas
   redondeadas. Imágenes generadas con IA (ver FUENTES_WEB.md). */
.web-hero-con-imagen { padding: 56px 0 60px; }
.web-hero-con-imagen-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.web-hero-foto-tarjeta { margin: 0; border-radius: 22px; overflow: hidden; background: #01091f; box-shadow: 0 30px 70px rgba(7,29,58,.26); }
.web-hero-foto-tarjeta img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.web-demo-foto { margin: 26px 0 8px; border-radius: 18px; }
.web-funciones-extra > img { border-radius: 22px; box-shadow: 0 24px 56px rgba(7,29,58,.22); }
@media (max-width: 1000px) { .web-hero-con-imagen-rejilla { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 620px) { .web-hero-foto-tarjeta { border-radius: 16px; } .web-hero-con-imagen { padding: 36px 0 44px; } }