/* ============================================================
   FLONIST — Escuela-laboratorio de periodismo y medios
   Estilos únicos: folio editorial / bento / expedientes
   ============================================================ */

:root{
  --tinta:#14263B;        /* azul medianoche */
  --tinta2:#1E3450;
  --tinta3:#2C4768;
  --papel:#F1F4F8;        /* gris azulado claro */
  --papel2:#E2E8F0;
  --oro:#E8A33D;          /* dorado */
  --oro2:#F5C26B;
  --petrol:#0F766E;       /* verde petrolio */
  --petrol2:#14A396;
  --blanco:#FFFFFF;
  --texto:#223349;
  --suave:#5B6B7E;
  --linea:#C9D3DF;
  --radius:12px;
  --max:1160px;
  --sombra:0 16px 40px rgba(20,38,59,.14);
}

*{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(--petrol);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}

.saltar{
  position:absolute;left:-9999px;top:0;background:var(--oro);color:var(--tinta);
  padding:10px 16px;font-weight:800;z-index:2000;
}
.saltar:focus{left:0}

/* ---------- Etiquetas mono ---------- */
.etiqueta{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--petrol);display:inline-flex;align-items:center;gap:10px;
}
.etiqueta::before{content:"";width:26px;height:3px;background:var(--oro);border-radius:3px;display:inline-block}
.etiqueta-centro::after{content:"";width:26px;height:3px;background:var(--oro);border-radius:3px;display:inline-block}
.etiqueta-oro{color:var(--oro)}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:1000;
  background:rgba(241,244,248,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.cabecera-fila{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;min-height:76px;padding-top:10px;
}
.marca{display:inline-flex;align-items:center;gap:12px}
.marca-ico{width:40px;height:40px;flex:none}
.marca-ico circle,.marca-ico path{transition:transform .3s}
.marca:hover .marca-ico circle{fill:var(--oro)}
.marca-bloque{display:flex;flex-direction:column;line-height:1.1}
.marca-texto{font-family:Georgia,"Times New Roman",serif;font-size:1.75rem;font-weight:700;color:var(--tinta);letter-spacing:-.02em}
.marca-texto .punto{color:var(--oro)}
.marca-tag{font-family:ui-monospace,monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--petrol)}
.marca:hover{text-decoration:none}

.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.nav a{
  color:var(--texto);font-weight:700;font-size:.93rem;
  padding:8px 4px;margin:0 6px;border-bottom:3px solid transparent;
  transition:color .15s,border-color .15s;
}
.nav a:hover{color:var(--petrol);text-decoration:none;border-bottom-color:var(--oro)}
.nav a.activo{color:var(--petrol);border-bottom-color:var(--oro)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(118deg,var(--tinta) 0%,var(--tinta2) 52%,var(--tinta3) 100%);
  color:var(--papel);padding:88px 0 92px;position:relative;overflow:hidden;
}
.hero::after{
  content:"FLONIST";position:absolute;right:-30px;bottom:-46px;
  font-family:Georgia,serif;font-size:13rem;font-weight:700;color:rgba(255,255,255,.04);
  letter-spacing:-.04em;pointer-events:none;line-height:1;
}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center;position:relative;z-index:2}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.3rem,4.8vw,3.8rem);font-weight:700;line-height:1.08;
  color:var(--blanco);margin:20px 0 18px;letter-spacing:-.01em;
}
.hero h1 em{font-style:italic;color:var(--oro)}
.hero .lede{color:#B9C7D4;font-size:1.12rem;max-width:560px;margin-bottom:30px}
.hero .etiqueta{color:var(--oro2)}

/* Portada simulada (front page de CSS) */
.portada-wrap{position:relative;max-width:420px;justify-self:end;width:100%}
.portada{
  background:var(--papel);color:var(--tinta);border-radius:6px;
  padding:20px 22px 16px;box-shadow:0 30px 60px rgba(0,0,0,.35);
  transform:rotate(1.6deg);position:relative;
}
.portada-cab{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px double var(--tinta);padding-bottom:8px;margin-bottom:12px}
.portada-cab .folio{font-family:ui-monospace,monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.portada-cab .cabecera2{font-family:Georgia,serif;font-size:1.5rem;font-weight:700}
.portada h3{font-family:Georgia,serif;font-size:1.15rem;line-height:1.2;margin-bottom:8px}
.portada h3 em{color:var(--petrol)}
.portada .col{columns:2;column-gap:14px;font-size:.68rem;line-height:1.55;color:var(--texto)}
.portada .col p{margin-bottom:8px}
.portada .col .fila{display:block;height:6px;background:var(--linea);border-radius:3px;margin-bottom:6px}
.portada-firma{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--linea);font-family:ui-monospace,monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--suave)}
.portada-chip{
  position:absolute;background:var(--oro);color:var(--tinta);
  font-family:ui-monospace,monospace;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 14px;box-shadow:var(--sombra);
}
.portada-chip.c1{top:-16px;right:-14px;transform:rotate(3deg)}
.portada-chip.c2{bottom:-16px;left:-14px;background:var(--petrol);color:var(--blanco);transform:rotate(-2deg)}

/* ---------- Stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:-46px;position:relative;z-index:3;
}
.stats > div{
  background:var(--blanco);border:1px solid var(--linea);border-top:5px solid var(--oro);
  padding:22px 18px;box-shadow:var(--sombra);border-radius:0 0 var(--radius) var(--radius);
}
.stats strong{
  display:block;font-family:ui-monospace,monospace;font-size:2.1rem;font-weight:700;color:var(--tinta);line-height:1;
}
.stats strong::after{content:".";color:var(--oro)}
.stats span{font-size:.88rem;color:var(--suave);font-weight:600}

/* ---------- Secciones ---------- */
.seccion{padding:76px 0}
.regla{height:7px;background:linear-gradient(90deg,var(--oro) 0 130px,var(--linea) 130px 100%);border-radius:7px;margin:28px 0 34px;border:0}
.sec-titulo{
  font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1.12;
  font-size:clamp(1.8rem,3.1vw,2.5rem);color:var(--tinta);margin-bottom:16px;letter-spacing:-.01em;
}
.sec-titulo em{font-style:italic;color:var(--petrol)}
.sec-desc{max-width:720px;color:var(--suave);margin-bottom:32px}
.sec-num{font-family:ui-monospace,monospace;font-size:1.05rem;font-weight:700;color:var(--oro)}
.sec-num b{color:var(--tinta)}
.banda-azul{background:var(--tinta);color:var(--papel)}
.banda-azul .sec-titulo{color:var(--blanco)}
.banda-azul .sec-titulo em{color:var(--oro)}
.banda-azul .sec-desc{color:#B9C7D4}
.banda-azul .sec-num b{color:var(--oro2)}

/* ---------- Botones con esquina cortada ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;font-weight:800;font-size:.95rem;letter-spacing:.02em;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:transform .16s,filter .16s;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;filter:brightness(1.06)}
.btn-oro{background:var(--oro);color:var(--tinta)}
.btn-oro::after{content:"↗";font-weight:700}
.btn-tinta{background:var(--tinta);color:var(--blanco)}
.btn-tinta::after{content:"↗";font-weight:700}
.btn-contorno{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta)}
.btn-contorno::after{content:"↗"}
.banda-azul .btn-contorno{color:var(--blanco);box-shadow:inset 0 0 0 2px var(--oro);color:var(--oro)}
.banda-azul .btn-contorno:hover{background:var(--oro);color:var(--tinta)}
.botones{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:190px;gap:18px}
.tile{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--blanco);border:1px solid var(--linea);
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tile .tile-sombra{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,38,59,0) 30%,rgba(20,38,59,.88) 100%);z-index:1}
.tile .tile-contenido{position:relative;z-index:2;margin-top:auto;padding:20px;color:var(--blanco)}
.tile .tile-tag{font-family:ui-monospace,monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro2);font-weight:700;display:block;margin-bottom:6px}
.tile h3{font-family:Georgia,serif;font-size:1.25rem;font-weight:700;line-height:1.2}
.tile a.mas{color:var(--oro);font-weight:800;font-size:.85rem;margin-top:8px;display:inline-block}
.tile a.mas:hover{text-decoration:underline}
.tile-solida{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
.tile-solida .tile-contenido{margin-top:auto}
.tile-solida .tile-tag{color:var(--oro)}
.tile-solida h3{color:var(--blanco)}
.tile-solida p{color:#B9C7D4;font-size:.9rem;margin-top:6px}
.tile-oro{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.tile-oro h3{color:var(--tinta)}
.tile-oro p{color:rgba(20,38,59,.75);font-size:.9rem;margin-top:6px}
.tile-oro .tile-tag{color:var(--tinta)}
.tile-a{grid-column:span 2;grid-row:span 2}
.tile-b{grid-row:span 2}
.tile-c{grid-column:span 2}
@media (max-width:860px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .tile-a{grid-column:span 2}
  .tile-c{grid-column:span 2}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .tile-a,.tile-b,.tile-c{grid-column:span 1;grid-row:span 1}
}

/* ---------- Tarjetas expediente (con pestaña) ---------- */
.exp{
  position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:0 var(--radius) var(--radius) var(--radius);
  padding:26px 24px 24px;margin-top:30px;transition:transform .18s,box-shadow .18s;
}
.exp::before{
  content:attr(data-tab);position:absolute;top:-28px;left:-1px;
  background:var(--oro);color:var(--tinta);
  font-family:ui-monospace,monospace;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 16px;border-radius:9px 9px 0 0;
}
.exp:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.exp h3{font-family:Georgia,serif;font-size:1.22rem;color:var(--tinta);margin-bottom:8px;font-weight:700}
.exp p{color:var(--suave);font-size:.97rem}
.exp .mas{display:inline-block;margin-top:12px;font-weight:800;font-size:.9rem;color:var(--petrol)}
.exp .mas::after{content:" →"}
.banda-azul .exp{background:var(--tinta2);border-color:var(--tinta3)}
.banda-azul .exp::before{background:var(--petrol);color:var(--blanco)}
.banda-azul .exp h3{color:var(--blanco)}
.banda-azul .exp p{color:#AABBC9}
.banda-azul .exp .mas{color:var(--oro2)}

/* ---------- Iconos CSS ---------- */
.ico{
  width:54px;height:54px;border-radius:10px;flex:none;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tinta);color:var(--oro);margin-bottom:14px;
}
.ico.petrol{background:var(--petrol);color:var(--blanco)}
.ico.oro{background:var(--oro);color:var(--tinta)}
.ico.papel{background:var(--papel2);color:var(--petrol)}
.ico-libreta::before{content:"";width:22px;height:26px;border:3px solid currentColor;border-radius:4px}
.ico-libreta::after{content:"";position:absolute;width:2px;height:14px;background:currentColor;left:22px;top:20px;box-shadow:5px 0 0 currentColor,10px 0 0 currentColor}
.ico-rueda::before{content:"";width:24px;height:24px;border:3px solid currentColor;border-radius:50%}
.ico-rueda::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:currentColor}
.ico-micro::before{content:"";width:14px;height:21px;border:3px solid currentColor;border-radius:8px}
.ico-micro::after{content:"";position:absolute;bottom:11px;width:22px;height:3px;background:currentColor;border-radius:3px}
.ico-grafico::before{content:"";width:26px;height:22px;border:3px solid currentColor;border-radius:4px}
.ico-grafico::after{content:"";position:absolute;bottom:15px;left:17px;width:15px;height:15px;border-bottom:3px solid currentColor;border-left:3px solid currentColor;transform:rotate(45deg)}
.ico-ojo::before{content:"";width:29px;height:17px;border:3px solid currentColor;border-radius:50%}
.ico-ojo::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:currentColor}
.ico-mapa::before{content:"";width:20px;height:26px;border:3px solid currentColor;border-radius:12px 12px 14px 14px}
.ico-mapa::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:currentColor;top:21px;left:23px}
.ico-candado::before{content:"";width:22px;height:18px;border:3px solid currentColor;border-radius:5px;margin-top:8px}
.ico-candado::after{content:"";position:absolute;top:15px;left:20px;width:14px;height:13px;border:3px solid currentColor;border-bottom:0;border-radius:9px 9px 0 0}
.ico-foco::before{content:"";width:22px;height:22px;border:3px solid currentColor;border-radius:50%}
.ico-foco::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:currentColor;top:21px;left:22px;box-shadow:10px 0 0 currentColor,5px -9px 0 currentColor}

/* ---------- Medidores de nivel ---------- */
.nivel{margin-top:12px}
.nivel .nivel-fila{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);font-weight:700}
.nivel .metro{height:8px;background:var(--papel2);border-radius:8px;overflow:hidden;margin-top:6px}
.nivel .metro span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--petrol),var(--oro));width:var(--n,60%)}

/* ---------- Tabla ---------- */
.tabla{width:100%;border-collapse:collapse;background:var(--blanco);border:1px solid var(--linea);font-size:.95rem}
.tabla th,.tabla td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--linea)}
.tabla th{background:var(--tinta);color:var(--blanco);font-family:ui-monospace,monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.tabla tr:last-child td{border-bottom:0}
.tabla .si{color:var(--petrol);font-weight:900}
.tabla .no{color:#A9B4C0}

/* ---------- Planes ---------- */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{
  background:var(--blanco);border:1px solid var(--linea);border-top:6px solid var(--linea);
  padding:30px 26px;display:flex;flex-direction:column;position:relative;border-radius:0 0 var(--radius) var(--radius);
}
.plan-nombre{font-family:ui-monospace,monospace;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol)}
.plan-precio{font-family:Georgia,serif;font-size:2.5rem;font-weight:700;color:var(--tinta);line-height:1.1;margin:10px 0 4px}
.plan-precio small{font-family:system-ui;font-size:.9rem;font-weight:600;color:var(--suave)}
.plan p{color:var(--suave);font-size:.94rem;flex:1}
.plan ul{margin:18px 0 24px;list-style:none;padding:0}
.plan li{padding:8px 0 8px 30px;position:relative;font-size:.94rem;border-bottom:1px dashed var(--linea)}
.plan li:last-child{border-bottom:0}
.plan li::before{
  content:"";position:absolute;left:2px;top:15px;width:13px;height:7px;
  border-left:3px solid var(--petrol);border-bottom:3px solid var(--petrol);transform:rotate(-45deg);
}
.plan .btn{justify-content:center;margin-top:6px}
.plan-destacado{border-top-color:var(--oro);box-shadow:var(--sombra)}
.plan-destacado .plan-precio{color:var(--petrol)}
.cinta{
  position:absolute;top:14px;right:-34px;transform:rotate(38deg);
  background:var(--oro);color:var(--tinta);
  font-family:ui-monospace,monospace;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 34px;
}

/* ---------- Pestañas (radio CSS) ---------- */
.pestanas{position:relative}
.pestanas input{position:absolute;opacity:0;pointer-events:none}
.pestanas label{
  cursor:pointer;display:inline-block;padding:11px 22px;margin:0 6px 12px 0;
  border:1.5px solid var(--linea);background:var(--blanco);border-radius:999px;
  font-weight:800;font-size:.88rem;color:var(--suave);transition:all .15s;
}
.pestanas label:hover{border-color:var(--petrol);color:var(--petrol)}
.pestanas input:checked + label{background:var(--petrol);border-color:var(--petrol);color:var(--blanco)}
.panel{display:none;animation:aparecer .3s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#p1:checked ~ .paneles #panel1{display:block}
#p2:checked ~ .paneles #panel2{display:block}
#p3:checked ~ .paneles #panel3{display:block}
#p4:checked ~ .paneles #panel4{display:block}
#p5:checked ~ .paneles #panel5{display:block}

/* ---------- Citas ---------- */
.cita{
  position:relative;font-family:Georgia,serif;font-style:italic;
  font-size:1.18rem;line-height:1.6;color:var(--tinta);
  border-left:5px solid var(--oro);padding:10px 0 10px 26px;margin:26px 0;
}
.cita::before{content:"“";position:absolute;left:8px;top:-22px;font-size:3.4rem;color:var(--oro);font-family:Georgia}
.cita footer{margin-top:12px;font-family:system-ui;font-style:normal;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.cita footer::before{content:"— "}
.banda-azul .cita{color:var(--blanco)}
.banda-azul .cita footer{color:var(--oro2)}

/* ---------- FAQ ---------- */
.faq{margin-top:26px}
.faq details{
  background:var(--blanco);border:1px solid var(--linea);margin-bottom:12px;
  border-radius:0 10px 10px 0;border-left:5px solid var(--petrol);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:17px 52px 17px 20px;font-weight:800;color:var(--tinta);position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:6px;background:var(--oro);color:var(--tinta);
  display:flex;align-items:center;justify-content:center;font-weight:900;
}
.faq details[open] summary::after{content:"−"}
.faq .faq-cuerpo{padding:0 20px 18px;color:var(--suave);font-size:.96rem}
.banda-azul .faq details{background:var(--tinta2);border-color:var(--tinta3);border-left-color:var(--oro)}
.banda-azul .faq summary{color:var(--blanco)}
.banda-azul .faq .faq-cuerpo{color:#AABBC9}

/* ---------- Formulario (subrayado) ---------- */
.formulario{
  background:var(--blanco);border:1px solid var(--linea);border-top:7px solid var(--tinta);
  padding:36px 34px;box-shadow:var(--sombra);border-radius:0 0 var(--radius) var(--radius);
}
.campo{margin-bottom:24px}
.campo label{display:block;font-family:ui-monospace,monospace;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;color:var(--petrol)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:11px 2px;border:0;border-bottom:2px solid var(--linea);
  background:transparent;font:inherit;font-size:1rem;color:var(--texto);border-radius:0;
  transition:border-color .15s;
}
.campo select{appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%235B6B7E' stroke-width='2' fill='none'/></svg>") no-repeat right 4px center}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--petrol);box-shadow:0 3px 0 -1px rgba(15,118,110,.18)}
.campo textarea{min-height:130px;resize:vertical}
.campo-check{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--suave)}
.campo-check input{width:19px;height:19px;margin-top:3px;accent-color:var(--petrol);flex:none;border:2px solid var(--linea)}
.aviso-form{font-size:.8rem;color:var(--suave);margin-top:16px}

/* ---------- Contacto ---------- */
.contacto-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.contacto-item .ico{width:48px;height:48px;border-radius:9px;margin-bottom:0}
.contacto-item h3{font-size:1rem;font-weight:800;color:var(--tinta)}
.contacto-item p,.contacto-item a{font-size:.96rem;color:var(--suave)}

/* ---------- Cabecera de página ---------- */
.pagina-cabecera{
  background:linear-gradient(118deg,var(--tinta),var(--tinta3));
  color:var(--papel);padding:62px 0 54px;position:relative;overflow:hidden;
}
.pagina-cabecera::after{
  content:attr(data-folio);position:absolute;right:-14px;bottom:-34px;
  font-family:Georgia,serif;font-size:9rem;font-weight:700;color:rgba(255,255,255,.05);pointer-events:none;line-height:1;
}
.pagina-cabecera h1{
  font-family:Georgia,serif;font-size:clamp(2rem,4.4vw,3rem);font-weight:700;
  color:var(--blanco);line-height:1.1;margin-top:16px;letter-spacing:-.01em;
}
.pagina-cabecera h1 em{font-style:italic;color:var(--oro)}
.pagina-cabecera p{color:#B9C7D4;max-width:720px;margin-top:12px}
.miga{font-family:ui-monospace,monospace;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA3B5}
.miga a{color:var(--oro2)}

/* ---------- Artículo ---------- */
.articulo{max-width:780px;margin:0 auto}
.articulo h2{font-family:Georgia,serif;font-size:1.5rem;font-weight:700;color:var(--tinta);margin:34px 0 12px}
.articulo h2::before{content:"§ ";color:var(--oro);font-family:ui-monospace}
.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.16rem;color:var(--tinta);
  border-left:5px solid var(--oro);padding-left:20px;margin:24px 0;
}
.meta-art{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font-family:ui-monospace,monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--suave);margin:18px 0 26px;padding-bottom:16px;border-bottom:1px solid var(--linea);
}
.meta-art .autor{color:var(--petrol);font-weight:700}
.meta-art .chip{background:var(--oro);color:var(--tinta);font-weight:700;padding:3px 12px;border-radius:999px}

/* ---------- Legal ---------- */
.legal{max-width:840px;margin:0 auto}
.legal h2{font-family:Georgia,serif;font-size:1.35rem;font-weight:700;color:var(--tinta);margin:34px 0 12px}
.legal h2::before{content:"§ ";color:var(--oro);font-family:ui-monospace}
.legal h3{font-size:1.05rem;font-weight:800;color:var(--tinta);margin:22px 0 8px}
.legal p,.legal li{margin-bottom:12px}
.legal .fecha-act{
  display:inline-block;background:var(--blanco);border:1px solid var(--linea);border-left:5px solid var(--petrol);
  padding:7px 16px;font-family:ui-monospace,monospace;font-size:.78rem;font-weight:700;color:var(--suave);margin-bottom:22px;
}

/* ---------- Pie ---------- */
.pie{background:var(--papel2);border-top:7px solid var(--tinta);margin-top:0}
.pie-marca{background:var(--tinta);color:var(--papel);padding:34px 0}
.pie-marca .contenedor{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pie-marca .marca-texto{color:var(--blanco);font-size:2.2rem}
.pie-marca .marca-tag{color:var(--oro2)}
.pie-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:36px;padding:52px 0 40px}
.pie h3{font-family:ui-monospace,monospace;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--petrol);margin-bottom:16px}
.pie ul{list-style:none;padding:0}
.pie li{margin-bottom:9px}
.pie a{color:var(--texto)}
.pie a:hover{color:var(--petrol);text-decoration:none}
.pie address{font-style:normal;font-size:.94rem;line-height:1.9}
.pie address strong{color:var(--tinta)}
.pie-legal{border-top:1px solid var(--linea);padding:20px 0}
.pie-legal-fila{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--suave)}
.pie-legal ul{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0}
.pie-legal a{color:var(--suave)}

/* ---------- Cookies ---------- */
.cookies{
  position:fixed;right:18px;bottom:18px;z-index:3000;max-width:400px;
  background:var(--tinta);color:var(--papel);border-left:6px solid var(--oro);
  border-radius:12px;padding:20px 22px;display:none;box-shadow:var(--sombra);
}
.cookies.visible{display:block}
.cookies p{font-size:.9rem;margin-bottom:14px}
.cookies a{color:var(--oro2)}
.cookies-botones{display:flex;gap:10px;flex-wrap:wrap}
.cookies button{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:.86rem;padding:10px 18px;background:var(--oro);color:var(--tinta);border-radius:8px}
.cookies button.secundario{background:transparent;color:var(--blanco);border:1.5px solid var(--tinta3)}

/* ---------- Gracias ---------- */
.gracias-marca{
  width:116px;height:116px;border-radius:50%;margin:0 auto 28px;position:relative;
  background:var(--tinta);display:flex;align-items:center;justify-content:center;
  animation:latido 2.2s ease-in-out infinite;
}
.gracias-marca::before{
  content:"";width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--blanco) 0 22%,var(--petrol) 23% 48%,var(--tinta) 49% 62%,var(--oro) 63% 100%);
}
.gracias-marca::after{content:"✓";position:absolute;bottom:6px;right:4px;width:34px;height:34px;border-radius:50%;background:var(--oro);color:var(--tinta);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .planes{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .plan-destacado{order:-1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pie-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .portada-wrap{justify-self:center;max-width:400px}
}
@media (max-width:720px){
  .cabecera-fila{min-height:0}
  .nav{width:100%;order:3;margin-left:0;overflow-x:auto;flex-wrap:nowrap;padding:6px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;margin:0 10px 0 0;padding:8px 4px;font-size:.92rem}
  .seccion{padding:58px 0}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .stats{margin-top:-34px;gap:14px}
  .stats > div{padding:18px 12px}
  .stats strong{font-size:1.7rem}
  .pie-grid{grid-template-columns:1fr;gap:26px;padding:40px 0 30px}
  .hero{padding:64px 0}
  .hero::after{font-size:7rem}
  .tabla{font-size:.85rem}
  .cookies{left:14px;right:14px;max-width:none}
}