/* Estilos comunes de las páginas de ventas (portada, dental, nutrición) */
:root { --bg:#f6faf9; --card:#fff; --tx:#0e2a27; --mut:#5b7370; --bd:#e3ecea; --pri:#0f8f84; --pri2:#0b6f66; --chip:#e7f4f2; }
@media (prefers-color-scheme: dark) { :root { --bg:#0c1615; --card:#132220; --tx:#e4f2f0; --mut:#8fb0ab; --bd:#24403c; --pri:#2cc7b8; --pri2:#4fd9ca; --chip:#1a3330; } }
* { box-sizing:border-box } body { margin:0; background:var(--bg); color:var(--tx); font:17px/1.55 "Instrument Sans",system-ui,sans-serif }
main { max-width:1040px; margin:0 auto; padding:0 18px 40px }
nav { display:flex; align-items:center; justify-content:space-between; padding:18px 0 }
.marca { display:flex; align-items:center; gap:10px; font-weight:700; font-size:19px; color:var(--tx); text-decoration:none }
.marca img { width:40px; height:40px; border-radius:11px }
a.btn, .btn { display:inline-block; background:var(--pri); color:#fff; text-decoration:none; font-weight:700; padding:13px 22px; border-radius:14px }
@media (prefers-color-scheme: dark) { a.btn { color:#04302b } }
a.sec { color:var(--pri2); font-weight:600; text-decoration:none }
.hero { text-align:center; padding:40px 0 30px }
.hero h1 { font-size:clamp(30px,5vw,48px); line-height:1.12; margin:0 0 14px; letter-spacing:-.02em }
.hero p { color:var(--mut); max-width:640px; margin:0 auto 22px; font-size:19px }
.nota { color:var(--mut); font-size:14px; margin-top:10px }
h2 { font-size:28px; text-align:center; margin:46px 0 18px }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px }
.card { background:var(--card); border:1px solid var(--bd); border-radius:20px; padding:20px }
.card h3 { margin:0 0 6px; font-size:18px } .card p { margin:0; color:var(--mut); font-size:15px }
.ic { width:42px; height:42px; border-radius:12px; background:var(--chip); color:var(--pri2); display:grid; place-items:center; font-size:21px; margin-bottom:10px }
.precios .card { text-align:center } .precio { font-size:38px; font-weight:700; margin:6px 0 0 } .precios small { color:var(--mut) }
.precios .card.top { border:2px solid var(--pri) } .etq { display:inline-block; background:var(--pri); color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:99px }
ul.lista { columns:2 260px; padding-left:20px; color:var(--mut) } ul.lista li { margin:4px 0 }
footer { border-top:1px solid var(--bd); margin-top:50px; padding:22px 0; color:var(--mut); font-size:14px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between }
footer a { color:var(--mut) }
.esp { display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit }
.esp .ic { font-size:24px } .esp.pronto { opacity:.6 } .esp b.ir { color:var(--pri2) }