/* FINDLEY MEDICAL · Especialidades, clínicas afiliadas y emergencias */

.btn-color { background: var(--c, var(--azul)); color: #fff; box-shadow: 0 14px 30px -14px var(--c, var(--azul)); }
.btn-color:hover { filter: brightness(1.08); }
.btn-rojo { background: var(--rojo); color: #fff; box-shadow: 0 14px 30px -14px rgba(229, 72, 77, .8); }
.llamado[style*="--c"] { background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 55%, #0b1f33)); }

/* ---------- Página de especialidad ---------- */
.esp-hero { --c: var(--azul); position: relative; padding: 140px 0 70px; overflow: hidden; background: radial-gradient(800px 500px at 85% 15%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), radial-gradient(500px 400px at 5% 95%, rgba(18, 181, 166, .08), transparent 70%); }
.esp-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.esp-hero .h1 { font-size: clamp(40px, 5.6vw, 72px); color: var(--c); }
.migas { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--gris); }
.migas a { color: var(--c); }
.migas span { color: var(--gris-claro); }
.esp-frase { font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; margin: -8px 0 14px; color: var(--tinta); }
.esp-hero .sellos svg { color: var(--c); }
.esp-tarjeta { position: relative; background: #fff; border: 1px solid var(--linea); border-radius: 30px; padding: 30px; box-shadow: var(--sombra); overflow: hidden; }
.esp-tarjeta::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--c); opacity: .08; }
.esp-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 16px; box-shadow: 0 16px 30px -14px var(--c); }
.esp-ico svg { width: 30px; height: 30px; }
.esp-tarjeta > b { display: block; font-size: 17px; margin-bottom: 14px; }
.esp-trata { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.esp-trata li { padding: 8px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 9%, #fff); color: color-mix(in srgb, var(--c) 80%, #0b1f33); border: 1px solid color-mix(in srgb, var(--c) 20%, #fff); }

.esp-urgencia { background: linear-gradient(90deg, #fff1f1, #fff8f8); border-top: 1px solid #f6d3d4; border-bottom: 1px solid #f6d3d4; }
.esp-urgencia-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.esp-urgencia b { display: flex; align-items: center; gap: 8px; color: #5e1215; font-size: 16px; margin-bottom: 8px; }
.esp-urgencia b svg { color: var(--rojo); }
.esp-urgencia ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding-left: 18px; color: #6b2224; font-size: 14.5px; }
.esp-urgencia-botones { display: grid; gap: 8px; justify-items: stretch; }

.esp-cuando { align-items: start; }
.tips { display: grid; gap: 12px; margin-top: 10px; }
.tip { display: flex; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--fondo-2); border: 1px solid var(--linea); }
.tip svg { color: #d97706; flex: none; }
.tip p { font-size: 15px; color: var(--tinta-2); }

.srvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.srv { position: relative; display: flex; flex-direction: column; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s; }
.srv:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); }
.srv::before { content: ""; position: absolute; left: 24px; top: 0; width: 40px; height: 4px; border-radius: 0 0 4px 4px; background: var(--c); }
.srv-tag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); margin-bottom: 10px; }
.srv h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 6px; }
.srv > p { font-size: 14.5px; color: var(--gris); flex: 1; }
.srv dl { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--linea-2); }
.srv dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-claro); }
.srv dd { font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.srv .enlace { align-self: flex-start; margin-top: 16px; border: 0; background: none; cursor: pointer; color: var(--c); font-weight: 800; font-size: 14px; display: inline-flex; gap: 6px; align-items: center; padding: 0; }
.srv .enlace svg { width: 16px; height: 16px; }

.seguro-lista { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; max-width: 1000px; margin: 0 auto; }
.seguro-lista li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); font-size: 14.5px; color: var(--tinta-2); }
.seguro-lista svg { color: var(--teal-osc); flex: none; }

.esp-conectado { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: start; }
.examenes { padding: 28px; border-radius: 26px; background: var(--fondo-2); border: 1px solid var(--linea); display: grid; gap: 14px; }
.examenes h3, .con-titulo { font-size: 19px; letter-spacing: -.02em; }
.examenes ul { list-style: none; display: grid; gap: 8px; }
.examenes li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; font-weight: 600; }
.examenes li svg { width: 18px; height: 18px; color: #6d4fe0; }
.examenes .btn { justify-self: start; }
.examenes small { font-size: 12.5px; color: var(--gris); }
.con-titulo { margin-bottom: 14px; }
.cons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.con { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); text-align: left; font: inherit; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; color: inherit; }
.con:hover { transform: translateY(-3px); border-color: var(--azul); box-shadow: var(--sombra-suave); }
.con .ico, .con > svg { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--celeste); color: var(--azul); margin-bottom: 8px; }
.con > svg { padding: 10px; }
.con b { font-size: 15px; }
.con p { font-size: 13px; color: var(--gris); }

.esp-final { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.esp-final .preguntas { margin: 0; }
.relacionadas { padding: 26px; border-radius: 26px; background: var(--fondo-2); border: 1px solid var(--linea); display: grid; gap: 14px; position: sticky; top: 100px; }
.relacionadas h3 { font-size: 17px; }
.relacionadas > div { display: grid; gap: 8px; }
.esp-rel { --c: var(--azul); display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--linea); font-weight: 700; font-size: 14.5px; transition: border-color .2s, transform .2s; }
.esp-rel svg { width: 20px; height: 20px; color: var(--c); }
.esp-rel:hover { border-color: var(--c); transform: translateX(4px); }

/* ---------- Herramientas ---------- */
.nivel { display: inline-block; padding: 5px 12px; border-radius: 99px; color: #fff; font-size: 13px; font-weight: 800; }
.quiz-ayuda { margin-top: 12px; font-size: 13.5px; }
.presion-campos { grid-template-columns: 1fr 1fr; }
.presion-res { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--fondo-2); border: 1px solid var(--linea); }
.presion-valor b { font-size: 42px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.presion-valor small { margin-left: 6px; color: var(--gris); font-weight: 700; }
.presion-escala { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 99px; overflow: hidden; height: 26px; }
.presion-escala span { display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; }
.presion-escala span:nth-child(1) { background: #1f9a52; } .presion-escala span:nth-child(2) { background: #65a30d; } .presion-escala span:nth-child(3) { background: #d97706; } .presion-escala span:nth-child(4) { background: #e5484d; } .presion-escala span:nth-child(5) { background: #b91c1c; }
.presion-escala i { position: absolute; top: -4px; width: 8px; height: 34px; margin-left: -4px; border-radius: 99px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: left .5s cubic-bezier(.2,.8,.2,1); }
.presion-escala { overflow: visible; }
.presion-escala span:first-child { border-radius: 99px 0 0 99px; } .presion-escala span:nth-child(5) { border-radius: 0 99px 99px 0; }
.presion-txt { font-size: 14.5px; color: var(--tinta-2); display: grid; gap: 10px; justify-items: start; }
.presion-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.presion-historial { list-style: none; display: grid; gap: 4px; }
.presion-historial li { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--linea); }
.presion-historial .ph-titulo { display: block; border: 0; font-size: 12px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .08em; }
.presion-historial small { color: var(--gris); }
.ciclo-tabs { margin: 0 0 4px; }
.ciclo-campos { grid-template-columns: 1.3fr 1fr 1fr; }
.ciclo-campos .campo[hidden] { display: none; }
.ciclo-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ciclo-datos div { padding: 14px 16px; border-radius: 16px; background: var(--fondo-2); border: 1px solid var(--linea); }
.ciclo-datos small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ciclo-datos b { display: block; font-size: 16px; margin: 2px 0; }
.ciclo-datos span { font-size: 12.5px; color: var(--gris); }
.cals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.cal-mes { display: block; font-size: 13.5px; text-transform: capitalize; margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 12px; }
.cal-grid i { font-style: normal; font-weight: 800; color: var(--gris-claro); font-size: 10.5px; }
.cal-grid span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-weight: 600; }
.cal-grid .regla, .cal-ley .regla::before { background: #fde2e4; color: #b42318; }
.cal-grid .fertil, .cal-ley .fertil::before { background: #d9f5f0; color: var(--teal-osc); }
.cal-grid .ovu, .cal-ley .ovu::before { background: var(--teal); color: #fff; font-weight: 800; }
.cal-grid .hoy { outline: 2px solid var(--tinta); outline-offset: -2px; }
.cal-ley { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--gris); }
.cal-ley span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; }
.emb { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, #fdf2f8, #eef4ff); }
.emb-semana { display: flex; align-items: center; gap: 8px; }
.emb-semana b { font-size: 60px; line-height: 1; letter-spacing: -.05em; color: #c026d3; }
.emb-semana span { font-size: 13px; font-weight: 700; color: var(--gris); line-height: 1.25; }
.emb small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c026d3; }
.emb p { font-size: 14px; }
.emb-barra { position: relative; height: 10px; border-radius: 99px; background: var(--fondo-3); overflow: hidden; }
.emb-barra span { display: block; height: 100%; background: linear-gradient(90deg, #f472b6, #c026d3); border-radius: inherit; transition: width .5s; }
.emb-barra i { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; }
.emb-hitos { list-style: none; display: grid; gap: 6px; }
.emb-hitos li { position: relative; padding-left: 22px; font-size: 13.5px; }
.emb-hitos li::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #c026d3; }
.emb-hitos li.pasado::before { background: #c026d3; }
.emb-hitos li.pasado a { color: var(--gris); }
.emb-hitos a:hover { color: #c026d3; }
.ciclo-aviso { color: var(--rojo); font-weight: 700; }

/* ---------- Página central de especialidades ---------- */
.hub-hero { position: relative; padding: 140px 0 40px; text-align: center; overflow: hidden; background: radial-gradient(800px 420px at 50% 0%, rgba(21, 94, 239, .12), transparent 70%); }
.hub-hero .bajada { margin: 0 auto; }
.hub-hero .h1 { font-size: clamp(38px, 5.6vw, 70px); }
.hub-buscar { display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 28px auto 0; padding: 8px 8px 8px 20px; border-radius: 20px; background: #fff; border: 1.5px solid var(--linea-2); box-shadow: var(--sombra); transition: border-color .2s, box-shadow .2s; }
.hub-buscar:focus-within { border-color: var(--azul); box-shadow: 0 0 0 5px var(--celeste), var(--sombra); }
.hub-buscar svg { color: var(--azul); width: 24px; height: 24px; }
.hub-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 14px 4px; font-size: 17px; font-weight: 600; background: none; }
.hub-atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.hub-atajos a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); font-size: 13.5px; font-weight: 700; transition: border-color .2s; }
.hub-atajos a svg { width: 17px; height: 17px; color: var(--azul); }
.hub-atajos a:hover { border-color: var(--azul); }
.hub-atajos a.rojo { color: #b42318; border-color: #f6c9ca; background: #fff4f4; }
.hub-atajos a.rojo svg { color: var(--rojo); }
.hub-seccion { padding-top: 30px; }
.hub-grupos { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 18px; scrollbar-width: thin; }
.hub-grupos button { flex: none; border: 1px solid var(--linea-2); background: #fff; border-radius: 99px; padding: 9px 15px; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--tinta-2); }
.hub-grupos button small { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--fondo-3); margin-left: 4px; }
.hub-grupos button.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.hub-grupos button.activo small { background: rgba(255,255,255,.2); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hub-card { --c: var(--azul); position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; animation: entra .4s ease both; }
.hub-card:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--c) 35%, #fff); }
.hub-card .ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 10px; box-shadow: 0 12px 22px -12px var(--c); }
.hub-card small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.hub-card b { font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
.hub-card p { font-size: 13.5px; color: var(--gris); flex: 1; margin-bottom: 8px; }
.hub-trata { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.hub-trata i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--fondo-2); color: var(--tinta-2); }
.hub-card .enlace { color: var(--c); font-size: 13.5px; font-weight: 800; display: inline-flex; gap: 6px; align-items: center; }
.hub-card .enlace svg { width: 16px; height: 16px; transition: transform .2s; }
.hub-card:hover .enlace svg { transform: translateX(4px); }
.hub-vacio { text-align: center; color: var(--gris); padding: 30px; }

.triage { display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: start; max-width: 1040px; margin: 0 auto; }
.cuerpo-zona { display: grid; gap: 16px; justify-items: center; padding: 24px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); }
.cuerpo { width: 100%; max-width: 220px; overflow: visible; }
.zona { cursor: pointer; outline: none; }
.zona > * { fill: #cfdcea; stroke: #fff; stroke-width: 3; transition: fill .2s, transform .2s; transform-box: fill-box; transform-origin: center; }
.zona:hover > *, .zona:focus-visible > * { fill: #b9cff5; }
.zona.activo > * { fill: var(--azul); }
.triage-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.triage-extra button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--linea-2); background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.triage-extra button svg { width: 16px; height: 16px; color: var(--azul); }
.triage-extra button.activo { background: var(--azul); color: #fff; border-color: var(--azul); }
.triage-extra button.activo svg { color: #fff; }
.triage-panel { padding: 28px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); min-height: 420px; }
.triage-panel.cambia { animation: entra .35s ease both; }
.triage-panel > small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.triage-panel h3 { font-size: 24px; letter-spacing: -.02em; }
.triage-panel > p { color: var(--gris); margin: 4px 0 12px; }
.sintomas { display: flex; flex-wrap: wrap; gap: 8px; }
.sintomas button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--linea-2); background: #fff; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; transition: all .15s; }
.sintomas button:hover { border-color: var(--azul); }
.sintomas button.activo { background: var(--celeste); border-color: var(--azul); color: var(--azul-osc); }
.sintomas button.alerta { border-color: #f6c9ca; color: #b42318; }
.sintomas button.alerta svg { width: 16px; height: 16px; }
.sintomas button.alerta.activo { background: #fdecec; }
.triage-res { display: grid; gap: 10px; margin-top: 18px; }
.triage-res:empty { display: none; }
.triage-alerta { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: #fdecec; border: 1px solid #f6c9ca; color: #5e1215; animation: entra .3s ease both; }
.triage-alerta > svg { color: var(--rojo); flex: none; }
.triage-te { font-weight: 700; font-size: 14.5px; }
.triage-nota { font-size: 13px; color: var(--gris); }
.mini-esp { --c: var(--azul); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--linea); background: #fff; transition: border-color .2s, transform .2s; animation: entra .35s ease both; }
.mini-esp:hover { border-color: var(--c); transform: translateX(4px); }
.mini-esp .ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.mini-esp b { display: block; font-size: 16px; }
.mini-esp small { font-size: 13px; color: var(--gris); }
.mini-esp > svg { margin-left: auto; color: var(--c); }

.chequeo-campos { grid-template-columns: 1fr 1.4fr; }
.segmento { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--fondo-3); }
.segmento label { flex: 1; position: relative; }
.botiquin-lista label, .checklist label { position: relative; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento span { display: block; text-align: center; padding: 9px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--gris); }
.segmento input:checked + span { background: #fff; color: var(--tinta); box-shadow: 0 2px 6px rgba(11,31,51,.1); }
.segmento input:focus-visible + span { outline: 2px solid var(--azul); }
.chequeos-lista { list-style: none; display: grid; gap: 8px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.chequeos-lista li { --c: var(--azul); display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; animation: entra .35s ease both; }
.chequeos-lista .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.chequeos-lista .ico svg { width: 20px; height: 20px; }
.chequeos-lista b { font-size: 14.5px; }
.chequeos-lista p { font-size: 12.5px; color: var(--gris); line-height: 1.4; }
.chequeos-lista .enlace { font-size: 12px; color: var(--c); font-weight: 700; }

.flujo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.flujo::before { content: ""; position: absolute; top: 36px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--azul), var(--teal)); z-index: 0; }
.flujo > div { position: relative; text-align: center; padding: 0 6px; }
.flujo .ico { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: #fff; border: 2px solid var(--azul); color: var(--azul); box-shadow: var(--sombra-suave); }
.flujo .ico svg { width: 28px; height: 28px; }
.flujo b { display: block; font-size: 16px; margin-bottom: 4px; }
.flujo p { font-size: 13.5px; color: var(--gris); }

/* ---------- Inicio: cinta y atajos ---------- */
.cinta-esp { overflow: hidden; margin: 0 -20px 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta-pista { display: flex; gap: 10px; width: max-content; animation: cinta 70s linear infinite; padding: 6px 0; }
.cinta-esp:hover .cinta-pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }
.cinta-pista a { --c: var(--azul); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); font-weight: 700; font-size: 14px; white-space: nowrap; transition: border-color .2s, transform .2s; }
.cinta-pista a svg { width: 18px; height: 18px; color: var(--c); }
.cinta-pista a:hover { border-color: var(--c); transform: translateY(-2px); }
.inicio-atajos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.atajo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); transition: border-color .2s, transform .2s, box-shadow .2s; }
.atajo:hover { border-color: var(--azul); transform: translateY(-3px); box-shadow: var(--sombra-suave); }
.atajo > svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--celeste); color: var(--azul); flex: none; }
.atajo b { display: block; font-size: 14.5px; line-height: 1.25; }
.atajo small { font-size: 12.5px; color: var(--gris); }
.atajo.rojo { background: #fff4f4; border-color: #f6d3d4; }
.atajo.rojo > svg { background: var(--rojo); color: #fff; }

/* ---------- Clínicas ---------- */
.clin-filtros { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; margin-bottom: 14px; }
.clin-servicios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.clin-servicios button { border: 1px solid var(--linea-2); background: #fff; border-radius: 99px; padding: 7px 13px; font-size: 13px; font-weight: 700; cursor: pointer; }
.clin-servicios button.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.clin-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: start; }
.clin-mapa { position: sticky; top: 96px; padding: 14px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); }
.clin-mapa svg { width: 100%; height: auto; border-radius: 16px; overflow: hidden; }
.clin-mapa .mar { fill: #d6e8f7; }
.clin-mapa .tierra { fill: #f3f6f9; }
.clin-mapa .rios path { fill: none; stroke: #cfe2f3; stroke-width: 4; }
.mar-txt { font: 700 10px "Plus Jakarta Sans", sans-serif; fill: #8fb3d4; writing-mode: vertical-rl; letter-spacing: .2em; }
.pin { cursor: pointer; }
.pin circle:not(.pin-onda) { fill: var(--azul); stroke: #fff; stroke-width: 3; transition: r .2s; }
.pin .pin-onda { fill: var(--azul); opacity: .15; transform-box: fill-box; transform-origin: center; }
.pin text { font: 700 9.5px "Plus Jakarta Sans", sans-serif; fill: var(--tinta-2); opacity: 0; transition: opacity .2s; pointer-events: none; }
.pin:hover text, .pin.activo text { opacity: 1; }
.pin.activo circle:not(.pin-onda) { fill: var(--rojo); r: 10; }
.pin.activo .pin-onda { fill: var(--rojo); animation: onda 1.6s infinite; }
.clin-mapa-nota { text-align: center; font-size: 12px; color: var(--gris-claro); margin-top: 8px; }
.clin-conteo { font-size: 14px; color: var(--gris); margin-bottom: 10px; }
.clin-lista { display: grid; gap: 14px; }
.clin { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); transition: border-color .2s, box-shadow .2s; animation: entra .35s ease both; }
.clin.activa, .clin:hover { border-color: var(--azul); box-shadow: var(--sombra-suave); }
.clin-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.clin-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.clin-tipo svg { width: 16px; height: 16px; }
.clin h3 { font-size: 19px; letter-spacing: -.02em; }
.clin-lugar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 13.5px; color: var(--gris); margin: 4px 0 12px; }
.clin-lugar svg { width: 15px; height: 15px; }
.clin-sv, .clin-esp { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.clin-sv i { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--fondo-2); border: 1px solid var(--linea); }
.clin-sv i.urg { background: #fdecec; border-color: #f6c9ca; color: #b42318; }
.clin-esp a { --c: var(--azul); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 8%, #fff); }
.clin-esp a:hover { background: color-mix(in srgb, var(--c) 16%, #fff); }
.clin-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--linea); }
.clin-pie span { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--teal-osc); }
.clin-pie span svg { width: 16px; height: 16px; }

/* ---------- Emergencias ---------- */
.emer-hero { position: relative; padding: 140px 0 60px; text-align: center; overflow: hidden; background: radial-gradient(800px 420px at 50% 0%, rgba(229, 72, 77, .14), transparent 70%); }
.emer-hero .etiqueta { color: var(--rojo); }
.emer-hero .h1 { font-size: clamp(38px, 5.6vw, 70px); }
.emer-hero .h1 em { background: linear-gradient(120deg, #e5484d, #f97316); -webkit-background-clip: text; background-clip: text; }
.emer-hero .bajada { margin: 0 auto; }
.emer-numeros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1100px; margin: 34px auto 0; }
.emer-num { --c: var(--rojo); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px; border-radius: 24px; background: #fff; border: 2px solid color-mix(in srgb, var(--c) 30%, #fff); text-align: center; transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.emer-num:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px var(--c); }
.emer-num > svg { width: 52px; height: 52px; padding: 12px; border-radius: 16px; background: var(--c); color: #fff; }
.emer-num b { display: block; font-size: 30px; letter-spacing: -.03em; color: var(--c); line-height: 1.1; }
.emer-num span { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.emer-num.rojo { --c: #e5484d; } .emer-num.naranja { --c: #ea580c; } .emer-num.azul { --c: #155eef; } .emer-num.morado { --c: #6d4fe0; } .emer-num.gris { --c: #4d5d72; }
.emer-num.rojo { animation: emer-latido 2s infinite; }
@keyframes emer-latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .35); } 50% { box-shadow: 0 0 0 10px rgba(229, 72, 77, 0); } }
.emer-num.morado b { font-size: 22px; padding: 4px 0; }
.emer-nota { margin-top: 18px; font-size: 13.5px; color: var(--gris); }
.auxilios { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
.aux-botones { display: grid; gap: 6px; }
.aux-botones button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; font-weight: 700; font-size: 14.5px; text-align: left; cursor: pointer; transition: all .15s; }
.aux-botones button svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #fdecec; color: var(--rojo); flex: none; }
.aux-botones button:hover { border-color: var(--rojo); }
.aux-botones button.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.aux-botones button.activo svg { background: rgba(255,255,255,.2); color: #fff; }
.aux-panel { padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); position: sticky; top: 96px; scroll-margin-top: 96px; }
.aux-panel.cambia { animation: entra .35s ease both; }
.aux-cabeza { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.aux-cabeza .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--rojo); color: #fff; }
.aux-cabeza h3 { font-size: 24px; letter-spacing: -.02em; flex: 1; min-width: 180px; }
.aux-pasos { list-style: none; display: grid; gap: 10px; margin-bottom: 18px; }
.aux-pasos li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.aux-pasos b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font-size: 14px; }
.aux-pasos span { padding-top: 5px; }
.aux-no { display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: #fff7ec; border: 1px solid #f7dfbd; color: #6b4a14; margin-bottom: 12px; }
.aux-no svg { color: #c98114; flex: none; }
.aux-no ul { padding-left: 18px; font-size: 14.5px; }
.rcp { align-items: center; text-align: center; }
.rcp-zona { height: 210px; display: grid; place-items: center; }
.rcp-corazon { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ff8a8f, #e5484d 55%, #b91c1c); color: #fff; box-shadow: 0 30px 60px -24px rgba(229, 72, 77, .8); }
.rcp-corazon svg { width: 64px; height: 64px; fill: rgba(255,255,255,.25); }
.rcp-corazon.late { animation: rcp-late .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rcp-late { 0% { transform: scale(1.12); box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 100% { transform: scale(1); box-shadow: 0 0 0 40px rgba(229,72,77,0); } }
.rcp-cuenta { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rcp-pasos { list-style: none; display: grid; gap: 10px; }
.rcp-pasos li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; font-size: 15px; }
.rcp-pasos b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--rojo); color: #fff; font-size: 13px; }
.pasos-transito { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: none; }
.pasos-transito li { display: flex; gap: 14px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.pasos-transito li > span { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #f97316, #e5484d); color: #fff; font-weight: 800; font-size: 18px; flex: none; }
.pasos-transito b { display: block; font-size: 17px; margin-bottom: 4px; }
.pasos-transito p { font-size: 14px; color: var(--gris); }
.soat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.soat { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.soat .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #fff1e6; color: #ea580c; margin-bottom: 6px; }
.soat b { font-size: 17px; }
.soat p { font-size: 14px; color: var(--gris); flex: 1; }
.soat-monto { align-self: flex-start; font-weight: 800; font-size: 14px; padding: 6px 12px; border-radius: 99px; background: var(--tinta); color: #fff; }
.soat-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.soat-info > div { display: flex; gap: 12px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); font-size: 14.5px; color: var(--tinta-2); }
.soat-info svg { color: #ea580c; flex: none; }
.despues-grid { grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; }
.ambulancia-tarjeta { display: grid; gap: 14px; padding: 28px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); text-align: center; }
.ambulancia-tarjeta small { color: var(--gris); font-size: 13px; }
.amb-ilustracion { padding: 18px 0; border-radius: 20px; background: linear-gradient(180deg, #eef4fb, #fff); overflow: hidden; }
.amb-ilustracion svg { width: 100%; max-width: 320px; margin: 0 auto; animation: amb-mueve 1.2s ease-in-out infinite alternate; }
.amb-ilustracion .sirena { fill: #e5484d; animation: sirena .6s steps(2) infinite; }
.amb-ilustracion .vel { animation: vel .5s linear infinite; }
@keyframes sirena { 50% { fill: #155eef; } }
@keyframes amb-mueve { to { transform: translateY(-2px); } }
@keyframes vel { 50% { opacity: .2; } }
.ficha-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: start; }
.ficha-form { gap: 12px; }
.ficha-vista { position: sticky; top: 96px; display: grid; gap: 14px; }
.ficha { border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.ficha-cabeza { display: flex; align-items: center; gap: 14px; padding: 20px 22px; background: linear-gradient(120deg, #e5484d, #b91c1c); color: #fff; }
.ficha-cabeza > span:first-child { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.2); flex: none; }
.ficha-cabeza small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.ficha-cabeza b { display: block; font-size: 20px; line-height: 1.2; word-break: break-word; }
.ficha-cabeza div { flex: 1; min-width: 0; }
.ficha-sangre { min-width: 64px; height: 64px; padding: 0 8px; border-radius: 18px; display: grid; place-items: center; background: #fff; color: #b91c1c; font-size: 24px; font-weight: 800; }
.ficha dl { display: grid; gap: 0; padding: 8px 22px; }
.ficha dl div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.ficha dl div:last-child { border-bottom: 0; }
.ficha dt { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding-top: 2px; }
.ficha dd { font-size: 15px; font-weight: 700; word-break: break-word; }
.ficha-pie { padding: 12px 22px; background: var(--fondo-2); font-size: 12px; font-weight: 700; color: var(--gris); }
.ficha-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.botiquin { max-width: 860px; margin: 0 auto; padding: 24px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); }
.botiquin-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.botiquin-tabs button { border: 1px solid var(--linea-2); background: #fff; border-radius: 99px; padding: 9px 18px; font-weight: 700; cursor: pointer; }
.botiquin-tabs button.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.botiquin-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.botiquin-lista label { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; cursor: pointer; font-size: 14.5px; font-weight: 600; }
.botiquin-lista label:hover { background: var(--fondo-2); }
.botiquin-lista input { position: absolute; opacity: 0; pointer-events: none; }
.botiquin-lista label span { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--linea-2); flex: none; transition: all .2s; }
.botiquin-lista input:checked + span { background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; border-color: var(--teal); }
.botiquin-lista input:focus-visible + span { box-shadow: 0 0 0 4px var(--celeste); }
.botiquin-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); }
.botiquin-pie .btn[hidden] { display: none; }

/* Imprimir solo la ficha */
@media print {
  body.imprimir-ficha * { visibility: hidden !important; }
  body.imprimir-ficha .ficha, body.imprimir-ficha .ficha * { visibility: visible !important; }
  body.imprimir-ficha .ficha { position: fixed; left: 0; top: 0; width: 9cm; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .inicio-atajos, .soat-grid { grid-template-columns: 1fr 1fr; }
  .emer-numeros { grid-template-columns: repeat(3, 1fr); }
  .flujo { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .flujo::before { display: none; }
}
@media (max-width: 1020px) {
  .esp-hero-grid, .esp-conectado, .esp-final, .triage, .clin-layout, .auxilios, .ficha-grid { grid-template-columns: minmax(0, 1fr); }
  .relacionadas, .clin-mapa, .aux-panel, .ficha-vista { position: static; }
  .clin-mapa { max-width: 420px; margin: 0 auto; width: 100%; }
  .pasos-transito, .despues-grid { grid-template-columns: 1fr 1fr; }
  .esp-urgencia-grid { grid-template-columns: minmax(0, 1fr); }
  .esp-urgencia-botones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .esp-hero, .hub-hero, .emer-hero { padding-top: 116px; }
  .esp-urgencia ul { grid-template-columns: minmax(0, 1fr); }
  .esp-urgencia-botones { grid-template-columns: minmax(0, 1fr); }
  .inicio-atajos, .soat-grid, .soat-info, .pasos-transito, .despues-grid, .clin-filtros, .botiquin-lista, .cals, .ciclo-datos { grid-template-columns: minmax(0, 1fr); }
  .emer-numeros { grid-template-columns: 1fr 1fr; }
  .emer-num:first-child { grid-column: 1 / -1; }
  .flujo { grid-template-columns: 1fr 1fr; }
  .ciclo-campos { grid-template-columns: 1fr 1fr; }
  .ciclo-campos .campo:first-child { grid-column: 1 / -1; }
  .chequeos-lista li { grid-template-columns: 36px 1fr; }
  .chequeos-lista li .btn { grid-column: 2; justify-self: start; }
  .chequeo-campos { grid-template-columns: minmax(0, 1fr); }
  .hub-buscar input { font-size: 15px; }
  .triage-panel, .aux-panel { padding: 20px 16px; }
  .ficha dl div { grid-template-columns: 100px 1fr; }
  .emb-semana b { font-size: 48px; }
}

/* ---------- Consulta de SOAT por placa ---------- */
.emer-atajos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.emer-atajos a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); font-size: 13.5px; font-weight: 700; }
.emer-atajos a svg { width: 17px; height: 17px; color: var(--azul); }
.emer-atajos a:hover { border-color: var(--azul); }
.soat-consulta { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border-radius: 32px; overflow: hidden; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.sc-izq { padding: 40px; background: linear-gradient(160deg, #fff, #f3f7fc); }
.sc-izq .titulo { margin-top: 10px; }
.placa-form { display: flex; gap: 10px; align-items: stretch; margin: 24px 0 8px; }
.placa { position: relative; flex: 1; display: flex; align-items: stretch; min-width: 0; border-radius: 14px; background: #fff; border: 3px solid #0b1f33; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px #c9d4e0, 0 10px 24px -14px rgba(11,31,51,.5); overflow: hidden; cursor: text; }
.placa-pais { display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); padding: 0 6px; background: #c8102e; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.placa input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; text-align: center; font: 800 clamp(26px, 4vw, 38px)/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .12em; padding: 14px 10px; color: #0b1f33; text-transform: uppercase; }
.placa input::placeholder { color: #c9d4e0; }
.placa:focus-within { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px #c9d4e0, 0 0 0 5px var(--celeste); }
.placa-form .btn { flex: none; }
.placa-error { color: var(--rojo); font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.placa-tipos { border: 0; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.placa-tipos legend { font-size: 12.5px; font-weight: 800; color: var(--gris); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .08em; }
.placa-tipos label { position: relative; }
.placa-tipos input { position: absolute; opacity: 0; pointer-events: none; }
.placa-tipos span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 99px; border: 1px solid var(--linea-2); background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.placa-tipos span svg { width: 17px; height: 17px; color: var(--azul); }
.placa-tipos input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.placa-tipos input:checked + span svg { color: #fff; }
.placa-tipos input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.sc-der { padding: 40px; display: grid; align-items: center; background: #fff; border-left: 1px solid var(--linea); min-height: 420px; }
.sc-vacio { text-align: center; color: var(--gris); }
.sc-vacio .ok { color: #1f9a52; } .sc-vacio .no { color: var(--rojo); }
.placa-demo { display: inline-flex; align-items: stretch; margin-bottom: 18px; border: 3px solid #0b1f33; border-radius: 12px; overflow: hidden; background: #fff; transform: rotate(-4deg); box-shadow: 0 20px 40px -20px rgba(11,31,51,.5); animation: flotar 6s ease-in-out infinite; }
.placa-demo span { writing-mode: vertical-rl; transform: rotate(180deg); background: #c8102e; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .2em; padding: 0 4px; display: grid; place-items: center; }
.placa-demo b { font-size: 40px; letter-spacing: .1em; padding: 10px 18px; color: #0b1f33; }
.placa-mini { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px 4px 0; border: 2px solid #0b1f33; border-radius: 8px; font-weight: 800; letter-spacing: .08em; font-size: 15px; background: #fff; color: #0b1f33; overflow: hidden; white-space: nowrap; }
.placa-mini i { font-style: normal; align-self: stretch; display: grid; place-items: center; background: #c8102e; color: #fff; font-size: 8px; letter-spacing: .1em; padding: 0 5px; margin: -4px 0; }
.placa-mini.grande { font-size: 30px; padding: 8px 18px 8px 0; border-width: 3px; margin: 0 auto; }
.placa-mini.grande i { font-size: 10px; padding: 0 7px; margin: -8px 0; }
.sc-cargando { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; color: var(--gris); font-weight: 700; }
.sc-escaner { width: 220px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--teal), transparent); animation: escanea 1.1s ease-in-out infinite alternate; }
@keyframes escanea { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.sc-res { display: grid; gap: 14px; animation: entra .4s ease both; }
.sc-estado { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc-estado > svg { width: 58px; height: 58px; padding: 13px; border-radius: 18px; color: #fff; flex: none; stroke-width: 2.6; }
.sc-estado small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.sc-estado b { font-size: 30px; letter-spacing: -.03em; line-height: 1.1; }
.sc-res.ok .sc-estado > svg { background: #1f9a52; } .sc-res.ok .sc-estado b { color: #1f9a52; }
.sc-res.pronto .sc-estado > svg { background: #d97706; } .sc-res.pronto .sc-estado b { color: #b45309; }
.sc-res.no .sc-estado > svg, .sc-res.nada .sc-estado > svg { background: var(--rojo); } .sc-res.no .sc-estado b, .sc-res.nada .sc-estado b { color: #b42318; }
.sc-res.oficial .sc-estado > svg { background: var(--azul); }
.sc-detalle { font-size: 16px; font-weight: 700; color: var(--tinta-2); }
.sc-barra { height: 10px; border-radius: 99px; background: var(--fondo-3); overflow: hidden; }
.sc-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1f9a52, #12b5a6); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.sc-res.pronto .sc-barra span { background: linear-gradient(90deg, #d97706, #e5484d); }
.sc-res dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-radius: 18px; background: var(--fondo-2); border: 1px solid var(--linea); }
.sc-res dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.sc-res dd { font-size: 15px; font-weight: 700; text-transform: none; }
.sc-nota { font-size: 13.5px; color: #b42318; font-weight: 600; }
.sc-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-fuente { font-size: 12px; color: var(--gris-claro); }
.sc-copiada { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--teal-osc); }
.sc-oficiales { display: grid; gap: 8px; }
.sc-oficiales a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; transition: border-color .2s, transform .2s; }
.sc-oficiales a:hover { border-color: var(--azul); transform: translateX(4px); }
.sc-oficiales b { font-size: 15px; }
.sc-oficiales small { grid-column: 1; font-size: 12.5px; color: var(--gris); }
.sc-oficiales svg { grid-row: 1 / 3; grid-column: 2; color: var(--azul); }
.soat-precios { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.soat-precio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 22px 14px; border-radius: 22px; background: #fff; border: 1.5px solid var(--linea); transition: border-color .2s, transform .2s, box-shadow .2s; }
.soat-precio.activo { border-color: var(--azul); transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(21, 94, 239, .7); }
.soat-precio .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--celeste); color: var(--azul); margin-bottom: 8px; }
.soat-precio b { font-size: 15px; }
.sp-desde { font-size: 12px; color: var(--gris); margin-top: 6px; }
.sp-monto { font-size: 38px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.sp-monto small { font-size: 16px; margin-right: 2px; }
.sp-ref { font-size: 11.5px; color: var(--gris); margin-bottom: 12px; }
.soat-precios-nota { text-align: center; font-size: 13px; color: var(--gris); margin: 16px auto 28px; max-width: 680px; }
.soat-mas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.soat-beneficios, .soat-clinicas { padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); display: grid; gap: 14px; }
.soat-beneficios h3, .soat-clinicas h3 { font-size: 18px; letter-spacing: -.02em; }
.soat-beneficios .lista-check { margin: 0; }
.soat-plus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; border-radius: 18px; background: #0a1c3a; color: #fff; }
.soat-plus > svg { color: #6ff0df; flex: none; }
.soat-plus div { flex: 1; min-width: 180px; }
.soat-plus b { display: block; font-size: 14.5px; }
.soat-plus span { font-size: 13px; color: #b3c3da; }
.soat-plus .btn-borde { background: #fff; }
#soat-clinicas { display: grid; gap: 8px; }
.sc-clinica { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); transition: border-color .2s; }
.sc-clinica:hover { border-color: var(--rojo); }
.sc-clinica .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #fdecec; color: var(--rojo); flex: none; }
.sc-clinica b { display: block; font-size: 14.5px; }
.sc-clinica small { font-size: 12.5px; color: var(--gris); }
.sc-clinica .pro-ejemplo { margin-left: auto; }
@media (max-width: 1100px) { .soat-precios { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1020px) {
  .soat-consulta, .soat-mas { grid-template-columns: minmax(0, 1fr); }
  .sc-der { border-left: 0; border-top: 1px solid var(--linea); min-height: 300px; }
}
@media (max-width: 680px) {
  .sc-izq, .sc-der { padding: 24px 18px; }
  .placa-form { flex-direction: column; }
  .soat-precios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .soat-precio { padding: 18px 10px; min-width: 0; }
  .soat-precio .btn { padding: 9px 12px; font-size: 13px; }
  .soat-precio.activo { transform: none; }
  .sc-res dl { grid-template-columns: minmax(0, 1fr); }
  .sc-estado b { font-size: 24px; }
  .placa-mini.grande { font-size: 24px; }
}

/* ---------- Aliados: validación de RUC ---------- */
.ruc-caja { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--fondo-2); border: 1px solid var(--linea); transition: border-color .2s, background .2s; }
.ruc-caja[data-estado="ok"] { border-color: #9fdcbc; background: #f1fbf5; }
.ruc-caja[data-estado="alerta"] { border-color: #f3d19a; background: #fffaf0; }
.ruc-caja[data-estado="no"] { border-color: #f6c9ca; background: #fff6f6; }
.ruc-fila { display: flex; gap: 8px; }
.ruc-fila input { flex: 1; min-width: 0; font-size: 18px !important; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.ruc-fila .btn { flex: none; }
.ruc-fila .btn[disabled] { opacity: .5; pointer-events: none; }
.ruc-ayuda { font-size: 12.5px; color: var(--gris); }
.ruc-resultado:empty { display: none; }
.ruc-res { display: flex; gap: 12px; align-items: flex-start; animation: entra .35s ease both; }
.ruc-res > svg { width: 36px; height: 36px; padding: 8px; border-radius: 11px; color: #fff; flex: none; stroke-width: 2.6; }
.ruc-res.ok > svg { background: #1f9a52; }
.ruc-res.alerta > svg { background: #d97706; }
.ruc-res.no > svg { background: var(--rojo); }
.ruc-res.info > svg { background: var(--azul); }
.ruc-res b { display: block; font-size: 15px; line-height: 1.3; }
.ruc-res p { font-size: 13.5px; color: var(--tinta-2); margin-top: 4px; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.ruc-res p svg { width: 15px; height: 15px; margin-top: 2px; color: var(--gris); }
.ruc-res small { display: block; font-size: 11.5px; color: var(--gris-claro); margin-top: 6px; }
.ruc-res.cargando { align-items: center; gap: 14px; color: var(--gris); font-weight: 700; font-size: 14px; }
.ruc-res.cargando .sc-escaner { width: 90px; }
.ruc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ruc-chip { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 4px 9px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); color: var(--tinta-2); }
.ruc-chip.si { background: #e5f6ec; border-color: #b5e3c8; color: #157a40; }
.ruc-chip.no { background: #fdecec; border-color: #f6c9ca; color: #b42318; }
.ruc-veredicto { font-weight: 600; }
@media (max-width: 480px) {
  .ruc-fila { flex-direction: column; }
}

/* ═════════════ 5 FUNCIONES WOW ═════════════ */
/* Mi Findley */
.mf-hero { position: relative; padding: 130px 0 30px; overflow: hidden; background: radial-gradient(800px 420px at 80% 0%, rgba(21, 94, 239, .13), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(18, 181, 166, .1), transparent 70%); }
.mf-hero .h1 { font-size: clamp(36px, 5vw, 62px); }
.mf-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.mf-botones [hidden] { display: none; }
.mf-seccion { padding-top: 30px; }
.mf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.mf-card { padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); display: grid; gap: 12px; scroll-margin-top: 96px; animation: entra .4s ease both; }
.mf-card.ancho { grid-column: span 2; }
.mf-card header { display: flex; align-items: center; gap: 10px; }
.mf-card header .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--celeste); color: var(--azul); }
.mf-card header .ico svg { width: 20px; height: 20px; }
.mf-card h3 { font-size: 17px; letter-spacing: -.02em; }
.mf-card .enlace { font-size: 13.5px; font-weight: 800; color: var(--azul); display: inline-flex; gap: 6px; align-items: center; }
.mf-card .enlace svg { width: 16px; height: 16px; }
.mf-vacio { font-size: 14px; color: var(--gris); }
.mf-mini { font-size: 12.5px; color: var(--gris); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mf-mini svg { width: 15px; height: 15px; color: var(--teal-osc); }
.mf-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mf-dato b { font-size: 34px; letter-spacing: -.04em; }
.mf-dato small { display: block; font-size: 12.5px; color: var(--gris); }
.mf-graf { width: 100%; height: 80px; }
.mf-graf polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mf-graf .g-s { stroke: var(--azul); fill: none; } .mf-graf circle.g-s { fill: #fff; stroke-width: 2.5; }
.mf-graf .g-d { stroke: var(--teal); }
.mf-lista { list-style: none; display: grid; gap: 8px; }
.mf-lista li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.mf-lista li b { display: block; font-size: 14px; line-height: 1.3; }
.mf-lista li small { color: var(--gris); font-size: 12px; }
.mf-fecha { width: 44px; height: 48px; border-radius: 12px; display: grid; place-content: center; text-align: center; background: var(--fondo-2); border: 1px solid var(--linea); font-size: 11px; font-weight: 700; color: var(--gris); text-transform: capitalize; line-height: 1.1; flex: none; }
.mf-fecha b { font-size: 18px; color: var(--azul); }
.mf-checks .ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); flex: none; }
.mf-checks .ico svg { width: 16px; height: 16px; }
.mf-soat { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--fondo-2); }
.mf-soat .placa-mini { margin: 0; }
.mf-soat b { display: block; font-size: 22px; letter-spacing: -.03em; }
.mf-soat small { font-size: 12px; color: var(--gris); }
.mf-soat.ok b { color: #1f9a52; } .mf-soat.pronto b { color: #b45309; } .mf-soat.no b { color: #b42318; }
.mf-barras { display: grid; gap: 10px; }
.mf-barras div { display: grid; grid-template-columns: 44px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }
.mf-barras i { height: 10px; border-radius: 99px; background: var(--fondo-3); overflow: hidden; }
.mf-barras i b { display: block; height: 100%; border-radius: inherit; background: var(--grad); }
.mf-barras small { color: var(--gris); text-align: right; }
.mf-animo { display: flex; justify-content: space-between; }
.mf-animo a { font-size: 32px; transition: transform .2s; }
.mf-animo a:hover { transform: scale(1.25) rotate(-6deg); }
.mf-pie { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding: 18px 20px; border-radius: 18px; background: var(--fondo-2); border: 1px solid var(--linea); }
.mf-pie p { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--gris); }
.mf-pie p svg { color: var(--teal-osc); flex: none; }
.btn-mi { text-decoration: none; }
[data-instalar][hidden], [data-instalada][hidden] { display: none !important; }

/* QR de emergencia */
.qr-caja:empty { display: none; }
.qr-ficha { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.mf-card .qr-ficha { padding: 0; border: 0; }
.qr-img { position: relative; padding: 8px; border-radius: 16px; background: #fff; border: 2px solid var(--linea); }
.qr-img svg { width: 100%; height: auto; display: block; }
.qr-img > span { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 10px; background: var(--rojo); color: #fff; display: grid; place-items: center; border: 3px solid #fff; }
.qr-img > span svg { width: 16px; height: 16px; }
.qr-texto b { display: block; font-size: 17px; }
.qr-texto > p { font-size: 13.5px; color: var(--gris); margin: 4px 0 12px; }
.qr-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-nota { display: flex; gap: 6px; align-items: flex-start; font-size: 12px !important; color: #6b4a14 !important; margin-top: 10px !important; }
.qr-nota svg { width: 15px; height: 15px; color: #c98114; flex: none; margin-top: 1px; }
.qr-vacio { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 20px; background: var(--fondo-2); border: 1px dashed var(--linea-2); }
.qr-vacio > svg { width: 44px; height: 44px; padding: 10px; border-radius: 13px; background: var(--rojo); color: #fff; flex: none; }
.qr-vacio b { display: block; }
.qr-vacio p { font-size: 13.5px; color: var(--gris); margin: 4px 0 10px; }

/* Página al escanear el QR */
.ficha-ver-seccion { padding: 110px 0 60px; background: linear-gradient(180deg, #fff1f1, #fff 40%); min-height: 70vh; }
.ficha-grande { max-width: 560px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff; border: 1px solid #f6d3d4; box-shadow: var(--sombra); }
.fg-cabeza { display: flex; align-items: center; gap: 14px; padding: 22px; background: linear-gradient(120deg, #e5484d, #b91c1c); color: #fff; }
.fg-cabeza > span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.2); flex: none; }
.fg-cabeza div:not(.fg-sangre) { flex: 1; min-width: 0; }
.fg-cabeza small { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.fg-cabeza h1 { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; word-break: break-word; }
.fg-sangre { text-align: center; padding: 8px 14px; border-radius: 16px; background: #fff; color: #b91c1c; }
.fg-sangre small { display: block; font-size: 10px; letter-spacing: .1em; }
.fg-sangre b { font-size: 30px; line-height: 1; }
.ficha-grande dl { padding: 8px 22px; }
.ficha-grande dl div { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.ficha-grande dt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.ficha-grande dd { font-size: 20px; font-weight: 700; word-break: break-word; }
.ficha-grande dl .alerta dd { color: #b42318; }
.fg-contacto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 22px 0; padding: 16px; border-radius: 18px; background: var(--fondo-2); }
.fg-contacto div { flex: 1; min-width: 150px; }
.fg-contacto small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.fg-contacto b { display: block; font-size: 18px; }
.fg-contacto span { font-size: 15px; color: var(--tinta-2); }
.fg-106 { display: flex !important; justify-content: center; margin: 16px 22px 0; }
.fg-nota { padding: 16px 22px 22px; font-size: 12.5px; color: var(--gris); }
.ficha-ver-vacio { max-width: 520px; margin: 0 auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.ficha-ver-vacio > svg { width: 64px; height: 64px; padding: 14px; border-radius: 20px; background: var(--rojo); color: #fff; }
.ficha-ver-vacio h1 { font-size: 30px; letter-spacing: -.03em; }
.ficha-ver-vacio p { color: var(--gris); }

/* SOS y cerca */
.sos-seccion { padding: 40px 0 10px; }
.sos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.sos-caja, .cerca-caja { display: grid; gap: 14px; align-content: start; padding: 26px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); }
.sos-caja { border-color: #f6c9ca; background: linear-gradient(160deg, #fff, #fff4f4); }
.sos-caja.mini, .cerca-caja.mini { padding: 0; border: 0; box-shadow: none; background: none; }
.sos-top, .cerca-top { display: flex; gap: 14px; align-items: center; }
.sos-top h3, .cerca-top h3 { font-size: 19px; letter-spacing: -.02em; }
.sos-top p, .cerca-top p { font-size: 14px; color: var(--gris); }
.mini .sos-top h3, .mini .cerca-top h3, .mini .sos-pulso, .mini .cerca-top .ico { display: none; }
.sos-pulso { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--rojo); color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .04em; flex: none; animation: emer-latido 1.6s infinite; }
.sos-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px; border: 0; border-radius: 20px; background: linear-gradient(135deg, #e5484d, #b91c1c); color: #fff; font: 800 17px "Plus Jakarta Sans", system-ui, sans-serif; cursor: pointer; box-shadow: 0 18px 36px -18px rgba(229, 72, 77, .9); transition: transform .15s; }
.sos-btn:hover { transform: translateY(-2px); }
.sos-btn:active { transform: scale(.98); }
.sos-btn svg { width: 22px; height: 22px; }
.sos-otros { display: flex; flex-wrap: wrap; gap: 8px; }
.sos-otros .btn-llamar { font-size: 13.5px; padding: 9px 13px; border: 0; cursor: pointer; font-family: inherit; }
.sos-estado { font-size: 13.5px; font-weight: 700; }
.sos-estado:empty { display: none; }
.sos-estado.buscando { color: var(--azul); } .sos-estado.ok { color: #1f9a52; } .sos-estado.mal { color: #b42318; }
.sos-nota { font-size: 12.5px; color: var(--gris); }
.cerca-top .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--celeste); color: var(--azul); flex: none; }
.cerca-caja .btn[disabled] { opacity: .6; pointer-events: none; }
.cerca-res { display: grid; gap: 8px; }
.cerca-res:empty { display: none; }
.cerca-mapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cerca-mapas a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 14px 8px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; transition: border-color .2s, transform .2s; }
.cerca-mapas a:hover { border-color: var(--azul); transform: translateY(-2px); }
.cerca-mapas a > svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--celeste); color: var(--azul); }
.cerca-mapas a.rojo > svg { background: #fdecec; color: var(--rojo); }
.cerca-mapas b { display: block; font-size: 14px; }
.cerca-mapas small { font-size: 11.5px; color: var(--gris); }
.cerca-sub { font-size: 13px; margin-top: 6px; }
.clin-cerca { margin: -10px 0 20px; }
.clin-km { color: var(--azul); }

@media (max-width: 1020px) {
  .mf-grid { grid-template-columns: 1fr 1fr; }
  .sos-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .mf-grid { grid-template-columns: minmax(0, 1fr); }
  .mf-card.ancho { grid-column: auto; }
  .qr-ficha { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .qr-img { width: 200px; }
  .qr-botones { justify-content: center; }
  .cerca-mapas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sos-caja, .cerca-caja { padding: 20px 16px; }
  .fg-cabeza h1 { font-size: 22px; }
  .ficha-grande dd { font-size: 18px; }
}

/* ═════════════ Panel parte 2: ciclo, pastillero, ánimo, alertas, informe ═════════════ */
.mf-card[hidden] { display: none; }
.ciclo-card header .ico { background: #fde2e4; color: #e5484d; }
.alertas-card header .ico { background: #fff1e6; color: #ea580c; }
#pastillero header .ico { background: #efebff; color: #6d4fe0; }
#animo header .ico { background: #e5f8f5; color: var(--teal-osc); }
.informe-card header .ico { background: var(--celeste); }

/* Mi ciclo */
.ciclo-inicio { display: grid; gap: 12px; }
.ciclo-inicio p { font-size: 14px; color: var(--gris); }
.ciclo-inicio .btn { justify-self: start; }
.ciclo-panel { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; }
.ciclo-anillo { position: relative; width: 220px; }
.ciclo-anillo svg { width: 100%; height: auto; display: block; }
.ciclo-hoy { filter: drop-shadow(0 3px 6px rgba(0,0,0,.25)); }
.ciclo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ciclo-centro small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.ciclo-centro b { font-size: 52px; line-height: 1; letter-spacing: -.04em; }
.ciclo-centro span { font-size: 13px; font-weight: 800; color: var(--tinta-2); max-width: 120px; line-height: 1.25; }
.ciclo-info { display: grid; gap: 12px; }
.ciclo-datos2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ciclo-datos2 div { padding: 12px; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--linea); }
.ciclo-datos2 small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ciclo-datos2 b { display: block; font-size: 16px; letter-spacing: -.01em; margin: 2px 0; }
.ciclo-datos2 span { font-size: 11.5px; color: var(--gris); }
.ciclo-consejo, .ciclo-alerta { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 10px 12px; border-radius: 12px; }
.ciclo-consejo { background: #fff8ec; color: #6b4a14; }
.ciclo-consejo svg { color: #d97706; flex: none; width: 18px; height: 18px; }
.ciclo-alerta { background: #fdecec; color: #7a1d20; }
.ciclo-alerta svg { color: var(--rojo); flex: none; width: 18px; height: 18px; }
.ciclo-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ciclo-otra { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--linea-2); font-size: 14px; font-weight: 700; cursor: pointer; background: #fff; overflow: hidden; }
.ciclo-otra svg { width: 16px; height: 16px; color: var(--azul); }
.ciclo-otra input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ciclo-sint { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.ciclo-sint > b, .ciclo-hist > b { font-size: 14px; }
.ciclo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ciclo-chips button { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--linea-2); background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.ciclo-chips button.activo { background: #fde2e4; border-color: #f59ea1; color: #b42318; }
.ciclo-hist { display: grid; gap: 8px; }
.ciclo-hist ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ciclo-hist li { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--linea); font-size: 13px; font-weight: 700; }
.ciclo-hist li small { color: var(--gris); font-weight: 600; }
.ciclo-hist button { width: 24px; height: 24px; border-radius: 8px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--gris-claro); }
.ciclo-hist button:hover { background: #fdecec; color: var(--rojo); }
.ciclo-hist button svg { width: 14px; height: 14px; }

/* Pastillero */
.pas-resumen { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pas-resumen b { font-size: 30px; letter-spacing: -.03em; }
.pas-resumen span { font-size: 13px; color: var(--gris); }
.pas-resumen .pas-ad { margin-left: auto; font-weight: 800; color: var(--teal-osc); }
.pas-hoy { list-style: none; display: grid; gap: 8px; }
.pas-hoy li { --c: var(--azul); display: grid; grid-template-columns: 74px 1fr 38px; gap: 10px; align-items: center; padding: 10px 10px 10px 14px; border-radius: 16px; border: 1px solid var(--linea); border-left: 5px solid var(--c); transition: all .2s; }
.pas-hora { font-size: 13.5px; font-weight: 800; color: var(--c); }
.pas-n b { display: block; font-size: 14.5px; }
.pas-n small { font-size: 12px; color: var(--gris); }
.pas-hoy button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--linea-2); background: #fff; display: grid; place-items: center; cursor: pointer; color: transparent; transition: all .2s; }
.pas-hoy button svg { width: 18px; height: 18px; stroke-width: 3; }
.pas-hoy li.hecha { background: #effaf6; border-color: #c8ece4; }
.pas-hoy li.hecha .pas-n b { text-decoration: line-through; color: var(--gris); }
.pas-hoy li.hecha button { background: var(--teal); border-color: var(--teal); color: #fff; }
.pas-hoy li.atrasada { background: #fff6f6; border-color: #f6c9ca; }
.pas-hoy li.atrasada small { color: #b42318; font-weight: 700; }
.pas-meds { display: flex; flex-wrap: wrap; gap: 6px; }
.pas-meds span { --c: var(--azul); display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: 99px; background: var(--fondo-2); border: 1px solid var(--linea); font-size: 12.5px; font-weight: 700; }
.pas-meds i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pas-meds button { width: 22px; height: 22px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--gris-claro); }
.pas-meds button:hover { background: #fdecec; color: var(--rojo); }
.pas-meds button svg { width: 12px; height: 12px; }
.pas-agregar { border-radius: 16px; border: 1px dashed var(--linea-2); padding: 0 14px; }
.pas-agregar summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 800; font-size: 14px; color: var(--azul); display: flex; gap: 6px; align-items: center; }
.pas-agregar summary::-webkit-details-marker { display: none; }
.pas-agregar summary svg { width: 18px; height: 18px; }
.pas-form { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 8px; align-items: end; padding-bottom: 14px; }
.pas-form .btn { height: 46px; }
.pas-pie { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Ánimo */
.animo-hoy { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.animo-hoy button { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; border: 1px solid transparent; background: none; cursor: pointer; transition: all .2s; }
.animo-hoy button span { font-size: 28px; line-height: 1; transition: transform .2s; }
.animo-hoy button small { font-size: 10px; font-weight: 700; color: var(--gris); }
.animo-hoy button:hover span { transform: scale(1.2); }
.animo-hoy button.activo { background: var(--celeste); border-color: var(--azul); }
.animo-mapa { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.animo-mapa i { aspect-ratio: 1; border-radius: 6px; background: var(--fondo-3); }
.animo-mapa i.hoy { outline: 2px solid var(--tinta); outline-offset: 1px; }
.animo-alerta { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: #f4f1ff; border: 1px solid #ddd5ff; }
.animo-alerta > svg { color: #6d4fe0; flex: none; }
.animo-alerta b { display: block; font-size: 14px; }
.animo-alerta p { font-size: 13px; color: var(--tinta-2); }

/* Alertas */
.alertas-lista { list-style: none; display: grid; gap: 8px; }
.alertas-lista li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff8f1; border: 1px solid #fbd9bd; animation: entra .35s ease both; }
.alertas-lista .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #ea580c; color: #fff; flex: none; }
.alertas-lista .ico svg { width: 19px; height: 19px; }
.alertas-lista b { display: block; font-size: 14.5px; }
.alertas-lista small { font-size: 12.5px; color: var(--gris); }
.alertas-config { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mf-vacio svg { width: 16px; height: 16px; color: var(--teal-osc); vertical-align: -3px; }

/* Informe para imprimir / PDF */
.informe { display: none; }
@media print {
  body.imprimir-informe > *:not(#informe) { display: none !important; }
  body.imprimir-informe #informe { display: block !important; font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: #0b1f33; padding: 0; }
  @page { margin: 16mm; }
}
.informe header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 3px solid #155eef; }
.informe header > div:first-child { display: flex; flex-direction: column; line-height: .85; font-weight: 800; font-size: 22px; }
.informe header i { font-style: normal; color: #12b5a6; padding-left: .55em; }
.informe header h1 { font-size: 20px; text-align: right; }
.informe header p { font-size: 11px; color: #5b6d80; text-align: right; }
.informe h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: #155eef; margin: 18px 0 6px; }
.informe table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.informe th, .informe td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e3ebf3; vertical-align: top; }
.informe th { width: 32%; color: #5b6d80; font-weight: 700; }
.informe p { font-size: 12.5px; margin-top: 6px; }
.informe-lineas span { display: block; height: 26px; border-bottom: 1px solid #c9d4e0; }
.informe footer { margin-top: 22px; padding-top: 10px; border-top: 1px solid #e3ebf3; font-size: 10.5px; color: #5b6d80; }

@media (max-width: 1020px) {
  .ciclo-panel { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ciclo-info { width: 100%; }
  .pas-form { grid-template-columns: 1fr 1fr; }
  .pas-form .campo:first-child { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .ciclo-datos2 { grid-template-columns: minmax(0, 1fr); }
  .ciclo-anillo { width: 200px; }
  .pas-hoy li { grid-template-columns: 64px 1fr 38px; }
  .pas-form .btn { grid-column: 1 / -1; }
}

/* Avisos push */
.push-caja { display: grid; gap: 8px; }
.push-info { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--fondo-2); border: 1px solid var(--linea); }
.push-info > svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--celeste); color: var(--azul); flex: none; }
.push-info.ok { background: #effaf6; border-color: #c8ece4; }
.push-info.ok > svg { background: var(--teal); color: #fff; }
.push-info b { display: block; font-size: 14.5px; }
.push-info p { font-size: 13px; color: var(--gris); margin: 2px 0 8px; }
.push-info .btn[disabled] { opacity: .6; pointer-events: none; }
.push-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.push-msg { font-size: 13px; font-weight: 700; color: var(--azul); }

/* ═════════════ Enfermería a domicilio ═════════════ */
.enf-hero { position: relative; padding: 140px 0 70px; overflow: hidden; background: radial-gradient(800px 480px at 85% 20%, rgba(14, 158, 145, .14), transparent 70%), radial-gradient(500px 400px at 5% 95%, rgba(21, 94, 239, .08), transparent 70%); }
.enf-hero-grid, .ss-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.enf-hero .h1, .ss-hero .h1 { font-size: clamp(40px, 5.6vw, 70px); }
.bitacora { background: #fff; border: 1px solid var(--linea); border-radius: 28px; box-shadow: var(--sombra); padding: 22px; transform: rotate(1.5deg); }
.bit-cabeza { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--linea); margin-bottom: 10px; }
.bit-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--menta); color: var(--teal-osc); }
.bit-cabeza b { display: block; font-size: 15.5px; }
.bit-cabeza small { font-size: 12px; color: var(--gris); }
.bit-lista { list-style: none; display: grid; gap: 4px; }
.bit-lista li { display: grid; grid-template-columns: 48px 1fr 26px; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 12px; font-size: 14px; animation: entra .4s ease both; }
.bit-lista li:nth-child(2) { animation-delay: .1s; } .bit-lista li:nth-child(3) { animation-delay: .2s; } .bit-lista li:nth-child(4) { animation-delay: .3s; } .bit-lista li:nth-child(5) { animation-delay: .4s; } .bit-lista li:nth-child(6) { animation-delay: .5s; }
.bit-lista li:nth-child(odd) { background: var(--fondo-2); }
.bit-lista span { font-size: 12.5px; font-weight: 800; color: var(--teal-osc); }
.bit-lista i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.bit-lista i.ok { background: var(--teal); color: #fff; }
.bit-lista i.corazon { background: #fde2e4; color: var(--rojo); }
.bit-nota { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #fff8ec; font-size: 13.5px; color: #6b4a14; font-style: italic; }
.enf-servicios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.enf-srv { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s; }
.enf-srv:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); }
.enf-srv .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--menta); color: var(--teal-osc); margin-bottom: 6px; }
.enf-srv b { font-size: 16.5px; }
.enf-srv p { font-size: 13.5px; color: var(--gris); flex: 1; }
.enf-srv small { font-size: 11.5px; font-weight: 800; color: var(--teal-osc); text-transform: uppercase; letter-spacing: .06em; }
.niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.nivel-enf { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); }
.nivel-enf.destacado { border-color: var(--teal); box-shadow: 0 24px 50px -30px rgba(14, 158, 145, .6); }
.nv-tag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 99px; background: var(--menta); color: var(--teal-osc); }
.nivel-enf h3 { font-size: 20px; letter-spacing: -.02em; }
.nivel-enf .lista-check { margin: 4px 0; flex: 1; }
.nivel-enf > p { font-size: 13px; color: var(--gris); }
.cotizador { display: grid; grid-template-columns: 1.3fr .9fr; gap: 20px; align-items: start; }
.cot-form { display: grid; gap: 14px; }
.cot-paso { border: 0; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); display: grid; gap: 12px; }
.cot-paso legend { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; float: left; width: 100%; margin-bottom: 4px; }
.cot-paso legend b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: 14px; }
.cot-paso > * { clear: both; }
.cot-opciones, .cot-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cot-opciones label, .cot-chips label { position: relative; }
.cot-opciones input, .cot-chips input { position: absolute; opacity: 0; pointer-events: none; }
.cot-opciones span, .cot-chips span { display: inline-flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--linea-2); background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.cot-opciones span small { font-size: 11.5px; font-weight: 600; color: var(--gris); }
.cot-opciones input:checked + span, .cot-chips input:checked + span { border-color: var(--teal); background: #e5f8f5; color: var(--teal-osc); }
.cot-opciones input:focus-visible + span, .cot-chips input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.cot-modal { display: grid; grid-template-columns: repeat(4, 1fr); }
.cot-modal span { height: 100%; }
.cot-paso .campo[hidden], .cot-paso .fila-2[hidden] { display: none; }
.cot-res { position: sticky; top: 96px; display: grid; gap: 12px; padding: 26px; border-radius: 28px; background: #0a1c3a; color: #fff; box-shadow: var(--sombra); isolation: isolate; overflow: hidden; }
.cot-res::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(400px 300px at 100% 0%, rgba(18,181,166,.45), transparent 70%), radial-gradient(400px 300px at 0% 100%, rgba(21,94,239,.45), transparent 70%); }
.cot-res > small { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8fe9de; }
.cot-res h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
.cot-res > p { font-size: 14px; color: #c9d6e8; }
.cot-precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.cot-precio span { font-size: 14px; color: #b3c3da; }
.cot-precio b { font-size: 46px; letter-spacing: -.04em; line-height: 1; }
.cot-precio b small { font-size: 20px; margin-right: 2px; }
.cot-mes { font-size: 13px !important; }
.cot-consejos { list-style: none; display: grid; gap: 6px; }
.cot-consejos li { display: flex; gap: 8px; font-size: 13px; color: #dbe5f3; }
.cot-consejos svg { width: 16px; height: 16px; color: #ffd27a; flex: none; margin-top: 2px; }
.cot-res .btn-azul { background: #fff; color: var(--azul-osc); }
.cot-nota { font-size: 11.5px !important; color: #9fb2cc !important; }
.tips-grid { grid-template-columns: repeat(3, 1fr); }

/* ═════════════ Salud sexual ═════════════ */
.ss-hero { position: relative; padding: 140px 0 70px; overflow: hidden; background: radial-gradient(800px 480px at 85% 20%, rgba(219, 39, 119, .1), transparent 70%), radial-gradient(500px 400px at 5% 95%, rgba(109, 79, 224, .08), transparent 70%); }
.ss-hero .h1 em { background: linear-gradient(120deg, #db2777, #6d4fe0); -webkit-background-clip: text; background-clip: text; }
.ss-tarjetas { position: relative; height: 360px; display: grid; place-items: center; }
.ss-escudo { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #db2777, #6d4fe0); color: #fff; box-shadow: 0 30px 60px -24px rgba(219, 39, 119, .6); animation: orbe-respira 6s ease-in-out infinite; }
.ss-escudo svg { width: 64px; height: 64px; }
.ss-burbuja { position: absolute; padding: 10px 16px; border-radius: 18px 18px 18px 4px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); font-size: 14px; font-weight: 700; animation: flotar 6s ease-in-out infinite; }
.b1 { top: 6%; left: 2%; } .b2 { top: 18%; right: 0; animation-delay: -2s; border-radius: 18px 18px 4px 18px; } .b3 { bottom: 16%; left: 6%; animation-delay: -4s; } .b4 { bottom: 4%; right: 6%; animation-delay: -1s; border-radius: 18px 18px 4px 18px; }
.pep { background: linear-gradient(90deg, #fff1f1, #fff8f8); border-top: 1px solid #f6d3d4; border-bottom: 1px solid #f6d3d4; }
.pep-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.pep-reloj { width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--rojo); color: #fff; animation: emer-latido 1.8s infinite; }
.pep-reloj b { font-size: 32px; line-height: 1; }
.pep-reloj small { font-size: 11px; font-weight: 800; }
.pep-grid > div > b { display: block; font-size: 16.5px; color: #5e1215; margin-bottom: 4px; }
.pep-grid p { font-size: 14px; color: #6b2224; }
.pep-botones { display: grid; gap: 8px; }
.its-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: start; }
.its { --c: var(--azul); display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); border-top: 4px solid var(--c); text-align: left; font: inherit; cursor: pointer; transition: box-shadow .2s; }
.its:hover { box-shadow: var(--sombra-suave); }
.its-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.its-top b { font-size: 18px; }
.its-cura { font-style: normal; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); white-space: nowrap; }
.its-det { display: none; gap: 10px; }
.its[aria-expanded="true"] .its-det { display: grid; animation: entra .3s ease both; }
.its-det span { font-size: 13.5px; color: var(--tinta-2); }
.its-det small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.its-mas { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 800; color: var(--c); }
.its-mas svg { width: 15px; height: 15px; transition: transform .2s; }
.its[aria-expanded="true"] .its-mas svg { transform: rotate(45deg); }
.its-final { display: grid; gap: 12px; text-align: left; }
.its-res-t { font-size: 18px; display: block; }
.its-alerta { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: #fdecec; border: 1px solid #f6c9ca; color: #5e1215; }
.its-alerta.amarillo { background: #fff8ec; border-color: #f7dfbd; color: #4d330a; }
.its-alerta > svg { flex: none; color: var(--rojo); }
.its-alerta.amarillo > svg { color: #d97706; }
.its-alerta b { display: block; }
.its-alerta p { font-size: 13.5px; margin: 4px 0 8px; }
.its-pruebas { display: flex; flex-wrap: wrap; gap: 6px; }
.its-pruebas span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: #f4f1ff; color: #4c35b5; font-size: 13px; font-weight: 700; }
.its-pruebas svg { width: 15px; height: 15px; }
.its-emb { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 12px; border-radius: 14px; background: #fdf2f8; }
.its-emb svg { color: #db2777; flex: none; }
.prev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prev { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.prev .ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #fdf2f8; color: #db2777; margin-bottom: 12px; }
.prev b { display: block; font-size: 17px; margin-bottom: 4px; }
.prev p { font-size: 14px; color: var(--gris); }
.paquetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 960px; margin: 0 auto; align-items: stretch; }
.paquete { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); }
.paquete.destacado { border-color: #6d4fe0; box-shadow: 0 24px 50px -30px rgba(109, 79, 224, .7); }
.paq-tag { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: #6d4fe0; color: #fff; }
.paquete h3 { font-size: 21px; }
.paquete > p { font-size: 14px; color: var(--gris); }
.paquete .lista-check { margin: 8px 0 14px; flex: 1; }
.paquete .btn { align-self: flex-start; }
.paquetes-nota { display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; max-width: 760px; margin: 22px auto 0; font-size: 13.5px; color: var(--gris); }
.paquetes-nota svg { color: var(--teal-osc); flex: none; }
.mitos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mito { position: relative; min-height: 170px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; font: inherit; text-align: left; }
.mito-f, .mito-v { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; padding: 20px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1); font-size: 15px; font-weight: 700; line-height: 1.35; }
.mito-f { background: #fff; border: 1px solid var(--linea); }
.mito-v { background: linear-gradient(135deg, #6d4fe0, #db2777); color: #fff; transform: rotateY(180deg); font-size: 14px; font-weight: 600; }
.mito-f small, .mito-v small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.mito[aria-pressed="true"] .mito-f { transform: rotateY(-180deg); }
.mito[aria-pressed="true"] .mito-v { transform: rotateY(0); }

@media (max-width: 1100px) {
  .enf-servicios, .its-grid, .mitos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1020px) {
  .enf-hero-grid, .ss-hero-grid, .cotizador, .niveles { grid-template-columns: minmax(0, 1fr); }
  .cot-res { position: static; }
  .pep-grid { grid-template-columns: auto 1fr; }
  .pep-botones { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .prev-grid, .paquetes, .tips-grid { grid-template-columns: 1fr 1fr; }
  .bitacora { transform: none; }
}
@media (max-width: 680px) {
  .enf-hero, .ss-hero { padding-top: 116px; }
  .enf-servicios, .its-grid, .mitos, .prev-grid, .paquetes, .tips-grid { grid-template-columns: minmax(0, 1fr); }
  .cot-modal { grid-template-columns: 1fr 1fr; }
  .cot-paso { padding: 18px 14px; }
  .ss-tarjetas { height: 280px; }
  .ss-burbuja { font-size: 12.5px; padding: 8px 12px; }
  .pep-grid { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .pep-botones { grid-template-columns: minmax(0, 1fr); }
  .mito { min-height: 190px; }
}

/* ═════════════ Findley en Casa · medicina a domicilio ═════════════ */
.dom-hero { position: relative; padding: 140px 0 70px; overflow: hidden; background: radial-gradient(800px 480px at 85% 20%, rgba(21, 94, 239, .14), transparent 70%), radial-gradient(500px 400px at 5% 95%, rgba(14, 158, 145, .1), transparent 70%); }
.dom-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.dom-hero .h1 { font-size: clamp(42px, 6vw, 76px); }
.dom-vivo { width: 9px; height: 9px; border-radius: 50%; background: #1f9a52; animation: latido 1.6s infinite; }
.dom-urg { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #7a1d20; }
.dom-urg svg { color: var(--rojo); flex: none; }
.dom-urg a { font-weight: 800; text-decoration: underline; }
.dom-reloj { position: relative; height: 380px; display: grid; place-items: center; }
.dom-esfera { position: relative; width: 250px; height: 250px; border-radius: 50%; background: conic-gradient(from 0deg, #155eef, #12b5a6, #155eef); padding: 14px; box-shadow: 0 40px 80px -30px rgba(21, 94, 239, .6); animation: orbe-gira 24s linear infinite; }
.dom-esfera::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.dom-24 { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-size: 76px; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--azul); animation: orbe-gira 24s linear infinite reverse; }
.dom-24 small { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.dom-aguja { position: absolute; left: 50%; top: 22px; width: 6px; height: 22px; margin-left: -3px; border-radius: 99px; background: var(--rojo); }
.dom-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); font-size: 13.5px; font-weight: 700; animation: flotar 6s ease-in-out infinite; }
.dom-chip svg { width: 18px; height: 18px; color: var(--azul); }
.dom-chip.c1 { top: 4%; left: 0; } .dom-chip.c2 { top: 16%; right: 0; animation-delay: -2s; } .dom-chip.c3 { bottom: 12%; left: 4%; animation-delay: -4s; } .dom-chip.c4 { bottom: 4%; right: 8%; animation-delay: -1s; }
.dom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dom-srv { --c: var(--azul); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); transition: transform .25s, box-shadow .25s, border-color .25s; }
.dom-srv:hover { transform: translateY(-4px); box-shadow: var(--sombra-suave); border-color: var(--c); }
.dom-srv .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--c); color: #fff; margin-bottom: 6px; }
.dom-srv b { font-size: 16.5px; }
.dom-srv p { font-size: 13.5px; color: var(--gris); flex: 1; }
.dom-precio { font-size: 13px; color: var(--gris); }
.dom-precio b { font-size: 17px; color: var(--c); }
.dom-24h { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 99px; background: #e5f6ec; color: #157a40; }
.dom-nota { text-align: center; font-size: 13px; color: var(--gris); margin-top: 18px; }
.dom-pedido { display: grid; grid-template-columns: 1.3fr .9fr; gap: 20px; align-items: start; }
.dom-form { display: grid; gap: 14px; }
.dom-paso-t { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.dom-paso-t b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: #fff; font-size: 14px; }
.dom-select { width: 100%; border: 1.5px solid var(--linea-2); border-radius: 14px; padding: 14px 15px; font-size: 16px; font-weight: 700; background: #fff; }
.dom-cuando { grid-template-columns: repeat(3, 1fr); }
.dom-alerta { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: #fdecec; border: 1px solid #f6c9ca; color: #5e1215; }
.dom-alerta[hidden] { display: none; }
.dom-alerta > svg { color: var(--rojo); flex: none; }
.dom-alerta b { display: block; }
.dom-alerta p { font-size: 13.5px; margin: 2px 0 8px; }
.dom-res h3 { display: flex; align-items: center; gap: 10px; }
.dom-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.dom-ico svg { width: 20px; height: 20px; }
.dom-resumen { list-style: none; display: grid; gap: 6px; }
.dom-resumen li { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #dbe5f3; }
.dom-resumen svg { width: 16px; height: 16px; color: #8fe9de; flex: none; }
.dom-res .cot-precio b { font-size: 38px; }
.dom-res .btn-rojo { color: #fff; }
.dom-flujo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dom-flujo > div { padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.dom-flujo .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--celeste); color: var(--azul); margin-bottom: 10px; }
.dom-flujo b { display: block; font-size: 16px; }
.dom-flujo p { font-size: 13.5px; color: var(--gris); }
@media (max-width: 1020px) {
  .dom-hero-grid, .dom-pedido { grid-template-columns: minmax(0, 1fr); }
  .dom-reloj { height: 320px; }
}
@media (max-width: 680px) {
  .dom-hero { padding-top: 116px; }
  .dom-esfera { width: 200px; height: 200px; }
  .dom-24 { font-size: 60px; }
  .dom-chip { font-size: 12px; padding: 8px 11px; }
  .dom-cuando { grid-template-columns: minmax(0, 1fr); }
  .dom-flujo { grid-template-columns: minmax(0, 1fr); }
}

/* ═════════════ Hormonas, anabólicos e inyectables ═════════════ */
.hor-hero { position: relative; padding: 140px 0 70px; overflow: hidden; background: radial-gradient(800px 480px at 85% 20%, rgba(124, 58, 237, .13), transparent 70%), radial-gradient(500px 400px at 5% 95%, rgba(229, 72, 77, .07), transparent 70%); }
.hor-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }
.hor-hero .h1 { font-size: clamp(36px, 4.8vw, 60px); }
.hor-hero .h1 em { background: linear-gradient(120deg, #7c3aed, #155eef); -webkit-background-clip: text; background-clip: text; }
.hor-panel { display: grid; gap: 14px; padding: 26px; border-radius: 28px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.hor-fila { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; font-size: 14px; font-weight: 700; }
.hor-fila i { height: 12px; border-radius: 99px; background: var(--fondo-3); position: relative; overflow: hidden; }
.hor-fila i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--c); border-radius: inherit; animation: hor-barra 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hor-barra { from { width: 0; } }
.hor-panel p { font-size: 12px; color: var(--gris); text-align: right; }
.hor-riesgos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hr { padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); }
.hr > svg { width: 42px; height: 42px; padding: 10px; border-radius: 13px; background: #fdecec; color: var(--rojo); margin-bottom: 10px; }
.hr b { display: block; font-size: 16px; margin-bottom: 4px; }
.hr p { font-size: 13.5px; color: var(--gris); }
.hor-claro { display: flex; gap: 14px; align-items: flex-start; max-width: 900px; margin: 26px auto 0; padding: 20px 22px; border-radius: 22px; background: #f4f1ff; border: 1px solid #ddd5ff; }
.hor-claro > svg { width: 44px; height: 44px; padding: 10px; border-radius: 13px; background: #7c3aed; color: #fff; flex: none; }
.hor-claro b { display: block; font-size: 16px; }
.hor-claro p { font-size: 14px; color: var(--tinta-2); margin: 4px 0 10px; }
.hor-opc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hor-opc label { position: relative; }
.hor-opc input { position: absolute; opacity: 0; pointer-events: none; }
.hor-opc span { display: flex; align-items: center; min-height: 54px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--linea-2); background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.hor-opc input:checked + span { border-color: #7c3aed; background: #f4f1ff; color: #4c35b5; }
.hor-opc input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.hor-res { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linea); }
.hor-t { font-size: 15px; }
.hor-meds { display: flex; flex-wrap: wrap; gap: 6px; }
.hor-meds a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: var(--celeste); color: var(--azul-osc); font-size: 13px; font-weight: 700; }
.hor-meds svg { width: 14px; height: 14px; }
.hor-notas li { color: var(--tinta-2) !important; }
.hor-sino { grid-template-columns: 1fr 1fr; }
.hor-sino button { text-align: center; font-size: 16px; font-weight: 800; }
.iny-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.iny { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.iny h3 { font-size: 17px; letter-spacing: -.02em; }
.iny > p { font-size: 13.5px; color: var(--gris); }
.iny ul { padding-left: 18px; font-size: 13px; color: var(--tinta-2); display: grid; gap: 4px; flex: 1; }
.iny .enlace { font-size: 13.5px; font-weight: 800; color: var(--azul); display: inline-flex; gap: 6px; align-items: center; }
.iny .enlace svg { width: 15px; height: 15px; }
.iny-tag { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 99px; }
.iny-tag.si { background: #e5f6ec; color: #157a40; }
.iny-tag.ojo { background: #fff4e0; color: #b45309; }
.iny-tag.no { background: #fdecec; color: #b42318; }
.esp-urgencia-caja { max-width: 900px; margin: 0 auto; padding: 24px; border-radius: 24px; background: #fff4f4; border: 1px solid #f6c9ca; display: grid; gap: 12px; }
.esp-urgencia-caja > b { display: flex; gap: 8px; align-items: center; color: #5e1215; font-size: 16px; }
.esp-urgencia-caja > b svg { color: var(--rojo); flex: none; }
.esp-urgencia-caja ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding-left: 18px; color: #6b2224; font-size: 14.5px; }
@media (max-width: 1100px) { .hor-riesgos, .iny-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1020px) { .hor-hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .hor-hero { padding-top: 116px; }
  .hor-riesgos, .iny-grid, .hor-opc, .esp-urgencia-caja ul { grid-template-columns: minmax(0, 1fr); }
  .hor-fila { grid-template-columns: 100px 1fr; }
}

.hor-claro > div { min-width: 0; flex: 1; }
@media (max-width: 680px) { .hor-claro { flex-direction: column; } }
.hor-claro .btn { white-space: normal; text-align: left; max-width: 100%; }
.esp-urgencia-caja { grid-template-columns: minmax(0, 1fr); }
.esp-urgencia-caja .btn-llamar { white-space: normal; }

/* ═════════════ Cirugía plástica y estética ═════════════ */
.est-hero { position: relative; padding: 140px 0 70px; overflow: hidden; background: radial-gradient(800px 480px at 85% 20%, rgba(219, 39, 119, .12), transparent 70%), radial-gradient(500px 400px at 5% 95%, rgba(124, 58, 237, .08), transparent 70%); }
.est-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: center; }
.est-hero .h1 { font-size: clamp(38px, 5.4vw, 68px); }
.est-hero .h1 em { background: linear-gradient(120deg, #db2777, #7c3aed); -webkit-background-clip: text; background-clip: text; }
.est-numeros { display: grid; gap: 12px; }
.est-numeros div { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); animation: flotar 7s ease-in-out infinite; }
.est-numeros div:nth-child(2) { animation-delay: -2s; margin-left: 30px; } .est-numeros div:nth-child(3) { animation-delay: -4s; }
.est-numeros b { font-size: 46px; letter-spacing: -.05em; line-height: 1; background: linear-gradient(135deg, #db2777, #7c3aed); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; min-width: 64px; }
.est-numeros span { font-size: 14.5px; font-weight: 700; color: var(--tinta-2); }
.est-zonas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.est-zonas button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 99px; border: 1px solid var(--linea-2); background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; }
.est-zonas button svg { width: 17px; height: 17px; color: #db2777; }
.est-zonas button small { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--fondo-3); color: var(--gris); }
.est-zonas button.activo { background: linear-gradient(135deg, #db2777, #7c3aed); border-color: transparent; color: #fff; }
.est-zonas button.activo svg { color: #fff; }
.est-zonas button.activo small { background: rgba(255,255,255,.25); color: #fff; }
.est-explorador { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
.est-lista { display: grid; gap: 8px; }
.est-lista button { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; text-align: left; cursor: pointer; transition: all .15s; }
.est-lista button b { font-size: 15px; }
.est-lista button small { font-size: 12px; color: var(--gris); }
.est-lista button:hover { border-color: #db2777; }
.est-lista button.activo { border-color: #db2777; background: #fdf2f8; box-shadow: 0 10px 24px -16px #db2777; }
.est-detalle { padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra-suave); display: grid; gap: 16px; scroll-margin-top: 96px; }
.est-detalle.cambia { animation: entra .35s ease both; }
.ed-cabeza small { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #db2777; }
.ed-cabeza h3 { font-size: 26px; letter-spacing: -.03em; }
.ed-cabeza p { color: var(--gris); }
.ed-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ed-datos div { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--linea); }
.ed-datos svg { width: 20px; height: 20px; color: #db2777; flex: none; margin-top: 2px; }
.ed-datos small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ed-datos span { font-size: 13.5px; font-weight: 600; }
.ed-riesgo { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fff8ec; border: 1px solid #f7dfbd; font-size: 13.5px; color: #4d330a; }
.ed-riesgo svg { color: #d97706; flex: none; }
.ed-recup { padding: 18px; border-radius: 18px; background: linear-gradient(160deg, #fdf2f8, #f4f1ff); display: grid; gap: 10px; }
.ed-recup-cab { display: flex; justify-content: space-between; align-items: center; }
.ed-recup-cab span { font-size: 13px; font-weight: 800; color: #fff; background: #7c3aed; padding: 4px 12px; border-radius: 99px; }
.ed-recup input[type=range] { --avance: 0%; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #db2777 var(--avance), #e9e3f7 var(--avance)); outline: none; cursor: pointer; }
.ed-recup input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid #db2777; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.ed-recup input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid #db2777; }
.ed-hitos { position: relative; height: 10px; margin: -4px 13px 0; }
.ed-hito { position: absolute; top: 0; transform: translateX(-50%); }
.ed-hito i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #d8cdee; border: 2px solid #fff; }
.ed-hito.pasado i { background: #db2777; }
.ed-ahora b { display: block; font-size: 16px; }
.ed-ahora small { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }
.ed-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.semaforo { display: inline-flex; gap: 8px; padding: 8px 12px; border-radius: 99px; background: #0b1f33; margin-bottom: 10px; }
.semaforo i { width: 20px; height: 20px; border-radius: 50%; background: #2a3f56; }
.semaforo i.on.r { background: #e5484d; box-shadow: 0 0 12px #e5484d; } .semaforo i.on.a { background: #f59e0b; box-shadow: 0 0 12px #f59e0b; } .semaforo i.on.v { background: #22c55e; box-shadow: 0 0 12px #22c55e; }
.est-notas li { color: var(--tinta-2) !important; }
.est-seguro { grid-template-columns: minmax(0, 1fr); }
.est-seguro b { color: var(--tinta); }
.est-pres { grid-template-columns: minmax(0, 1fr); }
.est-cons { grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
@media (max-width: 1020px) {
  .est-hero-grid, .est-explorador { grid-template-columns: minmax(0, 1fr); }
  .est-lista { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .est-numeros { grid-template-columns: repeat(3, 1fr); }
  .est-numeros div { flex-direction: column; text-align: center; margin-left: 0 !important; }
  .est-cons { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .est-hero { padding-top: 116px; }
  .est-numeros b { font-size: 34px; min-width: 0; }
  .est-numeros span { font-size: 12px; }
  .est-numeros div { padding: 14px 8px; }
  .est-detalle { padding: 20px 16px; }
  .ed-cabeza h3 { font-size: 22px; }
  .est-cons { grid-template-columns: minmax(0, 1fr); }
}

/* Páginas legales */
.legal-portada { padding-bottom: 30px; }
.legal-fecha { margin-top: 14px; font-size: 13px; color: var(--gris); font-weight: 600; }
.legal { padding-top: 30px; }
.legal-caja { display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: start; }
.legal-indice { position: sticky; top: 96px; display: grid; gap: 2px; padding: 14px; border-radius: 18px; background: var(--fondo-2); border: 1px solid var(--linea); }
.legal-indice a { padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.legal-indice a:hover { background: #fff; color: var(--azul); }
.legal-texto { max-width: 760px; }
.legal-texto h2 { font-size: 21px; letter-spacing: -.02em; margin: 30px 0 10px; scroll-margin-top: 96px; }
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto p, .legal-texto li { font-size: 15.5px; color: var(--tinta-2); line-height: 1.7; }
.legal-texto ul:not(.lista-check) { padding-left: 20px; display: grid; gap: 6px; margin: 8px 0; }
.legal-tabla { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 14px; }
.legal-tabla th, .legal-tabla td { text-align: left; padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.legal-tabla th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
@media (max-width: 900px) {
  .legal-caja { grid-template-columns: minmax(0, 1fr); }
  .legal-indice { position: static; grid-template-columns: 1fr 1fr; }
  .legal-tabla, .legal-tabla tbody, .legal-tabla tr, .legal-tabla td, .legal-tabla th { display: block; }
  .legal-tabla tr { padding: 10px 0; border-bottom: 1px solid var(--linea); }
  .legal-tabla th, .legal-tabla td { border: 0; padding: 3px 0; }
  .legal-tabla tr:first-child { display: none; }
}

/* =====================================================================
   Historias de salud (assets/historias.js) · como las de Instagram
   ===================================================================== */
.historias { margin: 0 0 26px; }
.historias:empty { display: none; }
.hs-fila { display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.hs-fila::-webkit-scrollbar { display: none; }
.hs-circulo { flex: none; display: grid; justify-items: center; gap: 7px; border: 0; background: none; cursor: pointer; scroll-snap-align: start; width: 76px; padding: 0; font: inherit; animation: hsEntra .45s ease both; animation-delay: var(--d); }
@keyframes hsEntra { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.hs-anillo { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--c), #12b5a6, #155eef, var(--c)); transition: transform .25s; }
.hs-circulo:not(.visto) .hs-anillo { animation: hsLatido 2.6s ease-in-out infinite; }
@keyframes hsLatido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 0%, transparent); } }
.hs-circulo:hover .hs-anillo { transform: scale(1.06); }
.hs-circulo.visto .hs-anillo { background: #cfd8e3; }
.hs-anillo > .hs-ico { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.hs-circulo.propio .hs-anillo > .hs-ico { background: linear-gradient(150deg, #155eef, #12b5a6); color: #fff; }
.hs-ico svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hs-circulo small { font-size: 12.5px; font-weight: 700; color: var(--tinta); max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-circulo.visto small { color: var(--gris); font-weight: 600; }
.hs-circulo:focus-visible { outline: none; }
.hs-circulo:focus-visible .hs-anillo { outline: 3px solid var(--azul); outline-offset: 3px; }

html.hs-bloqueo, html.hs-bloqueo body { overflow: hidden; }
.hs-visor { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 24px; opacity: 0; transition: opacity .25s; }
.hs-visor[hidden] { display: none; }
.hs-visor.abierto { opacity: 1; }
.hs-velo { position: absolute; inset: 0; background: rgba(5, 12, 24, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hs-tarjeta { position: relative; z-index: 1; width: min(420px, 100vw); height: min(92vh, 760px); max-height: 100dvh; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; color: var(--tinta); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8); transform: scale(.94); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .4s; }
.hs-visor.abierto .hs-tarjeta { transform: none; }
.hs-tarjeta.oscuro { color: #fff; }
.hs-tarjeta.gira-sig { animation: hsSig .45s cubic-bezier(.2, .8, .2, 1); }
.hs-tarjeta.gira-prev { animation: hsPrev .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes hsSig { from { transform: perspective(1200px) rotateY(-35deg) translateX(30%); opacity: .3; } }
@keyframes hsPrev { from { transform: perspective(1200px) rotateY(35deg) translateX(-30%); opacity: .3; } }
.hs-barras { display: flex; gap: 4px; padding: 12px 12px 0; position: relative; z-index: 3; }
.hs-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(11, 31, 51, .18); overflow: hidden; }
.oscuro .hs-barras span { background: rgba(255, 255, 255, .3); }
.hs-barras i { display: block; height: 100%; background: var(--tinta); border-radius: 3px; }
.oscuro .hs-barras i { background: #fff; }
.hs-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; position: relative; z-index: 3; }
.hs-avatar { width: 34px; height: 34px; flex: none; }
.hs-avatar .hs-ico { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c); border: 2px solid var(--c); }
.hs-avatar .hs-ico svg { width: 17px; height: 17px; }
.hs-nombre { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-boton { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(11, 31, 51, .08); color: inherit; display: grid; place-items: center; cursor: pointer; }
.hs-boton[hidden] { display: none; }
.oscuro .hs-boton { background: rgba(255, 255, 255, .14); }
.hs-boton svg { width: 16px; height: 16px; }
.hs-compartir svg, .hs-cerrar svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.hs-contenido { flex: 1; display: grid; align-items: center; padding: 0 26px; min-height: 0; overflow-y: auto; }
.hs-contenido.entra .hs-tip > * { animation: hsSube .5s ease both; }
.hs-contenido.entra .hs-tip > :nth-child(2) { animation-delay: .06s; } .hs-contenido.entra .hs-tip > :nth-child(3) { animation-delay: .12s; } .hs-contenido.entra .hs-tip > :nth-child(4) { animation-delay: .18s; }
@keyframes hsSube { from { opacity: 0; transform: translateY(14px); } }
.hs-tip { display: grid; justify-items: center; text-align: center; gap: 14px; }
.hs-tip-ico { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .6); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .35); margin-bottom: 6px; color: var(--c); }
.oscuro .hs-tip-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.hs-tip-ico svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-etq { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--tinta); color: #fff; }
.oscuro .hs-etq { background: rgba(255, 255, 255, .16); }
.hs-tarjeta h3 { font-size: clamp(25px, 7vw, 33px); letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.hs-tarjeta p { font-size: 15.5px; line-height: 1.5; opacity: .88; max-width: 330px; margin: 0 auto; }
.hs-numero { font-size: clamp(64px, 20vw, 92px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--c); display: flex; align-items: baseline; gap: 8px; }
.oscuro .hs-numero { color: #fff; }
.hs-numero small { font-size: 20px; letter-spacing: 0; font-weight: 700; opacity: .7; }
.hs-contenido.entra .hs-numero { animation: hsNumero .7s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes hsNumero { from { opacity: 0; transform: scale(.6); } }
.hs-respuestas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 330px; margin-top: 6px; position: relative; z-index: 4; }
.hs-respuestas button { padding: 16px 10px; border-radius: 18px; border: 2px solid rgba(11, 31, 51, .14); background: rgba(255, 255, 255, .75); font: inherit; font-size: 17px; font-weight: 800; color: var(--tinta); cursor: pointer; transition: transform .2s, background .2s; }
.hs-respuestas button:hover:not(:disabled) { transform: translateY(-2px); background: #fff; }
.hs-respuestas button.bien { background: #16a34a; border-color: #16a34a; color: #fff; animation: hsBien .5s ease; }
.hs-respuestas button.mal { opacity: .45; }
@keyframes hsBien { 40% { transform: scale(1.08); } }
.hs-explica { max-width: 340px; font-size: 15px; line-height: 1.5; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .8); text-align: left; animation: hsSube .4s ease both; }
.hs-explica[hidden] { display: none; }
.hs-tap { position: absolute; top: 100px; bottom: 120px; z-index: 2; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; padding: 0; }
.hs-tap-izq { left: 0; width: 30%; }
.hs-tap-der { right: 0; width: 70%; }
.hs-quiz { position: relative; z-index: 3; }
.hs-tap:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 16px; }
.hs-pie { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; padding: 14px 18px 24px; }
.hs-pie[hidden] { display: none; }
.hs-cta { background: var(--tinta); color: #fff; }
.oscuro .hs-cta { background: #fff; color: var(--tinta); }
.hs-cta svg { stroke: currentColor; fill: none; stroke-width: 2; }
.hs-llamar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.hs-llamar a { flex: 1 1 100px; max-width: 160px; display: grid; justify-items: center; gap: 2px; padding: 12px 10px; border-radius: 18px; background: #fff; color: #b4131f; text-decoration: none; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.hs-llamar a b { font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.hs-llamar a small { font-size: 11.5px; font-weight: 700; color: var(--tinta-2); text-align: center; }
.hs-aviso { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 4; background: var(--tinta); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; white-space: nowrap; }
.hs-aviso[hidden] { display: none; }
.hs-nav { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.hs-nav:hover { background: rgba(255, 255, 255, .25); }
.hs-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.hs-nav-prev svg { transform: rotate(180deg); }
@media (max-width: 640px) {
  .hs-visor { gap: 0; }
  .hs-nav { display: none; }
  .hs-tarjeta { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  @supports (height: 100dvh) { .hs-tarjeta { height: 100dvh; } }
  .hs-fila { gap: 10px; margin: 0 -16px; padding: 6px 16px 8px; }
  .hs-circulo { width: 68px; }
  .hs-anillo { width: 66px; height: 66px; }
  .hs-ico svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-circulo, .hs-circulo .hs-anillo, .hs-contenido.entra * , .hs-tarjeta { animation: none !important; }
}

/* =====================================================================
   Perfil de ejemplo de un médico (perfil-medico.html · assets/perfil-medico.js)
   ===================================================================== */
.pm-franja { background: #0b1f33; color: #fff; font-size: 14px; padding: 10px 0; margin-top: 76px; }
.pm-franja .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pm-franja span { display: flex; gap: 8px; align-items: flex-start; }
.pm-franja svg { width: 18px; height: 18px; color: #ffd27a; flex: none; margin-top: 1px; }
.pm-hero { padding: 60px 0 40px; background: radial-gradient(circle at 85% 0%, rgba(18,181,166,.14), transparent 45%), radial-gradient(circle at 0% 100%, rgba(21,94,239,.1), transparent 50%); }
.pm-hero-grid { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; }
.pm-foto { position: relative; }
.pm-foto svg { width: 100%; height: auto; display: block; border-radius: 44px; box-shadow: 0 30px 60px -28px rgba(21,94,239,.6); }
.pm-verificado { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); font-size: 13px; font-weight: 800; color: var(--teal-osc, #0a7f74); box-shadow: 0 10px 24px -14px rgba(11,31,51,.4); }
.pm-verificado svg { width: 16px; height: 16px; }
.pm-insignias { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pm-insignias li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.pm-insignias svg { width: 16px; height: 16px; color: var(--azul); }
.pm-insignias small { color: var(--gris); font-weight: 500; }
.pm-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.pm-cifras > div { padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); display: grid; gap: 4px; }
.pm-cifras b { font-size: 38px; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.pm-cifras span { font-size: 14px; color: var(--gris); }

.pm-galeria { display: grid; grid-template-columns: 1fr minmax(0, 420px) 1fr; gap: 26px; align-items: start; }
.pm-casos { display: grid; gap: 8px; }
.pm-casos button { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--tinta-2); cursor: pointer; text-align: left; transition: border-color .2s, transform .2s; }
.pm-casos button:hover { transform: translateX(3px); border-color: var(--azul); }
.pm-casos button[aria-selected="true"] { border-color: var(--azul); background: var(--celeste, #eef4ff); color: var(--tinta); box-shadow: 0 0 0 3px rgba(21,94,239,.12); }
.pm-mini { font-size: 13px; color: var(--gris); margin-top: 14px; }
.pm-casos .pm-mini { flex: none; width: 46px; height: 56px; border-radius: 11px; overflow: hidden; margin: 0; }
.pm-casos .pm-mini svg { width: 100%; height: 100%; display: block; }
.pm-visor { display: grid; gap: 12px; }
.pm-comparar { position: relative; aspect-ratio: 330 / 400; border-radius: 26px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; box-shadow: 0 30px 60px -30px rgba(11,31,51,.45); background: #eee; }
.pm-comparar .pm-antes, .pm-comparar .pm-despues { position: absolute; inset: 0; }
.pm-comparar .pm-despues { clip-path: inset(0 0 0 var(--corte)); }
.pm-dibujo { width: 100%; height: 100%; display: block; }
.pm-rotulo { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(11,31,51,.78); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.pm-rotulo-antes { left: 14px; }
.pm-rotulo-despues { right: 14px; background: var(--azul); }
.pm-manija { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.25); pointer-events: none; }
.pm-manija i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px -6px rgba(0,0,0,.4); }
.pm-manija i::before, .pm-manija i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.pm-manija i::before { left: 7px; border-right-color: var(--tinta); }
.pm-manija i::after { right: 7px; border-left-color: var(--tinta); }
.pm-rango { width: 100%; accent-color: var(--azul); }
.pm-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tinta-2); cursor: pointer; }
.pm-check input { width: 18px; height: 18px; accent-color: var(--azul); }
.pm-lineas { fill: none; stroke: #155eef; stroke-width: 2.5; stroke-linecap: round; }
.pm-lineas text { fill: #155eef; stroke: none; font: 800 15px "Plus Jakarta Sans", sans-serif; }
.pm-lineas-antes { stroke: #e5484d; }
.pm-lineas-antes circle { fill: rgba(229,72,77,.16); }
.pm-caso-info { padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); }
.pm-caso-etq { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.pm-caso-info h3 { font-size: 24px; letter-spacing: -.02em; margin: 6px 0 14px; }
.pm-caso-info dl { display: grid; gap: 12px; margin: 0; }
.pm-caso-info dt { font-size: 12.5px; font-weight: 800; color: var(--gris); }
.pm-caso-info dd { margin: 2px 0 0; font-size: 15px; color: var(--tinta-2); line-height: 1.5; }
.pm-nota { display: flex; gap: 8px; align-items: flex-start; justify-content: center; margin-top: 22px; font-size: 13.5px; color: var(--gris); text-align: center; }
.pm-nota svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #c98114; }

.pm-enfoque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pm-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--celeste, #eef4ff); color: var(--azul); margin-bottom: 14px; flex: none; }
.pm-ico svg { width: 24px; height: 24px; }
.pm-enfoque h3 { font-size: 19px; margin-bottom: 6px; }
.pm-enfoque p { color: var(--gris); font-size: 15px; }
.pm-tecnicas { margin-top: 34px; }
.pm-tecnicas h3 { font-size: 16px; margin-bottom: 12px; }
.pm-tecnicas ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pm-tecnicas li { padding: 9px 15px; border-radius: 999px; background: var(--fondo-2); border: 1px solid var(--linea); font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.pm-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.pm-rec-linea { --avance: 0%; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding-top: 22px; }
.pm-rec-linea::before, .pm-rec-linea::after { content: ""; position: absolute; top: 8px; left: 8%; height: 4px; border-radius: 4px; }
.pm-rec-linea::before { right: 8%; background: var(--linea); }
.pm-rec-linea::after { width: calc((84%) * var(--avance) / 100%); background: var(--grad); transition: width .4s ease; }
.pm-rec-linea { --avance-num: 0; }
.pm-rec-linea button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 6px 6px; border: 0; background: none; font: inherit; cursor: pointer; color: var(--gris); text-align: center; }
.pm-rec-linea button::before { content: ""; position: absolute; top: -20px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--linea-2); transition: all .3s; }
.pm-rec-linea button.activo::before { border-color: var(--azul); background: var(--azul); box-shadow: 0 0 0 4px rgba(21,94,239,.18); }
.pm-rec-linea b { font-size: 15px; color: var(--tinta); }
.pm-rec-linea span { font-size: 13px; }
.pm-rec-detalle { margin-top: 18px; padding: 22px 24px; border-radius: 22px; background: var(--celeste, #eef4ff); }
.pm-rec-detalle b { font-size: 17px; }
.pm-rec-detalle p { margin-top: 6px; color: var(--tinta-2); }

.pm-trayectoria { list-style: none; padding: 0; margin: 26px 0 0; border-left: 3px solid var(--linea); }
.pm-trayectoria li { position: relative; padding: 0 0 22px 22px; display: grid; gap: 2px; }
.pm-trayectoria li::before { content: ""; position: absolute; left: -9px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--grad); border: 3px solid #fff; }
.pm-trayectoria b { font-size: 14px; color: var(--azul); }
.pm-trayectoria span { color: var(--tinta-2); }
.pm-resenas { display: grid; gap: 12px; margin-top: 26px; }
.pm-resenas blockquote { margin: 0; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); }
.pm-resenas p { font-size: 15px; color: var(--tinta-2); font-style: italic; }
.pm-resenas footer { margin-top: 8px; font-size: 13px; font-weight: 700; color: #b7791f; }
.pm-precios { display: grid; gap: 0; margin: 14px 0 0; }
.pm-precios > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--linea); }
.pm-precios dt { color: var(--tinta-2); }
.pm-precios dd { margin: 0; font-weight: 800; white-space: nowrap; }
.pm-lugares { list-style: none; padding: 0; margin: 14px 0 22px; display: grid; gap: 14px; }
.pm-lugares li { display: grid; gap: 2px; }
.pm-lugares span { color: var(--gris); font-size: 14.5px; }
.pm-incluye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pm-incluye > div { display: grid; gap: 4px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); }
.pm-incluye .pm-ico { margin-bottom: 8px; }
.pm-incluye small { color: var(--gris); font-size: 14px; }
.pm-reglas { margin-top: 26px; }
.pm-reglas ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.pm-centro { justify-content: center; margin-top: 28px; }

@media (max-width: 980px) {
  .pm-galeria { grid-template-columns: 1fr; }
  .pm-casos { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .pm-visor { max-width: 440px; width: 100%; justify-self: center; }
  .pm-cifras { grid-template-columns: repeat(2, 1fr); }
  .pm-enfoque, .pm-incluye { grid-template-columns: 1fr 1fr; }
  .pm-dos { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 640px) {
  .pm-hero { padding-top: 36px; }
  .pm-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .pm-foto { width: 150px; }
  .pm-cifras b { font-size: 30px; }
  .pm-enfoque, .pm-incluye { grid-template-columns: 1fr; }
  .pm-rec-linea { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .pm-rec-linea::before, .pm-rec-linea::after { display: none; }
  .pm-franja .btn { width: 100%; justify-content: center; }
}
.pm-enlace-demo { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; padding: 16px 20px; border-radius: 22px; background: linear-gradient(120deg, #0b1f33, #12335a); color: #fff; text-decoration: none; transition: transform .25s; }
.pm-enlace-demo:hover { transform: translateY(-2px); }
.pm-enlace-demo .pm-ico { margin: 0; background: rgba(255,255,255,.12); color: #6ff0df; }
.pm-enlace-demo > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.pm-enlace-demo small { color: #b9c9db; font-size: 14px; }
.pm-enlace-demo > svg { width: 22px; height: 22px; flex: none; }

/* SOAT · dónde comprar (aparece después de cada búsqueda de placa) */
.sc-comprar { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--linea-2); display: grid; gap: 10px; text-align: left; }
.sc-comprar-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.sc-comprar-cab > div { display: grid; }
.sc-comprar-cab small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); }
.sc-comprar-cab b { font-size: 18px; letter-spacing: -.01em; }
.sc-comprar-nota { font-size: 13.5px; color: var(--gris); margin: 0; }
.sc-comprar-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-opcion { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); text-decoration: none; transition: border-color .2s, transform .2s; min-width: 0; }
.sc-opcion:hover { border-color: var(--azul); transform: translateY(-1px); }
.sc-opcion .ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--fondo-2); color: var(--azul); }
.sc-opcion .ico svg { width: 18px; height: 18px; }
.sc-opcion > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.sc-opcion b { font-size: 14.5px; }
.sc-opcion small { font-size: 12.5px; color: var(--gris); }
.sc-opcion > svg { width: 16px; height: 16px; flex: none; color: var(--gris); }
.sc-opcion.findley { grid-column: 1 / -1; background: linear-gradient(120deg, #155eef, #12b5a6); border: 0; color: #fff; }
.sc-opcion.findley .ico { background: rgba(255,255,255,.18); color: #fff; }
.sc-opcion.findley small { color: #e3f2ff; }
.sc-opcion.findley em { font-style: normal; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: #fff; color: var(--azul); flex: none; }
@media (max-width: 560px) { .sc-comprar-opciones { grid-template-columns: 1fr; } .sc-opcion.findley em { display: none; } }

/* =====================================================================
   Seguros de salud (seguros.html · assets/guias.js)
   ===================================================================== */
.seg-guia-caja { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.seg-guia { min-height: 280px; display: grid; align-content: start; gap: 14px; }
.seg-guia h3 { font-size: 22px; letter-spacing: -.02em; line-height: 1.25; }
.seg-guia h3 em { font-style: normal; }
.seg-paso { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.seg-barra { height: 6px; border-radius: 6px; background: var(--linea); overflow: hidden; }
.seg-barra span { display: block; height: 100%; background: var(--grad); transition: width .4s; }
.seg-opciones { display: grid; gap: 8px; }
.seg-opciones button { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linea-2); background: #fff; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--tinta); cursor: pointer; text-align: left; transition: border-color .2s, transform .2s; }
.seg-opciones button:hover { border-color: var(--azul); transform: translateX(3px); }
.seg-recs { display: grid; gap: 8px; }
.seg-recs a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; }
.seg-recs a.principal { border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); }
.seg-recs a > svg { width: 22px; height: 22px; color: var(--c); flex: none; }
.seg-recs span { display: grid; }
.seg-recs small { color: var(--gris); font-size: 13px; }
.seg-lista { display: grid; gap: 12px; }
.seg-item { border-radius: 22px; background: #fff; border: 1px solid var(--linea); overflow: hidden; transition: box-shadow .25s; }
.seg-item[open] { box-shadow: 0 20px 40px -26px rgba(11,31,51,.35); border-color: color-mix(in srgb, var(--c) 40%, var(--linea)); }
.seg-item summary { display: flex; align-items: center; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.seg-item summary::-webkit-details-marker { display: none; }
.seg-item summary .pm-ico { margin: 0; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.seg-item summary > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.seg-item summary b { font-size: 17px; }
.seg-item summary small { color: var(--gris); font-size: 14px; }
.seg-mas svg { width: 22px; height: 22px; transition: transform .25s; color: var(--gris); }
.seg-item[open] .seg-mas svg { transform: rotate(45deg); }
.seg-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 0 20px 22px 84px; }
.seg-cuerpo h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 8px; color: var(--tinta); }
.seg-cuerpo h4 svg { width: 17px; height: 17px; color: var(--c); }
.seg-cuerpo ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--tinta-2); font-size: 15px; }
.seg-cuerpo p { color: var(--tinta-2); font-size: 15px; margin: 0 0 14px; }
.seg-tabla-caja { overflow-x: auto; border-radius: 22px; border: 1px solid var(--linea); background: #fff; }
.seg-tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
.seg-tabla th, .seg-tabla td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.seg-tabla th { background: var(--fondo-2); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.seg-tabla td { color: var(--tinta-2); }
.seg-tabla tr:last-child td { border-bottom: 0; }
.seg-oficiales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.seg-oficiales a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--linea); background: #fff; color: var(--tinta); text-decoration: none; transition: border-color .2s, transform .2s; }
.seg-oficiales a:hover { border-color: var(--azul); transform: translateY(-2px); }
.seg-oficiales .pm-ico { margin: 0; }
.seg-oficiales span:nth-child(2) { flex: 1; display: grid; }
.seg-oficiales small { color: var(--gris); font-size: 13.5px; }
.seg-oficiales a > svg { width: 18px; height: 18px; color: var(--gris); }
.seg-glosario { display: grid; gap: 10px; margin: 24px 0; }
.seg-glosario > div { padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--linea); }
.seg-glosario dt { font-weight: 800; }
.seg-glosario dd { margin: 2px 0 0; color: var(--tinta-2); font-size: 14.5px; }
@media (max-width: 900px) {
  .seg-guia-caja { grid-template-columns: 1fr; gap: 24px; }
  .seg-oficiales { grid-template-columns: 1fr 1fr; }
  .seg-cuerpo { grid-template-columns: 1fr; padding-left: 20px; }
}
@media (max-width: 560px) { .seg-oficiales { grid-template-columns: 1fr; } .seg-item summary { padding: 16px; gap: 12px; } }

/* =====================================================================
   Salud dental (dental.html · assets/guias.js)
   ===================================================================== */
.seccion-corta { padding: 10px 0 30px; }
.dn-hero .h1 em { background: linear-gradient(120deg, #06b6d4, #155eef); -webkit-background-clip: text; background-clip: text; }
.dn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.dn-chips button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linea-2); background: #fff; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--tinta-2); cursor: pointer; transition: all .2s; }
.dn-chips button:hover { border-color: #06b6d4; color: #0e7490; }
.dn-chips button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dn-respuesta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--linea); animation: entra .35s ease both; }
.dn-resp-texto h3 { font-size: 24px; letter-spacing: -.02em; margin: 6px 0 10px; }
.dn-resp-texto p { color: var(--tinta-2); font-size: 15.5px; }
.dn-resp-esp { display: grid; gap: 10px; align-content: start; }
.dn-resp-esp .btn { justify-self: start; }
.dn-esp-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; border: 1px solid var(--linea); background: #fff; }
.dn-esp-card.principal { border: 2px solid #06b6d4; background: #f0fbfd; }
.dn-esp-card .pm-ico { margin: 0; background: #e0f7fb; color: #0e7490; }
.dn-esp-card > span:last-child { display: grid; gap: 2px; }
.dn-esp-card small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0e7490; }
.dn-esp-card b { font-size: 16px; }
.dn-esp-card em { font-style: normal; color: var(--gris); font-size: 14px; }
.dn-esp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dn-mapa-caja { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.dn-modo { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--fondo-2); border: 1px solid var(--linea); margin: 22px 0 18px; }
.dn-modo button { padding: 9px 16px; border-radius: 999px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--gris); cursor: pointer; }
.dn-modo button[aria-selected="true"] { background: #fff; color: var(--tinta); box-shadow: 0 4px 12px -6px rgba(11,31,51,.3); }
.dn-info { min-height: 230px; }
.dn-info h3 { font-size: 22px; margin: 6px 0 8px; }
.dn-info p { color: var(--tinta-2); }
.dn-info h4 { font-size: 14px; margin: 14px 0 6px; }
.dn-info ul { margin: 0; padding-left: 18px; color: var(--tinta-2); display: grid; gap: 4px; }
.dn-datos { display: flex; gap: 10px; margin: 12px 0 0; flex-wrap: wrap; }
.dn-datos > div { padding: 8px 14px; border-radius: 14px; background: #f0fbfd; }
.dn-datos dt { font-size: 12px; font-weight: 800; color: #0e7490; }
.dn-datos dd { margin: 0; font-weight: 700; }
.dn-mapa { max-width: 420px; width: 100%; justify-self: center; }
.dn-mapa svg { width: 100%; height: auto; display: block; }
.dn-diente rect { fill: #fff; stroke: #b9cfe0; stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.dn-diente { cursor: pointer; outline: none; }
.dn-diente.juicio rect { stroke-dasharray: 3 2; }
.dn-diente:hover rect, .dn-diente:focus-visible rect { fill: #e0f7fb; stroke: #06b6d4; }
.dn-diente.sel rect { fill: #06b6d4; stroke: #0e7490; }
.dn-arco-t, .dn-lado-t { font: 800 12px "Plus Jakarta Sans", sans-serif; fill: var(--gris); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.dn-lado-t { text-anchor: start; font-size: 11px; }
.dn-lado-der { text-anchor: end; }
.dn-lengua { fill: none; stroke: #f4b4bd; stroke-width: 26; stroke-linecap: round; opacity: .55; }
.dn-tipos, .dn-trat { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dn-tipo { display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); }
.dn-tipo-cab { display: flex; align-items: center; gap: 12px; }
.dn-tipo-cab .pm-ico { margin: 0; width: 42px; height: 42px; background: #e0f7fb; color: #0e7490; }
.dn-tipo h3 { font-size: 17px; }
.dn-tipo > p { color: var(--tinta-2); font-size: 14.5px; }
.dn-tipo dl { display: grid; gap: 0; margin: 0; }
.dn-tipo dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--linea); font-size: 14px; }
.dn-tipo dt { color: var(--gris); }
.dn-tipo dd { margin: 0; font-weight: 700; text-align: right; }
.dn-nivel { color: #06b6d4; letter-spacing: 2px; }
.dn-nivel i { font-style: normal; color: var(--linea-2); }
.dn-ojo { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px !important; color: #8a5a10 !important; background: #fff7ec; padding: 8px 10px; border-radius: 12px; }
.dn-ojo svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.dn-sub { font-size: 19px; margin: 0 0 14px; }
.dn-orto-pasos { margin-top: 40px; }
.dn-urgencias { display: grid; gap: 10px; margin-top: 24px; }
.dn-urgencias > div { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--rojo); }
.dn-urgencias p { margin-top: 4px; color: var(--tinta-2); font-size: 14.5px; }
@media (max-width: 900px) {
  .dn-respuesta, .dn-mapa-caja { grid-template-columns: 1fr; }
  .dn-esp { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .dn-esp { grid-template-columns: 1fr; } .dn-respuesta { padding: 18px; } }

/* =====================================================================
   Diccionario médico (diccionario.html · assets/guias.js)
   ===================================================================== */
.dic-buscar { display: flex; align-items: center; gap: 12px; max-width: 620px; margin-top: 30px; padding: 6px 8px 6px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--linea-2); box-shadow: 0 20px 40px -28px rgba(11,31,51,.4); }
.dic-buscar svg { width: 22px; height: 22px; color: var(--azul); flex: none; }
.dic-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 12px 0; background: none; color: var(--tinta); }
.dic-filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.dic-filtros::-webkit-scrollbar { display: none; }
.dic-filtros button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--linea-2); background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
.dic-filtros button svg { width: 16px; height: 16px; }
.dic-filtros button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dic-letras { position: sticky; top: 76px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 6px; padding: 8px 0; background: var(--fondo-2); }
.dic-letras a, .dic-letras span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 13.5px; font-weight: 800; }
.dic-letras a { background: #fff; border: 1px solid var(--linea); color: var(--azul); text-decoration: none; }
.dic-letras a:hover { background: var(--azul); color: #fff; }
.dic-letras span { color: var(--linea-2); }
.dic-total { font-size: 13.5px; color: var(--gris); margin: 4px 0 14px; }
.dic-lista { display: grid; gap: 26px; }
.dic-grupo { scroll-margin-top: 140px; }
.dic-grupo h3 { font-size: 30px; letter-spacing: -.03em; color: var(--azul); margin-bottom: 10px; }
.dic-grupo dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
.dic-termino { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); scroll-margin-top: 140px; }
.dic-termino:target { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(21,94,239,.15); }
.dic-termino dt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-weight: 800; font-size: 16.5px; }
.dic-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--gris); padding: 3px 9px; border-radius: 999px; background: var(--fondo-2); }
.dic-cat svg { width: 13px; height: 13px; }
.dic-termino dd { margin: 6px 0 0; color: var(--tinta-2); font-size: 15px; line-height: 1.5; }
.dic-termino .enlace svg { width: 14px; height: 14px; vertical-align: -2px; }
.dic-vacio { padding: 30px; text-align: center; color: var(--gris); background: #fff; border-radius: 20px; border: 1px dashed var(--linea-2); }
.dic-vacio button { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.dic-valores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dic-valores > div { display: grid; align-content: start; gap: 3px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); }
.dic-valores .pm-ico { margin-bottom: 8px; }
.dic-valores b { font-size: 14px; color: var(--gris); }
.dic-valores strong { font-size: 21px; letter-spacing: -.02em; }
.dic-valores small { color: var(--gris); font-size: 13px; }
.dic-valores .enlace { margin-top: 6px; font-size: 14px; }
.dic-abrev { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0 0; }
.dic-abrev > div { padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--linea); }
.dic-abrev dt { font-weight: 800; color: var(--azul); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; }
.dic-abrev dd { margin: 2px 0 0; font-size: 14px; color: var(--tinta-2); }
.dic-preguntas { list-style: none; counter-reset: p; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.dic-preguntas li { counter-increment: p; position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 58px; border-radius: 16px; background: #fff; border: 1px solid var(--linea); }
.dic-preguntas li::before { content: counter(p); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; }
.dic-preguntas span { color: var(--gris); font-size: 14.5px; }
@media (max-width: 900px) { .dic-valores { grid-template-columns: 1fr 1fr; } .dic-grupo dl { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dic-valores, .dic-abrev { grid-template-columns: 1fr; } .dic-letras { top: 64px; } .dic-letras a, .dic-letras span { width: 26px; height: 26px; font-size: 12.5px; } }

/* =====================================================================
   Tú eliges · asistente de toda la web (assets/tu-elige.js)
   ===================================================================== */
.te-boton { position: fixed; right: 22px; bottom: 96px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 14px; border-radius: 999px; border: 0; background: linear-gradient(120deg, #155eef, #12b5a6); color: #fff; font: inherit; font-weight: 800; font-size: 14.5px; cursor: pointer; box-shadow: 0 16px 34px -12px rgba(21,94,239,.75); transition: transform .2s; }
.te-boton:hover { transform: translateY(-2px); }
.te-boton svg { width: 22px; height: 22px; animation: teBrillo 3s ease-in-out infinite; }
@keyframes teBrillo { 50% { transform: rotate(18deg) scale(1.12); } }
.te-boton.abierto { opacity: 0; pointer-events: none; }
.te-panel { position: fixed; right: 22px; bottom: 96px; z-index: 80; width: min(390px, calc(100vw - 32px)); height: min(620px, calc(100dvh - 130px)); display: flex; flex-direction: column; border-radius: 26px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 40px 90px -30px rgba(11,31,51,.55); overflow: hidden; opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.te-panel.visible { opacity: 1; transform: none; }
.te-panel[hidden] { display: none; }
.te-cab { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(120deg, #0b1f33, #12335a); color: #fff; }
.te-avatar { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #155eef, #12b5a6); }
.te-avatar svg { width: 22px; height: 22px; }
.te-cab > div { flex: 1; display: grid; min-width: 0; }
.te-cab b { font-size: 16px; }
.te-cab small { color: #b9c9db; font-size: 12.5px; }
.te-cerrar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.te-cerrar svg { width: 16px; height: 16px; }
.te-chat { flex: 1; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 10px; background: var(--fondo-2); }
.te-msg { max-width: 92%; padding: 11px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; animation: entra .3s ease both; }
.te-msg p { margin: 0 0 8px; } .te-msg p:last-child { margin-bottom: 0; }
.te-msg.yo { justify-self: end; background: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.te-msg.ella { justify-self: start; background: #fff; border: 1px solid var(--linea); border-bottom-left-radius: 6px; display: grid; gap: 8px; width: 92%; }
.te-op { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; transition: border-color .2s; }
.te-op:hover { border-color: var(--azul); }
.te-op.principal { border: 2px solid var(--azul); background: var(--celeste, #eef4ff); }
.te-op-ico { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--fondo-2); color: var(--azul); }
.te-op-ico svg { width: 18px; height: 18px; }
.te-op > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.te-op b { font-size: 14px; line-height: 1.3; }
.te-op small { font-size: 12.5px; color: var(--gris); line-height: 1.35; }
.te-op > svg { width: 15px; height: 15px; color: var(--gris); flex: none; }
.te-op em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12.5px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: var(--azul); color: #fff; flex: none; }
.te-op em svg { width: 13px; height: 13px; }
.te-def { padding: 12px 14px; border-radius: 14px; background: #f0fbfd; border: 1px solid #c6eef5; display: grid; gap: 4px; }
.te-def span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0e7490; }
.te-def b { font-size: 16px; }
.te-def p { margin: 0; color: var(--tinta-2); }
.te-def .enlace svg { width: 13px; height: 13px; vertical-align: -2px; }
.te-llamar { display: flex; gap: 8px; flex-wrap: wrap; }
.te-llamar a { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 14px; background: var(--azul); color: #fff; font-weight: 800; text-decoration: none; font-size: 14px; }
.te-llamar a.rojo { background: var(--rojo); }
.te-llamar svg { width: 16px; height: 16px; }
.te-puntos { display: inline-flex; gap: 4px; padding: 4px 0; }
.te-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--gris); animation: punto 1s infinite; }
.te-puntos i:nth-child(2) { animation-delay: .15s; } .te-puntos i:nth-child(3) { animation-delay: .3s; }
.te-chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 2px; scrollbar-width: none; background: #fff; }
.te-chips::-webkit-scrollbar { display: none; }
.te-chips button { flex: none; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--linea-2); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta-2); cursor: pointer; }
.te-chips button:hover { border-color: var(--azul); color: var(--azul); }
.te-form { display: flex; gap: 8px; padding: 10px 12px 6px; background: #fff; }
.te-form input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 999px; border: 1px solid var(--linea-2); font: inherit; font-size: 16px; outline: none; }
.te-form input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(21,94,239,.15); }
.te-mic, .te-enviar { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; }
.te-mic { background: var(--fondo-2); color: var(--azul); }
.te-mic[hidden] { display: none; }
.te-mic.grabando { background: var(--rojo); color: #fff; animation: latido 1.2s infinite; }
.te-enviar { background: var(--azul); color: #fff; }
.te-mic svg, .te-enviar svg { width: 20px; height: 20px; }
.te-nota { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 14px 12px; font-size: 11.5px; color: var(--gris); background: #fff; }
.te-nota svg { width: 13px; height: 13px; flex: none; }
@media (max-width: 560px) {
  .te-boton { right: 16px; bottom: 90px; height: 46px; padding: 0 14px 0 12px; font-size: 13.5px; }
  .te-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100dvh - 90px); border-radius: 24px; }
}
@media print { .te-boton, .te-panel { display: none !important; } }

/* =====================================================================
   Exploradores interactivos del cuerpo (explora-*.html · assets/explora.js)
   ===================================================================== */
.ex-hero-rojo .h1 em { background: linear-gradient(120deg, #e5484d, #f59e0b); -webkit-background-clip: text; background-clip: text; }
.ex-hero-morado .h1 em { background: linear-gradient(120deg, #7c3aed, #155eef); -webkit-background-clip: text; background-clip: text; }
.ex-hero-rosa .h1 em { background: linear-gradient(120deg, #db2777, #f59e0b); -webkit-background-clip: text; background-clip: text; }
.ex-hero .hero-botones .btn-borde { padding: 10px 16px; font-size: 14px; }
.ex-caja { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }
.ex-dibujo { display: grid; justify-items: center; gap: 16px; position: sticky; top: 96px; }
.ex-svg { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; }
.ex-svg [data-z] { cursor: pointer; outline: none; transition: filter .2s, opacity .2s, stroke .2s; }
.ex-svg [data-z]:hover, .ex-svg [data-z]:focus-visible { filter: brightness(1.12) drop-shadow(0 0 6px rgba(21,94,239,.45)); }
.ex-svg [data-z].sel { filter: drop-shadow(0 0 10px rgba(21,94,239,.75)); stroke: #155eef; stroke-width: 3; }
.ex-etiquetas text { font: 800 11px "Plus Jakarta Sans", sans-serif; fill: #fff; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(11,31,51,.45); stroke-width: 3px; }
.ex-rotulo { font: 800 11px "Plus Jakarta Sans", sans-serif; fill: var(--gris); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.ex-lado { display: grid; gap: 14px; }
.ex-panel { min-height: 240px; display: grid; align-content: start; gap: 10px; }
.ex-panel h3 { font-size: 23px; letter-spacing: -.02em; }
.ex-panel p { color: var(--tinta-2); margin: 0; }
.ex-panel h4 { font-size: 14px; margin: 6px 0 0; }
.ex-panel ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; color: var(--tinta-2); font-size: 15px; }
.ex-panel .btn { justify-self: start; margin-top: 4px; }
.ex-alerta { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #fff0f0; color: #9b1c22 !important; font-size: 14.5px; font-weight: 600; }
.ex-alerta svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ex-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13.5px; color: var(--gris); }
.ex-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.ex-leyenda .azul { background: #4f7fd6; } .ex-leyenda .rojo { background: #e5484d; } .ex-leyenda .naranja { background: #f59e0b; }
.ex-pie { text-align: center; font-size: 14px; color: var(--gris); margin-top: 8px; }
.ex-capa { font: 700 11px "Plus Jakarta Sans", sans-serif; fill: rgba(11,31,51,.6); }
.ex-capa.centro { text-anchor: middle; fill: var(--tinta); }
.ex-folic svg { width: 100%; height: auto; border-radius: 22px; overflow: hidden; display: block; }

/* Capilar */
.cap-zona { fill: url(#cap-pelo); stroke: rgba(255,255,255,.25); stroke-width: 1.5; }
.cap-zona.elegida { fill: url(#cap-injertos); stroke: #155eef; stroke-dasharray: 5 4; stroke-width: 2; }
.cap-donante { fill: url(#cap-donante); }
.cap-lado { pointer-events: none; }
.cap-extras, .cap-norwood { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cap-extras button, .cap-norwood button { padding: 9px 14px; border-radius: 14px; border: 1px solid var(--linea-2); background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--tinta-2); cursor: pointer; display: grid; text-align: left; }
.cap-norwood { justify-content: flex-start; }
.cap-norwood small { font-weight: 500; color: var(--gris); font-size: 12px; }
.cap-extras button[aria-pressed="true"], .cap-norwood button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cap-norwood button[aria-pressed="true"] small { color: #c9d6e4; }
.cap-zona-dato { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--celeste, #eef4ff); font-size: 14.5px; }
.cap-zona-dato svg { width: 16px; height: 16px; color: var(--azul); }
.cap-zona-dato em { font-style: normal; color: var(--gris); }
.cap-resumen { display: grid; gap: 12px; }
.cap-vacio { color: var(--gris); margin: 0; }
.cap-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cap-cifras > div { display: grid; gap: 2px; padding: 12px; border-radius: 16px; background: var(--fondo-2); }
.cap-cifras small { font-size: 11.5px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.cap-cifras b { font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
.cap-cifras > div:first-child b { color: var(--azul); }
.cap-cifras span { font-size: 12px; color: var(--gris); }
.cap-nota { font-size: 14px; color: var(--tinta-2); margin: 0; }
.cap-resumen .btn { justify-self: start; }

/* Corazón */
.cor-vaso { fill: none; stroke-width: 20; stroke-linecap: round; }
.cor-vaso.delgado { stroke-width: 9; }
.cor-vaso.azul { stroke: #4f7fd6; } .cor-vaso.rojo { stroke: #e5484d; }
.cor-silueta { fill: #f6c9c4; stroke: #e8a39c; stroke-width: 3; }
.cor-cav { stroke: #fff; stroke-width: 3; }
.cor-cav.azul { fill: #4f7fd6; } .cor-cav.rojo { fill: #e5484d; }
.cor-coronaria { fill: none; stroke: #f59e0b; stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.cor-coronaria-toque { fill: none; stroke: transparent; stroke-width: 22; stroke-linecap: round; }
.cor-coronaria-toque.sel { stroke: rgba(245,158,11,.35); }
.cor-valvulas ellipse { fill: #fff; stroke: #0b1f33; stroke-width: 1.5; }
.cor-nodo { fill: #facc15; stroke: #0b1f33; stroke-width: 2; animation: corChispa var(--latido) infinite; }
@keyframes corChispa { 0%, 70%, 100% { fill: #facc15; } 5% { fill: #fff; r: 12; } }
.cor-latido { transform-origin: 165px 210px; animation: corLate var(--latido) ease-in-out infinite; }
@keyframes corLate { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.045); } 26% { transform: scale(.985); } 40% { transform: scale(1.02); } }
.recorriendo .cor-latido { animation-play-state: paused; }
.cor-ritmo { width: 100%; max-width: 420px; display: grid; gap: 6px; }
.cor-ritmo label { font-size: 14px; font-weight: 700; color: var(--tinta-2); text-align: center; }
.cor-lpm { font-size: 22px; color: var(--tinta); }
.cor-estado { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; }
.cor-estado.bien { background: #e3f6ea; color: #1f7a45; } .cor-estado.medio { background: #fff4d6; color: #8a5a10; } .cor-estado.malo { background: #ffe1e1; color: #b4131f; }
.cor-ritmo input { width: 100%; accent-color: #e5484d; }

/* Cerebro */
.cer-lobulo { stroke: #fff; stroke-width: 3; }
.cer-lobulo.frontal { fill: #7c8cf8; } .cer-lobulo.parietal { fill: #f59e0b; } .cer-lobulo.occipital { fill: #12b5a6; }
.cer-lobulo.temporal { fill: #e5484d; } .cer-lobulo.cerebelo { fill: #a855f7; } .cer-lobulo.tronco { fill: #94a3b8; }
.cer-surcos path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.rapido { display: grid; gap: 10px; margin-top: 18px; }
.rapido h3 { font-size: 19px; margin-bottom: 4px; }
.rapido label { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 16px; background: #fff; border: 1px solid var(--linea); cursor: pointer; font-size: 15px; color: var(--tinta-2); transition: border-color .2s; }
.rapido label:has(input:checked) { border-color: var(--rojo); background: #fff6f6; }
.rapido input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--rojo); }
.rapido label b { display: block; color: var(--tinta); }
.rapido-alerta { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: #fff0f0; border: 2px solid var(--rojo); animation: entra .3s ease both; }
.rapido-alerta > svg { width: 24px; height: 24px; color: var(--rojo); }
.rapido-alerta p { margin: 4px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.rapido-alerta .btn { grid-column: 1 / -1; justify-self: start; }
.rapido-alerta.amarillo { background: #fff8e8; border-color: #f5b52e; }
.rapido-alerta.amarillo > svg { color: #c98114; }
.rapido-ok { color: var(--gris); font-size: 14px; margin: 0; }

/* Urología */
.uro-fondo { fill: #f6efe9; }
.uro-org { stroke: #fff; stroke-width: 2.5; }
.rinon { fill: #b4413f; } .vejiga { fill: #f5c14d; } .prostata { fill: #8b5cf6; } .testiculo { fill: #f2a7a0; } .pene { fill: #e8a58c; } .utero { fill: #f472b6; }
.uro-tubo { fill: none; stroke: #e0a62a; stroke-width: 8; stroke-linecap: round; }
.uro-tubo.fino { stroke: #f472b6; stroke-width: 4; }
.uro-tubo.uretra { stroke: #d48a1c; stroke-width: 5; }
[data-sexo="hombre"] .solo-mujer, [data-sexo="mujer"] .solo-hombre { display: none; }
.uro-svg .ex-etiquetas text { fill: var(--tinta); stroke: #fff; }

/* Embarazo */
.emb-caja { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; --crece: .5; --bebe: .3; }
.emb-visual { position: relative; display: grid; justify-items: center; }
.emb-svg { width: 100%; max-width: 300px; height: auto; }
.emb-cuerpo { fill: #f2cdb5; }
.emb-panza ellipse { fill: #f2cdb5; transform-box: fill-box; transform-origin: 0% 50%; transform: scale(var(--crece)); transition: transform .35s ease; }
.emb-bebe { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(var(--bebe)); transition: transform .35s ease; fill: #f59ab8; opacity: .9; }
.emb-tam { position: absolute; right: 0; top: 10px; display: grid; justify-items: center; gap: 2px; padding: 14px 16px; border-radius: 22px; background: #fff; border: 1px solid var(--linea); box-shadow: 0 16px 30px -20px rgba(11,31,51,.4); font-size: 13px; color: var(--gris); }
.emb-fruta { font-size: 46px; line-height: 1; }
.emb-tam b { color: var(--tinta); font-size: 18px; }
.emb-rango { display: grid; gap: 8px; margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--gris); }
.emb-rango input { width: 100%; accent-color: #db2777; height: 28px; }
.emb-info h3 { font-size: 21px; letter-spacing: -.02em; margin: 6px 0 14px; }
.emb-info h3 small { font-size: 14px; color: var(--gris); font-weight: 600; }
.emb-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.emb-col > div { padding: 12px; border-radius: 16px; background: var(--fondo-2); }
.emb-col h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; margin: 0 0 6px; }
.emb-col h4 svg { width: 16px; height: 16px; color: #db2777; }
.emb-col p { margin: 0; font-size: 14px; color: var(--tinta-2); }
.emb-prema { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff7ec; font-size: 14px; color: #6b4a14; }
.emb-prema svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #c98114; }
.emb-linea { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.emb-linea > div { display: grid; align-content: start; gap: 4px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--linea); border-top: 6px solid; }
.emb-linea .rojo { border-top-color: #e5484d; } .emb-linea .naranja { border-top-color: #f97316; } .emb-linea .amarillo { border-top-color: #f5b52e; } .emb-linea .verde { border-top-color: #1f9a52; }
.emb-linea span { font-size: 13px; font-weight: 700; color: var(--gris); }
.emb-linea p { margin: 6px 0 0; font-size: 14.5px; color: var(--tinta-2); }
.emb-cromo { display: flex; gap: 22px; margin-top: 26px; }
.emb-cromo > span { display: grid; grid-auto-flow: column; gap: 6px; align-items: end; justify-items: center; padding: 14px 16px 8px; border-radius: 18px; background: #fff; border: 1px solid var(--linea); position: relative; }
.emb-cromo i { display: block; width: 14px; height: 54px; border-radius: 8px; background: repeating-linear-gradient(180deg, #7c8cf8 0 8px, #b9c3ff 8px 12px); }
.emb-cromo .extra { border: 2px solid #db2777; }
.emb-cromo .extra i:last-of-type { background: repeating-linear-gradient(180deg, #db2777 0 8px, #f9a8d4 8px 12px); animation: hsLatido 2s infinite; }
.emb-cromo small { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--gris); }
.emb-regresion { display: flex; gap: 8px; font-size: 14px; color: #8a5a10; margin: 4px 0; }
.emb-regresion svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Hub */
.ex-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ex-hub-card { display: grid; align-content: start; gap: 6px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ex-hub-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(11,31,51,.45); border-color: var(--c); }
.ex-hub-ico { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); margin-bottom: 8px; }
.ex-hub-ico svg { width: 28px; height: 28px; }
.ex-hub-card b { font-size: 20px; }
.ex-hub-card small { color: var(--gris); font-size: 14.5px; }
.ex-hub-card em { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-style: normal; font-weight: 800; font-size: 14px; color: var(--c); }
.ex-hub-card em svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .ex-caja, .emb-caja { grid-template-columns: 1fr; gap: 24px; }
  .ex-dibujo { position: static; }
  .ex-svg { max-width: 360px; }
  .ex-hub { grid-template-columns: 1fr 1fr; }
  .emb-linea { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ex-hub, .emb-col, .emb-linea, .cap-cifras { grid-template-columns: 1fr; }
  .emb-svg { max-width: 220px; }
  .emb-tam { right: -4px; padding: 10px 12px; } .emb-fruta { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .cor-latido, .cor-nodo { animation: none; } }

/* Huesos */
.hu-hueso { fill: #efe6d6; stroke: #b9a98a; stroke-width: 2; }
.hu-hueco { fill: #b9a98a; }
.hu-borde { fill: none; stroke: #b9a98a; stroke-width: 14; stroke-linecap: round; }
.hu-largo { fill: none; stroke: #efe6d6; stroke-width: 10; stroke-linecap: round; }
.hu-borde.fino { stroke-width: 8; } .hu-largo.fino { stroke-width: 4.5; }
.hu-borde.grueso { stroke-width: 18; } .hu-largo.grueso { stroke-width: 14; }
.hu-vert rect { fill: #e2d6c1; stroke: #b9a98a; stroke-width: 1.5; }
.hu-art { fill: #f5b041; stroke: #fff; stroke-width: 2; }
.hu-dedos { fill: none; stroke: #efe6d6; stroke-width: 4; stroke-linecap: round; }
.hu-fijo { pointer-events: none; }
.ex-leyenda .hueso { background: #e2d6c1; border: 1px solid #b9a98a; }

/* Ojo */
.ojo-rayos path { fill: none; stroke: #facc15; stroke-width: 2; stroke-dasharray: 5 5; opacity: .8; }
.ojo-esclera { fill: #fff; stroke: #cfdbe7; stroke-width: 5; }
.ojo-vitreo { fill: #e7f3fb; }
.ojo-retina { fill: none; stroke: #e5786d; stroke-width: 9; stroke-linecap: round; }
.ojo-macula { fill: #9b2c2c; }
.ojo-nervio { fill: none; stroke: #f2c48d; stroke-width: 20; stroke-linecap: round; }
.ojo-pupila { fill: #111; }
.ojo-iris { fill: none; stroke: #8b5a2b; stroke-width: 9; stroke-linecap: round; transition: d .3s; }
.ojo-cristalino { fill: #fdf3c7; stroke: #e6cf7a; stroke-width: 2; }
.ojo-cornea { fill: none; stroke: #8cc8f0; stroke-width: 7; stroke-linecap: round; }
.ex-etiquetas.oscuras text { fill: var(--tinta); stroke: #fff; }
.ojo-luz { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 360px; font-size: 20px; }
.ojo-luz input { flex: 1; accent-color: #f59e0b; }
.sim { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.sim-botones { display: grid; gap: 6px; }
.sim-botones button { padding: 11px 14px; border-radius: 14px; border: 1px solid var(--linea-2); background: #fff; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--tinta-2); cursor: pointer; text-align: left; }
.sim-botones button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.sim-vista { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(11,31,51,.45); }
.sim-vista svg { width: 100%; height: auto; display: block; }
.sim-escena, .sim-lejos, .sim-cerca { transition: filter .4s; }
.sim-capa { opacity: 0; transition: opacity .4s; pointer-events: none; }
.sim-miopia .sim-lejos { filter: blur(5px); }
.sim-presbicia .sim-cerca { filter: blur(2.6px); }
.sim-catarata .sim-escena { filter: blur(2.2px) sepia(.55) contrast(.7) brightness(1.08); }
.sim-catarata .sim-capa-neblina { opacity: 1; }
.sim-glaucoma .sim-capa-tubo { opacity: 1; }
.sim-macula .sim-capa-mancha { opacity: 1; }
.sim-diabetes .sim-escena { filter: blur(1.2px); }
.sim-diabetes .sim-capa-manchas { opacity: .8; }
.sim-daltonismo .sim-escena { filter: url(#sim-dalton); }
.sim-info { grid-column: 2; }
.sim-info p { margin: 4px 0 0; color: var(--tinta-2); }

/* Oído */
.oido-fondo { fill: #f6e3d6; }
.oido-medio { fill: #fde8dc; stroke: #f0c7b0; stroke-width: 2; }
.oido-pab { fill: #f2cdb5; stroke: #d9a98d; stroke-width: 2.5; }
.oido-cond { fill: #f7c9b4; stroke: #e0a68d; stroke-width: 2; }
.oido-timp { fill: #f59e0b; }
.oido-hues path { fill: none; stroke: #e2d6c1; stroke-width: 7; stroke-linecap: round; }
.oido-hues { filter: drop-shadow(0 0 1px #8a7a5a); }
.oido-trompa { fill: none; stroke: #f4a3a8; stroke-width: 12; stroke-linecap: round; }
.oido-equi ellipse { fill: none; stroke: #8b5cf6; stroke-width: 6; }
.oido-coclea { fill: none; stroke: #12b5a6; stroke-width: 7; stroke-linecap: round; }
.oido-nervio { fill: none; stroke: #f2c48d; stroke-width: 10; stroke-linecap: round; }
.ex-rotulos-oido text { font: 800 11px "Plus Jakarta Sans", sans-serif; fill: var(--gris); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.tonos-lista { display: grid; gap: 6px; }
.tono { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--fondo-2); }
.tono-play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--azul); color: #fff; display: grid; place-items: center; cursor: pointer; }
.tono-play svg { width: 18px; height: 18px; }
.tono span { display: grid; }
.tono small { color: var(--gris); font-size: 12px; }
.tono [data-oigo] { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--linea-2); background: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--tinta-2); }
.tono [data-oigo="si"][aria-pressed="true"] { background: #1f9a52; border-color: #1f9a52; color: #fff; }
.tono [data-oigo="no"][aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.tonos-res { margin-top: 12px; }
.tonos-bien { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px; border-radius: 14px; background: #e3f6ea; color: #1f5f3a; font-size: 14.5px; }
.tonos-bien svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.aviso span { flex: 1; }
.db-escala { display: grid; gap: 8px; }
.db-escala > div { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--linea); position: relative; overflow: hidden; }
.db-escala > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc((var(--n) - 20) / 120 * 100%); background: linear-gradient(90deg, rgba(31,154,82,.12), rgba(229,72,77,calc((var(--n) - 40) / 200))); z-index: 0; }
.db-escala > div > * { position: relative; }
.db-escala b { font-size: 17px; }
.db-escala span { color: var(--tinta-2); font-size: 14.5px; }
.db-escala em { font-style: normal; font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.db-escala .ok { background: #e3f6ea; color: #1f7a45; } .db-escala .medio { background: #fff4d6; color: #8a5a10; } .db-escala .malo { background: #ffe1e1; color: #b4131f; }
@media (max-width: 900px) { .sim { grid-template-columns: 1fr; } .sim-botones { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 4px; } .sim-info { grid-column: 1; } }
@media (max-width: 560px) { .db-escala > div { grid-template-columns: 62px 1fr; } .db-escala em { grid-column: 2; justify-self: start; } .tono { grid-template-columns: auto 1fr auto auto; padding: 8px; } .tono [data-oigo] { padding: 7px 9px; } }

/* Pulmones */
.pul-pulmon { fill: #f7b6b8; stroke: #e58e93; stroke-width: 2.5; }
.pul-fisura { fill: none; stroke: #e58e93; stroke-width: 2; stroke-dasharray: 4 4; pointer-events: none; }
.pul-respira { transform-origin: 160px 200px; animation: pulRespira var(--resp) ease-in-out infinite; }
@keyframes pulRespira { 0%, 100% { transform: scale(.94, .92); } 45% { transform: scale(1.04, 1.05); } }
.pul-traquea { fill: #f1d3c5; stroke: #d9a98d; stroke-width: 2; }
.pul-anillos { stroke: #d9a98d; stroke-width: 2; pointer-events: none; }
.pul-bronquio { fill: none; stroke: #c85a64; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.pul-diafragma { fill: none; stroke: #c0866a; stroke-width: 10; stroke-linecap: round; animation: pulDiafragma var(--resp) ease-in-out infinite; }
@keyframes pulDiafragma { 0%, 100% { transform: translateY(-6px); } 45% { transform: translateY(8px); } }
.pul-zoom { stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.pul-lupa { fill: #fff; stroke: #94a3b8; stroke-width: 2; }
.pul-uvas circle { fill: #f59ab8; stroke: #db2777; stroke-width: 1.5; }
.pul-uvas path { stroke: #c85a64; stroke-width: 4; }
.tabaco { display: grid; gap: 10px; }
.tabaco label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; color: var(--tinta-2); }
.tabaco input { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea-2); font: inherit; font-size: 16px; }
.tab-res { display: grid; gap: 10px; }
.tab-res .cap-cifras { grid-template-columns: 1fr 1fr; }
.tab-bueno { display: flex; gap: 8px; margin: 0; font-size: 14px; color: var(--tinta-2); }
.tab-bueno svg { width: 18px; height: 18px; flex: none; color: #1f9a52; margin-top: 1px; }

/* Piel */
.piel-hipo { fill: #f7e3b5; }
.piel-grasa circle { fill: #fbeecb; stroke: #e9cf8e; stroke-width: 1.5; pointer-events: none; }
.piel-dermis { fill: #f1b8a0; }
.piel-vasos { fill: none; stroke: #c0392b; stroke-width: 2.5; opacity: .5; pointer-events: none; }
.piel-epi { fill: #f6d5c1; stroke: #d9a98d; stroke-width: 1.5; }
.piel-mela circle { fill: #6b3d1e; }
.piel-lunar { fill: #6b3d1e; }
.piel-vaina { fill: #e9a48a; stroke: #c98a6a; stroke-width: 1.5; }
.piel-bulbo { fill: #c98a6a; }
.piel-pelo { fill: none; stroke: #3b2a20; stroke-width: 4; stroke-linecap: round; }
.piel-seb circle { fill: #f5d06b; stroke: #d4a83a; stroke-width: 1.5; }
.piel-sudor path { fill: none; stroke: #3b82c4; stroke-width: 4; stroke-linecap: round; }
.piel-nervio path { fill: none; stroke: #e0b20f; stroke-width: 4; stroke-linecap: round; }
.piel-nervio circle { fill: #facc15; }
.abcde { display: grid; gap: 10px; max-width: 820px; }
.abcde fieldset { margin: 0; border: 1px solid var(--linea); border-radius: 18px; padding: 14px 16px; background: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.abcde legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 15.5px; color: var(--tinta); }
.abcde legend b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grad); color: #fff; margin-right: 8px; }
.abcde-ej { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gris); margin-right: auto; }
.abcde-ej svg { width: 54px; height: 36px; }
.lun-bien { fill: #8a5a35; } .lun-mal { fill: #4a2a14; }
.abcde label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea-2); font-weight: 700; font-size: 14px; cursor: pointer; }
.abcde label:has(input:checked) { border-color: var(--azul); background: var(--celeste, #eef4ff); }
.abcde input { accent-color: var(--azul); }

/* Digestivo */
.dig-esofago { fill: none; stroke: #f4a3a8; stroke-width: 10; stroke-linecap: round; }
.dig-higado { fill: #9b3b2f; stroke: #fff; stroke-width: 2.5; }
.dig-vesicula { fill: #4d9e3a; stroke: #fff; stroke-width: 2; }
.dig-estomago { fill: #f2a37a; stroke: #fff; stroke-width: 2.5; }
.dig-pancreas { fill: #f5c56b; stroke: #fff; stroke-width: 2; }
.dig-colon { fill: none; stroke: #c9824f; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.dig-delgado { fill: none; stroke: #f2b38d; stroke-width: 10; stroke-linecap: round; }
.dig-apendice { fill: none; stroke: #b56a3a; stroke-width: 7; stroke-linecap: round; }
.dig-regiones rect { fill: rgba(21,94,239,.06); stroke: rgba(21,94,239,.35); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dig-regiones rect:hover, .dig-regiones rect.sel { fill: rgba(229,72,77,.22); stroke: var(--rojo); stroke-dasharray: none; }
.dig-ombligo { fill: #c98a6a; pointer-events: none; }
.dig-reg-txt text { font: 700 10px "Plus Jakarta Sans", sans-serif; fill: var(--tinta-2); text-anchor: middle; pointer-events: none; }
[data-modo="organos"] .dig-regiones, [data-modo="dolor"] .dig-organos { display: none; }
[data-modo="dolor"] .dig-svg .uro-fondo { fill: #f6dccd; }
@media (prefers-reduced-motion: reduce) { .pul-respira, .pul-diafragma { animation: none; } }