/* =====================================================================
   IT TOOL AI — sitio web
   La misma identidad que la aplicación: crema, tinta, bordes firmes y
   sombras sólidas desplazadas. Los tokens son copia de css/styles.css
   de la app; si cambia la marca, se cambian en los dos sitios.
   ===================================================================== */
:root{
  --rojo:#ff5454; --crema:#fffff7; --lila:#8b97fd; --amarillo:#ffdf2b;
  --verde:#00c07a; --tinta:#16161d; --naranja:#ff9f40; --malva:#b79bff;

  --f-titulo:"Archivo Black","Arial Black",system-ui,sans-serif;
  --f-mano:"Kaushan Script","Brush Script MT",cursive;
  --f-texto:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-codigo:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:#fffff7; --bg2:#f7f5e6; --bg3:#efecd9;
  --txt:#16161d; --txt2:#55555f; --line:#16161d24;

  --sombra-1:0 2px 0 var(--tinta);
  --sombra-2:0 4px 0 var(--tinta);
  --sombra-3:0 7px 0 var(--tinta);
  --radio:20px;
  --ancho:1120px;
  --curva:cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100% }
html:has(.subnav){ scroll-padding-top:140px }
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:400 17px/1.6 var(--f-texto);
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block }
a{ color:inherit }
p{ margin:0 0 1em }
h1,h2,h3,h4{ font-family:var(--f-titulo); font-weight:400; line-height:1.08; margin:0 0 .5em; letter-spacing:-.01em }
h1{ font-size:clamp(38px,6.4vw,70px); text-transform:uppercase }
h2{ font-size:clamp(28px,4.2vw,44px); text-transform:uppercase }
h3{ font-size:clamp(19px,2.2vw,23px) }
h4{ font-size:17px }
code{ font-family:var(--f-codigo); font-size:.9em; background:var(--bg3); padding:.1em .4em; border-radius:6px }
:focus-visible{ outline:3px solid var(--lila); outline-offset:3px; border-radius:6px }

.saltar{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--tinta); color:var(--crema); padding:10px 16px; border-radius:10px; font-weight:800 }
.saltar:focus{ top:12px }

.envoltura{ width:100%; max-width:var(--ancho); margin:0 auto; padding:0 20px }
.seccion{ position:relative; padding:88px 0 }
.seccion.suave{ background:var(--bg2); border-block:2px solid var(--tinta) }
.seccion.lila{ background:var(--lila) }
.seccion.tinta{ background:var(--tinta); color:var(--crema) }
.seccion > .envoltura{ position:relative; z-index:1 }
/* Las formas decorativas van detrás del contenido de cualquier bloque que las lleve. */
[data-adornos] > :not(.adorno){ position:relative; z-index:1 }

.mano{ font-family:var(--f-mano); font-weight:400; text-transform:none; letter-spacing:0; color:var(--rojo) }
.antetitulo{ display:inline-block; font:900 13px/1 var(--f-texto); letter-spacing:.12em; text-transform:uppercase;
  background:var(--amarillo); border:2px solid var(--tinta); border-radius:999px; padding:7px 13px; margin-bottom:16px; box-shadow:var(--sombra-1) }
.intro{ font-size:clamp(17px,1.9vw,20px); color:var(--txt2); max-width:640px }
.centro{ text-align:center }
.centro .intro{ margin-inline:auto }

/* Marcas de boceto: todo lo que Mauro tiene que completar. */
.pend{ background:#ffdf2b88; color:inherit; outline:2px dashed #16161d99; outline-offset:1px; padding:0 .15em; border-radius:3px }
.aviso-boceto{ background:var(--amarillo); border-bottom:2px solid var(--tinta); font-size:14px; font-weight:700; text-align:center; padding:8px 16px }
.aviso-boceto b{ font-family:var(--f-titulo); font-weight:400; letter-spacing:.03em }

/* ------------------------------------------------------------------ botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:800 16px/1 var(--f-texto); text-decoration:none; cursor:pointer;
  padding:15px 22px; border-radius:14px; border:2.5px solid var(--tinta);
  background:var(--crema); color:var(--tinta); box-shadow:var(--sombra-2);
  transition:transform .18s var(--curva), box-shadow .18s var(--curva);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--sombra-3) }
.btn:active{ transform:translateY(2px); box-shadow:var(--sombra-1) }
.btn.rojo{ background:var(--rojo) }
.btn.amarillo{ background:var(--amarillo) }
.btn.lila{ background:var(--lila) }
.btn.chico{ padding:11px 16px; font-size:15px; border-radius:12px }
.botones{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px }
.centro .botones{ justify-content:center }

/* ------------------------------------------------------------------ cabecera */
.cab{ position:sticky; top:0; z-index:50; background:var(--rojo); border-bottom:3px solid var(--tinta) }
.cab-in{ display:flex; align-items:center; gap:18px; min-height:74px }
.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none }
.marca-logo{ width:48px; height:48px; border-radius:50%; background:var(--crema); border:2.5px solid var(--tinta);
  display:grid; place-items:center; box-shadow:var(--sombra-1) }
.marca-logo svg{ width:32px }
.marca-nom{ font:400 21px/1 var(--f-titulo); text-transform:uppercase; color:var(--tinta); white-space:nowrap }

.menu{ margin-left:auto }
.menu > ul{ list-style:none; display:flex; align-items:center; gap:4px; margin:0; padding:0 }
.menu li{ position:relative }
.menu a, .menu .sub-btn{
  font:800 15.5px/1 var(--f-texto); color:var(--tinta); text-decoration:none;
  background:none; border:0; cursor:pointer; padding:11px 12px; border-radius:10px; display:flex; align-items:center; gap:4px;
}
.menu > ul > li > a:hover, .menu .activa > a{ background:#16161d1a }
.menu .activa > a{ box-shadow:inset 0 -3px 0 var(--tinta); border-radius:10px 10px 4px 4px }
.menu .item-sub{ display:flex; align-items:center }
.menu .item-sub > a{ padding-right:4px }
.menu .sub-btn{ padding:11px 8px 11px 2px }
.menu .sub-btn svg{ width:12px; transition:transform .2s }
.menu .sub{
  list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 8px); left:0; min-width:240px;
  background:var(--crema); border:2.5px solid var(--tinta); border-radius:16px; box-shadow:var(--sombra-2);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s var(--curva);
}
.menu .sub::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px }
.menu .item-sub:hover .sub, .menu .item-sub:focus-within .sub, .menu .item-sub.abierto .sub{ opacity:1; visibility:visible; transform:none }
.menu .item-sub.abierto .sub-btn svg{ transform:rotate(180deg) }
.menu .sub a{ padding:11px 12px; font-weight:700; display:flex; gap:10px; border-radius:10px }
.menu .sub a:hover{ background:var(--bg3) }
.menu .sub a span{ width:22px; text-align:center }
.cab-app{ flex:none }
.hamb{ display:none; margin-left:auto; width:48px; height:48px; border-radius:12px; border:2.5px solid var(--tinta);
  background:var(--crema); box-shadow:var(--sombra-1); cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:5px }
.hamb i{ display:block; width:22px; height:3px; background:var(--tinta); border-radius:2px; transition:.2s }
.hamb[aria-expanded="true"] i:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.hamb[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.hamb[aria-expanded="true"] i:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

@media (max-width: 980px){
  .hamb{ display:flex }
  .cab-app{ display:none }
  .menu{
    position:fixed; inset:77px 0 0 0; background:var(--crema); padding:18px 20px 40px; overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-10px); transition:.2s var(--curva); margin:0;
  }
  .menu.abierto{ opacity:1; visibility:visible; transform:none }
  .menu > ul{ flex-direction:column; align-items:stretch; gap:6px }
  .menu > ul > li{ border-bottom:2px solid var(--line) }
  .menu a, .menu .sub-btn{ font-size:20px; padding:16px 6px }
  .menu .item-sub{ flex-wrap:wrap }
  .menu .item-sub > a{ flex:1 }
  .menu .sub-btn{ padding:16px 12px }
  .menu .sub-btn svg{ width:16px }
  .menu .sub{ position:static; opacity:1; visibility:visible; transform:none; display:none; width:100%;
    box-shadow:none; border-width:2px; margin:0 0 14px; min-width:0 }
  .menu .item-sub:hover .sub, .menu .item-sub:focus-within .sub{ display:none }
  .menu .item-sub.abierto .sub{ display:block }
  .menu .sub a{ font-size:17px; padding:13px 10px }
  .menu .activa > a{ box-shadow:none; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px }
  .menu .menu-app{ display:flex; margin-top:22px; width:100%; font-size:18px }
}
@media (min-width: 981px){ .menu .menu-app{ display:none } }
body.menu-abierto{ overflow:hidden }

/* ------------------------------------------------------------------ adornos */
.adorno{ position:absolute; z-index:0; pointer-events:none; user-select:none }
.adorno svg{ width:100%; height:auto; overflow:visible }
/* En celular no hay márgenes libres: queda una sola forma, pequeña y en la
   esquina de arriba, dentro del relleno de la sección, donde no tapa texto. */
@media (max-width: 700px){
  .adorno{ display:none }
  .adorno.movil{ display:block; top:14px !important; right:14px !important; left:auto !important; bottom:auto !important; width:28px !important }
}

/* ------------------------------------------------------------------ inicio: héroe */
.heroe{ position:relative; padding:64px 0 96px; overflow:hidden }
.heroe-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center }
.heroe-grid > *{ min-width:0 }
/* «CONSTRUYENDO» mide 9,4 veces el tamaño de letra: el titular se ajusta
   al ancho de su columna para no desbordarla nunca. */
.heroe h1{ font-size:min(58px, 4.9vw) }
.heroe h1 .mano{ display:block; font-size:.62em; margin-top:.12em; transform:rotate(-3deg); transform-origin:left }
.heroe .intro{ margin-top:18px }
.sello-edad{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; font-weight:800; font-size:15px }
.sello-edad span{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:2px solid var(--tinta); border-radius:999px; background:var(--crema) }

.arte{ position:relative; min-height:440px }
.arte-placa{
  position:absolute; inset:24px 30px 40px 0; background:var(--lila); border:3px solid var(--tinta);
  border-radius:28px; box-shadow:0 10px 0 var(--tinta); transform:rotate(-3deg); overflow:hidden;
}
.arte-placa svg{ position:absolute; inset:0; width:100%; height:100% }
.arte-tarjeta{
  position:absolute; background:var(--crema); border:3px solid var(--tinta); border-radius:18px;
  box-shadow:var(--sombra-2); padding:14px 16px; font-weight:800;
}
.arte-codigo{ right:-4px; top:47%; transform:rotate(4deg); font:700 14px/1.55 var(--f-codigo); width:min(290px,72%) }
.arte-codigo small{ display:block; font:900 11px/1 var(--f-texto); letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); margin-bottom:8px }
.arte-codigo .k{ color:#c0306a } .arte-codigo .n{ color:#1f7a4d }
.arte-xp{ left:-6px; top:0; background:var(--amarillo); transform:rotate(-7deg); font-family:var(--f-titulo); font-weight:400; font-size:20px; padding:10px 16px }
.arte-tutor{ left:3%; bottom:-6px; display:flex; gap:10px; align-items:center; width:min(270px,70%); transform:rotate(-2deg); font-size:14px; line-height:1.35 }
.arte-tutor .cara{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--rojo); border:2.5px solid var(--tinta); display:grid; place-items:center; font-size:20px }
.flota{ animation:flota 5s ease-in-out infinite }
.flota.b{ animation-delay:-2.5s }
@keyframes flota{ 50%{ translate:0 -9px } }
.brillo{ animation:brillo 1.6s ease-in-out infinite }
@keyframes brillo{ 50%{ opacity:.35 } }

@media (max-width: 900px){
  .heroe-grid{ grid-template-columns:1fr; gap:40px }
  .heroe h1{ font-size:min(9vw, 58px) }
  .arte{ min-height:380px; max-width:520px; width:100% ; margin:0 auto }
}

/* ------------------------------------------------------------------ cifras */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--amarillo); border-block:3px solid var(--tinta) }
.cifra{ padding:26px 18px; text-align:center; border-right:2px solid var(--tinta) }
.cifra:last-child{ border-right:0 }
.cifra b{ display:block; font:400 clamp(34px,4.5vw,50px)/1 var(--f-titulo) }
.cifra span{ font-weight:800; font-size:15px }
@media (max-width: 700px){
  .cifras{ grid-template-columns:repeat(2,1fr) }
  .cifra:nth-child(2){ border-right:0 }
  .cifra:nth-child(-n+2){ border-bottom:2px solid var(--tinta) }
}

/* ------------------------------------------------------------------ tarjetas */
.rejilla{ display:grid; gap:22px }
.r2{ grid-template-columns:repeat(2,1fr) }
.r3{ grid-template-columns:repeat(3,1fr) }
.r4{ grid-template-columns:repeat(4,1fr) }
@media (max-width: 900px){ .r3,.r4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 640px){ .r2,.r3,.r4{ grid-template-columns:1fr } }

.tarjeta{
  position:relative; background:var(--crema); border:2.5px solid var(--tinta); border-radius:var(--radio);
  padding:26px; box-shadow:var(--sombra-2); transition:transform .2s var(--curva), box-shadow .2s var(--curva);
}
a.tarjeta{ text-decoration:none; display:block }
a.tarjeta:hover{ transform:translateY(-4px); box-shadow:var(--sombra-3) }
.tarjeta p:last-child{ margin-bottom:0 }
.tarjeta .ic{ width:58px; height:58px; border-radius:16px; border:2.5px solid var(--tinta); display:grid; place-items:center; font-size:28px; margin-bottom:16px; background:var(--c, var(--amarillo)); box-shadow:var(--sombra-1) }
.tarjeta h3{ margin-bottom:8px }
.tarjeta p{ color:var(--txt2) }
.encabezado{ margin-bottom:44px }

/* pasos 1-2-3 */
.pasos .tarjeta{ padding-top:34px }
.pasos .num{ position:absolute; top:-20px; left:22px; width:44px; height:44px; border-radius:50%; background:var(--rojo); border:2.5px solid var(--tinta); display:grid; place-items:center; font:400 20px/1 var(--f-titulo); box-shadow:var(--sombra-1) }

/* ------------------------------------------------------------------ camino de niveles */
.camino{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:nivel }
.camino li{
  counter-increment:nivel; position:relative; background:var(--crema); border:2.5px solid var(--tinta); border-radius:18px;
  padding:16px 16px 16px 14px; display:flex; gap:12px; align-items:center; box-shadow:var(--sombra-1); font-weight:800; font-size:15px; line-height:1.25;
}
.camino li .em{ flex:none; width:46px; height:46px; border-radius:13px; border:2px solid var(--tinta); display:grid; place-items:center; font-size:23px; background:var(--uc) }
.camino li small{ display:block; font-weight:900; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--txt2); margin-bottom:2px }
.camino li.prep{ background:var(--bg2); border-style:dashed }
.leyenda{ display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; font-size:14px; font-weight:700; color:var(--txt2) }
.leyenda i{ display:inline-block; width:18px; height:14px; border:2px solid var(--tinta); border-radius:4px; vertical-align:-2px; margin-right:6px; background:var(--crema) }
.leyenda i.p{ border-style:dashed; background:var(--bg2) }
@media (max-width: 900px){ .camino{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 520px){ .camino{ grid-template-columns:1fr } }

/* ------------------------------------------------------------------ bloques partidos */
.partido{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center }
.partido.al-reves > :first-child{ order:2 }
@media (max-width: 860px){ .partido{ grid-template-columns:1fr; gap:32px } .partido.al-reves > :first-child{ order:0 } }
.lista-check{ list-style:none; padding:0; margin:18px 0 0 }
.lista-check li{ position:relative; padding-left:36px; margin-bottom:12px; font-weight:600 }
.lista-check li::before{ content:"✓"; position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:7px; background:var(--verde); border:2px solid var(--tinta); display:grid; place-items:center; font-size:13px; font-weight:900; line-height:1 }
.panel-color{ background:var(--c, var(--amarillo)); border:3px solid var(--tinta); border-radius:26px; box-shadow:0 8px 0 var(--tinta); padding:34px; position:relative }
.panel-color h3{ font-size:26px; text-transform:uppercase }

/* ------------------------------------------------------------------ llamada final */
.llamada{ position:relative; overflow:hidden; background:var(--rojo); border:3px solid var(--tinta); border-radius:32px; box-shadow:0 10px 0 var(--tinta); padding:64px 28px; text-align:center }
.llamada h2{ margin-bottom:12px }
.llamada .mano{ color:var(--crema); -webkit-text-stroke:0 }
.llamada .botones{ justify-content:center }
.llamada p{ font-weight:700; font-size:19px; max-width:560px; margin:0 auto }

/* ------------------------------------------------------------------ páginas interiores */
.cabeza-pag{ position:relative; overflow:hidden; padding:70px 0 64px; border-bottom:3px solid var(--tinta); background:var(--c, var(--amarillo)) }
.cabeza-pag h1{ font-size:clamp(36px,6vw,62px) }
.cabeza-pag .intro{ color:var(--tinta); font-weight:600 }
/* La letra manuscrita sobre fondos de color lleva un contorno sólido para leerse bien. */
.cabeza-pag .mano{ text-shadow:2px 2px 0 var(--tinta), -1px -1px 0 var(--tinta), 1px -1px 0 var(--tinta), -1px 1px 0 var(--tinta) }
.miga{ font-size:14px; font-weight:800; margin-bottom:14px }
.miga a{ text-decoration:none; border-bottom:2px solid }

.subnav{ position:sticky; top:77px; z-index:40; background:var(--crema); border-bottom:2px solid var(--tinta) }
.subnav ul{ list-style:none; display:flex; gap:8px; margin:0; padding:12px 0; overflow-x:auto; scrollbar-width:none }
.subnav ul::-webkit-scrollbar{ display:none }
.subnav a{ display:block; white-space:nowrap; text-decoration:none; font-weight:800; font-size:15px; padding:9px 15px; border-radius:999px; border:2px solid var(--tinta); background:var(--crema) }
.subnav a.activa, .subnav a:hover{ background:var(--tinta); color:var(--crema) }

/* tarjeta «sigue leyendo» */
.siguiente{ display:flex !important; align-items:center; justify-content:space-between; gap:18px; padding:22px 26px }
.siguiente small{ display:block; font-weight:900; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); margin-bottom:4px }
.siguiente b{ font:400 clamp(20px,2.6vw,26px)/1.1 var(--f-titulo) }
.siguiente .flecha{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--amarillo); border:2.5px solid var(--tinta); display:grid; place-items:center; font:400 24px/1 var(--f-titulo); transition:transform .2s var(--curva) }
.siguiente:hover .flecha{ transform:translateX(5px) }

/* bloque oscuro: la IA como herramienta */
.seccion.tinta .intro, .seccion.tinta p{ color:#e4e4da }
.seccion.tinta .tarjeta{ color:var(--tinta) }
.seccion.tinta .tarjeta p{ color:var(--txt2) }
.seccion.tinta .mano{ color:var(--amarillo) }
.nota-marca{ font-size:13px; color:var(--txt2); margin-top:14px }

/* línea de tiempo */
.tiempo{ list-style:none; margin:0; padding:0; position:relative }
.tiempo::before{ content:""; position:absolute; left:23px; top:10px; bottom:10px; width:3px; background:repeating-linear-gradient(var(--tinta) 0 8px, transparent 8px 14px) }
.tiempo li{ position:relative; padding:0 0 34px 70px }
.tiempo li:last-child{ padding-bottom:0 }
.tiempo .punto{ position:absolute; left:0; top:0; width:49px; height:49px; border-radius:50%; background:var(--c, var(--amarillo)); border:2.5px solid var(--tinta); display:grid; place-items:center; font-size:22px; box-shadow:var(--sombra-1) }
.tiempo .cuando{ font:900 13px/1 var(--f-texto); letter-spacing:.1em; text-transform:uppercase; color:var(--txt2); margin:4px 0 8px }
.tiempo h3{ margin-bottom:6px }
.tiempo p{ color:var(--txt2); max-width:620px }

/* cita */
.cita{ font:400 clamp(22px,3vw,32px)/1.25 var(--f-titulo); text-transform:none; max-width:820px; margin:0 auto; text-align:center }
.cita .mano{ font-size:1.15em }

/* equipo */
.persona{ text-align:center }
.persona .foto{ width:112px; height:112px; margin:0 auto 16px; border-radius:50%; border:3px solid var(--tinta); background:var(--c, var(--lila)); display:grid; place-items:center; font-size:46px; box-shadow:var(--sombra-2) }
.persona small{ display:block; font-weight:800; color:var(--txt2); margin-bottom:8px }

/* ------------------------------------------------------------------ planes */
.selector{ display:inline-flex; background:var(--crema); border:2.5px solid var(--tinta); border-radius:16px; padding:5px; gap:4px; box-shadow:var(--sombra-2) }
.selector{ max-width:100% }
.selector button{ font:800 16px/1.2 var(--f-texto); border:0; background:none; padding:13px 20px; border-radius:11px; cursor:pointer; color:var(--tinta) }
.selector button[aria-selected="true"]{ background:var(--tinta); color:var(--crema) }
.grupo-planes[hidden]{ display:none }

.plan{ display:flex; flex-direction:column; padding:30px 26px }
.plan.destacado{ background:var(--amarillo); transform:translateY(-10px); box-shadow:0 10px 0 var(--tinta) }
.plan .etiqueta{ position:absolute; top:-16px; right:20px; background:var(--rojo); border:2.5px solid var(--tinta); border-radius:999px; padding:6px 12px; font:900 12px/1 var(--f-texto); letter-spacing:.08em; text-transform:uppercase }
.plan h3{ font-size:26px; text-transform:uppercase; margin-bottom:4px }
.plan .para{ color:var(--txt2); font-weight:700; font-size:15px; min-height:48px }
.plan.destacado .para, .plan.destacado p{ color:var(--tinta) }
.precio{ margin:14px 0 4px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap }
.precio b{ font:400 44px/1 var(--f-titulo) }
.precio span{ font-weight:800; color:var(--txt2) }
.plan.destacado .precio span{ color:var(--tinta) }
.plan .nota{ font-size:14px; font-weight:700; color:var(--txt2); margin-bottom:18px }
.plan ul{ list-style:none; padding:0; margin:0 0 26px; flex:1 }
.plan li{ position:relative; padding-left:28px; margin-bottom:10px; font-weight:600; font-size:15.5px; line-height:1.4 }
.plan li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:900; color:#00804f }
.plan li.no{ color:var(--txt2); text-decoration:line-through; text-decoration-thickness:1px }
.plan li.no::before{ content:"–"; color:var(--txt2) }
.plan .btn{ width:100% }
@media (max-width: 900px){ .plan.destacado{ transform:none } }

.objetivos .tarjeta{ border-top-width:10px; border-top-color:var(--c) }

.tabla-envoltura{ overflow-x:auto; border:2.5px solid var(--tinta); border-radius:var(--radio); box-shadow:var(--sombra-2); background:var(--crema) }
table.comparar{ width:100%; border-collapse:collapse; min-width:640px; font-size:15.5px }
.comparar th, .comparar td{ padding:14px 16px; text-align:center; border-bottom:1.5px solid var(--line) }
.comparar th{ font:400 15px/1.2 var(--f-titulo); text-transform:uppercase; background:var(--bg2); border-bottom:2.5px solid var(--tinta) }
.comparar td:first-child, .comparar th:first-child{ text-align:left; font-weight:700 }
.comparar tr:last-child td{ border-bottom:0 }
.comparar .si{ color:#00804f; font-weight:900 } .comparar .no{ color:var(--txt2) }

/* preguntas */
.faq{ max-width:820px; margin:0 auto; display:grid; gap:14px }
.faq details{ background:var(--crema); border:2.5px solid var(--tinta); border-radius:16px; box-shadow:var(--sombra-1) }
.faq summary{ cursor:pointer; list-style:none; padding:18px 56px 18px 22px; font-weight:800; font-size:17px; position:relative }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; position:absolute; right:18px; top:50%; translate:0 -50%; width:28px; height:28px; border-radius:8px; border:2px solid var(--tinta); display:grid; place-items:center; font:400 18px/1 var(--f-titulo); background:var(--amarillo) }
.faq details[open] summary::after{ content:"–" }
.faq details > div{ padding:0 22px 20px; color:var(--txt2) }

/* ------------------------------------------------------------------ contacto */
.canal{ display:flex; flex-direction:column; align-items:flex-start }
.canal .ic{ background:var(--c) }
.canal .dato{ font-weight:800; font-size:18px; word-break:break-word; margin:4px 0 18px; color:var(--tinta) }
.canal .btn{ margin-top:auto }

/* ------------------------------------------------------------------ legal */
.legal{ display:grid; grid-template-columns:260px 1fr; gap:48px; align-items:start }
.legal-indice{ position:sticky; top:100px; background:var(--crema); border:2.5px solid var(--tinta); border-radius:18px; padding:18px; box-shadow:var(--sombra-1) }
.legal-indice b{ font:400 14px/1 var(--f-titulo); text-transform:uppercase; display:block; margin-bottom:10px }
.legal-indice ol{ margin:0; padding-left:20px; font-size:14.5px; font-weight:700 }
.legal-indice li{ margin-bottom:7px }
.legal-indice a{ text-decoration:none }
html:has(.subnav) .legal-indice{ top:160px }
.legal-indice a:hover{ text-decoration:underline }
.legal-texto{ max-width:760px }
.legal-texto h2{ font-size:clamp(22px,2.6vw,28px); margin-top:48px; padding-top:8px }
.legal-texto h2:first-of-type{ margin-top:0 }
.legal-texto h3{ font-size:18px; margin-top:24px }
.legal-texto p, .legal-texto li{ color:#33333b }
.legal-texto ul, .legal-texto ol{ padding-left:22px; margin:0 0 1em }
.legal-texto li{ margin-bottom:6px }
.caja-aviso{ background:var(--amarillo); border:2.5px solid var(--tinta); border-radius:16px; padding:18px 20px; margin-bottom:34px; box-shadow:var(--sombra-1); font-weight:600 }
.caja-aviso p{ color:var(--tinta) !important; margin:0 }
.tabla-datos{ width:100%; border-collapse:collapse; margin:10px 0 20px; font-size:15px; background:var(--crema); border:2px solid var(--tinta) }
.tabla-datos th, .tabla-datos td{ border:1.5px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top }
.tabla-datos th{ background:var(--bg2); font-weight:900 }
@media (max-width: 900px){
  .legal{ grid-template-columns:1fr; gap:28px }
  .legal-indice{ position:static }
  .tabla-datos{ display:block; overflow-x:auto }
}

/* ------------------------------------------------------------------ pie */
.pie{ background:var(--tinta); color:var(--crema); padding:64px 0 28px; margin-top:0; position:relative; overflow:hidden }
.pie-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:36px }
.pie .marca-nom{ color:var(--crema) }
.pie p{ color:#d8d8cf; font-size:15px; max-width:320px; margin-top:16px }
.pie h4{ font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--amarillo); margin-bottom:14px }
.pie ul{ list-style:none; margin:0; padding:0 }
.pie li{ margin-bottom:9px }
.pie a{ color:var(--crema); text-decoration:none; font-weight:600; font-size:15px }
.pie a:hover{ text-decoration:underline }
.redes{ display:flex; gap:10px; margin-top:18px }
.redes a{ width:44px; height:44px; border-radius:12px; background:var(--crema); color:var(--tinta); display:grid; place-items:center; border:2px solid var(--crema) }
.redes a:hover{ background:var(--amarillo); text-decoration:none }
.redes svg{ width:21px; height:21px }
.pie-fin{ border-top:1.5px solid #ffffff2a; margin-top:48px; padding-top:22px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:14px; color:#b8b8ae }
@media (max-width: 860px){ .pie-grid{ grid-template-columns:1fr 1fr } .pie-grid > :first-child{ grid-column:1 / -1 } }

/* ------------------------------------------------------------------ aparecer al hacer scroll */
.revela{ opacity:0; translate:0 22px; transition:opacity .6s var(--curva), translate .6s var(--curva) }
.revela.visto{ opacity:1; translate:0 0 }

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