/* ============================================================
   PLOSIA — Escuela digital de periodismo y medios
   Estilos únicos: señal / consola / papel
   ============================================================ */

:root{
  --tinta:#0F1518;        /* fondo oscuro principal */
  --tinta2:#182128;       /* tarjetas oscuras */
  --tinta3:#26333B;       /* bordes oscuros */
  --papel:#F4EFE4;        /* fondo claro */
  --papel2:#EAE1CF;       /* crema más profundo */
  --senal:#FF4D2E;        /* coral señal */
  --senal2:#FF7A4D;       /* coral claro */
  --lima:#C9F04E;         /* lima acento */
  --lima2:#DFF79A;
  --texto:#26323A;
  --suave:#5F6D75;
  --linea:#D9CEB9;
  --blanco:#FFFFFF;
  --radius:14px;
  --max:1140px;
  --sombra:0 14px 34px rgba(15,21,24,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--papel);
  color:var(--texto);
  line-height:1.75;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--senal);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{padding-left:1.3em}
.contenedor{max-width:var(--max);margin:0 auto;padding:0 22px}
.centrado{text-align:center}

/* Accesibilidad: enlace para saltar */
.saltar{
  position:absolute;left:-9999px;top:0;background:var(--lima);color:var(--tinta);
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;z-index:2000;
}
.saltar:focus{left:0}

/* ---------- Marcadores / chips ---------- */
.marcador{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--lima);color:var(--tinta);
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;margin-bottom:16px;
}
.marcador::before{
  content:"";width:9px;height:9px;background:var(--senal);
  border-radius:2px;animation:latido 1.6s ease-in-out infinite;
}
.marcador-lima{background:var(--senal);color:var(--blanco)}
.marcador-lima::before{background:var(--lima)}
.marcador-linea{background:transparent;color:var(--tinta);border:2px solid var(--tinta)}
.marcador-linea::before{background:var(--tinta);animation:none}
@keyframes latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.55}}

.seccion-titulo{
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  font-weight:800;line-height:1.15;letter-spacing:-.02em;
  color:var(--tinta);text-transform:uppercase;margin-bottom:18px;
}
.seccion-titulo em{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;text-transform:none;font-weight:400;color:var(--senal);
}
.seccion-desc{max-width:720px;color:var(--suave);margin-bottom:34px}
.banda{background:var(--tinta)}
.banda .seccion-titulo{color:var(--papel)}
.banda .seccion-desc{color:#AAB6BC}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:1000;
  background:rgba(15,21,24,.97);
  border-bottom:3px solid var(--senal);
  backdrop-filter:blur(8px);
}
.cabecera-fila{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px}
.marca{display:inline-flex;align-items:center;gap:11px}
.marca-icono{width:38px;height:38px;flex:none}
.marca-icono rect{transform-origin:center bottom;animation:salto 1.15s ease-in-out infinite alternate}
.marca-icono rect:nth-child(2){animation-delay:.18s}
.marca-icono rect:nth-child(3){animation-delay:.36s}
@keyframes salto{from{transform:scaleY(.62)}to{transform:scaleY(1)}}
.marca-texto{
  font-size:1.55rem;font-weight:900;letter-spacing:-.03em;color:var(--papel);
  text-transform:lowercase;
}
.marca-texto .punto{color:var(--senal);font-size:1.7rem}
.marca-texto em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--lima);font-size:.9rem;letter-spacing:.02em;display:block;line-height:1}
.marca:hover{text-decoration:none}

.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  color:var(--papel);font-size:.92rem;font-weight:600;
  padding:9px 17px;border-radius:999px;letter-spacing:.01em;
  transition:background .18s,color .18s;
}
.nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.nav a.activo{background:var(--lima);color:var(--tinta)}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;position:relative}
.burger span{
  display:block;width:24px;height:3px;background:var(--papel);border-radius:3px;
  margin:5px auto;transition:transform .22s,opacity .22s;
}
.burger.activo span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.activo span:nth-child(2){opacity:0}
.burger.activo span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(201,240,78,.14), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(255,77,46,.18), transparent 60%),
    var(--tinta);
  color:var(--papel);
  padding:88px 0 74px;
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(244,239,228,.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 70%);
}
.hero .contenedor{position:relative;z-index:2}
.hero h1{
  font-size:clamp(2.5rem,6vw,4.1rem);
  font-weight:900;line-height:1.04;letter-spacing:-.025em;text-transform:uppercase;
  max-width:900px;margin-bottom:20px;
}
.hero h1 em{font-family:Georgia,serif;font-style:italic;text-transform:none;font-weight:400;color:var(--lima)}
.lead{font-size:1.13rem;color:#C8D2D6;max-width:680px;margin-bottom:30px}
.botones{display:flex;gap:14px;flex-wrap:wrap}

.boton{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 28px;border-radius:999px;
  font-weight:800;font-size:.98rem;letter-spacing:.02em;
  transition:transform .16s,box-shadow .16s;
}
.boton:hover{transform:translateY(-2px);text-decoration:none;box-shadow:var(--sombra)}
.boton-primario{background:var(--senal);color:var(--blanco)}
.boton-primario::after{content:"→";font-weight:900}
.boton-lima{background:var(--lima);color:var(--tinta)}
.boton-lima::after{content:"→";font-weight:900}
.boton-borde{background:transparent;color:var(--tinta);border:2px solid var(--tinta)}
.boton-borde:hover{background:var(--tinta);color:var(--papel)}
.banda .boton-borde{color:var(--papel);border-color:var(--papel)}
.banda .boton-borde:hover{background:var(--papel);color:var(--tinta)}
.boton-blanco{background:var(--blanco);color:var(--tinta)}

/* Эквалайзер */
.hero-bars{display:flex;align-items:flex-end;gap:7px;height:64px;margin-top:44px}
.hero-bars span{
  width:11px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,var(--lima),var(--senal));
  animation:barra 1s ease-in-out infinite alternate;
}
.hero-bars span:nth-child(1){height:26%;animation-delay:.05s}
.hero-bars span:nth-child(2){height:48%;animation-delay:.3s}
.hero-bars span:nth-child(3){height:70%;animation-delay:.12s}
.hero-bars span:nth-child(4){height:92%;animation-delay:.42s}
.hero-bars span:nth-child(5){height:64%;animation-delay:.22s}
.hero-bars span:nth-child(6){height:38%;animation-delay:.5s}
.hero-bars span:nth-child(7){height:20%;animation-delay:.34s}
@keyframes barra{from{transform:scaleY(.55)}to{transform:scaleY(1)}}

/* ---------- Stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  margin-top:-52px;position:relative;z-index:3;
}
.stats > div{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);
  padding:24px 20px;text-align:center;box-shadow:var(--sombra);
}
.stats strong{
  display:block;font-size:2.2rem;font-weight:900;color:var(--tinta);line-height:1;
}
.stats strong::after{content:"";display:block;width:34px;height:4px;background:var(--senal);margin:10px auto 8px;border-radius:4px}
.stats span{font-size:.9rem;color:var(--suave);font-weight:600}

/* ---------- Secciones ---------- */
.seccion{padding:74px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* ---------- Tarjetas con esquinas ---------- */
.tarjeta{
  position:relative;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radius);
  padding:28px 26px;transition:transform .18s,box-shadow .18s;
}
.tarjeta::before,.tarjeta::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
}
.tarjeta::before{top:-1px;left:-1px;border-top:4px solid var(--senal);border-left:4px solid var(--senal);border-radius:var(--radius) 0 0 0}
.tarjeta::after{bottom:-1px;right:-1px;border-bottom:4px solid var(--tinta);border-right:4px solid var(--tinta);border-radius:0 0 var(--radius) 0}
.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra)}
.tarjeta h3{font-size:1.18rem;font-weight:800;color:var(--tinta);text-transform:uppercase;letter-spacing:-.01em;margin:14px 0 10px}
.tarjeta p{color:var(--suave);font-size:.98rem}
.tarjeta .mas{display:inline-block;margin-top:14px;font-weight:800;font-size:.92rem}
.tarjeta .mas::after{content:" →"}
.tarjeta-foto{padding:0;overflow:hidden}
.tarjeta-foto img{width:100%;height:200px;object-fit:cover}
.tarjeta-foto .tarjeta-cuerpo{padding:24px 24px 26px}
.tarjeta-foto .tarjeta-cuerpo h3{margin-top:0}
.banda .tarjeta{background:var(--tinta2);border-color:var(--tinta3)}
.banda .tarjeta::after{border-color:var(--lima)}
.banda .tarjeta h3{color:var(--papel)}
.banda .tarjeta p{color:#AAB6BC}
.banda .tarjeta .mas{color:var(--lima)}

/* ---------- Iconos CSS ---------- */
.icono-css{
  width:52px;height:52px;border-radius:14px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tinta);color:var(--lima);position:relative;
}
.icono-css.senal{background:var(--senal);color:var(--blanco)}
.icono-css.papel{background:var(--papel2);color:var(--tinta)}
/* micrófono */
.ico-mic::before{content:"";width:13px;height:20px;border:3px solid currentColor;border-radius:8px}
.ico-mic::after{content:"";position:absolute;bottom:12px;width:21px;height:3px;border-radius:3px;background:currentColor;box-shadow:0 0 0 2px var(--tinta)}
/* cámara */
.ico-cam::before{content:"";width:24px;height:17px;border:3px solid currentColor;border-radius:5px}
.ico-cam::after{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:currentColor}
/* lápiz / pluma */
.ico-pluma::before{content:"";width:22px;height:5px;border-radius:3px;background:currentColor;transform:rotate(-42deg)}
.ico-pluma::after{content:"";position:absolute;bottom:13px;left:16px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid currentColor}
/* datos / gráfica */
.ico-datos::before{content:"";width:26px;height:26px;border:3px solid currentColor;border-radius:5px}
.ico-datos::after{content:"";position:absolute;bottom:16px;left:18px;width:16px;height:16px;border-bottom:3px solid currentColor;border-left:3px solid currentColor;transform:rotate(45deg) skew(0)}
/* ojo / verdad */
.ico-ojo::before{content:"";width:28px;height:16px;border:3px solid currentColor;border-radius:50%}
.ico-ojo::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:currentColor}
/* escudo */
.ico-escudo::before{content:"";width:22px;height:26px;border:3px solid currentColor;border-radius:8px 8px 12px 12px}
.ico-escudo::after{content:"";position:absolute;width:10px;height:5px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg);top:23px;left:21px}
/* grupo / comunidad */
.ico-grupo::before{content:"";width:26px;height:13px;border:3px solid currentColor;border-radius:13px 13px 6px 6px}
.ico-grupo::after{content:"";position:absolute;top:17px;left:12px;width:13px;height:13px;border:3px solid currentColor;border-radius:50%}
/* reloj */
.ico-reloj::before{content:"";width:26px;height:26px;border:3px solid currentColor;border-radius:50%}
.ico-reloj::after{content:"";position:absolute;width:3px;height:10px;border-radius:3px;background:currentColor;top:14px;left:24px;transform-origin:bottom;transform:rotate(30deg)}
/* chat / mensaje */
.ico-chat::before{content:"";width:26px;height:20px;border:3px solid currentColor;border-radius:7px}
.ico-chat::after{content:"";position:absolute;bottom:12px;left:12px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid currentColor}

/* ---------- Timeline ---------- */
.timeline{position:relative;margin-top:36px;padding-left:8px}
.timeline::before{
  content:"";position:absolute;left:27px;top:8px;bottom:8px;width:3px;
  background:linear-gradient(180deg,var(--senal),var(--lima));
  border-radius:3px;
}
.paso{position:relative;padding:0 0 30px 86px}
.paso-num{
  position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;
  background:var(--senal);color:var(--blanco);
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;font-weight:900;box-shadow:0 0 0 6px rgba(255,77,46,.18);
}
.paso:nth-child(even) .paso-num{background:var(--lima);color:var(--tinta);box-shadow:0 0 0 6px rgba(201,240,78,.18)}
.paso h3{font-size:1.22rem;font-weight:800;color:var(--tinta);text-transform:uppercase;margin-bottom:6px}
.banda .paso h3{color:var(--papel)}
.paso p{color:var(--suave);max-width:640px}
.banda .paso p{color:#AAB6BC}

/* ---------- Citas ---------- */
.cita{
  background:var(--papel2);border-left:5px solid var(--senal);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:26px 28px;
}
.cita p{font-family:Georgia,serif;font-style:italic;font-size:1.12rem;color:var(--tinta);margin-bottom:12px}
.cita footer{font-size:.85rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.cita footer::before{content:"— ";color:var(--senal)}
.banda .cita{background:var(--tinta2);border-left-color:var(--lima)}
.banda .cita p{color:var(--papel)}
.banda .cita footer{color:#AAB6BC}

/* ---------- Onda (divisor SVG) ---------- */
.onda{line-height:0;display:block;background:var(--tinta)}
.onda svg{width:100%;height:70px;display:block}
.onda svg path{fill:var(--papel)}

/* ---------- Imágenes figura ---------- */
.figura{margin:26px 0}
.figura img{border-radius:var(--radius);border:1px solid var(--linea)}
.figura figcaption{font-size:.85rem;color:var(--suave);margin-top:8px;text-align:center}
.figura figcaption::before{content:"▲ ";color:var(--senal);font-size:.7rem}

/* ---------- Tabla comparativa ---------- */
.tabla{
  width:100%;border-collapse:collapse;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radius);overflow:hidden;
}
.tabla th,.tabla td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linea);font-size:.95rem}
.tabla th{background:var(--tinta);color:var(--papel);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.tabla tr:last-child td{border-bottom:0}
.tabla .si{color:var(--senal);font-weight:900}
.tabla .no{color:#B9B2A2}

/* ---------- Planes de precios ---------- */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.plan{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;position:relative;
}
.plan-nombre{font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.plan-precio{font-size:2.6rem;font-weight:900;color:var(--tinta);line-height:1.1;margin:10px 0 2px}
.plan-precio small{font-size:.95rem;font-weight:600;color:var(--suave)}
.plan p{color:var(--suave);font-size:.95rem;flex:1}
.plan ul{margin:18px 0 24px;list-style:none;padding:0}
.plan li{padding:7px 0 7px 30px;position:relative;font-size:.95rem;border-bottom:1px dashed var(--linea)}
.plan li:last-child{border-bottom:0}
.plan li::before{
  content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;
  border-left:3px solid var(--lima);border-bottom:3px solid var(--lima);
  transform:rotate(-45deg);
}
.plan .boton{justify-content:center;margin-top:6px}
.plan-destacado{
  background:var(--tinta);border-color:var(--tinta);color:var(--papel);
  box-shadow:var(--sombra);transform:scale(1.04);
}
.plan-destacado .plan-nombre{color:var(--lima)}
.plan-destacado .plan-precio{color:var(--papel)}
.plan-destacado p{color:#AAB6BC}
.plan-destacado li{border-color:rgba(255,255,255,.16);color:#C8D2D6}
.plan-etiqueta{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--senal);color:var(--blanco);
  font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 16px;border-radius:999px;white-space:nowrap;
}

/* ---------- FAQ / detalles ---------- */
.faq{margin-top:26px}
.faq details{
  background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
  margin-bottom:12px;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 20px;font-weight:800;color:var(--tinta);
  position:relative;padding-right:52px;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--lima);
  display:flex;align-items:center;justify-content:center;font-weight:900;
}
.faq details[open] summary{color:var(--senal)}
.faq details[open] summary::after{content:"−";background:var(--senal);color:var(--blanco)}
.faq .faq-cuerpo{padding:0 20px 20px;color:var(--suave);font-size:.97rem}

/* ---------- Formulario ---------- */
.formulario{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);
  padding:34px 32px;box-shadow:var(--sombra);
}
.campo{margin-bottom:20px}
.campo label{display:block;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px;color:var(--tinta)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--linea);border-radius:10px;
  font:inherit;font-size:1rem;background:var(--papel);color:var(--texto);
  transition:border .15s,box-shadow .15s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--senal);box-shadow:0 0 0 4px rgba(255,77,46,.14);background:var(--blanco);
}
.campo textarea{min-height:140px;resize:vertical}
.campo-check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--suave)}
.campo-check input{width:20px;height:20px;margin-top:3px;accent-color:var(--senal);flex:none}
.aviso-form{font-size:.82rem;color:var(--suave);margin-top:14px}

/* ---------- Tarjetas de contacto ---------- */
.contacto-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px}
.contacto-item .icono-css{width:46px;height:46px;border-radius:12px}
.contacto-item h3{font-size:1rem;font-weight:800;color:var(--tinta);text-transform:uppercase}
.contacto-item p,.contacto-item a{font-size:.97rem;color:var(--suave)}

/* ---------- Cabecera de página interior ---------- */
.pagina-cabecera{
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(201,240,78,.12), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(255,77,46,.16), transparent 60%),
    var(--tinta);
  color:var(--papel);padding:64px 0 56px;
}
.pagina-cabecera h1{
  font-size:clamp(2rem,4.6vw,3.1rem);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.08;max-width:860px;
}
.pagina-cabecera h1 em{font-family:Georgia,serif;font-style:italic;text-transform:none;font-weight:400;color:var(--lima)}
.pagina-cabecera p{color:#C8D2D6;max-width:720px;margin-top:12px}
.miga{font-size:.83rem;letter-spacing:.1em;text-transform:uppercase;color:#8FA0A7;margin-bottom:14px}
.miga a{color:var(--lima)}

/* ---------- Artículo ---------- */
.articulo{max-width:780px;margin:0 auto}
.articulo h2{font-size:1.55rem;font-weight:800;color:var(--tinta);margin:34px 0 12px;text-transform:uppercase;letter-spacing:-.01em}
.articulo h2::before{content:"// ";color:var(--senal)}
.articulo p{margin-bottom:16px}
.articulo ul,.articulo ol{margin-bottom:16px}
.articulo strong{color:var(--tinta)}
.articulo .entradilla{
  font-family:Georgia,serif;font-style:italic;font-size:1.18rem;color:var(--tinta);
  border-left:4px solid var(--senal);padding-left:20px;margin:24px 0;
}
.meta-art{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-size:.85rem;color:var(--suave);margin:18px 0 26px;padding-bottom:18px;border-bottom:1px dashed var(--linea);
}
.meta-art .autor{font-weight:800;color:var(--tinta)}
.meta-art .chip-tema{background:var(--lima);color:var(--tinta);font-weight:800;padding:3px 12px;border-radius:999px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Legal ---------- */
.legal{max-width:840px;margin:0 auto}
.legal h2{font-size:1.4rem;font-weight:800;color:var(--tinta);text-transform:uppercase;margin:34px 0 12px;letter-spacing:-.01em}
.legal h2::before{content:"§ ";color:var(--senal)}
.legal h3{font-size:1.08rem;font-weight:800;color:var(--tinta);margin:22px 0 8px}
.legal p,.legal li{margin-bottom:12px;color:var(--texto)}
.legal ul,.legal ol{margin-bottom:14px}
.legal .fecha-act{display:inline-block;background:var(--papel2);border:1px dashed var(--linea);padding:6px 16px;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--suave);margin-bottom:22px}

/* ---------- Pie de página ---------- */
.pie{background:var(--tinta);color:#AAB6BC;margin-top:0;border-top:3px solid var(--lima)}
.pie-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:38px;
  padding:62px 0 44px;
}
.pie h3{
  font-size:.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lima);margin-bottom:16px;
}
.pie ul{list-style:none;padding:0}
.pie li{margin-bottom:9px}
.pie a{color:#C8D2D6}
.pie a:hover{color:var(--lima);text-decoration:none}
.pie .marca-texto{font-size:1.45rem}
.pie-desc{margin:14px 0 18px;font-size:.95rem}
.pie-redes{display:flex;gap:10px}
.pie-redes a{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--tinta3);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:var(--papel);
}
.pie-redes a:hover{background:var(--senal);border-color:var(--senal);color:var(--blanco)}
.pie address{font-style:normal;font-size:.95rem;line-height:1.9}
.pie address strong{color:var(--papel)}
.pie-legal{border-top:1px solid var(--tinta3);padding:20px 0}
.pie-legal-fila{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:.83rem;color:#8FA0A7}
.pie-legal ul{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0}
.pie-legal a{color:#AAB6BC}

/* ---------- Cookie banner ---------- */
.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:3000;
  background:var(--tinta);color:var(--papel);
  border:1px solid var(--tinta3);border-left:5px solid var(--senal);
  border-radius:16px;padding:20px 22px;
  display:none;gap:18px;align-items:center;justify-content:space-between;
  box-shadow:var(--sombra);max-width:860px;margin:0 auto;
}
.cookies.visible{display:flex;flex-wrap:wrap}
.cookies p{font-size:.92rem;max-width:560px}
.cookies a{color:var(--lima)}
.cookies-botones{display:flex;gap:10px;flex-wrap:wrap}
.cookies button{
  border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.9rem;
  padding:10px 20px;border-radius:999px;background:var(--lima);color:var(--tinta);
}
.cookies button.secundario{background:transparent;color:var(--papel);border:1.5px solid var(--tinta3)}

/* ---------- Gracias ---------- */
.gracias-marca{
  width:110px;height:110px;border-radius:50%;margin:0 auto 26px;
  background:var(--lima);display:flex;align-items:center;justify-content:center;position:relative;
  animation:latido 2s ease-in-out infinite;
}
.gracias-marca::after{
  content:"";width:44px;height:24px;border-left:6px solid var(--tinta);border-bottom:6px solid var(--tinta);
  transform:rotate(-45deg);margin-top:-10px;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .planes{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .plan-destacado{transform:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pie-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:720px){
  .burger{display:block}
  .nav{
    position:absolute;top:72px;left:0;right:0;
    background:var(--tinta);flex-direction:column;align-items:stretch;
    padding:14px 18px 22px;gap:6px;border-bottom:3px solid var(--senal);
    display:none;box-shadow:0 24px 40px rgba(0,0,0,.35);
  }
  .nav.abierta{display:flex}
  .nav a{padding:13px 16px;border-radius:12px;font-size:1.02rem}
  .hero{padding:64px 0 58px}
  .stats{margin-top:-34px}
  .seccion{padding:56px 0}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr;gap:28px;padding:44px 0 30px}
  .hero-bars{height:48px}
  .cookies{padding:16px}
}