/* ═══════════════════════════════════════════════════════
   informeseo.es · hoja de estilos
   ═══════════════════════════════════════════════════════ */

:root{
  /* Fuerza esquema claro: evita que el modo oscuro
     automático de Chrome/Samsung invierta los fondos
     y deje texto negro sobre negro. */
  color-scheme: light only;

  --white:   #FFFFFF;
  --mist:    #F5F5F7;
  --ink:     #1D1D1F;
  --grey:    #6E6E73;
  --line:    #D2D2D7;
  --blue:    #0071E3;
  --blue-dk: #0060C0;
  --green:   #1D8A55;
  --alert:   #E5533D;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
          'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --pad: clamp(22px, 6vw, 40px);
  --maxw: 1020px;
  --narrow: 720px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background-color:#FFFFFF;
  color-scheme: light only;
}

body{
  margin:0;
  background-color:#FFFFFF;
  color:#1D1D1F;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}

@media(min-width:700px){ body{ font-size:18px; } }

/* Refuerzo contra el modo oscuro forzado del navegador */
@media (prefers-color-scheme: dark){
  html, body{ background-color:#FFFFFF; color:#1D1D1F; }
}

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

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:4px;
  border-radius:4px;
}

.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap--narrow{ max-width:var(--narrow); }

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:0 0 8px 0; z-index:99;
}
.skip:focus{ left:0; top:0; }

/* ─── TIPOGRAFÍA ─────────────────────────────────────── */
h1,h2,h3,h4{
  margin:0;
  color:#1D1D1F;
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.12;
  text-wrap:balance;
}

h1{
  font-size:clamp(2.05rem, 6.8vw, 3.7rem);
  font-weight:700;
  letter-spacing:-0.038em;
  line-height:1.07;
}
h2{ font-size:clamp(1.7rem, 5vw, 2.7rem); letter-spacing:-0.032em; }
h3{ font-size:clamp(1.13rem, 3.3vw, 1.32rem); letter-spacing:-0.022em; line-height:1.28; }

p{ margin:0; color:inherit; text-wrap:pretty; }

.lede{
  font-size:clamp(1.06rem, 3.4vw, 1.28rem);
  line-height:1.58;
  color:#6E6E73;
  letter-spacing:-0.014em;
}

.tag{
  font-size:.95rem;
  font-weight:600;
  color:var(--blue);
  letter-spacing:0;
  margin-bottom:14px;
}

/* ─── NAVEGACIÓN ─────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  background-color:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.nav__in{ display:flex; align-items:center; min-height:56px; gap:20px; }
.nav__brand{
  font-size:1.03rem; font-weight:600; letter-spacing:-.02em;
  color:#1D1D1F; text-decoration:none; margin-right:auto;
}
.nav__links{ display:none; gap:30px; }
.nav__links a{ font-size:.94rem; color:#1D1D1F; text-decoration:none; opacity:.82; }
.nav__links a:hover{ opacity:1; }
@media(min-width:860px){ .nav__links{ display:flex; } }

/* ─── BOTONES ────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 28px;
  border:none; border-radius:980px;
  background-color:var(--blue); color:#FFFFFF;
  font-family:var(--font); font-size:1.02rem; font-weight:500;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:background-color .2s ease, transform .12s ease;
}
.btn:hover{ background-color:var(--blue-dk); color:#FFFFFF; }
.btn:active{ transform:scale(.985); }
.btn:disabled{ opacity:.5; cursor:default; }

.btn--outline{
  background-color:transparent; color:var(--blue);
  box-shadow:inset 0 0 0 1.5px var(--blue);
}
.btn--outline:hover{ background-color:rgba(0,113,227,.07); color:var(--blue); }

.btn--dark{ background-color:#1D1D1F; color:#FFFFFF; }
.btn--dark:hover{ background-color:#000000; color:#FFFFFF; }

.btn--nav{ min-height:36px; padding:0 18px; font-size:.9rem; }
.btn--wide{ width:100%; }

.link-more{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--blue); text-decoration:none; font-size:1.02rem;
}
.link-more:hover{ text-decoration:underline; }

/* ─── SECCIONES ──────────────────────────────────────── */
.sec{ padding:clamp(60px, 11vw, 112px) 0; background-color:#FFFFFF; }
.sec--mist{ background-color:#F5F5F7; }

.sec__head{ text-align:center; max-width:660px; margin:0 auto clamp(38px, 6vw, 60px); }
.sec__head .lede{ margin-top:18px; }

/* ─── HERO ───────────────────────────────────────────── */
.hero{
  background-color:#FFFFFF;
  padding:clamp(52px, 11vw, 96px) 0 clamp(20px, 5vw, 36px);
  text-align:center;
}
.hero .lede{ margin:22px auto 0; max-width:580px; }
.hero__actions{
  margin-top:34px; display:flex; flex-direction:column;
  align-items:center; gap:16px;
}
@media(min-width:560px){
  .hero__actions{ flex-direction:row; justify-content:center; gap:26px; }
}
.hero__fine{ margin-top:26px; font-size:.92rem; color:#6E6E73; }

/* ─── TARJETA DE INFORME ─────────────────────────────── */
.showcase{ background-color:#FFFFFF; padding:clamp(22px, 5vw, 50px) 0 clamp(60px, 11vw, 104px); }

.report{
  max-width:600px; margin-inline:auto;
  background-color:#FFFFFF;
  border-radius:20px;
  box-shadow:0 2px 6px rgba(0,0,0,.06), 0 24px 60px -26px rgba(0,0,0,.26);
  overflow:hidden;
}
.report__top{ padding:22px clamp(22px,5vw,32px) 20px; border-bottom:1px solid var(--line); }
.report__title{ font-size:1.06rem; font-weight:600; letter-spacing:-.02em; color:#1D1D1F; }
.report__sub{ font-size:.94rem; color:#6E6E73; margin-top:3px; }

.report__list{ list-style:none; margin:0; padding:0; }
.report__item{
  padding:20px clamp(22px,5vw,32px);
  border-bottom:1px solid var(--line);
  display:flex; gap:15px; align-items:flex-start;
}
.report__mark{
  width:22px; height:22px; border-radius:50%;
  background-color:#FFEFED; flex:none; margin-top:2px;
  display:grid; place-items:center;
}
.report__mark::after{
  content:""; width:9px; height:9px; border-radius:50%;
  background-color:var(--alert);
}
.report__item h4{ font-size:1.03rem; font-weight:600; letter-spacing:-.02em; line-height:1.35; }
.report__item p{ margin-top:5px; font-size:.96rem; color:#6E6E73; line-height:1.5; }

.report__foot{
  padding:20px clamp(22px,5vw,32px);
  background-color:#F5F5F7; font-size:.96rem; color:#6E6E73; text-align:center;
}
.report__foot b{ color:#1D1D1F; font-weight:600; }

/* ─── PANELES ────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr; gap:clamp(20px, 4vw, 36px); }
@media(min-width:840px){ .split{ grid-template-columns:1fr 1fr; } }

.panel{
  background-color:#FFFFFF; border-radius:18px;
  padding:clamp(26px, 5vw, 38px);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.panel__kicker{ font-size:.92rem; font-weight:600; color:var(--blue); margin-bottom:10px; }
.panel h3{ margin-bottom:12px; }
.panel > p{ color:#6E6E73; font-size:1rem; }
.panel ul{ list-style:none; margin:24px 0 0; padding:0; }
.panel li{
  display:flex; gap:12px; align-items:flex-start;
  padding:9px 0; font-size:1rem; line-height:1.45; color:#1D1D1F;
}
.panel li svg{ flex:none; margin-top:6px; }

/* ─── PASOS ──────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:1fr; gap:clamp(34px, 5vw, 40px); }
@media(min-width:860px){ .steps{ grid-template-columns:repeat(3,1fr); } }

.step{ text-align:center; }
.step__badge{
  width:44px; height:44px; margin:0 auto 18px; border-radius:50%;
  background-color:var(--blue); color:#FFFFFF;
  display:grid; place-items:center; font-size:1.02rem; font-weight:600;
}
.step h3{ margin-bottom:10px; }
.step p{ color:#6E6E73; font-size:1rem; }
.step__free{
  display:inline-block; margin-top:12px;
  font-size:.9rem; font-weight:600; color:var(--green);
}

/* ─── TARIFAS ────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:1fr; gap:20px; align-items:stretch; }
@media(min-width:900px){ .plans{ grid-template-columns:repeat(3,1fr); } }

.plan{
  background-color:#FFFFFF; border-radius:20px;
  padding:clamp(28px, 5vw, 34px);
  display:flex; flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.plan--best{
  box-shadow:0 0 0 2px var(--blue), 0 18px 44px -26px rgba(0,113,227,.55);
  position:relative;
}
.plan__flag{
  position:absolute; top:18px; right:18px;
  background-color:var(--blue); color:#FFFFFF;
  font-size:.8rem; font-weight:600;
  padding:4px 12px; border-radius:980px;
}
.plan__name{ font-size:1.1rem; font-weight:600; letter-spacing:-.02em; color:#1D1D1F; }
.plan__price{
  margin-top:16px; font-size:2.8rem; font-weight:700;
  letter-spacing:-.045em; line-height:1; color:#1D1D1F;
}
.plan__price span{
  font-size:.97rem; font-weight:400; letter-spacing:-.01em;
  color:#6E6E73; margin-left:6px;
}
.plan__who{
  margin-top:14px; padding-bottom:24px;
  font-size:1rem; color:#6E6E73; border-bottom:1px solid var(--line);
}
.plan ul{ list-style:none; margin:22px 0 28px; padding:0; flex:1; }
.plan li{
  display:flex; gap:12px; align-items:flex-start;
  padding:8px 0; font-size:1rem; line-height:1.45; color:#1D1D1F;
}
.plan li svg{ flex:none; margin-top:6px; }

.plans__note{ margin-top:30px; text-align:center; font-size:.97rem; color:#6E6E73; }
.plans__note a{ color:var(--blue); }

/* ─── FORMULARIO ─────────────────────────────────────── */
.form{
  background-color:#FFFFFF; border-radius:20px;
  padding:clamp(26px, 5vw, 40px);
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.95rem; font-weight:500; margin-bottom:8px; color:#1D1D1F; }
.field input,
.field select,
.field textarea{
  width:100%; font-family:var(--font); font-size:1.02rem;
  color:#1D1D1F; background-color:#F5F5F7;
  border:1px solid transparent; border-radius:12px;
  padding:14px 16px; min-height:52px;
  transition:border-color .18s ease, background-color .18s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:#9A9AA0; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  background-color:#FFFFFF; border-color:var(--blue); outline:none;
}
.field textarea{ resize:vertical; min-height:104px; line-height:1.5; }
.field .opt{ color:#6E6E73; font-weight:400; }

.check{
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:22px; font-size:.94rem; line-height:1.5; color:#6E6E73;
}
.check input{
  width:22px; height:22px; min-height:0; flex:none; margin-top:1px;
  accent-color:var(--blue);
}
.check a{ color:var(--blue); }

/* Campo trampa antispam: invisible para personas, visible para robots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__msg{
  margin-top:18px; padding:15px 17px; border-radius:12px;
  font-size:.96rem; line-height:1.5; display:none;
}
.form__msg.ok{ display:block; background-color:#E8F6EE; color:#136B41; }
.form__msg.err{ display:block; background-color:#FDECEA; color:#B23122; }

.contact__meta{
  margin-top:34px; display:grid; grid-template-columns:1fr;
  gap:22px; text-align:center;
}
@media(min-width:640px){ .contact__meta{ grid-template-columns:repeat(3,1fr); } }
.contact__meta dt{ font-size:.9rem; color:#6E6E73; margin-bottom:4px; }
.contact__meta dd{ margin:0; font-size:1.01rem; font-weight:500; color:#1D1D1F; }
.contact__meta a{ color:var(--blue); text-decoration:none; }
.contact__meta a:hover{ text-decoration:underline; }

/* ─── FAQ ────────────────────────────────────────────── */
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:22px 42px 22px 0;
  font-size:1.06rem; font-weight:500;
  letter-spacing:-.02em; line-height:1.4;
  color:#1D1D1F; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:28px;
  width:11px; height:11px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(45deg); transition:transform .22s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:32px; }
.faq details p{ padding:0 0 24px; color:#6E6E73; font-size:1.01rem; line-height:1.6; }

/* ─── PÁGINAS LEGALES ────────────────────────────────── */
.doc{ background-color:#FFFFFF; padding:clamp(46px, 9vw, 84px) 0 clamp(60px, 10vw, 96px); }
.doc__head{ margin-bottom:clamp(30px, 5vw, 44px); }
.doc__date{ margin-top:14px; font-size:.94rem; color:#6E6E73; }
.doc h2{
  font-size:clamp(1.3rem, 4vw, 1.6rem);
  margin:clamp(32px, 5vw, 46px) 0 14px;
}
.doc h3{ margin:26px 0 10px; }
.doc p{ margin-bottom:16px; color:#1D1D1F; line-height:1.7; }
.doc ul, .doc ol{ margin:0 0 18px; padding-left:22px; color:#1D1D1F; line-height:1.7; }
.doc li{ margin-bottom:9px; }
.doc a{ color:var(--blue); }
.doc__note{
  background-color:#F5F5F7; border-radius:14px;
  padding:20px 22px; margin-bottom:28px;
  font-size:.96rem; color:#6E6E73; line-height:1.6;
}
.doc table{
  width:100%; border-collapse:collapse; margin-bottom:22px; font-size:.96rem;
}
.doc th, .doc td{
  text-align:left; padding:12px 10px;
  border-bottom:1px solid var(--line); vertical-align:top; color:#1D1D1F;
}
.doc th{ font-weight:600; }

/* ─── CONFIRMACIÓN ───────────────────────────────────── */
.done{
  background-color:#FFFFFF; text-align:center;
  padding:clamp(70px, 14vw, 130px) 0;
}
.done__icon{
  width:66px; height:66px; margin:0 auto 26px; border-radius:50%;
  background-color:#E8F6EE; display:grid; place-items:center;
}
.done .lede{ margin:20px auto 0; max-width:520px; }
.done__next{
  margin:40px auto 0; max-width:520px; text-align:left;
  background-color:#F5F5F7; border-radius:16px; padding:26px 28px;
}
.done__next h3{ margin-bottom:14px; }
.done__next ol{ margin:0; padding-left:20px; color:#1D1D1F; line-height:1.7; }
.done__next li{ margin-bottom:8px; }
.done__cta{ margin-top:34px; }

/* ─── PIE ────────────────────────────────────────────── */
.foot{ background-color:#F5F5F7; padding:44px 0 40px; font-size:.92rem; color:#6E6E73; }
.foot__top{
  display:flex; flex-direction:column; gap:26px;
  padding-bottom:26px; border-bottom:1px solid var(--line);
}
@media(min-width:760px){ .foot__top{ flex-direction:row; justify-content:space-between; } }
.foot__brand{ font-size:1.02rem; font-weight:600; color:#1D1D1F; letter-spacing:-.02em; }
.foot__tagline{ margin-top:6px; max-width:300px; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:36px; }
.foot__col h4{ font-size:.93rem; font-weight:600; margin-bottom:10px; color:#1D1D1F; }
.foot__col a{ display:block; color:#6E6E73; text-decoration:none; padding:4px 0; }
.foot__col a:hover{ color:#1D1D1F; }
.foot__base{
  padding-top:24px; display:flex; flex-direction:column;
  gap:8px; align-items:center; text-align:center; font-size:.88rem;
}
@media(min-width:760px){
  .foot__base{ flex-direction:row; justify-content:space-between; text-align:left; }
}

/* ─── MOVIMIENTO ─────────────────────────────────────── */
.rise{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.28,.11,.32,1), transform .7s cubic-bezier(.28,.11,.32,1);
}
.rise.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; transform:none; }
}