:root {
  --tinta: oklch(0.21 0.025 228);
  --tinta-2: oklch(0.24 0.03 228);
  --tinta-3: oklch(0.3 0.03 228);
  --tinta-numero: oklch(0.34 0.03 228);
  --tinta-35: oklch(0.21 0.025 228 / 0.35);
  --tinta-40: oklch(0.21 0.025 228 / 0.4);
  --logo: #1c546c;
  --logo-hover: #16465b;
  --obturado-hover: oklch(0.66 0.11 240);
  --texto: oklch(0.28 0.01 250);
  --texto-medio: oklch(0.34 0.01 250);
  --texto-suave: oklch(0.42 0.01 250);
  --texto-tenue: oklch(0.55 0.01 250);
  --acento: oklch(0.45 0.09 213);
  --acento-hover: oklch(0.34 0.08 213);
  --fondo: oklch(0.985 0.005 213);
  --fondo-hero: oklch(0.935 0.028 212);
  --fondo-seguridad: oklch(0.955 0.022 213);
  --borde: oklch(0.9 0.01 213);
  --borde-azul: oklch(0.9 0.02 213);
  --linea: oklch(0.9 0.008 250);
  --contacto-boton: oklch(0.62 0.1 205);
  --contacto-boton-hover: oklch(0.56 0.1 205);
  --contacto-texto: oklch(0.8 0.015 225);
  --diente-borde: oklch(0.4 0.03 228);
  --sano: oklch(0.97 0.01 213);
  --caries: oklch(0.68 0.16 55);
  --obturado: oklch(0.6 0.11 240);
  --roto: oklch(0.58 0.19 22);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--fondo);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  color: var(--texto);
}
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Header */
.cabecera { background: var(--fondo-hero); color: var(--tinta); }
.barra { background: var(--logo); }
.barra :focus-visible { outline-color: #fff; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 16px 0; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; }
.marca:hover { color: #fff; text-decoration: none; }
.marca img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
.marca span { font-size: 17px; font-weight: 600; letter-spacing: 0.14em; }
.nav-enlaces { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.nav-enlaces .seccion { color: #fff; font-size: 14.5px; }
.nav-enlaces .seccion:hover { color: #fff; }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 500; white-space: nowrap; text-decoration: none;
}
.boton:hover { text-decoration: none; }
.boton-grande { height: 52px; padding: 0 24px; font-size: 16px; }
.boton-oscuro { background: var(--logo); color: #fff; }
.boton-oscuro:hover { background: var(--logo-hover); color: #fff; }
.boton-borde { border-color: var(--tinta-40); color: var(--tinta); }
.boton-borde:hover { border-color: var(--tinta); color: var(--tinta); }
.boton-blanco { background: #fff; color: var(--logo); font-weight: 600; }
.boton-blanco:hover { background: var(--fondo-hero); color: var(--logo-hover); }
.boton-llamada { background: var(--obturado); color: #fff; font-weight: 600; }
.boton-llamada:hover { background: var(--obturado-hover); color: #fff; }
.boton-claro { background: var(--contacto-boton); color: #fff; align-self: flex-start; }
.boton-claro:hover { background: var(--contacto-boton-hover); color: #fff; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding: 56px 0 96px; }
.hero-texto { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.antetitulo {
  margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.antetitulo-acento { color: var(--acento); font-weight: 400; }
.hero h1 { margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; text-wrap: pretty; }
.hero-bajada { margin: 0; max-width: 500px; font-size: 18px; line-height: 1.6; color: var(--tinta-3); text-wrap: pretty; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }

.hero-arco { flex: 0 1 504px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 auto; }
.etiqueta-ejemplo { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }

/* Hero odontogram, drawn by main.js */
.arco { position: relative; width: 100%; max-width: 504px; }
.arco svg { display: block; width: 100%; height: auto; overflow: visible; }
.diente { cursor: pointer; outline: none; }
.diente .zona { fill: transparent; }
.diente .pieza { transform-box: fill-box; transform-origin: center; transition: transform 160ms ease; }
.diente.activo .pieza { transform: scale(1.22); }
.contorno { fill: none; stroke: var(--diente-borde); stroke-width: 1.3; stroke-linejoin: round; }
.diente.ausente .contorno { stroke-dasharray: 5 4; stroke-width: 1.4; }
.diente.activo .contorno { stroke: var(--tinta); stroke-width: 3; }
.diente:focus-visible .contorno { stroke: var(--acento); stroke-width: 3; }
.divisiones { fill: none; stroke: oklch(0.78 0.01 240); stroke-width: 0.9; }
.cruz { stroke: oklch(0.55 0.02 230); stroke-width: 1.8; stroke-linecap: round; }
.numero { font-family: var(--mono); font-size: 10px; fill: var(--tinta-numero); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.numero.activo { fill: var(--tinta); }
.estado-sano { fill: var(--sano); }
.estado-caries { fill: var(--caries); }
.estado-obturado { fill: var(--obturado); }
.estado-roto { fill: var(--roto); }
@media (prefers-reduced-motion: reduce) { .diente .pieza { transition: none; } }

.ficha {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 230px; min-height: 184px;
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  border-radius: 10px; background: #fff; border: 1px solid var(--borde-azul);
  box-shadow: 0 10px 30px oklch(0.21 0.025 228 / 0.12); pointer-events: none;
}
.ficha-titulo { display: flex; align-items: baseline; gap: 10px; }
.ficha-n { font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1; color: var(--tinta); }
.ficha-nombre { font-size: 12.5px; line-height: 1.35; color: var(--tinta-3); }
.ficha-caras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ficha-caras li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ficha-caras .cara { flex: 1; color: var(--tinta-3); }
.ficha-caras .estado { font-weight: 500; color: var(--tinta); }
.ficha-caras .estado.es-sano { font-weight: 400; color: oklch(0.5 0.01 250); }

.muestra { width: 11px; height: 11px; border-radius: 3px; flex: none; display: inline-block; }
.muestra-sano { background: var(--sano); border: 1px solid oklch(0.21 0.025 228 / 0.3); }
.muestra-caries { background: var(--caries); }
.muestra-obturado { background: var(--obturado); }
.muestra-roto { background: var(--roto); }
.muestra-ausente { background: oklch(0.45 0.02 228); }
.leyenda { display: flex; gap: 10px 18px; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--tinta-2); }
.leyenda li { display: flex; align-items: center; gap: 7px; }
.leyenda .pista { color: var(--tinta-3); }

/* Features */
.seccion-funciones { padding-top: 120px; padding-bottom: 40px; }
.encabezado { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.titulo { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
.funciones { display: flex; flex-direction: column; gap: 112px; margin-top: 112px; }
.funcion { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.funcion.invertida { flex-wrap: wrap-reverse; }
.funcion-texto { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.funcion h3 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
.funcion-texto > p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--texto-suave); text-wrap: pretty; }
.puntos { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 9px; }
.puntos li { display: flex; gap: 10px; font-size: 15px; color: var(--texto-medio); }
.puntos li::before { content: '—'; color: var(--acento); }
.ilustracion { flex: 1.3 1 440px; min-width: 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: #fff; }
.ilustracion svg { display: block; width: 100%; height: 100%; }

/* Illustrations */
.il-texto { font-family: var(--sans); font-size: 13px; fill: var(--texto-suave); }
.il-texto-fuerte { font-family: var(--sans); font-size: 14px; font-weight: 600; fill: var(--tinta); }
.il-mono { font-family: var(--mono); font-size: 11.5px; fill: var(--texto-tenue); }
.il-pill-texto { font-family: var(--sans); font-size: 11.5px; font-weight: 500; fill: var(--tinta); }
.il-linea { fill: none; stroke: var(--borde); stroke-width: 1.5; }
.il-tarjeta { fill: #fff; stroke: var(--borde); stroke-width: 1; }
.il-celda { fill: oklch(0.975 0.006 213); stroke: var(--borde); stroke-width: 1; }
.il-tinta { fill: var(--tinta); }
.il-acento { fill: var(--acento); }
.il-acento-claro { fill: oklch(0.72 0.09 205); }
.il-suave { fill: oklch(0.93 0.03 212); }
.il-suave-oscuro { fill: oklch(0.82 0.03 220); }
.il-turno { fill: oklch(0.82 0.06 210); }
.il-turno-fuerte { fill: var(--acento); }
.il-pill-ok { fill: oklch(0.93 0.06 160); }
.il-pill-deuda { fill: oklch(0.94 0.06 75); }

/* Security */
.seguridad { background: var(--fondo-seguridad); margin-top: 100px; }
.seguridad .contenedor { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 44px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.tarjeta { background: #fff; border: 1px solid var(--borde-azul); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta h3 { margin: 0; font-size: 17px; font-weight: 600; }
.tarjeta p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texto-suave); }

/* FAQ */
.preguntas { max-width: 860px; margin: 0 auto; padding: 110px 32px 40px; display: flex; flex-direction: column; gap: 36px; }
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 68px; padding: 14px 0; cursor: pointer; list-style: none;
  font-size: 17.5px; font-weight: 500; color: var(--texto);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; color: var(--acento); transition: transform 160ms ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: oklch(0.38 0.09 213); }
.faq p { margin: 0; padding: 0 40px 22px 0; font-size: 15.5px; line-height: 1.65; color: var(--texto-suave); text-wrap: pretty; }

/* Contact */
.contacto { padding-top: 100px; padding-bottom: 110px; }
.contacto-caja { display: flex; flex-wrap: wrap; gap: 56px; background: var(--tinta); color: oklch(0.96 0.008 213); border-radius: 18px; padding: 56px; }
.contacto-texto { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.contacto-texto p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--contacto-texto); max-width: 420px; }
.contacto-datos { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; font-family: var(--mono); font-size: 14px; color: var(--contacto-texto); }
.contacto-datos a { color: inherit; }
.pasos { flex: 1 1 380px; min-width: 0; margin: 0; padding: 28px 26px; list-style: none; counter-reset: paso; background: #fff; color: var(--texto); border-radius: 12px; display: flex; flex-direction: column; gap: 22px; }
.pasos li { display: flex; gap: 16px; counter-increment: paso; }
.pasos li::before { content: counter(paso, decimal-leading-zero); flex: none; padding-top: 2px; font-family: var(--mono); font-size: 13px; color: var(--acento); }
.pasos h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 600; }
.pasos p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--texto-suave); }

/* Footer */
.pie { border-top: 1px solid oklch(0.91 0.008 250); }
.pie .contenedor { padding-top: 28px; padding-bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: oklch(0.52 0.01 250); }
.pie-marca { display: flex; align-items: center; gap: 10px; }
.pie-marca img { height: 22px; width: auto; display: block; }
.pie-marca span { font-weight: 600; letter-spacing: 0.14em; color: oklch(0.34 0.06 213); }
.pie-datos { display: flex; gap: 8px 22px; flex-wrap: wrap; }

/* 404 */
.error { max-width: 640px; margin: 0 auto; padding: 120px 32px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.error p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto-suave); }

/* Narrow screens */
@media (max-width: 760px) {
  .nav-enlaces .seccion { display: none; }
}
@media (max-width: 560px) {
  .contenedor { padding: 0 16px; }
  .hero { padding: 32px 0 64px; gap: 40px; }
  .ficha { position: static; transform: none; width: 100%; max-width: 300px; margin: 8px auto 0; }
  .seccion-funciones { padding-top: 80px; }
  .funciones { gap: 72px; margin-top: 56px; }
  .funcion { gap: 28px; }
  .seguridad { margin-top: 64px; }
  .seguridad .contenedor { padding-top: 64px; padding-bottom: 64px; }
  .preguntas { padding: 80px 16px 24px; }
  .faq p { padding-right: 0; }
  .contacto { padding-top: 64px; padding-bottom: 72px; }
  .contacto-caja { padding: 32px 22px; gap: 36px; }
  .pasos { padding: 24px 20px; }
}