/* Método Dentur — estilos base. Sin frameworks, CSS a mano, mobile-first. */

:root{
  /* Paleta editorial: tinta cálida + papel + un único acento de alto impacto
     (coral-señal) + un acento secundario (lima ácida) para no caer en el
     "todo morado" genérico de IA. */
  --ink: #15130f;
  --ink-soft: #211d16;
  --ink-soft-2: #2a241a;
  --paper: #fbf7ee;
  --paper-dim: #f1e9d8;
  --line: rgba(21,19,15,.12);
  --line-on-ink: rgba(251,247,238,.14);
  --accent: #ff4d2e;
  --accent-ink: #2a0d05;
  --accent-2: #d7ff4d;
  --good: #1c8b5b;
  --muted: #6b6457;
  --muted-on-ink: #b8b0a0;

  --maxw: 1120px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(21,19,15,.06), 0 12px 32px -16px rgba(21,19,15,.18);
  --shadow-ink: 0 20px 60px -24px rgba(0,0,0,.55);

  --ff-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body{
  margin: 0;
  font-family: var(--ff-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg{ display:block; max-width: 100%; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3{
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}

p{ margin: 0; }

.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Iconos (sprite SVG inline, sin librerías) ---------- */
.icon{
  width: 18px; height: 18px;
  flex: none;
  display: inline-block;
  vertical-align: -3px;
  color: currentColor;
}

/* ---------- Botones ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.02rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 18px -8px rgba(255,77,46,.4);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(255,77,46,.45); }
.btn-ghost-ink{
  background: transparent;
  border-color: var(--line-on-ink);
  color: var(--paper);
}
.btn-ghost-ink:hover{ border-color: var(--paper); }
.btn-ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--ink); }
.btn-block{ width: 100%; }
.btn-lg{ padding: 19px 32px; font-size: 1.12rem; }

/* ---------- Barra de aviso superior ---------- */
.announce{
  background: var(--ink);
  color: var(--paper);
  font-size: .86rem;
  text-align: center;
  padding: 10px 16px;
}
.announce strong{ color: var(--accent-2); }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,247,238,.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .container{
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--ff-display); font-weight: 800; font-size: 1.1rem; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background: var(--accent); flex: none; }
.nav-links{ display: none; align-items: center; gap: 28px; font-weight: 600; font-size: .95rem; }
.nav-links a{ opacity: .8; }
.nav-links a:hover{ opacity: 1; }
.nav-cta{ display:none; }
.nav-toggle{ display:none; }
.nav-burger{
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; cursor: pointer;
}
.nav-burger span{ height: 2px; background: var(--ink); display:block; }
.nav-mobile{
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 20px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.nav-mobile a{ padding: 12px 4px; font-weight: 600; border-bottom: 1px solid var(--line); }
.nav-toggle:checked ~ .nav-mobile{ display: flex; }

@media (min-width: 860px){
  .nav-links{ display: flex; }
  .nav-cta{ display: inline-flex; }
  .nav-burger{ display: none; }
  .nav-mobile{ display: none !important; }
}

/* ---------- Secciones ---------- */
section{ padding: 88px 0; }
.section-ink{ background: var(--ink); color: var(--paper); }
.section-dim{ background: var(--paper-dim); }
.eyebrow{
  display: inline-flex; align-items:center; gap:10px;
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before{ content:""; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }
.section-ink .eyebrow{ color: var(--accent-2); }
.section-ink .eyebrow::before{ background: var(--accent-2); }
.section-head{ max-width: 680px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.6rem); }
.section-head p{ margin-top: 14px; color: var(--muted); font-size: 1.08rem; }
.section-ink .section-head p{ color: var(--muted-on-ink); }

/* ---------- Hero ---------- */
.hero{
  padding-top: 56px; padding-bottom: 0;
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  background-image: radial-gradient(rgba(251,247,238,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-top{
  position: relative;
  display: grid;
  gap: 48px;
  align-items: center;
  padding-bottom: 60px;
}
@media (min-width: 920px){
  .hero-top{ grid-template-columns: 1.08fr .92fr; }
}
.hero h1{
  font-size: clamp(2.2rem, 1.3rem + 4.6vw, 3.6rem);
  color: var(--paper);
}
.hero .sub{
  margin-top: 18px;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.3rem);
  color: var(--muted-on-ink);
  max-width: 520px;
}
.hero-price{
  margin-top: 28px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  color: var(--paper);
}
.hero-price .now{ font-family: var(--ff-display); font-size: 2.1rem; font-weight: 800; color: var(--accent-2); }
.hero-price .was{ text-decoration: line-through; color: var(--muted-on-ink); font-size: 1.1rem; }
.hero-price .tag{ font-size: .85rem; color: var(--muted-on-ink); }
.hero-ctas{ margin-top: 26px; display:flex; gap: 14px; flex-wrap: wrap; }
.hero-trust{ margin-top: 18px; font-size: .85rem; color: var(--muted-on-ink); display:flex; align-items:center; gap:8px; }
.hero-trust .icon{ color: var(--accent-2); }

/* Visual del hero: halo contenido detrás del teléfono (no todo el fondo) */
.hero-visual{ position: relative; display:flex; justify-content:center; }
.hero-visual::before{
  content:"";
  position:absolute; inset: 6% 12%;
  background: radial-gradient(50% 50% at 50% 45%, rgba(255,77,46,.4), transparent 72%);
  filter: blur(36px);
  z-index: 0;
}

/* Mockup de teléfono 100% CSS, sin imágenes */
.phone{
  position: relative; z-index: 1;
  width: min(272px, 70vw);
  margin: 0 auto;
  aspect-ratio: 9/18.5;
  border-radius: 36px;
  background: linear-gradient(180deg, #1f1b13, #0c0a07);
  border: 2px solid rgba(251,247,238,.14);
  box-shadow: var(--shadow-ink);
  padding: 8px;
}
.phone .screen{
  position: relative;
  width: 100%; height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(165deg, #3a1710 0%, #22130f 38%, #141019 75%);
}
.phone .statusbar{
  position:absolute; top:10px; left:18px; right:18px;
  display:flex; justify-content:flex-end; gap:4px;
}
.phone .statusbar span{ width:4px; height:4px; border-radius:50%; background: rgba(251,247,238,.5); }
.phone .notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34%; height:14px; background:#000; border-radius: 10px; }
.phone .cap{
  position:absolute; left:14px; right:44px; bottom:84px;
  font-size: .72rem; color:#fff; font-weight:700; line-height:1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.phone .wave{ position:absolute; left:14px; bottom:62px; display:flex; align-items:flex-end; gap:3px; height:16px; }
.phone .wave span{ width:3px; background: var(--accent-2); border-radius: 2px; animation: wave 1.1s ease-in-out infinite; }
.phone .wave span:nth-child(2){ animation-delay:.1s;} .phone .wave span:nth-child(3){ animation-delay:.2s;}
.phone .wave span:nth-child(4){ animation-delay:.3s;} .phone .wave span:nth-child(5){ animation-delay:.4s;}
.phone .wave span:nth-child(6){ animation-delay:.5s;} .phone .wave span:nth-child(7){ animation-delay:.6s;}
@keyframes wave{ 0%,100%{ height:5px; } 50%{ height:16px; } }
.phone .side{
  position:absolute; right:12px; bottom:94px; display:flex; flex-direction:column; align-items:center; gap:15px;
  color:#fff;
}
.phone .side .pill{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.64rem; font-weight:700; }
.phone .pill-ico{ width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.phone .pill-ico .icon{ width:14px; height:14px; vertical-align: baseline; }
.phone .counter{
  position:absolute; left:14px; top:30px; font-size:.68rem; font-weight:800; color:#fff;
  background: rgba(0,0,0,.4); padding: 5px 9px; border-radius: 999px; letter-spacing:.02em;
  display:flex; align-items:center; gap:5px;
}
.phone .counter .icon{ width:11px; height:11px; vertical-align: baseline; }
.phone .counter b{ color: var(--accent-2); }

/* ---------- Barra de plataformas ---------- */
.platform-bar{
  position: relative; z-index: 1;
  display:flex; align-items:center; gap: 16px; flex-wrap: wrap;
  padding-top: 26px; padding-bottom: 26px;
  border-top: 1px solid var(--line-on-ink);
}
.pb-label{ font-size: .82rem; font-weight: 600; color: var(--muted-on-ink); flex: none; }
.pb-chips{ display:flex; gap: 10px; flex-wrap: wrap; }
.pb-chip{
  font-size: .82rem; font-weight: 700; color: var(--paper);
  border: 1px solid var(--line-on-ink); border-radius: 999px; padding: 6px 14px;
}

/* ---------- Stat strip ---------- */
.stats{ display:grid; gap: 18px; grid-template-columns: repeat(3,1fr); }
.stat{ text-align: center; padding: 30px 12px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--line); }
.stat-ico{ width: 22px; height: 22px; margin: 0 auto 10px; color: var(--accent); }
.stat .num{ font-family: var(--ff-display); font-size: clamp(1.7rem, 1.1rem + 2vw, 2.4rem); font-weight: 800; color: var(--ink); }
.stat .lbl{ margin-top: 6px; font-size: .88rem; color: var(--muted); }
@media (max-width: 640px){ .stats{ grid-template-columns: 1fr; } }

/* ---------- Autoselección: Sí, si... / No, si... ---------- */
.fit-grid{ display:grid; gap: 20px; }
@media (min-width: 760px){ .fit-grid{ grid-template-columns: 1fr 1fr; } }
.fit-col{ padding: 26px; border-radius: var(--radius-lg); }
.fit-col.yes{ background: var(--paper); border: 1px solid var(--line); }
.fit-col.no{ background: var(--paper-dim); border: 1px dashed var(--line); }
.fit-col h3{ font-size: 1.05rem; margin-bottom: 14px; }
.fit-col.yes h3{ color: var(--good); }
.fit-col.no h3{ color: var(--muted); }
.fit-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 12px; }
.fit-col li{ display:flex; gap: 10px; align-items:flex-start; font-weight: 600; font-size: .96rem; }
.fit-col .ico{ flex:none; margin-top: 2px; }
.fit-col.yes .ico{ color: var(--good); }
.fit-col.no li{ color: var(--muted); font-weight: 500; }
.fit-col.no .ico{ color: var(--muted); }

/* ---------- Pasos ---------- */
.steps{ display:grid; gap: 22px; position: relative; }
@media (min-width: 760px){ .steps{ grid-template-columns: repeat(3,1fr); } }
.step{ padding: 26px; border-radius: var(--radius-lg); background: var(--ink-soft); border: 1px solid var(--line-on-ink); position: relative; }
.step .n{ font-family: var(--ff-display); font-size: 2.4rem; font-weight: 800; color: var(--accent-2); }
.step h3{ margin-top: 10px; font-size: 1.15rem; color: var(--paper); }
.step p{ margin-top: 8px; color: var(--muted-on-ink); font-size: .96rem; }

/* ---------- Features ---------- */
.features{ display:grid; gap: 18px; grid-template-columns: repeat(3,1fr); }
@media (max-width: 920px){ .features{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .features{ grid-template-columns: 1fr; } }
.feature{
  padding: 24px; border-radius: var(--radius-lg); background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.feature.is-bonus{ background: var(--ink); color: var(--paper); border-color: var(--line-on-ink); }
.f-ico{
  display:flex; align-items:center; justify-content:center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--paper-dim); color: var(--accent);
}
.feature.is-bonus .f-ico{ background: rgba(251,247,238,.1); color: var(--accent-2); }
.f-ico .icon{ width: 20px; height: 20px; }
.feature h3{ margin-top: 16px; font-size: 1.05rem; }
.feature p{ margin-top: 8px; color: var(--muted); font-size: .94rem; }
.feature.is-bonus p{ color: var(--muted-on-ink); }
.badge-bonus{
  display:inline-flex; margin-bottom: 10px; font-size:.72rem; font-weight:800; letter-spacing:.06em;
  text-transform: uppercase; color: var(--accent-ink); background: var(--accent-2);
  padding: 4px 10px; border-radius: 999px;
}

/* ---------- Resultados ---------- */
.results{ display:grid; gap: 18px; }
@media (min-width: 760px){ .results{ grid-template-columns: repeat(3,1fr); } }
.result-card{ padding: 26px; border-radius: var(--radius-lg); background: var(--paper); border:1px solid var(--line); }
.result-card .num{ font-family: var(--ff-display); font-size: 2rem; font-weight: 800; color: var(--accent); }
.result-card p{ margin-top: 10px; color: var(--muted); font-size: .95rem; }

/* ---------- Comparativa ---------- */
.compare-table{
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper);
}
.ct-row{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  border-top: 1px solid var(--line);
}
.ct-row:first-child{ border-top: none; }
.ct-head{ background: var(--paper-dim); }
.ct-cell{
  padding: 16px 16px;
  font-size: .9rem;
  color: var(--muted);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.ct-feature{
  justify-content: flex-start; text-align:left;
  font-weight: 700; color: var(--ink); font-size: .92rem;
}
.ct-head .ct-cell{ font-weight: 800; color: var(--ink); text-transform: uppercase; font-size: .74rem; letter-spacing: .05em; }
.ct-highlight{ background: rgba(255,77,46,.06); font-weight: 700; color: var(--ink); position: relative; }
.ct-head .ct-highlight{ color: var(--accent-ink); background: var(--accent); }
.ct-no{ color: var(--muted); width: 18px; height: 18px; }
.ct-yes{ color: var(--good); width: 18px; height: 18px; }
@media (max-width: 760px){
  .ct-row{ grid-template-columns: 1fr; }
  .ct-feature{ background: var(--paper-dim); font-size: .8rem; padding-bottom: 8px; }
  .ct-head{ display:none; }
}

/* ---------- Pricing ---------- */
.pricing-wrap{ display:flex; justify-content:center; }
.price-card{
  width: 100%; max-width: 560px;
  background: var(--paper); color: var(--ink);
  border-radius: 28px; padding: 40px 32px;
  box-shadow: var(--shadow-ink);
  position: relative;
}
.price-card .ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--accent); color: var(--accent-ink); font-weight:800; font-size:.78rem;
  padding: 7px 16px; border-radius: 999px; white-space: nowrap;
}
.price-row{ display:flex; align-items:baseline; gap:12px; justify-content:center; margin-top: 10px; flex-wrap: wrap; }
.price-row .now{ font-family: var(--ff-display); font-size: 3rem; font-weight: 800; }
.price-row .was{ text-decoration: line-through; color: var(--muted); font-size: 1.3rem; }
.price-sub{ text-align:center; color: var(--muted); margin-top: 6px; font-size: .92rem; }
.price-list{ margin: 28px 0 0; padding: 0; list-style: none; display:flex; flex-direction:column; gap: 14px; }
.price-list li{ display:flex; gap:12px; align-items:flex-start; font-weight: 600; font-size: .98rem; }
.price-list li .ico{ flex:none; color: var(--good); margin-top: 1px; }
.price-list li.bonus{ background: #fff6e0; border: 1px dashed #e0b84a; padding: 12px 14px; border-radius: 12px; }
.price-list li.bonus .ico{ color: #a9780f; }
.price-card .btn{ margin-top: 30px; }
.pay-badges{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top: 18px; }
.pay-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700; color: var(--muted);
  border:1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 10px;
}
.pay-badge .icon{ width:15px; height:15px; color: var(--ink); }
.price-trust{ margin-top: 16px; text-align:center; font-size: .82rem; color: var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; }

/* ---------- Garantía ---------- */
.guarantee{ display:flex; gap: 22px; align-items:flex-start; max-width: 720px; margin: 0 auto; text-align:left; }
.guarantee .shield{ flex:none; width:60px; height:60px; border-radius:50%; background: var(--accent-2); display:flex; align-items:center; justify-content:center; }
.guarantee .shield .icon{ width: 26px; height: 26px; color: var(--accent-ink); }
.guarantee h3{ font-size: 1.3rem; }
.guarantee p{ margin-top:8px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq{ display:flex; flex-direction:column; gap: 10px; }
.faq details{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 20px;
}
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px 0; font-weight: 700;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ transition: transform .2s ease; flex:none; color: var(--accent); }
.faq details[open] summary .chev{ transform: rotate(180deg); }
.faq .a{ padding: 0 0 20px; color: var(--muted); font-size: .96rem; max-width: 760px; }

/* ---------- CTA final ---------- */
.cta-final{ text-align:center; }
.cta-final h2{ font-size: clamp(1.9rem, 1.2rem + 3vw, 2.8rem); color: var(--paper); max-width: 680px; margin: 0 auto; }
.cta-final .sub{ margin-top: 14px; color: var(--muted-on-ink); }
.cta-final .ctas{ margin-top: 30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
footer{ background: var(--ink-soft); color: var(--muted-on-ink); padding: 0 0 28px; font-size: .88rem; }
.trust-bar{
  display:flex; flex-wrap:wrap; gap: 24px; justify-content:center;
  padding: 22px 0; border-bottom: 1px solid var(--line-on-ink);
  margin-bottom: 32px;
}
.tb-item{ display:flex; align-items:center; gap:8px; font-size:.84rem; font-weight:600; color: var(--muted-on-ink); }
.tb-item .icon{ color: var(--accent-2); }
.foot-top{ display:flex; flex-wrap:wrap; gap: 32px; justify-content: space-between; padding-bottom: 32px; border-bottom: 1px solid var(--line-on-ink); }
.foot-brand .brand{ color: var(--paper); }
.foot-brand p{ margin-top: 10px; max-width: 320px; }
.foot-links{ display:flex; gap: 40px; flex-wrap: wrap; }
.foot-col h4{ color: var(--paper); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.foot-col a{ display:block; padding: 6px 0; opacity:.85; }
.foot-col a:hover{ opacity: 1; color: var(--paper); }
.foot-bottom{ padding-top: 22px; display:flex; flex-wrap:wrap; gap: 10px; justify-content: space-between; }
.foot-legal-note{ max-width: 760px; opacity: .75; }

/* ---------- Barra fija móvil ---------- */
.sticky-cta{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--ink); border-top: 1px solid var(--line-on-ink);
  padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.is-visible{ transform: translateY(0); }
.sticky-cta .p{ color: var(--paper); font-weight: 800; font-size: .95rem; }
.sticky-cta .p small{ display:block; color: var(--muted-on-ink); font-weight:600; font-size:.72rem; }
@media (min-width: 860px){ .sticky-cta{ display:none; } }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }

/* ---------- Utilidades de texto ---------- */
.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }