/*
Theme Name: Mexplica
Theme URI: https://mexplica.com
Description: Tema hijo de GeneratePress para Mexplica. Sistema visual v1.
Author: Mexplica
Template: generatepress
Version: 1.0
Text Domain: mexplica
*/

/* ═══════════════════════════════════════════════════════════
   MEXPLICA · SISTEMA VISUAL
   Orden del archivo:
   1. Tokens          2. Base
   3. Cabecera y menú 4. Utilidades (chips, etiquetas)
   5. Tarjetas de nota y rejillas
   6. Página de nota  7. Bloques editoriales
   8. Pie             9. Responsive
   No borres los comentarios: son las anclas para buscar.
   ═══════════════════════════════════════════════════════════ */


/* ── 1. TOKENS ───────────────────────────────────────────── */
:root{
  --tinta:#0B0B0F;
  --sup:#141419;          /* superficies: cajas, franjas */
  --sup2:#1B1B22;
  --linea:#26262F;        /* bordes */
  --hueso:#F4F1EA;
  --gris:#8A8A93;         /* texto secundario */
  --gris2:#B8B8C2;
  --cuerpo:#DCDCE4;       /* texto de artículo */
  --rosa:#FF2D78;         /* información */
  --ambar:#FFD23F;        /* entretenimiento: WOW, memes, geek, tendencia */

  --display:'Anton', Impact, sans-serif;
  --texto:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;

  --ancho:1300px;
}


/* ── 2. BASE ─────────────────────────────────────────────── */
body{
  background:var(--tinta);
  color:var(--hueso);
  font-family:var(--texto);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--rosa)}

h1,h2,h3,h4,.entry-title{
  font-family:var(--display);
  font-weight:400;
  line-height:.94;
  letter-spacing:.005em;
}

/* ancho del contenedor: debe coincidir con Personalizar > Diseño > Contenedor */
.site-content .grid-container,
.site-header .inside-header,
.site-footer .inside-footer{max-width:var(--ancho)}

/* enfoque visible para teclado (accesibilidad, no lo quites) */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--rosa);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* ── 3. CABECERA Y MENÚ ──────────────────────────────────── */
.site-header{
  background:rgba(11,11,15,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:200;
}
.site-header .inside-header{padding-block:14px}

/* logotipo en texto (si usas imagen, borra este bloque) */
.site-title{font-family:var(--display);font-size:36px;line-height:1}
.site-title a{letter-spacing:.01em}
.mexplica-mex{color:var(--rosa)}

.main-navigation .main-nav ul li a{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--gris2);
  border-bottom:2px solid transparent;
  transition:.15s;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{
  color:var(--hueso);
  border-bottom-color:var(--rosa);
  background:none;
}
/* secciones ligeras: pon la clase CSS "ligera" en el menú de WordPress */
.main-navigation .main-nav ul li.ligera a:hover{border-bottom-color:var(--ambar)}

/* barra de fecha (widget o bloque encima de la cabecera) */
.mexplica-barra{
  border-bottom:1px solid var(--linea);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);
}
.mexplica-barra .inside-top-bar{
  display:flex;justify-content:space-between;align-items:center;height:34px;
}


/* ── 4. UTILIDADES ───────────────────────────────────────── */
/* clases para poner en "Clases CSS adicionales" de cada bloque */

.eti{                       /* etiqueta pequeña mono */
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rosa);
}
.eti-gris{color:var(--gris)}
.eti-ambar{color:var(--ambar)}

.chip{                      /* etiqueta de sección sobre fondo */
  display:inline-block;background:var(--rosa);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;
}
.chip-ambar{background:var(--ambar);color:var(--tinta)}
.chip-hueso{background:var(--hueso);color:var(--tinta)}

.mono{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;
      font-size:11px;color:var(--gris)}

/* encabezado de sección de portada */
.mexplica-tit-seccion{
  display:flex;align-items:baseline;gap:16px;margin-bottom:26px;
  border-bottom:1px solid var(--linea);padding-bottom:12px;
}
.mexplica-tit-seccion h2{font-size:26px;text-transform:uppercase;margin:0}


/* ── 5. TARJETAS Y REJILLAS ──────────────────────────────── */
/* Úsalas con el bloque "Bucle de consulta" de WordPress */

.mexplica-nota .wp-block-post-featured-image{margin-bottom:14px}
.mexplica-nota .wp-block-post-featured-image img{
  aspect-ratio:4/3;object-fit:cover;width:100%;
}
.mexplica-nota .wp-block-post-title{font-size:21px;margin:10px 0 8px;line-height:1.02}
.mexplica-nota .wp-block-post-title a:hover{color:var(--rosa)}
.mexplica-nota .wp-block-post-excerpt{font-size:14.5px;color:var(--gris);line-height:1.45}
.mexplica-nota .wp-block-post-date{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gris);
  display:block;margin-top:10px;
}
/* banda de contenido ligero */
.mexplica-ligera{background:var(--sup);border-block:1px solid var(--linea);padding:56px 0}
.mexplica-ligera .mexplica-tit-seccion h2{color:var(--ambar)}
.mexplica-ligera .wp-block-post-title a:hover{color:var(--ambar)}
.mexplica-ligera .wp-block-post-featured-image img{aspect-ratio:4/5}

/* lo más leído: lista numerada */
.mexplica-leido ol{list-style:none;counter-reset:l;padding:0;margin:0}
.mexplica-leido li{
  counter-increment:l;display:grid;grid-template-columns:52px 1fr;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--linea);align-items:start;
}
.mexplica-leido li::before{
  content:counter(l,decimal-leading-zero);
  font-family:var(--display);font-size:32px;color:var(--linea);line-height:.8;
}
.mexplica-leido li:hover::before{color:var(--rosa)}
.mexplica-leido a{font-size:15.5px;line-height:1.35;font-weight:600}


/* ── 6. PÁGINA DE NOTA ───────────────────────────────────── */
.single .entry-title{font-size:clamp(38px,5vw,66px);margin:16px 0 20px}
.mexplica-sumario{font-size:21px;line-height:1.5;color:var(--gris2);max-width:60ch}

.single .entry-meta,
.mexplica-meta{
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;padding:22px 0;margin:26px 0;
  border-block:1px solid var(--linea);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--gris);
  text-transform:uppercase;
}
.mexplica-meta strong{color:var(--hueso)}

.single .entry-content{
  font-size:18.5px;line-height:1.72;color:var(--cuerpo);max-width:70ch;
}
.single .entry-content p{margin-bottom:24px}
.single .entry-content strong{color:var(--hueso)}
.single .entry-content h2{font-size:30px;margin:44px 0 18px;color:var(--hueso)}
.single .entry-content a{color:var(--rosa);border-bottom:1px solid rgba(255,45,120,.4)}

.wp-block-image figcaption{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--gris);
  padding-top:10px;line-height:1.5;
}


/* ── 7. BLOQUES EDITORIALES ──────────────────────────────── */
/* Cada uno se arma con un bloque Grupo y su clase CSS.
   Guárdalos como bloques reutilizables para no rehacerlos. */

/* EN 30 SEGUNDOS */
.mexplica-30{
  border:1px solid var(--linea);border-left:3px solid var(--rosa);
  padding:20px 24px;margin:26px 0;background:var(--sup);
}
.mexplica-30 h4,.mexplica-30 p:first-child strong{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--rosa);text-transform:uppercase;margin-bottom:12px;display:block;
}
.mexplica-30 ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.mexplica-30 li{
  font-size:15.5px;color:var(--gris2);padding-left:18px;position:relative;line-height:1.45;
}
.mexplica-30 li::before{
  content:'';position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--rosa);
}

/* CITA DESTACADA (bloque Cita con clase mexplica-cita) */
.mexplica-cita{margin:40px 0;padding:8px 0 8px 28px;border-left:3px solid var(--rosa)}
.mexplica-cita p{
  font-family:var(--display);font-size:30px;line-height:1.14;color:var(--hueso);
  margin-bottom:12px;
}
.mexplica-cita cite{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gris);
  font-style:normal;text-transform:uppercase;
}

/* CAJA DE DATO */
.mexplica-dato{
  background:var(--sup);border:1px solid var(--linea);padding:28px;margin:40px 0;
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
}
.mexplica-dato .cifra{
  font-family:var(--display);font-size:74px;color:var(--rosa);line-height:.85;
}
.mexplica-dato p{font-size:16px;color:var(--gris2);margin:0;line-height:1.5}
.mexplica-dato small{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--gris);
  display:block;margin-top:8px;text-transform:uppercase;
}

/* EL EXPLICADOR · las cuatro preguntas */
.mexplica-explicador{
  border:1px solid var(--linea);
  background:linear-gradient(180deg,rgba(255,45,120,.07),transparent 60%),var(--sup);
  padding:34px;margin:52px 0;
}
.mexplica-explicador > h2:first-child{
  font-size:27px;text-transform:uppercase;margin:0 0 26px;
  padding-bottom:14px;border-bottom:1px solid var(--linea);
}
.mexplica-explicador ol{list-style:none;counter-reset:p;padding:0;margin:0;display:grid;gap:24px}
.mexplica-explicador li{
  counter-increment:p;display:grid;grid-template-columns:56px 1fr;gap:20px;
}
.mexplica-explicador li::before{
  content:counter(p,decimal-leading-zero);
  font-family:var(--display);font-size:34px;color:var(--rosa);line-height:.8;
}
.mexplica-explicador li strong{
  font-family:var(--texto);font-weight:700;font-size:17px;line-height:1.3;
  display:block;margin-bottom:7px;color:var(--hueso);
}
.mexplica-explicador li{font-size:16px;color:var(--gris2);line-height:1.55}

/* DE DÓNDE SALIÓ ESTO · transparencia de fuentes */
.mexplica-fuentes{border:1px dashed var(--linea);padding:26px;margin:44px 0}
.mexplica-fuentes h4{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--rosa);margin-bottom:14px;text-transform:uppercase;
}
.mexplica-fuentes ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mexplica-fuentes li{font-size:15px;color:var(--gris2);padding-left:20px;position:relative}
.mexplica-fuentes li::before{content:'→';position:absolute;left:0;color:var(--gris)}
.mexplica-fuentes > p:last-child{font-size:13.5px;color:var(--gris);margin-top:16px}

/* etiquetas del final */
.single .entry-tags a,.wp-block-post-terms a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--linea);padding:8px 13px;color:var(--gris2);
  display:inline-block;margin:0 6px 6px 0;
}
.single .entry-tags a:hover,.wp-block-post-terms a:hover{
  border-color:var(--rosa);color:var(--rosa);
}


/* ── 8. PIE ──────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--linea);background:var(--tinta)}
.site-footer .footer-widgets{padding-block:56px}
.site-footer .widget-title{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  color:var(--rosa);text-transform:uppercase;margin-bottom:14px;
}
.site-footer a{color:var(--gris2);font-size:14px}
.site-footer a:hover{color:var(--hueso)}
.site-info{
  border-top:1px solid var(--linea);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--gris);text-transform:uppercase;
}


/* ── 9. RESPONSIVE ───────────────────────────────────────── */
@media(max-width:768px){
  .site-title{font-size:28px}
  .single .entry-title{font-size:32px}
  .mexplica-dato{grid-template-columns:1fr;gap:14px}
  .mexplica-explicador{padding:22px}
  .mexplica-meta{gap:14px}
}