/* =========================================
   Tipografía editorial (Pedro Carvalho)
   ========================================= */

/* Base de lectura (desktop) */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 18px;       /* base desktop ~prensa */
  line-height: 1.7;
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titulares: misma familia serif, peso alto */
h1, h2, h3, h4, h5, h6 {
  font-family: "Aldrich", sans-serif;  
  font-weight: 700;
  line-height: 1.25;
  color: #091640; /* color corporativo */
  margin: 0 0 .6em;
}

/* Estilos tipográficos */
h1 {
  font-family: "Aldrich", sans-serif;  
  font-size: 4.2rem; /* ~67px */
  color: #091640;
  text-decoration: none;
}

h2 {
  font-family: "Aldrich", sans-serif;  
  font-size: 3.125rem;  /* ~34px */
  color: #091640;
  text-decoration: none;
}

h3 {
  font-family: "Aldrich", sans-serif;  
  font-size: 2rem;   /* ~28px */
  color: #091640;
  text-decoration: none;
}


h4 { font-size: 1.375rem; } /* ~22px */
h5 { font-size: 1.125rem; } /* ~18px */
h6 {
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Escala en escritorio (≥769px) */
h1 { font-size: 4.2rem; }    /* ~67px */
h2 { font-size: 3.125rem; }   /* ~34px */
h3 { font-size: 2rem; }    /* ~28px */
h4 { font-size: 1.375rem; }   /* ~22px */
h5 { font-size: 1.125rem; }   /* ~18px */
h6 { font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; }


/* Estilo especial para títulos destacados */
h1.big-title {
  font-size: 4.5rem;   /* ≈ 56px */
  line-height: 1.15;
  color: #091640;     
  letter-spacing: 1px;
  font-weight: 700;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;               /* hereda el color del H */
  text-decoration: none;
  transition: color .25s ease;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: #009fd9;               /* azul clarito al hover */
  text-decoration: none;
}


/* Capitular en el primer párrafo del artículo */
.texto p:first-of-type::first-letter{
  float: left;
  font-weight: 600;
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: .85;           /* ajusta altura visual */
  margin: .05em .18em 0 0;    /* separación a la derecha */
  color: currentColor;        /* hereda el color del texto */
  font-family: "Source Serif 4", serif; /* o la que uses para texto largo */
}

/* Desactivar en pantallas pequeñas si rompe el ritmo */
@media (max-width: 480px){
  .texto p:first-of-type::first-letter{
    float: none;
    font-size: inherit;
    margin: 0;
    line-height: inherit;
  }
}



/* TEXTO ORDINARIO */
p, li { margin: 0 0 1.05em; }

/* Enlaces en el cuerpo del artículo */
.content-article p a,
.content-article li a,
.content-article figcaption a,
.content-article blockquote a {
  color: #0057b8;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.content-article p a:hover,
.content-article li a:hover,
.content-article figcaption a:hover,
.content-article blockquote a:hover {
  color: #091640;
  text-decoration-thickness: 2px;
}




/* ENLACES EN TEXTO CORRIENTE */
p a {
  text-decoration: underline;
  color: #009fd9; /* azul corporativo base */
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  text-decoration-thickness: 1px; /* grosor fino inicial */
  text-underline-offset: 3px;     /* separación del texto */
}

p a:hover {
  color: #091640;                 /* azul oscuro corporativo */
  text-decoration-thickness: 2px; /* subrayado más marcado al pasar */
  text-decoration-color: #009fd9; /* mantiene el azul clarito */
}


/* Citas tipo entrecomillado */
blockquote {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 2.3rem;        
  line-height: 1.5;
  color: #111;
  position: relative;
  margin: 0.5rem 0 5rem 0;
  padding-left: 28rem;   
}

blockquote::before {
  content: "“"; 
  font-family: Georgia, serif;
  font-size: 8rem;
  line-height: 1;
  position: absolute;
  left: 0;
  top: -1rem;
  color: #091640;
  opacity: 0.8;
}


/* Citas tipo reportaje */
.pull-quote {
  font-family: "Source Serif 4", serif;
  font-size: 2.5rem;          /* más grande que el texto normal */
  line-height: 1.3;
  font-weight: 600;
  color: #091640;
  border-left: 4px solid #091640; /* línea azul corporativa */
  padding-left: 1rem;
  margin: 2rem 0;
  display: block; 
}


/* Citas tipo reportaje en pequeño */
.pull-quote-small {
  font-family: "Source Serif 4", serif;
  font-size: 2rem;          /* más grande que el texto normal, pero poco */
  line-height: 1.3;
  font-weight: 600;
  color: #091640;
  text-decoration: none;
  border-left: 4px solid #091640; /* línea azul corporativa */
  padding-left: 1rem;
  margin: 2rem 0;
  display: block; 
}

/* Quita el subrayado de los enlaces dentro de la cita de forma forzada */
.pull-quote-small a {
    text-decoration: none !important;
    color: inherit; /* Hereda el color del texto de la cita */
}

/* Cambia el color del enlace al pasar el ratón por encima (hover) */
.pull-quote-small a:hover {
    color: #009fd9 !important; 
}




/* Estilo títulos secciones */
.titulo-seccion {
  font-family: 'Aldrich', sans-serif;
  font-size: 3.125rem;      /* escritorio */
  line-height: 1.1;
  color: #091640;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 700;
  text-decoration: none;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .titulo-seccion {
    font-size: 2.1rem;     /* tablets y móviles */
    margin-top: 24px;
    margin-bottom: 12px;
  }
}





/* Entradilla bajo H1 (subtítulo editorial) */
.subhead {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 2.1rem;   
  line-height: 1.55;
  color: #444;
  margin: -.35em 0 1.1em;  /* se acerca al H1 y deja aire abajo */
}

/* Pies de foto y microcopy en sans (UI) */
figcaption, small, .meta, .kicker,
#gtco-header .date-post,
#gtco-footer .footer-logo,
.gtco-nav ul li > a,
.pagination a {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Pies de foto */
figure figcaption {
  font-size: .9rem;
  line-height: 1.5;
  color: #666;
}

/* Botones y controles (coherencia UI) */
.btn, .form-control, .uppercase {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Asegurar texto alineado a la izquierda en artículos (tu base lo centraba) */
article { text-align: left; }

/* ===== Móvil (≤768px) ===== */
@media (max-width: 768px) {
  body { font-size: 16px; }      /* compacidad móvil */
  h1   { font-size: 2.4rem; }      /* ~32px */
  h2   { font-size: 1.625rem; }  /* ~26px */
  h3   { font-size: 1.375rem; }  /* ~22px */
  h4   { font-size: 1.125rem; }  /* ~18px */
  h5   { font-size: 1rem; }      /* 16px */
  h6   { font-size: .9rem; }
  blockquote { font-size: 2rem; }
  figure figcaption, small, .meta, .kicker { font-size: .85rem; }
  .subhead { font-size: 1.1rem; }   /* ~17.6px */
}

/* Preferencias de movimiento (accesibilidad opcional) */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  video[autoplay] { animation: none; transition: none; }
}

/* =========================
   Pies de foto 
   ========================= */
figure figcaption {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.3rem;         /* antes .9rem */
  line-height: 1.5;
  font-weight: 500;        /* un pelín más grueso para overlay */
  color: #666;             /* en overlays ya llevas color blanco inline */
  padding-top: 10px;       /* separa del borde de la imagen en captions normales */
}

/* Enlaces dentro del figcaption: sin subrayado, también en hover/focus */
figure figcaption a,
figure figcaption a:hover,
figure figcaption a:focus,
.full-bleed figcaption a,
.full-bleed figcaption a:hover,
.full-bleed figcaption a:focus {
text-decoration: none !important;
border-bottom: 0 !important;
}

/* Opcional: feedback mínimo al hover sin subrayado */
figure figcaption a:hover,
.full-bleed figcaption a:hover {
  opacity: .9;
}

/* Móvil: baja un punto si lo ves muy grande */
@media (max-width: 768px) {
  figure figcaption { font-size: .95rem; }
}







/* Cuadro explicativo simple */
.cuadro-explicativo {
  display: block; /* Ahora se comporta como un bloque, ocupando todo el ancho */
  font-family: Roboto, monospace;
  letter-spacing: -0.5px; /* Aquí se añade el espaciado de las letras */
  background-color: #e6e6e6;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}




/* Hora local y hora UTC */
.hora {
  font-family: "Aldrich", monospace;
  line-height: 1.55;
  color: #444;
  margin: -.35em 0 1.1em;
}

.hora .hora-local {
  /* Estilo para la hora local */
  font-size: 2.5rem;
}

.hora .hora-utc {
  /* Estilo para la hora UTC, más pequeña y debajo */
  display: block; /* Asegura que la hora UTC esté en una nueva línea */
  font-size: 1.5rem; 
  line-height: 1.2;
  
}







/* Cita tipo reportaje con comilla grande, sobrescribiendo el theme */
#gtco-maine .content-article blockquote {
  position: relative;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 2rem;        /* ~20px */
  line-height: 1.5;
  color: #111;
  margin: 2rem 0;

  /* Empuja el texto a la derecha para no montarse con la comilla */
  padding-left: 8rem;     /* ajusta a tu gusto (6–10rem suele ir bien) */

  /* neutraliza lo anterior del theme */
  border-left: 0;
}

#gtco-maine .content-article blockquote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -1rem;             /* sube un poco la comilla */
  font-family: Georgia, serif;
  font-size: 8rem;        /* tamaño de la comilla */
  line-height: 1;
  color: #091640;         /* azul corporativo oscuro */
  opacity: .85;
}




/* ===== Footer: enlaces blancos por defecto; azul clarito al hover ===== */
#gtco-footer .post-entry h4 a,
#gtco-footer .post-copy h4 a,
#gtco-footer .post-meta,
#gtco-footer .post-meta a,
#gtco-footer .footer-heading a {
  color: #ffffff !important;
  text-decoration: none !important;
  border: 0 !important;
  transition: color .25s ease;
}

#gtco-footer .post-entry h4 a:hover,
#gtco-footer .post-copy h4 a:hover,
#gtco-footer .post-meta:hover,
#gtco-footer .post-meta a:hover,
#gtco-footer .footer-heading a:hover {
  color: #55c1ff !important; /* azul clarito */
  text-decoration: none !important;
}


/* Enlaces en titulares: H envuelve <a> o <a> envuelve H */
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a,
a > h1, a > h2, a > h3, a > h4, a > h5, a > h6 {
  color: #091640 !important;        /* color corporativo por defecto */
  text-decoration: none !important; /* sin subrayado */
  border: 0 !important;             /* evita subrayados simulados */
  transition: color .25s ease;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover,
a:hover > h1, a:hover > h2, a:hover > h3, a:hover > h4, a:hover > h5, a:hover > h6 {
  color: #009fd9 !important;        /* azul clarito en hover */
  text-decoration: none !important;
  border: 0 !important;
}

/* ===== Enlaces en titulares: sin subrayado y hover azul ===== */

/* Caso 1: el enlace está DENTRO del H */
.content-article h1 > a,
.content-article h2 > a,
.content-article h3 > a,
.content-article h4 > a,
.content-article h5 > a,
.content-article h6 > a,
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  color: #091640 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color .25s ease;
}
.content-article h1 > a:hover,
.content-article h2 > a:hover,
.content-article h3 > a:hover,
.content-article h4 > a:hover,
.content-article h5 > a:hover,
.content-article h6 > a:hover,
h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {
  color: #009fd9 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Caso 2: el enlace ENVUELVE al H (a > hX) */
.content-article a:has(> h1, > h2, > h3, > h4, > h5, > h6),
a:has(> h1, > h2, > h3, > h4, > h5, > h6) {
  text-decoration: none !important;
  border-bottom: none !important;
  color: #091640 !important;
  transition: color .25s ease;
}
.content-article a:hover:has(> h1, > h2, > h3, > h4, > h5, > h6),
a:hover:has(> h1, > h2, > h3, > h4, > h5, > h6) {
  color: #009fd9 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}





/* ===============================
  Estilos artículos relacionados
  =============================== */

/* Recuadro general */
.relacionados-box {
    background: #e6e6e6;
    border-radius: 12px;
    padding: 20px 25px;
    margin: 20px 0;
}

/* Título */
.related-title {
    font-family: 'Aldrich', sans-serif;
    font-size: 2.4rem !important;
    line-height: 1.15;
    margin: -24px 0 6px 0 !important;
    color: #091640;
}

/* Línea separadora */
.relacionados-box > div > div > div[style="border-top: 2px solid black; padding-top: 10px;"] {
    border-top: 2px solid black !important;
    padding-top: 10px !important;
    margin-bottom: 20px !important; /* Ajuste para espacio debajo de la línea */
}


/* Contenedor de la lista de tarjetas (Flexbox) */
#gtco-post-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio uniforme entre todas las tarjetas */
    justify-content: flex-start; /* Asegura que los elementos empiecen desde la izquierda */
}

/* Tarjeta individual */
#gtco-post-list .entry {
    /* Por defecto, 3 columnas en pantallas grandes */
    flex: 1 1 calc(33.333% - 13.333px); /* Ajuste para 3 columnas con 20px de gap */
    min-width: 280px; /* Ancho mínimo para evitar tarjetas demasiado estrechas */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0; /* Elimina cualquier margen residual */
}

#gtco-post-list .entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Todo el contenido de la tarjeta es clicable */
#gtco-post-list .entry a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Imagen de la tarjeta */
#gtco-post-list .entry .entry-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    transition: transform .35s ease;
}

#gtco-post-list .entry:hover .entry-img {
    transform: scale(1.05);
}

/* Sección de texto */
#gtco-post-list .entry .entry-desc {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Título dentro de la tarjeta */
#gtco-post-list .entry .entry-desc h3 {
    font-family: 'Aldrich', sans-serif;
    font-size: 1.4rem;
    margin: 0 0 10px;
    color: #091640;
    transition: color 0.3s ease-in-out;
}

/* Texto/Resumen */
#gtco-post-list .entry .entry-desc p {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.3rem;
    color: #444;
    line-height: 1.6;
    margin: 0 0 10px;
}




/* Estilo para la fecha del artículo */

.fecha-articulo {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.3rem; /* Tamaño de fuente que prefieras */
    color: #009fd9 !important; /* **El color que quieras para la fecha** */
    line-height: 1; /* Esto ayuda con la alineación vertical */
    text-align: left;
    margin: 60px 0 0 0; /* Margen superior para separarlo del resumen */
}

/* Contenedor de la descripción para la alineación */
#gtco-post-list .entry .entry-desc {
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura que el contenedor ocupe toda la altura */
    padding: 15px;
}

/* Estilos para el título y el resumen */
#gtco-post-list .entry .entry-desc h3,
#gtco-post-list .entry .entry-desc p {
    margin-bottom: 10px; /* Separación entre el título y el resumen */
}

/* Empujar la fecha hacia abajo */
#gtco-post-list .entry .entry-desc .fecha-articulo {
    margin-top: auto; /* Esta es la clave */
    text-align: left;
}






/* Efectos de hover */
#gtco-post-list .entry a:hover h3 {
    color: #009fd9;
}


/* --- Media Queries para dispositivos --- */

/* Tablets (hasta 1024px) */
@media (max-width: 1024px) {
    .relacionados-box {
        padding: 15px;
    }
    #gtco-post-list {
        gap: 15px; /* Reducimos el gap en tablets */
    }
    #gtco-post-list .entry {
        /* 2 tarjetas por fila */
        flex: 1 1 calc(50% - 7.5px); /* Ajuste para 2 columnas con 15px de gap */
        min-width: 300px; /* Aseguramos un ancho mínimo para tablets */
    }
    .related-title {
        font-size: 2rem !important;
    }
}

/* Móviles (hasta 768px - punto de ruptura más común para móviles) */
@media (max-width: 768px) {
    .relacionados-box {
        padding: 10px;
    }
    #gtco-post-list {
        gap: 15px; /* Espacio entre tarjetas apiladas */
        justify-content: center; /* Centrar la única columna en móviles */
    }
    #gtco-post-list .entry {
        /* 1 tarjeta por fila, ocupando el ancho completo del contenedor (menos el padding del box) */
        flex: 1 1 100%;
        max-width: 450px; /* Opcional: limitar el ancho máximo de la tarjeta en móviles si el contenedor es muy ancho */
        margin: 0 auto 15px auto; /* Centra la tarjeta y da margen inferior */
    }
    #gtco-post-list .entry:last-child {
        margin-bottom: 0 auto; /* Elimina el margen inferior de la última tarjeta */
    }
    .related-title {
        font-size: 1.8rem !important;
    }
}