/* Páginas por giro (stenko.mx/dentistas, /talleres…): estilo limpio, una idea por bloque. */
*, *::before, *::after { box-sizing: border-box; }
:root { --papel: #ECEEF1; --tinta: #0D1130; --gris: #5B6485; --tenue: #7C86A8; --raya: #DDE1EA; --turq: #0F8F84; --ambar: #FFA53E; --ambar-osc: #F08A1B;
  --sombra: 0 18px 50px rgba(13, 17, 48, 0.08), 0 2px 6px rgba(13, 17, 48, 0.05); }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--font-text, system-ui, sans-serif); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: inherit; } h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--turq); outline-offset: 2px; border-radius: 8px; }
.pagina { max-width: 72rem; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
.pagina > section { margin-top: clamp(3rem, 8vh, 5.5rem); }
.arriba { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font: 700 1.35rem var(--font-display, sans-serif); letter-spacing: -0.04em; }
.marca img { width: 36px; height: 36px; border-radius: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: 0.8rem 1.4rem; border-radius: 999px; background: #25D366; color: #04140B; font-weight: 700; text-decoration: none; box-shadow: 0 12px 30px rgba(37, 211, 102, 0.28); transition: transform 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn--linea { background: transparent; color: inherit; box-shadow: none; border: 2px solid var(--raya); }
.btn--linea:hover { border-color: var(--turq); }
.arriba .btn { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.fila { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.kick { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--turq); }
h1, h2 { font-family: var(--font-display, sans-serif); letter-spacing: -0.04em; line-height: 1.03; }
h1 { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.2rem); margin-top: 1rem; max-width: 15ch; }
h2 { font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem); margin-top: 0.8rem; max-width: 18ch; }
h1 span, h2 span { color: var(--ambar-osc); }
.bajada { margin-top: 1.2rem; max-width: 32rem; color: var(--gris); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }
.portada { display: grid; gap: 2.5rem; align-items: center; margin-top: clamp(1.5rem, 5vh, 3rem) !important; }
.telefono { justify-self: center; width: min(74vw, 18.5rem, (100svh - 8rem) * 0.5625); aspect-ratio: 9 / 16; border-radius: 2.2rem; overflow: hidden; background: var(--tinta); box-shadow: 0 30px 80px rgba(13, 17, 48, 0.22), 0 0 0 9px #fff, 0 0 0 10px var(--raya); }
.telefono video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 56rem) { .portada { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; } }
.tres { display: grid; gap: 1rem; margin-top: 1.6rem; }
@media (min-width: 50rem) { .tres { grid-template-columns: repeat(3, 1fr); } }
.tj { padding: 1.5rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--sombra); }
.tj i { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--papel); font-style: normal; font-size: 1.5rem; }
.tj h3 { font: 700 1.4rem/1.12 var(--font-display, sans-serif); letter-spacing: -0.03em; margin-top: 0.8rem; }
.tj p { margin-top: 0.5rem; color: var(--gris); }
.dolor .hora { font: 800 0.76rem var(--font-text, sans-serif); letter-spacing: 0.14em; color: #E8452C; margin: 0; }
.dolor h3 { margin-top: 0.6rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.hace { display: grid; gap: 0.7rem; margin-top: 1.6rem; }
.hace li { display: flex; gap: 0.75rem; font-weight: 600; font-size: 1.05rem; }
.hace li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; border-radius: 50%; background: var(--turq); color: #fff; font-size: 0.85rem; font-weight: 800; }
.cierre { padding: clamp(2rem, 6vw, 3.5rem); border-radius: 2rem; background: var(--tinta); color: #F5F6F8; display: grid; gap: 1.1rem; justify-items: start; }
.cierre h2 { margin: 0; } .cierre h2 span { color: var(--ambar); } .cierre p { color: #B5BBD3; max-width: 32rem; }
.nota { margin-top: 1.6rem; text-align: center; font-size: 0.82rem; color: var(--tenue); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }