/* Dentro del Gráfico — estilos comunes de todo el sitio */

:root{
  --fondo:#05070A; --turq:#25E0F0; --suave:#7CC9D4;
  --texto:#EAF2F4; --tenue:rgba(234,242,244,.55);
  --linea:rgba(37,224,240,.22); --tarjeta:#0B1014;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--fondo);color:var(--texto);
     font-family:'Segoe UI',system-ui,Arial,sans-serif;line-height:1.6;
     -webkit-font-smoothing:antialiased}
.env{width:min(1080px,92vw);margin:0 auto}
.env.estrecho{width:min(760px,92vw)}
a{color:var(--turq)}

/* ------------------------------------------------------------- cabecera */
header{border-bottom:1px solid var(--linea);position:sticky;top:0;
       background:rgba(5,7,10,.92);backdrop-filter:blur(8px);z-index:10}
.barra{display:flex;align-items:center;gap:14px;padding:14px 0}
.barra > a.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.barra img{width:46px;height:46px;border-radius:50%;background:#000}
.marca{font-weight:800;font-size:19px;letter-spacing:.3px;line-height:1.15}
.marca em{font-style:normal;color:var(--turq)}
.marca span{display:block;font-size:11px;font-weight:400;letter-spacing:2.6px;
            color:var(--suave);margin-top:3px}
.barra nav{margin-left:auto;display:flex;gap:22px;font-size:15px;flex-wrap:wrap}
.barra nav a{text-decoration:none;color:var(--tenue)}
.barra nav a:hover,.barra nav a.activo{color:var(--turq)}

/* -------------------------------------------------------------- portada */
.portada{padding:74px 0 54px;position:relative;overflow:hidden}
.portada::before{content:"";position:absolute;left:50%;top:-30%;width:900px;height:700px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(37,224,240,.16),transparent 70%)}
.portada h1{font-size:clamp(30px,5vw,50px);font-weight:800;line-height:1.12;
            letter-spacing:-.5px;position:relative}
.portada h1 em{font-style:normal;color:var(--turq)}
.portada p{margin-top:18px;font-size:18px;color:var(--tenue);max-width:60ch;position:relative}
.lema{margin-top:26px;font-size:14px;letter-spacing:3px;color:var(--suave);position:relative}

/* --------------------------------------------------------------- avisos */
.aviso{margin:30px 0 0;border:1px solid rgba(255,180,80,.35);
       background:rgba(255,180,80,.07);border-radius:10px;padding:16px 20px;
       font-size:14.5px;color:rgba(255,220,170,.92)}
.aviso b{color:#ffcf8a}

/* ------------------------------------------------------------ secciones */
section{padding:56px 0}
h2{font-size:26px;font-weight:800;letter-spacing:-.2px}
h2 + p.intro{margin-top:10px;color:var(--tenue);max-width:65ch}
.vacio{margin-top:26px;padding:22px 24px;border:1px dashed var(--linea);
       border-radius:12px;color:var(--tenue)}

/* --------------------------------------------------------- los 3 caminos */
.caminos{margin-top:40px;display:grid;gap:20px;
         grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.camino{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
        padding:26px;text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.camino:hover{border-color:var(--turq)}
.camino h3{font-size:20px;font-weight:800}
.camino p{margin-top:10px;font-size:15px;color:var(--tenue);flex:1}
.camino .pie{margin-top:16px;font-size:14px;font-weight:700;color:var(--turq)}
.camino.pendiente{opacity:.62}
.camino.pendiente .pie{color:var(--tenue)}

/* -------------------------------------------------------------- ofertas */
.ofertas{margin-top:30px;display:grid;gap:20px;
         grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.oferta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;
        padding:24px;display:flex;flex-direction:column}
.oferta.destacada{border-color:var(--turq);box-shadow:0 0 0 1px rgba(37,224,240,.25)}
.etiqueta{align-self:flex-start;font-size:11px;letter-spacing:2.2px;font-weight:700;
          color:var(--fondo);background:var(--turq);padding:4px 10px;border-radius:5px;
          margin-bottom:14px}
.oferta h3{font-size:23px;font-weight:800}
.desc{margin-top:8px;font-size:15px;color:var(--suave)}
.resumen{margin-top:12px;font-size:15px;color:var(--tenue)}
.cond{margin-top:18px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px;
      display:grid;gap:7px;font-size:14.5px}
.cond div{display:flex;justify-content:space-between;gap:14px}
.cond dt{color:var(--tenue)}
.cond dd{text-align:right;font-weight:600}
.codigo{margin-top:16px;font-size:14px;color:var(--tenue)}
.codigo b{color:var(--texto);font-family:Consolas,monospace;font-size:15px;
          background:rgba(37,224,240,.12);padding:2px 8px;border-radius:5px}
.boton{margin-top:18px;display:block;text-align:center;text-decoration:none;
       background:var(--turq);color:#04222a;font-weight:800;letter-spacing:.3px;
       padding:13px 18px;border-radius:9px}
.boton:hover{filter:brightness(1.08)}
.boton.vacio{background:rgba(255,255,255,.08);color:var(--tenue);cursor:not-allowed}

/* ----------------------------------------------------------- comparativa */
.tabla{margin-top:26px;overflow-x:auto;border:1px solid var(--linea);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:620px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07)}
th{background:rgba(37,224,240,.10);font-size:12px;letter-spacing:1.6px;
   text-transform:uppercase;color:var(--suave)}
tbody tr:last-child td{border-bottom:none}
td:first-child{font-weight:700}

/* ------------------------------------------------------------ artículos */
.articulos{margin-top:30px;display:grid;gap:16px}
.articulo{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
          padding:22px 24px;text-decoration:none;color:inherit;display:block}
a.articulo:hover{border-color:var(--turq)}
.articulo h3{font-size:19px;font-weight:700}
.articulo p{margin-top:7px;font-size:15px;color:var(--tenue)}
.articulo .meta{margin-top:10px;font-size:12.5px;letter-spacing:2px;color:var(--suave)}

/* ------------------------------------------- el texto de un artículo */
.migas{width:min(720px,92vw);margin:26px auto 0;font-size:12.5px;letter-spacing:1.8px;
       text-transform:uppercase;color:var(--suave)}
.tituloArt{width:min(720px,92vw);margin:14px auto 0}
.tituloArt h1{font-size:clamp(28px,4.4vw,40px);font-weight:800;line-height:1.16;
              letter-spacing:-.6px}
.tituloArt .bajada{margin-top:14px;font-size:18px;color:var(--tenue)}
.tituloArt .meta{margin-top:18px;padding-bottom:22px;border-bottom:1px solid var(--linea);
                 font-size:12.5px;letter-spacing:2px;color:var(--suave)}

.prosa{width:min(720px,92vw);margin:0 auto;padding:6px 0 10px;font-size:17px;line-height:1.75}
.prosa > * + *{margin-top:20px}
.prosa p{color:rgba(234,242,244,.80)}
.prosa h2{font-size:24px;margin-top:44px;letter-spacing:-.2px}
.prosa h3{font-size:18.5px;font-weight:700;margin-top:32px;color:var(--suave)}
.prosa ul,.prosa ol{list-style:none}
.prosa li{position:relative;padding-left:22px;margin-top:10px;color:rgba(234,242,244,.80)}
.prosa ul li::before{content:"";position:absolute;left:3px;top:12px;width:6px;height:6px;
                     border-radius:50%;background:var(--turq);opacity:.6}
.prosa ol{counter-reset:n}
.prosa ol li{counter-increment:n}
.prosa ol li::before{content:counter(n);position:absolute;left:1px;top:0;
                     font-size:13.5px;font-weight:800;color:var(--turq)}
.prosa b,.prosa strong{color:var(--texto);font-weight:700}
.prosa em{color:var(--texto);font-style:italic}
.prosa blockquote{border-left:3px solid var(--turq);padding:2px 0 2px 20px;
                  font-size:19px;color:var(--texto)}
.prosa .clave{background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
              padding:20px 24px;font-size:16px}
.prosa .clave b{display:block;margin-bottom:7px;color:var(--turq);
                font-size:11.5px;letter-spacing:2px;text-transform:uppercase}
.prosa .tabla{margin-top:26px}
.prosa table{min-width:0;font-size:15px}

/* Figuras de los artículos. Los dibujos van en SVG dentro del propio HTML: no
   pesan nada, se ven nítidos en cualquier pantalla y se editan a mano. */
.prosa .figura{margin-top:36px;background:var(--tarjeta);border:1px solid var(--linea);
               border-radius:14px;padding:26px 20px 20px}
.prosa .figura svg{display:block;width:100%;height:auto}
.prosa .figura figcaption{margin-top:18px;padding-top:16px;border-top:1px solid var(--linea);
                          font-size:14.5px;line-height:1.55;color:var(--tenue);text-align:center}
.prosa .figura figcaption b{color:var(--suave);font-weight:700}

.finArt{width:min(720px,92vw);margin:48px auto 0;padding-top:28px;
        border-top:1px solid var(--linea)}
.finArt .aviso{margin-top:0}
.siguiente{display:block;margin-top:22px;background:var(--tarjeta);border:1px solid var(--linea);
           border-radius:12px;padding:20px 24px;text-decoration:none;color:inherit}
a.siguiente:hover{border-color:var(--turq)}
.siguiente span{display:block;font-size:11.5px;letter-spacing:2px;color:var(--suave)}
.siguiente b{display:block;margin-top:6px;font-size:18px;font-weight:700;color:var(--texto)}

/* ------------------------------------------------------------------ pie */
footer{border-top:1px solid var(--linea);padding:34px 0 44px;margin-top:20px;
       font-size:14px;color:var(--tenue)}
footer a{color:var(--suave)}
.pieGrid{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between}
.fecha{margin-top:12px;font-size:13px;color:var(--tenue)}