:root { --tx: #1d1d1f; --tx2: #6e6e73; --bg2: #f5f5f7; --neg: #000; --r: 22px; --sec: clamp(72px, 10vw, 140px); --sp: cubic-bezier(.32,.72,0,1); }
@view-transition { navigation: auto; }
body { background: #fff; color: var(--tx); }
main { overflow-x: clip; }
.ct { max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
.cen { text-align: center; } .cen .h, .cen .s { margin-left: auto; margin-right: auto; }
.h { font-size: clamp(36px, 5.6vw, 64px); line-height: 1.06; letter-spacing: -.028em; font-weight: 700; max-width: 18ch; }
.h1 { font-size: clamp(44px, 7.4vw, 88px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700; max-width: 14ch; }
.s { font-size: clamp(19px, 2.1vw, 26px); line-height: 1.32; letter-spacing: -.012em; color: var(--tx2); font-weight: 500; max-width: 34em; margin-top: 16px; }
.sec { padding: var(--sec) 0; } .gris { background: var(--bg2); } .neg { background: var(--neg); color: #f5f5f7; } .neg .s { color: #a1a1a6; }
.pil { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; transition: background .15s, color .15s, transform .1s ease-out; -webkit-tap-highlight-color: transparent; }
.pil:active { transform: scale(.97); }
.pil.o { background: var(--tx); color: #fff; } .pil.l { background: var(--lima); color: #000; } .pil.b { box-shadow: inset 0 0 0 1.5px currentColor; }
@media (hover: hover) and (pointer: fine) { .pil.o:hover { background: #000; } .pil.l:hover { background: #e4fa80; } .pil.b:hover { background: rgba(127,127,127,.12); } }
.cab { background: rgba(255,255,255,.72) !important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
figure { position: relative; margin: 0; } figcaption { position: absolute; right: 14px; bottom: 12px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 4px 10px; border-radius: 99px; }

/* portada */
.por2 { padding: clamp(44px, 7vw, 88px) 0 0; }
.busca2 { margin: 30px auto 0; max-width: 820px; background: #fff; border-radius: 22px; padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 50px -18px rgba(0,0,0,.22); text-align: left; }
.busca2 label { display: grid; gap: 1px; padding: 9px 16px; border-radius: 15px; cursor: pointer; transition: background .15s; } .busca2 label:active, .busca2 label:focus-within { background: var(--bg2); }
.busca2 span { font-size: 12px; font-weight: 600; color: var(--tx2); }
.busca2 select { border: 0; background: none; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--tx); outline: none; cursor: pointer; width: 100%; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; padding: 0; }
.busca2 .pil { align-self: stretch; min-height: 54px; border-radius: 16px; }
#vivo { margin-top: 14px; font-size: 15px; color: var(--tx2); min-height: 1.5em; }
.soy2 { margin-top: 6px; font-size: 17px; } .soy2 a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.fotoh { margin: clamp(32px, 5vw, 56px) auto 0; max-width: 1040px; padding: 0 clamp(20px, 4vw, 32px); }
.fotoh img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: 50% 24%; border-radius: var(--r); transform: scale(var(--e, .94)); transform-origin: 50% 100%; will-change: transform; }

/* qué es: se ilumina al leer */
.lee { font-size: clamp(32px, 5.4vw, 64px); line-height: 1.12; letter-spacing: -.028em; font-weight: 700; max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.lee span { color: #d2d2d7; transition: color .2s ease-out; } .lee span.v { color: var(--tx); } .lee .m.v { color: var(--tx); background: linear-gradient(transparent 68%, var(--lima) 68%); }
.nota2 { margin-top: 24px; color: var(--tx2); font-size: 18px; }

/* paciente / estudiante: deslizable, el selector sigue al dedo */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: #e8e8ed; border-radius: 13px; padding: 3px; margin-top: 26px; }
.seg i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.14); will-change: transform; }
.seg button { position: relative; min-height: 44px; padding: 0 clamp(16px, 3vw, 28px); font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--tx); }
.carr { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 32px; } .carr::-webkit-scrollbar { display: none; }
.pan { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 0 2px; }
.pan > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border-radius: var(--r); overflow: hidden; align-items: stretch; }
.pan .tx { padding: clamp(28px, 4.4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.pan h3 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
.pan ul { list-style: none; margin: 20px 0 26px; display: grid; gap: 12px; } .pan li { font-size: 17px; line-height: 1.35; color: var(--tx2); padding-left: 24px; position: relative; } .pan li::before { content: ''; position: absolute; left: 0; top: .48em; width: 10px; height: 10px; border-radius: 50%; background: var(--lima); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.pan .pil { margin-top: auto; } .pan figure { min-height: 320px; } .pan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* diagrama */
.dgg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); margin-top: clamp(32px, 5vw, 56px); align-items: center; }
.tls { display: grid; gap: 2px; text-align: left; }
.tls button { text-align: left; padding: 13px 18px; border-radius: 14px; font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; letter-spacing: -.015em; color: #a1a1a6; transition: background .15s, color .15s, transform .1s ease-out; -webkit-tap-highlight-color: transparent; } .tls button:active { transform: scale(.98); }
.tls button[aria-pressed="true"] { background: #1c1c1e; color: #fff; }
@media (hover: hover) and (pointer: fine) { .tls button:hover { color: #fff; } }
.lam { display: block; width: 100%; max-height: 62vh; margin: 0 auto; }
.lam .gr { transition: transform .55s var(--sp), opacity .3s; transform-box: view-box; transform-origin: 200px 240px; }
.lam .pz { transition: fill .25s, stroke .25s, opacity .25s, transform .55s var(--sp); transform-box: view-box; stroke: #6e6e73; stroke-width: 1.6; }
.lam .hueso { fill: #101012; stroke: none; } .lam .encia { fill: #2c2c2e; } .lam .raiz { fill: #1c1c1e; } .lam .dent { fill: #2c2c2e; } .lam .pulpa { fill: #48484a; } .lam .esm { fill: #d1d1d6; stroke: #d1d1d6; } .lam .caries { fill: var(--lima); stroke: none; opacity: 0; } .lam .flecha { fill: none; stroke: var(--lima); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s; } .lam .base { fill: var(--lima); stroke: none; opacity: 0; }
.lam[data-z="general"] .caries { opacity: 1; }
.lam[data-z="periodoncia"] .encia { fill: var(--lima); stroke: var(--lima); }
.lam[data-z="endodoncia"] .pulpa { fill: var(--lima); stroke: var(--lima); } .lam[data-z="endodoncia"] .esm { opacity: .45; }
.lam[data-z="exodoncia"] .diente { transform: translateY(-58px); } .lam[data-z="exodoncia"] .flecha { opacity: 1; }
.lam[data-z="exodoncia_pabellon"] .diente { transform: translateY(-74px) rotate(-7deg); } .lam[data-z="exodoncia_pabellon"] .flecha { opacity: 1; } .lam[data-z="exodoncia_pabellon"] .encia { fill: var(--lima); stroke: var(--lima); opacity: .75; }
.lam[data-z="protesis"] .esm { fill: var(--lima); stroke: var(--lima); transform: translateY(-34px); } .lam[data-z="protesis"] .base { opacity: 1; }
.lam[data-z="odontopediatria"] .diente { transform: scale(.74) translateY(46px); } .lam[data-z="odontopediatria"] .esm { fill: var(--lima); stroke: var(--lima); }
.tinfo { margin-top: 14px; text-align: center; min-height: 118px; } .tinfo b { display: block; color: var(--lima); font-size: 14px; font-weight: 600; } .tinfo p { margin: 6px auto 12px; font-size: 18px; line-height: 1.35; color: #f5f5f7; max-width: 34ch; } .tinfo a { font-size: 17px; font-weight: 600; color: var(--lima); text-decoration: underline; text-underline-offset: 4px; }
.aclara3 { margin-top: 34px; font-size: 13px; color: #86868b; text-align: center; }

/* cómo funciona */
.pasos3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 5vw, 56px); text-align: left; }
.pa3 { background: #fff; border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 8px; }
.pa3 b { font-size: 26px; letter-spacing: -.022em; } .pa3 p { color: var(--tx2); font-size: 16px; line-height: 1.38; }
.pa3 .mk { margin-top: auto; padding-top: 20px; display: grid; gap: 9px; }
.mk .et { font-size: 12px; font-weight: 600; color: var(--tx2); } .mk .val { font-size: 16px; font-weight: 600; padding: 10px 12px; background: var(--bg2); border-radius: 10px; } .mk .bt { background: var(--tx); color: #fff; border-radius: 99px; min-height: 42px; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.mk .per { display: flex; gap: 10px; align-items: center; } .mk .ini { width: 42px; height: 42px; border-radius: 50%; background: var(--lima); display: grid; place-items: center; font-weight: 700; flex: none; font-size: 14px; } .mk .per b { display: block; font-size: 16px; letter-spacing: -.01em; } .mk .per small { color: var(--tx2); font-size: 13px; }
.mk .sem { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; } .mk .sem i { font-style: normal; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 0; border-radius: 7px; background: var(--bg2); color: var(--tx2); } .mk .sem i.s { background: var(--tx); color: #fff; } .mk .ej { font-size: 12px; color: var(--tx2); }
.mk .chk { display: flex; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.3; } .mk .chk svg { width: 19px; height: 19px; flex: none; color: var(--ok); }

/* planes */
.pgr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 5vw, 56px); text-align: left; }
.pc { background: var(--bg2); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 6px; } .pc.u { background: #000; color: #f5f5f7; }
.pc h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .pc .pr { font-size: clamp(36px, 4vw, 44px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 10px; } .pc .pr small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--tx2); } .pc.u .pr small { color: #a1a1a6; }
.pc ul { list-style: none; margin: 14px 0 24px; display: grid; gap: 9px; font-size: 15px; line-height: 1.32; color: var(--tx2); } .pc.u ul { color: #d1d1d6; } .pc .pil { margin-top: auto; }
.etq { display: inline-block; align-self: flex-start; background: var(--lima); color: #000; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; margin-bottom: 6px; }
.dest { margin-top: 14px; background: var(--bg2); border-radius: var(--r); padding: 22px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; text-align: left; } .dest b { font-size: 20px; letter-spacing: -.015em; } .dest p { color: var(--tx2); font-size: 15px; margin-top: 2px; }
.nota3 { margin-top: 18px; font-size: 13px; color: #86868b; text-align: center; }

/* confianza y preguntas */
.cg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 5vw, 56px); text-align: left; } .cg > div { background: #fff; border-radius: var(--r); padding: 28px; } .cg h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .cg p { margin-top: 8px; color: var(--tx2); font-size: 16px; line-height: 1.4; }
.cg-f { grid-column: 1 / -1; padding: 0 !important; overflow: hidden; } .cg-f img { width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block; }
.faq3 { max-width: 760px; margin: clamp(28px, 4vw, 48px) auto 0; text-align: left; } .faq3 details { border-bottom: 1px solid #d2d2d7; } .faq3 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 0; font-size: 19px; font-weight: 600; letter-spacing: -.012em; } .faq3 summary::-webkit-details-marker { display: none; } .faq3 summary svg { width: 20px; height: 20px; flex: none; color: var(--tx2); transition: transform .2s var(--sp); } .faq3 details[open] summary svg { transform: rotate(45deg); } .faq3 p { padding: 0 0 22px; color: var(--tx2); font-size: 17px; line-height: 1.45; }
.fin3 .fila { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }

@media (max-width: 760px) {
  .busca2 { grid-template-columns: minmax(0, 1fr); } .busca2 .pil { margin-top: 4px; }
  .fotoh img { aspect-ratio: 4/3; }
  .pan > div { grid-template-columns: minmax(0, 1fr); } .pan figure { order: -1; min-height: 0; aspect-ratio: 16/10; } .pan .pil { margin-top: 0; }
  .dgg { grid-template-columns: minmax(0, 1fr); gap: 14px; } .dgv { order: -1; } .lam { max-height: 42svh; }
  .tls { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px; scroll-snap-type: x proximity; } .tls::-webkit-scrollbar { display: none; }
  .tls button { flex: none; font-size: 15px; padding: 10px 15px; background: #1c1c1e; border-radius: 99px; color: #d1d1d6; scroll-snap-align: center; } .tls button[aria-pressed="true"] { background: var(--lima); color: #000; }
  .pasos3, .pgr, .cg { grid-template-columns: minmax(0, 1fr); } .dest .pil { width: 100%; }
  .cg-f img { aspect-ratio: 16/10; }
}
@media (prefers-reduced-motion: reduce) { .fotoh img { transform: none; } .lam .gr, .lam .pz { transition: fill .2s, opacity .2s; } .lee span { color: var(--tx); } }
@media (prefers-reduced-transparency: reduce) { .cab { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }