/*
Theme Name: Hola IA - Giga Style
Description: Diseño premium basado en Giga.ai.
Author: Hello IA
Template: astra
Version: 1.0.7
*/

/*
 * Estrategia CSS: sin !important. Este estilo se encola con prioridad 20
 * (después de Astra y UAGB). Se usa especificidad para ganar por cascada.
 */

/* 1. ESTRUCTURA GLOBAL */
:root {
  --giga-bg-soft: #f8fafc;
  --giga-text: #0f172a;
  --max-w-site: 1200px;
}

a {
  color: #000;
}

body.home {
  position: relative;
  background-color: #f8fafc;
}

/* Hero Full-Bleed: imagen solo en la franja superior (header + hero) */
body.home::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 90vh;
  width: 100%;
  z-index: -1;
  background-image: url("https://hello-ia.es/wp-content/uploads/2026/03/home-2-scaled.webp");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 2. OCULTAR TÍTULO "INICIO" */
.home .entry-header,
.home .ast-archive-description {
  display: none;
}

/* 3. INTEGRACIÓN HEADER + HERO (BLOQUE ÚNICO) */
.home .site-header {
  position: absolute;
  width: 100%;
  z-index: 999;
  background: transparent;
}

.home .main-header-bar {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Links de navegación en Home */
.home .main-header-menu > .menu-item > a,
.home .ast-header-navigation .main-header-menu > .menu-item > a {
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  line-height: 1.1;
  padding: 4px 1rem;
  border-radius: 12px;
  transition:
    background-color 0.2s ease-out,
    color 0.2s ease-out,
    transform 0.15s ease-out;
}

.home .main-header-menu > .menu-item > a:hover,
.home .main-header-menu > .current-menu-item > a {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.15);
  mix-blend-mode: multiply;
  border-radius: 12px;
}

/* 4. EL HERO (90VH + IMAGEN AL BOTTOM) */
.home .giga-hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 90vh;
  margin: 0;
  padding: 0 20px;
}

/* 5. TEXTO HERO */
.home h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: 1.1;
  color: #0f172a;
  max-width: 900px;
}

/* 6. BOTÓN PRINCIPAL (GRADIENTE MARCA HOLA IA) */
.wp-block-buttons > .wp-block-button:first-child .wp-block-button__link {
  background-image: linear-gradient(
    120deg,
    #3e3e90 0%,
    #1ba3c3 45%,
    #6bbe9d 100%
  );
  color: #ffffff;
  border-radius: 999px;
  padding: 0.95rem 2.4rem;
  font-weight: 700;
  border: none;
  box-shadow: 0 12px 30px rgba(30, 64, 175, 0.35);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    filter 0.18s ease-out;
}

.wp-block-buttons > .wp-block-button:first-child .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(30, 64, 175, 0.45);
  filter: brightness(1.03);
}

/* Eliminar margen residual en el grid de posts */
.wp-block-post-template.is-layout-grid {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  column-gap: 24px; /* Ajusta este valor para el espacio entre tarjetas */
}

/* Asegurar que el grupo interno posts-ia ocupe todo el ancho */
.listados-ia {
  margin: 0 !important;
}

/* Limpieza de la cuadrícula UL */
ul.listados-ia {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* Espacio real entre tarjetas */
}

/* Eliminar márgenes y paddings por defecto de los elementos de la lista */
ul.listados-ia li.wp-block-post {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important; /* El fondo blanco lo lleva el grupo-ia interior */
}

/* Asegurar que el contenedor UL no tenga desplazamiento */
ul.listados-ia {
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* La tarjeta blanca principal */
.grupo-ia {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px !important; /* Aquí definimos el margen interno de 16px para todo */
  display: flex;
  flex-direction: column;
  gap: 12px; /* Espacio uniforme entre imagen, meta y título */
  height: 100%;
}

/* Ajuste de la imagen para que respete el padding */
.grupo-ia .wp-block-post-featured-image {
  margin: 0 !important; /* Eliminamos cualquier margen negativo previo */
  line-height: 0;
}

.grupo-ia .wp-block-post-featured-image img {
  border-radius: 8px; /* Un radio menor para la imagen que para la tarjeta */
  width: 100%;
  height: auto;
  display: block;
}

/* Eliminamos el padding lateral extra que habíamos puesto antes para los textos */
.ast-builder-layout-element
  .wp-block-post
  > *:not(.wp-block-post-featured-image) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.grupo-ia h2 {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
  margin-top: 0.15rem;
}

.grupo-ia .meta-wrapper,
.grupo-ia .wp-block-post-excerpt,
.grupo-ia .taxonomy-category {
  margin-top: 0.65rem;
}
/* -------------------------------------------------------------------------
   HELLO IA - PILLS DE CATEGORÍAS (COLOR SOLO EN ETIQUETAS)
   ------------------------------------------------------------------------- */

/* Icono de carpeta UNA SOLA VEZ antes de todas las categorías */
.taxonomy-category::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
}

/* Estilo base para las pills - SIN icono individual */
.taxonomy-category a.hello-ia-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 4px 8px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  text-decoration: none !important;
  margin-right: 4px !important;
  margin-bottom: 6px !important;
  text-transform: lowercase !important;
  line-height: 1 !important;
  border: none !important;
}

/* Ocultar la coma separadora */
.taxonomy-category .wp-block-post-terms__separator {
  display: none !important;
}

/* Diccionario de colores (Asegúrate de que los slugs coincidan) */
a.pill-generacion-de-contenidos {
  background-color: #f0f0ff !important;
  color: #6366f1 !important;
}
a.pill-imagen-y-fotografia {
  background-color: #fce4ec !important;
  color: #880e4f !important;
}
a.pill-video {
  background-color: #e3f2fd !important;
  color: #1565c0 !important;
}
a.pill-guias-practicas {
  background-color: #f3e5f5 !important;
  color: #7e57c2 !important;
}
a.pill-automatizaciones {
  background-color: #e8f5e9 !important;
  color: #2e7d32 !important;
}
a.pill-marketing {
  background-color: #f0f0ff !important;
  color: #6366f1 !important;
}
a.pill-ia-generativa {
  background-color: #fff3e0 !important;
  color: #a05d2e !important;
}
a.pill-imagenes {
  background-color: #fce4ec !important;
  color: #880e4f !important;
}
a.pill-rrss {
  background-color: #fffde7 !important;
  color: #fbc02d !important;
}
a.pill-legal {
  background-color: #efebe9 !important;
  color: #5d4037 !important;
}
a.pill-etica {
  background-color: #e0f2f1 !important;
  color: #00796b !important;
}
a.pill-analisis-de-datos {
  background-color: #f3e5f5 !important;
  color: #7b1fa2 !important;
}
a.pill-agenda {
  background-color: #fff9c4 !important;
  color: #afb42b !important;
}
a.pill-facturacion {
  background-color: #f5f5f5 !important;
  color: #616161 !important;
}
a.pill-seo {
  background-color: #f1f8e9 !important;
  color: #33691e !important;
}
a.pill-medicina {
  background-color: #fbe9e7 !important;
  color: #bf360c !important;
}
a.pill-copywriting {
  background-color: #e1f5fe !important;
  color: #0277bd !important;
}
a.pill-captacion-leads {
  background-color: #fff8e1 !important;
  color: #ff8f00 !important;
}
a.pill-herramientas {
  background-color: #f3e5f5 !important;
  color: #7e57c2 !important;
}

/* -------------------------------------------------------------------------
   HELLO IA - META (FECHA + TIEMPO DE LECTURA)
   ------------------------------------------------------------------------- */

/* CRÍTICO: Forzar que los bloques date y time estén en la misma línea */
.grupo-ia .wp-block-post-date,
.grupo-ia .wp-block-post-time-to-read {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
  margin: 0 !important;
  vertical-align: middle;
}

/* Icono de fecha (calendario) - 16px */
.grupo-ia .wp-block-post-date::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 13.3333C2 13.6869 2.14048 14.0261 2.39052 14.2761C2.64057 14.5261 2.97971 14.6666 3.33333 14.6666H10C10.2113 14.6671 10.4205 14.6258 10.6157 14.545C10.8109 14.4643 10.9882 14.3456 11.1373 14.196L13.5293 11.804C13.679 11.6548 13.7976 11.4776 13.8784 11.2824C13.9592 11.0872 14.0005 10.8779 14 10.6666V3.99996C14 3.64634 13.8595 3.3072 13.6095 3.05715C13.3594 2.8071 13.0203 2.66663 12.6667 2.66663H3.33333C2.97971 2.66663 2.64057 2.8071 2.39052 3.05715C2.14048 3.3072 2 3.64634 2 3.99996V13.3333Z" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 14.6666V11.3333C10 11.1565 10.0702 10.9869 10.1953 10.8619C10.3203 10.7369 10.4899 10.6666 10.6667 10.6666H14" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.33337 1.33337V4.00004" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6666 1.33337V4.00004" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6.66663H14" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Separador visual entre fecha y tiempo de lectura */
.grupo-ia .wp-block-post-date::after {
  content: "·";
  display: inline-block;
  margin: 0 6px;
  color: #cbd5e1;
  font-weight: normal;
}

/* Icono de tiempo de lectura (reloj) - 16px */
.grupo-ia .wp-block-post-time-to-read::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.66663 1.33337H9.33329" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 9.33337L10 7.33337" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.99996 14.6667C10.9455 14.6667 13.3333 12.2789 13.3333 9.33333C13.3333 6.38781 10.9455 4 7.99996 4C5.05444 4 2.66663 6.38781 2.66663 9.33333C2.66663 12.2789 5.05444 14.6667 7.99996 14.6667Z" stroke="%2364748b" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* CAJAS DE ATENCIÓN */
.truco,
.nota,
.postit,
.info-grey,
.info-dark {
  position: relative;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid;
  margin: 1.5rem 0;
  font-size: 15px;
  line-height: 1.6;
}

.truco::before,
.nota::before,
.postit::before,
.info-grey::before,
.info-dark::before {
  content: attr(data-label);
  display: block;
  font-size: 11px;
  font-weight: 700; /* ← Corregido: 700 en lugar de bolder */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem; /* ← Corregido: sin espacio, igual al padding superior */
  opacity: 0.9;
}

/* Truco - Verde aguamarina pastel */
.truco {
  background-color: #e0f7f4; /* Aguamarina muy claro */
  border-left-color: #14b8a6; /* Aguamarina medio */
  color: #0f766e; /* Aguamarina oscuro para texto */
}

.truco::before {
  color: #0d9488; /* Aguamarina para el título */
}

/* Nota - Azul info pastel */
.nota {
  background-color: #eff6ff; /* Azul muy claro */
  border-left-color: #3b82f6; /* Azul medio */
  color: #1e3a8a; /* Azul oscuro para texto */
}

.nota::before {
  color: #2563eb; /* Azul para el título */
}

/* Postit - Amarillo pastel */
.postit {
  background-color: #fefce8; /* Amarillo muy claro */
  border-left-color: #eab308; /* Amarillo medio */
  color: #713f12; /* Marrón oscuro para texto */
}

.postit::before {
  color: #a16207; /* Amarillo oscuro para el título */
}

/* Info Grey - Gris claro */
.info-grey {
  background-color: #f5f5f5; /* Gris muy claro */
  border-left-color: #9ca3af; /* Gris medio */
  color: #374151; /* Gris oscuro para texto */
}

.info-grey::before {
  color: #6b7280; /* Gris para el título */
}

/* Info Dark - Gris oscuro */
.info-dark {
  background-color: #1f2937; /* Gris oscuro */
  border-left-color: #4b5563; /* Gris medio oscuro */
  color: #f3f4f6; /* Gris muy claro para texto */
}

.info-dark::before {
  color: #e5e7eb; /* Gris claro para el título */
}

/* SUBRAYADOS */

.subrayado {
  position: relative;
  display: inline;
  background: linear-gradient(
    180deg,
    transparent 60%,
    var(--highlight-color, rgb(251, 242, 175)) 60%
  );
  background-repeat: no-repeat;
  border-radius: 50px;
}

/* Colores */
.subrayado-amarillo {
  --highlight-color: rgb(251, 242, 175);
}
.subrayado-rosa {
  --highlight-color: rgb(252, 213, 236);
}
.subrayado-azul {
  --highlight-color: rgb(199, 228, 252);
}
.subrayado-verde {
  --highlight-color: rgb(209, 250, 223);
}
.subrayado-naranja {
  --highlight-color: rgb(254, 215, 170);
}
.subrayado-morado {
  --highlight-color: rgb(233, 213, 255);
}

/* SEMÁFOROS INLINE - Para usar en medio del texto */
.semaforo-verde,
.semaforo-rojo,
.semaforo-ambar {
  display: inline-block;
  width: 42px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 6px;
}

.semaforo-verde {
  background-image: url("https://hello-ia.es/wp-content/uploads/2026/03/semaforo-verde.svg");
}

.semaforo-rojo {
  background-image: url("https://hello-ia.es/wp-content/uploads/2026/03/semaforo-rojo.svg");
}

.semaforo-ambar {
  background-image: url("https://hello-ia.es/wp-content/uploads/2026/03/semaforo-ambar.svg");
}

/* LISTAS CON SEMÁFOROS - Para listas estilo bullet points */
.lista-semaforo {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}

.lista-semaforo li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.lista-semaforo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 42px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.lista-semaforo li.verde::before {
  background-image: url("https://hello-ia.es/wp-content/uploads/2026/03/semaforo-verde.svg");
}

.lista-semaforo li.rojo::before {
  background-image: url("https://hello-ia.es/wp-content/uploads/2026/03/semaforo-rojo.svg");
}

.lista-semaforo li.ambar::before {
  background-image: url("https://hello-ia.es/wp-content/uploads/2026/03/semaforo-ambar.svg");
}

.disclaimer {
  font-size: 0.8em;
  line-height: 1.35em;
  padding: 0px !important;
}

#rank-math-toc h2 {
  font-size: 0.75em;
  font-weight: 400;
  font-family: "Nunito Sans", sans-serif;
  text-transform: uppercase;
}
#rank-math-toc a {
  text-decoration: none;
}