/* CSS heredado de astra-child, copia controlada por el tema.
 *
 * Por qué vive aquí y no en /themes/astra-child/: ese fichero no lo versiona
 * nadie, editarlo no cambia su URL y Cloudflare seguía sirviendo la copia
 * vieja de su borde durante meses. Aquí lo cachea TG_THEME_VERSION como
 * cualquier otra hoja del tema, y además queda en el repositorio con el
 * podado aplicado, en vez de depender de que alguien lo repita a mano en
 * cada instalación (producción nunca recibió el podado del 13-08-2026, y por
 * eso los botones salían azules y las listas en Roboto Condensed).
 *
 * Sigue haciendo falta: decenas de entradas y de bloques reutilizables de
 * Gutenberg tienen HTML con clases cuyo único estilo está aquí
 * (.pricing-card, .cluster-cards, .benefits-section, .now-card, .tg-autopub...).
 * Se carga ANTES que el CSS del tema, así que en cualquier selector
 * compartido manda el tema. */

/* =====================================================
    SOLO PARA POST - H2 Y H3 con espacio
    ===================================================== */
/* Espaciado y peso de encabezados SOLO en los posts */
.single-post .entry-content h2 {
    margin-top: 60px;
    font-weight: 700;
}

.single-post .entry-content h3 {
    margin-top: 40px;
}

/* =====================================================
    SOLO PARA TXT DEL FOOTER - 
    ===================================================== */
/* Aplica a TODOS los widgets del footer */
.footer-widget-area .menu-link {
    font-size: 0.87rem !important;
}
/* PODADA (23-08-2026): "ul, ol, li { font-family:Roboto Condensed !important;
   font-size:19px !important }" pisaba TODAS las listas del tema nuevo por el
   !important, sin importar el orden de carga. Era la causa de que las tarjetas
   .g-tarjeta salieran en otra tipografía y a 19px en producción. */


/* ---- Opcional: ajustar headings menores si los usas ---- */
h4 { font-size: 26px; }
h5 { font-size: 22px; }
h6 { font-size: 20px; }

/* ---- Opcional: fijar variables de Astra para tipografías ---- */
:root {
  --astra-body-font: 'Roboto Condensed', sans-serif;
  --astra-headings-font: 'Roboto Condensed', sans-serif;
}



/* ============================================== */
/* ===== ESPACIO HERO ENTRE H1 Y H2 ===== */
/* ============================================== */

/* Encabezados apretados dentro de este grupo/columna */
.h-stack-tight h1,
.h-stack-tight h2,
.h-stack-tight h3{
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}




/* =====================================================*/
/* ====   ETILO DE LAS REVIEW DE GOOGLE ====== */
/* ===================================================== */

.g-badge{
  display:inline-flex;
  align-items:center;
  gap:.2rem;
  font-family:"Roboto Condensed",system-ui,sans-serif;
  font-weight:600;
  font-size:.9375rem;        /* 15 px */
  line-height:1.2;
  color:#0f172a;
  text-decoration:none;
  max-width:100%;
  min-height: 42px;   /* Reserva el espacio vertical para que no salte */
  width: 260px;
}
.g-badge svg{
  width:1.375rem;            /* 22 px */
  height:1.375rem;
  fill:#fbbf24;
  flex-shrink:0;
}
.g-badge__text{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  min-width:0;               /* permite corte de texto */
}
.g-badge__label{
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.g-badge__row{
  display:flex;
  align-items:center;
  gap:.1rem;
  flex-wrap:wrap;            /* se ajusta al ancho disponible */
}
.g-badge__score{
  font-weight:800;
}
.g-badge:focus-visible{
  outline:3px solid #86efac;
  outline-offset:3px;
  border-radius:6px;
}



/* =====================================================
   FLECHAS FAQ
   ===================================================== */

/* --- Bloque de alineación y estilo corregido para el bloque Detalles de Gutenberg --- */

/* --- Estilos para el Título (Summary) --- */
.wp-block-details summary {
    /*
     *  Oculta el marcador por defecto del navegador */
    list-style: none; 
    -webkit-list-style: none; 
    -moz-list-style: none; 
    
    /* Usa Flexbox para alinear el icono y el texto del título */
    display: flex;
    align-items: flex-start; /* Alinea el icono con el inicio de la primera línea de texto */
    cursor: pointer;
    padding: 10px 0; /* Espacio vertical para cada pregunta */
}

/* Estilo para el contenido de la pregunta dentro del summary (si existe) */
.wp-block-details summary p {
    margin: 0; 
    padding: 0;
}

/* --- Estilos para el Icono Cerrado ("+") - Color: #75D69C --- */
.wp-block-details summary::before {
    content: ''; 
    flex-shrink: 0; 
    width: 1.2em; 
    height: 1.2em;
    margin-right: 10px; /* Espacio fijo entre el icono y el texto del título */
    margin-top: 0.1em; 
    
    /* Icono de "+" dentro de un cuadro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2' stroke='%2375D69C' stroke-width='2' fill='none'/%3E%3Cline x1='12' y1='8' x2='12' y2='16' stroke='%2375D69C' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='8' y1='12' x2='16' y2='12' stroke='%2375D69C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center; 
    
    transform: rotate(0deg); 
    transition: transform 0.2s ease-in-out;
}

/* --- Estilos para el Icono Abierto ("-") --- */
.wp-block-details[open] > summary::before {
    /* Icono de "-" dentro de un cuadro */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2' stroke='%2375D69C' stroke-width='2' fill='none'/%3E%3Cline x1='8' y1='12' x2='16' y2='12' stroke='%2375D69C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    transform: rotate(0deg); 
}

/* --- Alineación del Contenido Desplegado: ESTA ES LA PARTE CLAVE AJUSTADA --- */
/* Apuntamos al contenido usando un selector más amplio dentro del bloque */
.wp-block-details[open] > *:not(summary) {
    /* La propiedad "padding-left" es la que debe generar el espacio de alineación */
    padding-left: calc(1.2em + 10px) !important; 
    
    /* Además, forzamos el margen izquierdo a cero para evitar conflictos de indentación */
    margin-left: 0 !important;
    
    padding-top: 5px;
    padding-bottom: 10px;
}

/* =====================================================
   FLECHAS FAQ - VERSIÓN AZUL (IDs específicos)
   ===================================================== */

/* Aplicamos el cambio de color solo a los IDs indicados */
#post-158418 .wp-block-details summary::before,
#post-160476 .wp-block-details summary::before,
#post-158288 .wp-block-details summary::before,
#post-160260 .wp-block-details summary::before,
#post-160372 .wp-block-details summary::before,
#post-160774 .wp-block-details summary::before,
#post-158558 .wp-block-details summary::before {
    /* Icono de "+" en AZUL (#0073aa) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2' stroke='%230073aa' stroke-width='2' fill='none'/%3E%3Cline x1='12' y1='8' x2='12' y2='16' stroke='%230073aa' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='8' y1='12' x2='16' y2='12' stroke='%230073aa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#post-158418 .wp-block-details[open] > summary::before,
#post-158288 .wp-block-details[open] > summary::before,
#post-158558 .wp-block-details[open] > summary::before {
    /* Icono de "-" en AZUL (#0073aa) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2' stroke='%230073aa' stroke-width='2' fill='none'/%3E%3Cline x1='8' y1='12' x2='16' y2='12' stroke='%230073aa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}



/* =====================================================
   BREADCRUMB
   ===================================================== */
/* Breadcrumb compacto (solo afecta a .trego-breadcrumb) */
  .trego-breadcrumb{
    font-size: 0.875rem;              /* ~14px */
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #64748b;                   /* gris suave para texto base */
  }
  .trego-breadcrumb a{
    color: #334155;                   /* enlaces más oscuros */
    text-decoration: none;
  }
  .trego-breadcrumb a:hover{ opacity: .85; }
  .trego-breadcrumb [aria-current="page"]{
    color: #0f172a;                   /* página actual bien legible */
    font-weight: 600;
  }
  .trego-breadcrumb span[aria-hidden="true"]{
    opacity: .6;                      /* separador más sutil */
    margin: 0 .1rem;
  }

  /* En móvil, un pelín más pequeño y con posibilidad de salto */
  @media (max-width: 640px){
    .trego-breadcrumb{ font-size: 0.8125rem; /* ~13px */ flex-wrap: wrap; }
  }



/* =====================================================
   STICKY KPI / "Contenidos que Importan"
   ===================================================== */


/* ====== VARIABLES DE ESTILO PARA KPI STICKY HERO ====== */
:root{
  /* Fondo y estilo del contenedor */
  --kpi-bg: rgba(15,23,42,.06);
  --kpi-shadow: 0 6px 20px rgba(0,0,0,.06);
  --kpi-radius: 999px;
  --kpi-gap: .75rem;
  --kpi-pad-y: .55rem;
  --kpi-pad-x: 1.1rem;
  --kpi-top: 12px;

  /* Tamaños por defecto */
  --kpi-weight: 700;
  --kpi-size: clamp(16px, 1.05vw + .6rem, 18px); /* tamaño general */

  /* Colores por defecto (verde para el texto en este caso) */
  --kpi-color-1: #86efac;
  --kpi-color-2: #86efac;
  --kpi-color-3: #86efac;
}

	
	
	
/* =============================================================================================================== */
/* ====== VARIABLES DE AJUSTE (MODIFICA AQUÍ EL TAMAÑO Y PADDING) ====== */
/* ================================================================================================================ */
.trego-sticky-kpis{
    /* 👉 1. AJUSTE DE PADDING (ESPACIO ALREDEDOR DEL TEXTO) */
    --kpi-pad-y: 0.4rem;    /* Padding Vertical (Arriba y Abajo) */
    --kpi-pad-x: 0.8rem;    /* Padding Horizontal (Lados) */

    /* 👉 2. AJUSTE DE TAMAÑOS DE FUENTE: TODO A 15PX */
    --kpi-size: 16px;             /* TAMAÑO BASE: 15px */
    --kpi-size-1: var(--kpi-size); /* Primera palabra TAMBIÉN usa el tamaño base de 15px */
    --kpi-size-2: var(--kpi-size); 
    --kpi-size-3: var(--kpi-size); 
    
    /* Nota: Usamos el color --kpi-color-1, que asumimos es el verde */
}


/* =============================================================================================================== */
/* ====== STILOS PRINCIPALES DEL CONTENEDOR (trego-sticky-kpis) ====== */
/* ================================================================================================================ */

.trego-sticky-kpis{
    position: sticky;
    top: var(--kpi-top);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: var(--kpi-gap);
    
    /* Aplica el padding ajustado */
    padding: var(--kpi-pad-y) var(--kpi-pad-x);
    
    border-radius: 14px;
    background: var(--kpi-bg);
    box-shadow: var(--kpi-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    margin: 1rem 0 2rem;
    line-height: 1.15;
}

/* Variante de fondo más oscuro */
.trego-sticky-kpis{
    --kpi-bg: #111827;    /* fallback (sin alpha) */
    --kpi-bg: #111827C7;    /* #111827 con ~78% de opacidad */
}

/* Separadores */
.trego-sticky-kpis .sep{
    opacity: .45;
    padding: 0 .25rem;
    font-size: 1.25em;
    color: #FFFFFF;
}

/* ====== ESTILO DE CADA ETIQUETA (SPAN) ====== */

/* 1. Estilo General: Aplica el color verde y el tamaño base de 15px */
.trego-sticky-kpis span:not(.sep){
    font-weight: var(--kpi-weight);
    color: var(--kpi-color-1); /* Color verde */
    font-size: var(--kpi-size); /* 15px por defecto para todos */
    white-space: nowrap;
}

/* 2. Estilo Específico (Se mantiene, pero ahora usa 15px): */
.trego-sticky-kpis span:nth-of-type(1){
    /* 👉 Ahora usa var(--kpi-size-1) que es igual a var(--kpi-size) (15px) */
    font-size: var(--kpi-size-1); 
}


/* ====== RESPONSIVE (Móvil) ====== */
@media (max-width:640px){
    .trego-sticky-kpis{
        flex-wrap: wrap;
        justify-content: center;
        gap: .5rem .75rem;
    }
    .trego-sticky-kpis .sep{ display: none; }
}
	

	
/* =============================================================================================================== */
/* ====== CASOS DE USO - Creación de contenidos ====== */
/* ================================================================================================================ */

  .usecases-3x2{ --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --brand:#86efac; }
  .usecases-3x2 .wrap{ max-width:1100px; margin:0 auto; padding:8px 16px; }

  /* Grid: 3 columnas en desktop, 2 en tablet, 1 en móvil */
  .usecases-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    list-style:none; margin:0; padding:0;
  }
  @media (max-width:900px){
    .usecases-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width:560px){
    .usecases-grid{ grid-template-columns:1fr; }
  }

  /* Tarjeta tipo chip */
  .usecase-card{
    display:flex; align-items:center; gap:.65rem;
    min-height:56px;
    padding:.75rem .9rem;
    background:#fff;
    border:1px solid var(--line);
    border-left:6px solid var(--brand);
    border-radius:12px;
    text-decoration:none !important;
    color:var(--ink);
    box-shadow:0 6px 18px rgba(2,6,23,.06);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .usecase-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(2,6,23,.08);
    border-color:rgba(0,0,0,.06);
  }

  .usecase-ico{ width:22px; height:22px; flex:0 0 22px; color:#000; }
  .usecase-ico svg{ width:100%; height:100%; display:block; }

  .usecase-text{ line-height:1.25; }
  .usecase-title{ display:block; font-weight:800; }
  .usecase-sub{ display:block; font-weight:600; font-size:.92rem; color:var(--muted); }








#tg-masonry-gallery .tg-mason-badges li{
  font-size:.78rem;
  line-height:1.3;
  padding:4px 9px;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  color:#374151;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#tg-masonry-gallery .tg-mason-badges li::before{
  content:"★";
  font-size:.8em;
  opacity:.85;
}

/* Estado oculto por filtro */
#tg-masonry-gallery .tg-mason-item.is-hidden{
  display:none;
}




/* ========================================================== */
/* ====== VIDEO VERTICAL - BOOKTRAILER ====== */
/* ========================================================== */

.tg-youtube-vertical {
    /* Altura Máxima Fija (¡AJUSTA ESTE VALOR!) */
    max-height: 600px !important; 
    
    /* Configuración de Ancho basada en la altura */
    width: 56.25vh !important; /* Proporción 9:16 de la altura */
    max-width: 100% !important; 
    height: 100% !important;

    /* Estilos de Contenedor */
    position: relative !important;
    overflow: hidden !important; /* CLAVE para ocultar lo que se sale del contenedor */
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.tg-youtube-vertical iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;

    /* 💥 TRUCO DE RECORTE: Forzamos un zoom más agresivo (1.08 = 108%) */
    transform: scale(1.08) !important; 
}


/* ========================================================== */
/* ====== CLUSTER EDITORIAL (TARJETAS VERDES Y BLANCAS) ====== */
/* ========================================================== */

/* ====== VARIABLES (Colores Base) ====== */
:root {
  --ink: #0f172a;           /* Texto principal (negro muy oscuro) */
  --muted: #475569;          /* Texto secundario (gris) */
  --bg: #fff;                /* Fondo de las tarjetas */
  --green-brand: #059669;    /* Color Verde para iconos y CTA */
  --cta-color: var(--green-brand); /* CTA usa el color Verde */
}

/* ====== CONTENEDOR PRINCIPAL (#cluster-editorial) ====== */
#cluster-editorial {
  padding: 2.5rem 16px;
  text-align: left;
}

/* Estilos de encabezado (si usas h2 y .lead) */
#cluster-editorial h2 {
  margin: 0 0 6px;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);
  line-height: 1.2;
  color: var(--ink);
}

#cluster-editorial .lead {
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
}

/* ====== GRID DE TARJETAS (UL.cards) ====== */
#cluster-editorial .cards {
  list-style: none;
  margin: 18px auto 8px;
  padding: 0 16px;
  max-width: 72rem;
  display: grid;
  grid-template-columns: 1fr; /* 1 columna por defecto (Móvil) */
  gap: 14px; /* SEPARACIÓN ENTRE TARJETAS (Gap) */
}

@media (min-width: 640px) {
  #cluster-editorial .cards {
    grid-template-columns: repeat(2, 1fr) /* 2 columnas en tabletas */
  }
}

@media (min-width: 980px) {
  #cluster-editorial .cards {
    grid-template-columns: repeat(3, 1fr) /* 3 columnas en escritorio */
  }
}

/* ====== TARJETA INDIVIDUAL (LI.card) ====== */
#cluster-editorial .card {
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
  overflow: hidden;
  border: 1px solid rgba(2, 6, 23, .06);
}

#cluster-editorial .card-link .desc a{
  color: #059669;
  text-decoration: underline;
}
#cluster-editorial .card-link .desc a:hover{
  color: #004d36;
}

/* ====== ENLACE (A.card-link) - Contenedor interno ====== */
#cluster-editorial .card-link {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 18px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

/* ====== EFECTO HOVER (CAPA VERDE SUAVE) ====== */
#cluster-editorial .card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Fondo verde (usando el mismo color pero con transparencia .08) */
  background: linear-gradient(0deg, rgba(5, 150, 105, .08), rgba(5, 150, 105, 0)); 
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

#cluster-editorial .card-link:hover::before {
  opacity: 1; /* Al hacer hover, la capa se hace visible */
}

/* ====== ICONO (SPAN.icon) ====== */
#cluster-editorial .icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

#cluster-editorial .icon svg {
  width: 100%;
  height: 100%;
  stroke: var(--green-brand); /* APLICACIÓN DEL COLOR VERDE AL TRAZO SVG */
}

/* ====== TÍTULO (SPAN.title) ====== */
#cluster-editorial .title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

/* ====== DESCRIPCIÓN (SPAN.desc) ====== */
#cluster-editorial .desc {
  margin: 0;
  line-height: 1.5;
  font-size: .95rem;
  color: var(--muted);
}

#cluster-editorial .desc strong {
  color: var(--ink);
}

/* ====== CTA (SPAN.cta) ====== */
#cluster-editorial .cta {
  align-self: flex-end;
  color: var(--cta-color); /* ESTO APLICA EL COLOR VERDE DEFINIDO ARRIBA */
  font-size: 19px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

#cluster-editorial .cta::after {
  content: "\2192";
  font-size: 1.2em;
  line-height: 1;
  font-weight: 400;
  transition: transform .2s ease;
  color: var(--cta-color); /* Asegura que la flecha también sea verde */
}

#cluster-editorial .card-link:hover .cta::after {
  transform: translateX(4px); /* Mueve la flecha en hover */
}

/* ====== NOTA (P.note) ====== */
#cluster-editorial .note {
  margin-top: 2rem;
  padding: 0 16px;
  font-size: .9rem;
  color: var(--muted);
}

#cluster-editorial .note a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
}
/* ==== FIX CLUSTER: Encapsular variables y colores para evitar interferencias globales ==== */

/* 1) Variables SOLO dentro del cluster (no uses :root aquí) */
#cluster-editorial{
  --ink: #0f172a;        /* texto principal oscuro */
  --muted: #475569;      /* texto secundario medio */
  --bg: #fff;            /* fondo tarjeta */
  --green-brand: #059669;/* verde marca para iconos/CTA */
  --cta-color: var(--green-brand);

  /* Color de texto base del bloque (evita heredar gris de otros componentes) */
  color: var(--ink);
}

/* 2) Asegurar color correcto dentro de tarjetas/enlaces */
#cluster-editorial .card{ background: var(--bg); }
#cluster-editorial .card-link{
  color: var(--ink);                 /* todo el contenido hereda este color */
  text-decoration: none;             /* evita subrayados globales */
}
#cluster-editorial .card-link:hover{ text-decoration: none; }

/* 3) Títulos y descripciones con su paleta local */
#cluster-editorial .title{ color: var(--ink); }
#cluster-editorial .desc,
#cluster-editorial .lead{ color: var(--muted); }
#cluster-editorial .desc strong{ color: var(--ink); }

/* 4) CTA verde consistente (por si estilos globales pisan ) */
#cluster-editorial .cta{
  color: var(--cta-color);
  text-decoration: none;
  border: 0;
}
#cluster-editorial .card-link:hover .cta{ text-decoration: none; }

/* 5) (Opcional) Si tu theme fuerza colores en links dentro de #cluster-editorial */
#cluster-editorial a{ color: inherit; text-decoration: none; }
#cluster-editorial a:hover{ text-decoration: none; }

/* === Variables globales para que .pain las encuentre === */
:root{
  --green-brand: #059669;
}

#cluster-editorial .sep{
  width: 100%;
  height: 1px;
  border: 0;
  background: rgba(2,6,23,.08);
  margin: 14px 0 10px;
}
#cluster-editorial .pain{
  display: block;
  font-size: .75em;
  line-height: 1.45;
  color: #059669; /* color directo por si la variable no llega */
}

/* ============================================================
   PASOS DE PUBLICACIÓN — TREGOLAM
   ============================================================ */

/*====== PASOS PUBLICACION ====== */

:root{
  --brand: #86efac;
  --ink: #e5e7eb;
  --muted: #cbd5e1;
  --card: #0b1220;    /* fondo oscuro */
  --card-2: #0f172a;  /* variación */
  --tab-text: #000;   /* texto solapas */
  --tab-active: #86efac;
  --tab-border: #e5e7eb;
  --radius: 20px;

  /* Tipografía y ritmo */
  --h2: 28pt;  /* pedido exacto */
  --h3: clamp(15px, .45vw + .8rem, 18px);
  --p:  clamp(15px, .45vw + .7rem, 18px);
  --pad: clamp(16px, 2vw, 28px);

  /* Imagen */
  --media-h: 550px;
}


/* ====== ACORDEON COMO PUBLICAR ====== */
.tg-tabs{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px;
  color: var(--ink);
  font-family: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ====== RADIOS DE CONTROL (ocultos) ====== */
.tg-tabs input[type="radio"]{
  position: absolute;
  left: -9999px;
}

/* ====== SOLAPAS ====== */
.tg-tabs .tabs-wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  border-bottom: 2px solid var(--tab-border);
  margin: 0 0 16px 0;
  padding: 0 6px 15px;
}
.tg-tabs label.tab{
  font-weight: 800;
  color: var(--tab-text);
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  padding: 10px 6px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, opacity .15s ease;
}
.tg-tabs label.tab:hover{ opacity: .85; }

/* solapa activa */
#tab-1:checked ~ .tabs-wrap label[for="tab-1"],
#tab-2:checked ~ .tabs-wrap label[for="tab-2"],
#tab-3:checked ~ .tabs-wrap label[for="tab-3"],
#tab-4:checked ~ .tabs-wrap label[for="tab-4"],
#tab-5:checked ~ .tabs-wrap label[for="tab-5"]{
  border-bottom-color: var(--tab-active);
  color: var(--tab-text);
}

/* ====== TARJETA / PANEL ====== */
.tg-tabs .panels{ position: relative; }
.tg-tabs .panel{
  display: none;
  background: #000; /* fondo negro sólido */
  border-radius: var(--radius);
  overflow: hidden;
  border: none;
  box-shadow: none;
}

/* grid interno */
.tg-tabs .panel__grid{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(460px, .9fr);
}

/* columna texto */
.tg-tabs .content{
  padding: calc(var(--pad) * 1.4) var(--pad);
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start;
  min-height: var(--media-h);
  padding-top: calc(var(--pad) * 1.2) !important;
  padding-bottom: calc(var(--pad) * 1.6) !important;
}

.tg-tabs .eyebrow{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-family: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
  font-size: var(--h3);
  letter-spacing: .02em;
  color: var(--brand);
  font-weight: 700;
}

.tg-tabs h2{
  font-size:26px !important;
  color: #fff !important;
  line-height: 1.15;
  margin: 0 0 32px 0 !important;
}

/* ===== COPY EN BLANCO ===== */
.tg-tabs p{
  margin: 0 0 40px 0 !important;
  font-size: var(--p);
  line-height: 1.6;
  color: #ffffff !important; /* ← copy blanco */
}

/* ===== CTA ===== */
.tg-tabs .cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  color: #0b1220;
  border: none;
  border-radius: 12px;
  margin-top: auto !important;
  align-self: flex-start !important;
  transition: transform .15s ease, opacity .15s ease;
  font-family: "Roboto Condensed", system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
}

/* ===== CTA UN PUNTO MÁS PEQUEÑO ===== */
.tg-tabs .cta{
  font-size: 15px !important;     /* antes ~16px */
  padding: 12px 16px !important;
}

.tg-tabs .cta:hover{ transform: translateY(-2px); opacity: .95; }

/* columna imagen */
.tg-tabs .media{
  position: relative;
  min-height: var(--media-h);
}
.tg-tabs .media img{
  width: 100%;
  height: var(--media-h);
  object-fit: cover;
  display: block;
}

/* panel activo */
#tab-1:checked ~ .panels .panel[data-tab="1"],
#tab-2:checked ~ .panels .panel[data-tab="2"],
#tab-3:checked ~ .panels .panel[data-tab="3"],
#tab-4:checked ~ .panels .panel[data-tab="4"],
#tab-5:checked ~ .panels .panel[data-tab="5"]{
  display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .tg-tabs .panel__grid{ grid-template-columns: 1fr; }
  .tg-tabs .media{ order: -1; }
  .tg-tabs .content{ padding: calc(var(--pad) * 1.1) var(--pad) calc(var(--pad) * 1.4); }
}
@media (max-width: 640px){
  :root{ --media-h: 380px; }
  .tg-tabs label.tab{ font-size: 14px; }
}



/*=====================================================*/
/* TABLA DE PRECIOS */
/*=====================================================*/

/* Contenedor Principal */
.pricing-section {
    font-family: 'Roboto Condensed', sans-serif !important;
    padding: 60px 20px;
    background-color: #ffffff;
    color: #1a1a1a;
}

.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    background: transparent;
    padding: 10px 0; /* Espacio para que el levantamiento no se corte */
}

/* Tarjeta Base */
.pricing-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    flex: 1;
    min-width: 320px;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    /* REESTABLECIDO: Transición para el rollover */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

/* EFECTO ROLLOVER (Hover) */
.pricing-card:hover {
    transform: translateY(-8px); /* Elevación */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1); /* Sombra más profunda */
    border-color: #d1d5db;
}

/* AJUSTES PACK 3 (COLUMNA CENTRAL) */
.pricing-card.featured {
    background-color: #f9fafb;
    border: 1px solid #6dc6d9; /* Borde del color de la cabecera */
}

.pricing-card.featured .card-header {
    background-color: #6dc6d9;
    color: #ffffff;
}

/* Cabeceras */
.card-header {
    padding: 12px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
}

.green-header {
    background-color: #50eb93;
    color: #004d3d;
}

/* Cuerpo */
.card-body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
}

.pack-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.most-popular {
    background-color: #000 !important;
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.pack-title {
    font-size: 2.0rem;
    margin: 0;
    font-weight: 500;
}

.pack-subtitle {
    font-size: 0.95rem;
    color: #4b5563;
    margin: 10px 0 20px 0;
    line-height: 1.4;
    min-height: 45px;
}

/* Precios Peso 300 */
.price-block { margin-bottom: 25px; }
.price-currency { font-size: 0.9rem; color: #6b7280; }
.price-amount { display: flex; align-items: baseline; gap: 4px; }

.amount {
    font-size: 3.3rem;
    font-weight: 300 !important;
    letter-spacing: -1px;
    line-height: 1;
}

.symbol { font-size: 1.4rem; font-weight: 300 !important; }

/* Listado */
.features-block {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
    margin-bottom: 30px;
    flex-grow: 1;
}

.feature-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 20px 0; }
.feature-list li {
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}
.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

/* Botón Negro */
.btn-black {
    background-color: #000;
    color: #fff !important;
    text-align: center;
    padding: 14px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    display: block;
    transition: background 0.2s;
}

.btn-black:hover {
    background-color: #333;
}

.card-foot { text-align: center; font-size: 0.8rem; color: #6b7280; margin-top: 15px; }

/* Mobile */
@media (max-width: 768px) {
    .pricing-grid { flex-direction: column; align-items: center; }
    .pricing-card { width: 100%; max-width: 100%; }
    .pricing-card:hover { transform: translateY(-4px); } /* Menos agresivo en móvil */
}

/* 1. Eliminamos el fondo blanco del contenedor que envuelve las tarjetas */
.pricing-section {
    background-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. Ajustamos el grid para que no tenga márgenes internos que se vean blancos */
.pricing-grid {
    background-color: transparent !important;
    padding: 20px 0 !important; /* Solo vertical para el rollover */
    margin: 0 auto !important;
}

/* 3. Limpiamos cualquier sombra o borde que Astra o WP pongan por defecto al bloque */
.entry-content .pricing-section, 
.entry-content .pricing-grid {
    background: none !important;
}

/* =======================
   AHORRO DE ESPACIO VERTICAL
   =======================*/

/* Reduce padding del cuerpo de la tarjeta */
.card-body {
  padding: 22px;
}

/* Reduce espacio del subtítulo */
.pack-subtitle {
  margin: 6px 0 12px 0;
  min-height: auto; /* Antes 45px */
}

/* Acorta espacio bajo el bloque de precio */
.price-block {
  margin-bottom: 16px;
}

/* Reduce separación del listado */
.features-block {
  padding-top: 14px;
  margin-bottom: 18px;
}

/* Reduce margen entre elementos del listado */
.feature-list li {
  margin-bottom: 4px;
}

/* Reduce espacio antes del pie */
.card-foot {
  margin-top: 10px;
}
/* Compacta listas en tabla de precios */
.pricing-section .feature-title {
  margin-bottom: 4px !important;
}

./* Reduce espacio debajo del subtítulo sin afectar listas */
.pricing-section .feature-title {
  margin-bottom: 1px !important;
}

/*=====================================================*/
/* ESTILOS PARA TOOLTIPS ACTUALIZADOS */
/*=====================================================*/

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
}

/* Icono de información: NEGRO con i BLANCA */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: #000000; /* Fondo negro */
    color: #ffffff !important; /* i blanca */
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    transition: all 0.2s ease;
}

/* Rollover: fondo GRIS */
.tooltip-container:hover .info-icon {
    background-color: #9ca3af; /* Gris */
    color: #ffffff !important;
}

/* Caja del Tooltip */
.tooltip-text {
    visibility: hidden;
    width: 240px;
    background-color: #1a1a1a;
    color: #ffffff !important;
    text-align: left;
    border-radius: 6px;
    padding: 10px 14px;
    position: absolute;
    z-index: 999;
    bottom: 130%; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px !important;
    line-height: 1.4;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    pointer-events: none;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1a1a1a transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* REPARACIÓN DE ENLACES: Forzamos el azul para que no se pisen */
.feature-list li a {
    color: #0073aa !important; /* Azul estándar de Astra/WP */
    text-decoration: underline !important;
}

.feature-list li a:hover {
    color: #005177 !important;
}


/* ========================================================================== */
	/* ==============  EXTERNALIZACION - Pagina de Soluciones e-learning para empresas ======= */
 /*   ============================================================================== */
	
/* =============CONFIANZA ============ */
.tg-cards-stats {
  background:#f9f9f9;
  /* font-family: system-ui, sans-serif;  <-- eliminado para respetar la fuente del sitio */
  color:#0f172a;
  padding:2rem 1rem;
}

.tg-cards-wrap {
  max-width:1220px;
  margin:0 auto;
  overflow:hidden;
  border-radius:24px;
  background:#ffffff;
  box-shadow:0 8px 32px rgba(0,0,0,0.04);
}

/* Imagen superior */
.tg-cards-image img {
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
  border-top-left-radius:24px;
  border-top-right-radius:24px;
}

/* Grid de tarjetas */
.tg-cards-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:1.5rem;
  gap:1rem;
}

@media (max-width:1024px){
  .tg-cards-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px){
  .tg-cards-grid{
    grid-template-columns:1fr;
  }
}

/* Tarjeta individual */
.tg-card {
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:1.2rem;
  transition:background 0.3s ease, color 0.3s ease;
}

.tg-card:hover{
  background:#ecfdf5; /* verde claro */
}

/* Header con icono y título (namespacing para no afectar a otras .card-header del sitio) */
.tg-card .card-header{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:0.25rem;
}

/* Icono */
.tg-card .card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  background:#ecfdf5;
  color:#75d69c;      /* verde corporativo de los iconos */
  flex-shrink:0;
}

.tg-card .card-icon svg{
  width:18px;
  height:18px;
}

/* Título */
.tg-card h3{
  margin:0;
  font-size:1.15rem;
  font-weight:700;
  color:#0f172a;
}

/* Texto */
.tg-card p{
  margin:0.25rem 0 0;
  font-size:0.95rem;
  color:#4b5563;
}

/* Hover: cambia color del icono y título */
.tg-card:hover .card-header h3,
.tg-card:hover .card-icon{
  color:#0f766e;
}
/* CSS general (o dentro del bloque donde uses estas tarjetas) */
.tg-card-cta {
  font-size: .75em;   /* mismo tamaño que el <p> o ligeramente superior */
  line-height: 1.4;
  /* resto de tus estilos: color, padding, border-radius… */
}

	
	
/* ===================================================================================== */
/* ==============  COMPATIBILIDAD - Pagina de Soluciones e-learning para empresas ======= */
/*  ==================================================================================== */

  #deliverables{ --ink:#0f172a; --muted:#475569; --brand:#86efac; }
  #deliverables .wrap{max-width:1280px;margin:0 auto;padding:8px 16px;}
  #deliverables h2{margin:0 0 8px;color:var(--ink);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;}
  #deliverables p.lead{margin:6px 0 18px;color:var(--muted);}
  #deliverables .grid{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));}
  @media (max-width:900px){ #deliverables .grid{grid-template-columns:1fr;} }

  /* Tarjeta base */
  #deliverables .card{
    background:#fff;border:1px solid rgba(2,6,23,.06);border-radius:14px;padding:14px;
    box-shadow:0 8px 20px rgba(2,6,23,.06);display:grid;gap:8px;
  }
  #deliverables .card h3{margin:0;color:var(--ink);font-size:1.05rem;line-height:1.25;}
  #deliverables .card p{margin:0;color:#374151;line-height:1.5;}
  #deliverables .meta{font-size:.92rem;color:#475569;}
  #deliverables .icon{width:38px;height:38px;color:#000;}
  #deliverables .icon svg{display:block;width:38px;height:38px;}

  /* Slot CTA sin tarjeta */
  #deliverables .cta-slot{display:flex;align-items:center;padding:0;margin:0}
  #deliverables .btn-specs{
    display:inline-flex;align-items:center;gap:.55rem;
    background:var(--brand); color:#000; font-weight:800;
    border-radius:999px; padding:.7rem 1rem; text-decoration:none;
    box-shadow:0 8px 18px rgba(2,6,23,.12);
  }
  #deliverables .btn-specs svg{width:18px;height:18px}
  #deliverables .btn-specs:hover{transform:translateY(-1px)}
  #deliverables .btn-specs:hover svg{transform:translateX(2px)}

	
	
	
	
/*-- ===============================================================================*/	
/*-- ===== ÁREAS QUE CUBRIMOS - Página de Soluciones e-learning para empresas ===== */
/*-- ===============================================================================*/	
	
#areas-info{
  --ink:#0f172a; --muted:#1f2937; --line:#d1fae5;
  --card:#86efac; --card-hover:#a7f3d0; --icon:#000;
}
#areas-info .wrap{max-width:1100px;margin:0 auto;padding:18px 16px}
#areas-info h2{
  margin:0 0 .8rem;color:var(--ink);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(22px,1.2vw + 1rem,32px)
}
#areas-info .grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ #areas-info .grid{ grid-template-columns:1fr } }

/* Tarjeta verde, alto uniforme */
#areas-info .card{
  display:grid; grid-template-rows:auto auto 1fr; gap:.55rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
  min-height: 220px;                 /* 👈 más alta */
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
#areas-info .card:hover{
  background: var(--card-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(2,6,23,.12);
}

/* Icono sin fondo/recuadro */
#areas-info .icon{ width:40px; height:40px; color: var(--icon); display:grid; place-items:center; }
#areas-info .icon svg{ width:26px; height:26px; }

/* Título + lista */
#areas-info h3{ margin:0; color:#000; font-size:1.12rem; line-height:1.25; }
#areas-info ul{
  margin:.2rem 0 0; padding-left:1.1rem; color:var(--muted);
  font-size:1rem; line-height:1.5;
}
#areas-info li{ margin:.22rem 0; }

/* CTA */
#areas-info .cta-wrap{ display:flex; justify-content:center; margin-top:18px; }
#areas-info .btn-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#0f172a; color:#fff; text-decoration:none; font-weight:800;
  padding:.8rem 1.05rem; border-radius:12px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  font-size:1.0rem
}
#areas-info .btn-cta::after{
  content:"→"; font-weight:700;
}
#areas-info .btn-cta:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(2,6,23,.25); background:#111827; }	
	
	
	
	
	
	
	
/* =====================================================
   0. VARIABLES GLOBALES / BASE
   ===================================================== */

:root{
    /* Colores base */
    --tg-text:#0f172a; 
    --tg-muted:#475569; 
    --tg-border:#e5e7eb; 
    --tg-card:#fff;
    --tg-ink:#0b1220;

    /* Sombra base */
    --tg-shadow:0 10px 24px rgba(2,6,23,.06);

    /* Colores de Marca */
    --tg-brand:#0ea5e9; 
    --tg-brand-2:#2563eb; /* Azul Fuerte */
    --tg-amz:#f59e0b; /* Amarillo Amazon */

    /* Variables para Chips Sticky */
    --sticky-header-height: 64px; 
    --sticky-chip-font-size: 14px; 
    --chip-border-radius: 8px;     
    --tg-anim: 0.2s ease;
    
    /* Colores base del Chip */
    --chip-bg-default: #eef6ff; 
    --chip-border-default: #dbeafe; 
    --chip-ink-default: #0b1220;     
}

*{box-sizing:border-box}

/* =====================================================
   1. ELEMENTOS BASE (Botones, Links, Tags)
   ===================================================== */

.tg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55ch;
    padding:.85rem 1.1rem;
    border-radius:12px;
    border:2px solid transparent;
    font-size: 1rem; /* Asegura un tamaño base */
    font-weight:800;
    text-decoration:none;
    transition:filter .15s ease, transform .05s ease, box-shadow .2s ease;
    box-shadow:var(--tg-shadow)
}
.tg-btn:hover{filter:brightness(.97)} 
.tg-btn:active{transform:translateY(1px)}
.tg-btn--primary{background:linear-gradient(135deg,var(--tg-brand),var(--tg-brand-2));color:#fff}
.tg-btn--ghost{background:#fff;color:var(--tg-ink);border-color:#cbd5e1}

.tg-link{
    color:var(--tg-brand-2);
    font-weight:800;
    text-decoration:none;
    /* --- CORRECCIÓN SOLICITADA: Tamaño de link en muestras --- */
    font-size: 16px; 
    /* -------------------------------------------------------- */
    border-bottom:1px solid color-mix(in srgb,var(--tg-brand-2) 30%, transparent)
}
.tg-link:hover{text-decoration:underline}

.tg-tag{
    display:inline-flex;
    align-items:center;
    gap:.4ch;
    padding:.22rem .6rem;
    border-radius:999px;
    border:1px solid #cbd5e1;
    background:#f1f5f9;
    font-weight:800;
    font-size:.78rem;
    color:#0f172a
}
.tg-tag--p1{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.tg-tag--p2{background:#eef2ff;border-color:#c7d2fe;color:#1e40af}
.tg-tag--p3{background:#fffbeb;border-color:#fde68a;color:#92400e}


/* =====================================================
   2. STICKY CHIPS (tg-toc)
   ===================================================== */

.tg-toc {
    position: sticky;
    top: var(--sticky-header-height); 
    z-index: 30; 
    background: #ffffff; /* Fondo blanco */
    backdrop-filter: none;
    mask-image: none;
    border-bottom: 1px solid rgba(2,6,23,.06);
}

.tg-toc .tg-toc-wrap, 
.tg-toc__list { 
    max-width: 1220px;
    margin: 0 auto;
    padding: var(--tg-space-3, 12px) var(--tg-space-4, 16px);
    display: flex;
    gap: var(--tg-space-3, 12px);
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
    list-style: none;
}

.tg-toc a,
.tg-toc .tg-chip,
.tg-toc .tg-chip:visited {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .55rem .9rem;
    
    border-radius: var(--chip-border-radius);
    font-size: var(--sticky-chip-font-size);
    
    font-weight: 700;
    line-height: 1; 
    white-space: nowrap;
    
    color: var(--chip-ink-default);
    background: var(--chip-bg-default);
    border: 1px solid var(--chip-border-default);
    box-shadow: none; 
    transition: all var(--tg-anim);
}

/* Hover visible */
.tg-toc a:hover,
.tg-toc .tg-chip:hover {
    background: color-mix(in srgb, var(--chip-bg-default) 85%, #fff); 
    border-color: var(--tg-brand);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

/* Active */
.tg-toc a:active,
.tg-toc .tg-chip:active {
    transform: translateY(0); 
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Estado activo */
.tg-toc .tg-chip.is-active,
.tg-toc .tg-chip[aria-current="true"] {
    background: linear-gradient(135deg, var(--tg-brand), #0b4a6f);
    color: #fff;
    border-color: transparent;
    transform: none; 
    box-shadow: none;
}

/* Parche de anclaje de scroll */
section[id]{ scroll-margin-top: calc(var(--sticky-header-height) + 16px); }





/* =====================================================
   PRICING TABLE (tg-pricing)
   ===================================================== */

.tg-pricing{
  /* Re-definiendo tokens para el ámbito de precios */
  --tg-text:#0f172a; --tg-muted:#64748b;
  --tg-card:#ffffff; --tg-border:#e5e7eb; 
  --tg-shadow:0 8px 24px rgba(0,0,0,.06);
  --tg-brand:#0ea5e9;
  --tg-accent-basic:#10b981;   
  --tg-accent-advanced:#06b6d4;
  --tg-accent-pro:#3b82f6;     
  font: inherit; 
  color:var(--tg-text);
}
.tg-pricing__grid{display:grid;gap:clamp(16px,2.4vw,24px);grid-template-columns:1fr;}
@media (min-width:900px){.tg-pricing__grid{grid-template-columns:repeat(3,1fr);} }

.tg-pricing__card{
  display:flex;flex-direction:column;gap:12px;background:var(--tg-card);
  border:1px solid var(--tg-border);border-radius:16px;padding:clamp(16px,2.4vw,24px);
  box-shadow:var(--tg-shadow);transition:transform .06s ease, box-shadow .2s ease;
}
.tg-pricing__card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.08);}

.tg-pricing__badge{
  align-self:flex-start;display:inline-block;font-weight:700;font-size:.85rem;
  padding:.32rem .6rem;border-radius:999px;border:1px solid;background:#f1f5f9;letter-spacing:.2px;
}
.is-basic   .tg-pricing__badge{color:#064e3b;border-color:#a7f3d0;background:#ecfdf5}
.is-advanced.tg-pricing__card .tg-pricing__badge{color:#083344;border-color:#a5f3fc;background:#ecfeff}
.is-pro     .tg-pricing__badge{color:#1e3a8a;border-color:#bfdbfe;background:#eff6ff}

.tg-pricing__title{margin:.2em 0 .1em;font-size:clamp(18px,2.1vw,22px);line-height:1.25}
.tg-pricing__subtitle{margin:0;color:var(--tg-muted)}

.tg-pricing__list{margin:8px 0 0;padding-left:1.1em;display:grid;gap:8px}

/* --- CORRECCIÓN SOLICITADA: Tamaño de la lista a 19px --- */
.tg-pricing__list li {
    font-size: 19px !important; 
    line-height: 1.6;
    /* Garantiza la herencia de fuente si la regla !important no aplica, pero 19px lo fuerza */
}
/* -------------------------------------------------------- */

.tg-pricing__price{margin-top:auto;font-weight:800;font-size:clamp(24px,2.6vw,30px)}
.tg-pricing__price small{font-weight:600;color:var(--tg-muted);font-size:.6em;margin-left:.35em}

.tg-pricing__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.9rem 1.1rem;border-radius:12px;border:1px solid transparent;
  background:var(--tg-brand);color:#fff;

  /* --- CORRECCIÓN SOLICITADA: Tamaño de texto del botón --- */
  font-size: 17px; 
  /* -------------------------------------------------------- */

  font-weight:800;text-decoration:none;
  box-shadow:var(--tg-shadow);transition:filter .15s ease, transform .05s ease;
}
.tg-pricing__btn:hover{filter:brightness(.95)} .tg-pricing__btn:active{transform:translateY(1px)}
.tg-pricing__foot{margin:6px 0 0;color:var(--tg-muted);font-size:.9rem}

/* Borde de realce en hover según plan */
.is-basic{--ring:var(--tg-accent-basic)} .is-advanced{--ring:var(--tg-accent-advanced)} .is-pro{--ring:var(--tg-accent-pro)}
.tg-pricing__card:hover{box-shadow:var(--tg-shadow), 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent)}

/* Fuerza peso 700 en los títulos de cada pack */
.tg-pricing .tg-pricing__title{
  font-weight:700;
}

/* Subtítulo bajo el título del pack */
.tg-pricing .tg-pricing__subtitle{ font-weight:400; }

/* Precio (venía en 800). Si lo quieres en 700: */
.tg-pricing .tg-pricing__price{ font-weight:700; }

/* ============================================================
   AJUSTES EXTRA PARA LOS 4 CAMBIOS QUE PEDISTE
   ============================================================ */

/* 1) BOTÓN VERDE TAMBIÉN PARA IMPULSO Y PARA TODOS */
.tg-pricing__btn{
  background:#86efac !important;
  color:#0f172a !important;
  border:0 !important;
  font-weight:800 !important;
}
.tg-pricing__btn:hover{
  background:#6ee7b7 !important;
}

/* 2) SUBIR EL TAMAÑO DEL PRECIO (un punto aprox.) */
.tg-pricing__price{
  font-size:24px !important; /* antes 22px */
}


/* ============================================================
   BOTÓN PRICING – FIX DEFINITIVO (Astra/WPBakery)
   Pegar al FINAL del style.css
   ============================================================ */

body .tg-pricing a.tg-pricing__btn{
  display:block;
  width:100%;
  padding:12px 20px;
  text-align:center;

  background:#22c55e !important;
  background-color:#22c55e !important;
  background-image:none !important;

  color:#0f172a !important;

  border:1px solid #16a34a !important;
  border-radius:8px;

  font-weight:700;
  text-decoration:none !important;

  margin-top:auto;

  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;

  position:relative;
  z-index:2;

  transition:background-color .2s ease, transform .2s ease;
}

body .tg-pricing a.tg-pricing__btn:hover{
  background:#16a34a !important;
  background-color:#16a34a !important;
  transform:translateY(-1px);
}

body .tg-pricing a.tg-pricing__btn::before,
body .tg-pricing a.tg-pricing__btn::after{
  content:none !important;
}


/* SUBIR UN PUNTO EL TAMAÑO DEL PRECIO */
.tg-pricing .tg-pricing__price{
  font-size:24px;   /* antes 22px */
  font-weight:800;
}

/* CABECERA PACK 3: BADGE + LOGO AMAZON */
.tg-pricing .tg-pricing__card.is-pro .tg-pricing__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

/* Logo Amazon más contenido y alineado a la derecha */
.tg-pricing .tg-pricing__amazon-logo{
  width:80px;      /* más pequeño que los 120px originales */
  height:auto;
  object-fit:contain;
  margin-left:16px;
}

	
	
	
	
/* =====================================================
   1. VARIABLES GLOBALES (CRÍTICAS PARA LOS COLORES)
   ===================================================== */
:root {
    /* Define variables de color y tipografía */
    --tg-main-color: #0d121c; /* Color principal (texto) */
    --tg-brand-1: #3b82f6;   /* Color principal de marca */
    --tg-brand-2: #2563eb;   /* Azul fuerte (para enlaces/botones) */
    --tg-muted: #6b7280;     /* Texto gris/suave */
    --tg-border: #e5e7eb;    /* Borde gris */
    --tg-card: #ffffff;      /* Fondo de tarjeta */
    --tg-shadow: 0 10px 24px rgba(2,6,23,.06); /* Sombra estándar */
    --tg-max-width: 1400px;  /* Ancho máximo del contenedor */
}

/* =====================================================
   2. ESTILO DEL CONTENEDOR WRAP (Max-width y Centrado)
   ===================================================== */
.wrap{
    max-width: var(--tg-max-width); 
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 5vw, 24px); 
    padding-right: clamp(16px, 5vw, 24px);
}





/*====================================== */
/* ========== MUESTRAS REALES ========== */
/*====================================== */


#muestras-reales {
  margin-block: 3rem;
}

/* GRID: 3 tarjetas por fila en escritorio */
#muestras-reales .tg-showcase__grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Responsive: 2 columnas en tablet */
@media (max-width: 1200px) {
  #muestras-reales .tg-showcase__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive: 1 columna en móvil */
@media (max-width: 640px) {
  #muestras-reales .tg-showcase__grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta base */
#muestras-reales .card {
  background: #86efac;                 /* verde Tregolam */
  border: 1px solid rgba(2, 6, 23, .06);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .12);
  color: #0f172a;                      /* texto oscuro */
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

/* Icono en negro (usa currentColor) */
#muestras-reales .card .icon {
  color: #000000;                      /* iconos negros */
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}
#muestras-reales .card .icon svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

/* Cabecera de la tarjeta */
#muestras-reales .card header {
  margin-bottom: 0.5rem;
}
#muestras-reales .card h3 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  line-height: 1.25;
  color: #0f172a;
}
#muestras-reales .card .pack {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  /* SIN mayúsculas */
  text-transform: none;
  letter-spacing: 0;
  opacity: .9;
}

/* Cuerpo de texto */
#muestras-reales .card p,
#muestras-reales .card li {
  color: #0f172a;
  font-size: .95rem;
}
#muestras-reales .card p {
  margin-bottom: .85rem;
}
#muestras-reales .card ul.link-list {
  list-style: disc;
  margin: 0 0 .85rem 1.2rem;
  padding: 0;
}
#muestras-reales .card b,
#muestras-reales .card strong {
  color: #0b1220;
}

/* Enlaces dentro de la tarjeta */
#muestras-reales .card .tg-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Empujar el último enlace al fondo si es el CTA final */
#muestras-reales .card > .tg-link:last-of-type {
  margin-top: auto;
}

/* Hover: levantamos la tarjeta y aclaramos el verde */
#muestras-reales .card:hover {
  transform: translateY(-4px);
  background: #a7f3d0;                /* verde claro hover */
  box-shadow: 0 16px 32px rgba(2, 6, 23, .18);
}
/* ===== Enlaces dentro de las tarjetas (Muestras Tregolam) ===== */

/* Color de los enlaces */
#muestras-reales .card .tg-link,
#muestras-reales .card a {
  color: #065f46 !important;     /* verde oscuro */
  text-decoration: none !important;
  border: none !important;
}

/* Quitar la línea que WPBakery añade (border-bottom / pseudo-elementos) */
#muestras-reales .card .tg-link,
#muestras-reales .card a {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Por si algún tema añade underline con :after */
#muestras-reales .card a::after {
  display: none !important;
}

/* Hover con un verde un poco más vivo */
#muestras-reales .card a:hover {
  color: #064e3b !important;
}



/* ======================================================================== */
/* ============= TARJETA INSTITUCIONAL- PROMOCIONAMOS TU LIBRO ============= */
/* ======================================================================== */


#inst-card {
  padding: 3rem 1.5rem;
}

/* Contenedor principal */
#inst-card .tg-promo {
  max-width: 1100px;
  margin: 0 auto;
  background: #000000;               /* fondo negro */
  border-radius: 32px;
  display: flex;
  align-items: stretch;
  gap: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Imagen izquierda / texto derecha */
#inst-card .tg-promo.tg-promo--reversed {
  flex-direction: row-reverse;
}

/* Columna imagen */
#inst-card .tg-promo__media {
  flex: 0 0 42%;
  display: block;
}

/* Alto fijo en desktop: 406 px (como la imagen) */
@media (min-width: 900px) {
  #inst-card .tg-promo__media img {
    width: 100%;
    height: 406px;
    object-fit: cover;
    display: block;
  }

  #inst-card .tg-promo {
    min-height: 406px;
  }
}

/* En móvil se apila */
@media (max-width: 899.98px) {
  #inst-card .tg-promo,
  #inst-card .tg-promo.tg-promo--reversed {
    flex-direction: column;
  }

  #inst-card .tg-promo__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}

/* Columna texto (fondo negro también) */
#inst-card .tg-promo__copy {
  flex: 1;
  background: #000000;
  padding: 2.8rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #f1f5f9;
}

/* Título dividido */
#inst-card .tg-promo__title {
  margin: 0 0 1.75rem;
  font-size: 33px;                   /* 30 px como pedías */
  line-height: 1.2;
  letter-spacing: .01em;
  color: #f9fafb;
}

#inst-card .tg-promo__title-strong,
#inst-card .tg-promo__title-light {
  display: block;
}

#inst-card .tg-promo__title-strong {
  font-weight: 700;
}

#inst-card .tg-promo__title-light {
  font-weight: 400;
  opacity: 0.9;
}

/* CTA dentro de la tarjeta */
#inst-card .tg-promo__cta {
  margin-top: 1.75rem;
}

/* Botón blanco */
#inst-card .tg-promo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

#inst-card .tg-promo__btn--white {
  background: #ffffff;
  color: #020617;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
}

#inst-card .tg-promo__btn--white:hover {
  transform: translateY(-1px);
  background: #f9fafb;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}




  /* =====================================================================
           TABLA COMPARACION TIPOS DE CORRECCIONES - Corrección de textos
======================================================================= */



        /* Usamos un ID único para que NO afecte al resto de tu web */
        #tg-comparison-component {
            /* Variables Locales */
            --tg-font: 'Roboto Condensed', sans-serif;
            --tg-text: #0f172a;
            /* Slate 900 */
            --tg-muted: #64748b;
            /* Slate 500 */
            --tg-border: #e2e8f0;
            /* Slate 200 */
            --tg-bg: #ffffff;

            /* TU COLOR VERDE EXACTO */
            --tg-brand: #86efac;

            /* Color oscuro para contraste sobre el verde claro */
            --tg-brand-text: #064e3b;

            --tg-radius: 16px;
            --tg-shadow: 0 10px 24px rgba(2, 6, 23, .06);

            /* Reset básico solo para este contenedor */
            /* FORZAMOS LA FUENTE CON !important para evitar que tu tema la pise */
            font-family: 'Roboto Condensed', sans-serif !important;
            color: var(--tg-text);
            line-height: 1.6;
            box-sizing: border-box;

            /* Contenedor */
            max-width: 1200px;
            margin: 2rem auto;
            background: var(--tg-bg);
            border-radius: var(--tg-radius);
            box-shadow: var(--tg-shadow);
            border: 1px solid rgba(2, 6, 23, .05);
            position: relative;
        }

        /* Asegurar que todos los elementos internos usen box-sizing */
        #tg-comparison-component *,
        #tg-comparison-component *::before,
        #tg-comparison-component *::after {
            box-sizing: inherit;
            font-family: 'Roboto Condensed', sans-serif !important;
            /* Forzar herencia de fuente */
        }

        /* Scroll Container */
        #tg-comparison-component .table-container {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-radius: var(--tg-radius);
        }

        /* Tabla */
        #tg-comparison-component table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            min-width: 800px;
            margin: 0;
            border: none;
        }

        /* --- Cabecera --- */
        #tg-comparison-component thead th {
            background-color: var(--tg-brand);
            /* TU VERDE #86efac */
            color: var(--tg-brand-text);
            font-weight: 700;
            font-size: 0.95rem;
            padding: 1.25rem 1rem;
            text-align: center;
            border-right: 1px solid rgba(0, 0, 0, 0.05);
            border-bottom: none;
            vertical-align: middle;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 0.02em;

            /* REFUERZO DE FUENTE EN CABECERA */
            font-family: 'Roboto Condensed', sans-serif !important;
        }

        #tg-comparison-component thead th:last-child {
            border-right: none;
        }

        /* Primera columna cabecera */
        #tg-comparison-component thead th:first-child {
            text-align: left;
            padding-left: 2rem;
            background-color: #0f172a;
            color: #ffffff;
            width: 35%;
        }

        /* --- Cuerpo --- */
        #tg-comparison-component tbody tr {
            border-bottom: 1px solid var(--tg-border);
            background-color: #fff;
            transition: background-color 0.2s ease;
        }

        #tg-comparison-component tbody tr:last-child {
            border-bottom: none;
        }

        #tg-comparison-component tbody tr:hover {
            background-color: #f0fdf4;
        }

        /* Celdas generales */
        #tg-comparison-component td {
            padding: 1rem;
            font-size: 1rem;
            color: var(--tg-text);
            vertical-align: middle;
            border-right: 1px solid var(--tg-border);
        }

        #tg-comparison-component td:last-child {
            border-right: none;
        }

        /* Primera columna (Acciones) */
        #tg-comparison-component td:first-child {
            font-weight: 400;
            padding-left: 2rem;
            color: var(--tg-text);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            border-right: 1px solid var(--tg-border);
            font-size: 1.0rem;
        }

        /* Celdas de iconos (Centro) */
        #tg-comparison-component td:not(:first-child) {
            text-align: center;
        }

        /* --- Iconos Check/Cross --- */
        #tg-comparison-component .tg-icon {
            width: 24px;
            height: 24px;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            display: inline-block;
            vertical-align: middle;
        }

        #tg-comparison-component .tg-icon-check {
            stroke: #059669;
            background: #ecfdf5;
            border-radius: 50%;
            padding: 4px;
            width: 32px;
            height: 32px;
        }

        #tg-comparison-component .tg-icon-cross {
            stroke: #cbd5e1;
            opacity: 0.6;
            width: 20px;
            height: 20px;
        }

        /* =====================================================
           TOOLTIP (Info Icon)
           ===================================================== */
        #tg-comparison-component .tooltip-container {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: help;
            margin-left: auto;
        }

        #tg-comparison-component .info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1.5px solid var(--tg-muted);
            color: var(--tg-muted);
            font-size: 12px;
            font-weight: 700;
            font-style: italic;
            font-family: serif;
            transition: all 0.2s ease;
        }

        #tg-comparison-component .tooltip-container:hover .info-icon {
            border-color: var(--tg-brand);
            color: #059669;
            background: #ecfdf5;
        }

        #tg-comparison-component .tooltip-content {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: 135%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: 280px;
            background-color: #0f172a;
            color: #fff;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 0.9rem;
            line-height: 1.4;
            z-index: 9999;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            transition: all 0.2s ease;
            pointer-events: none;
            text-align: left;
            white-space: normal;
        }

        #tg-comparison-component .tooltip-container:hover .tooltip-content {
            visibility: visible;
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Flechita del tooltip */
        #tg-comparison-component .tooltip-content::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -6px;
            border-width: 6px;
            border-style: solid;
            border-color: #0f172a transparent transparent transparent;
        }

        /* Estilos dentro del tooltip */
        #tg-comparison-component .tt-label {
            display: block;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #94a3b8;
            margin-bottom: 4px;
        }

        #tg-comparison-component .tt-example {
            display: block;
            margin-bottom: 4px;
            font-family: "Courier New", monospace;
        }

        #tg-comparison-component .tt-bad {
            color: #fca5a5;
            text-decoration: line-through;
            opacity: 0.8;
        }

        #tg-comparison-component .tt-good {
            color: var(--tg-brand);
            font-weight: 700;
        }

        /* Ajustes Móvil */
        @media (max-width: 768px) {
            #tg-comparison-component thead th {
                font-size: 0.95rem;
                padding: 1rem 0.5rem;
            }

            #tg-comparison-component td {
                padding: 0.75rem 0.5rem;
            }

            #tg-comparison-component td:first-child {
                padding-left: 1rem;
                font-size: 1rem;
                flex-direction: column;
                align-items: flex-start;
            }

            #tg-comparison-component .tooltip-container {
                margin-left: 0;
                margin-top: 6px;
            }

            #tg-comparison-component .tooltip-content {
                width: 220px;
                left: 0;
                transform: translateX(-10%) translateY(10px);
            }

            #tg-comparison-component .tooltip-container:hover .tooltip-content {
                transform: translateX(-10%) translateY(0);
            }

            #tg-comparison-component .tooltip-content::after {
                left: 20%;
            }
        }
















/* ============================================== */
/* ===== EJEMPLO DE ERRORES - Corrección de textos ===== */
/* ============================================== */


#benefits-ribbon{
  --ink:    #0f172a;
  --muted:  #475569;
  --accent: #86efac;
  --rail:   #e5e7eb;
  --bg:     #ffffff;
  --radius: 16px;
  /* sombra un poco más corta y suave */
  --shadow: 0 6px 16px rgba(2,6,23,.06);
  --maxw:   1280px;
}

#benefits-ribbon{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.25rem 1rem 2.5rem;
}

#benefits-ribbon h2{
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: clamp(1.35rem, 1.1vw + 1.1rem, 2rem);
  text-align: center;
}

/* Lista de errores */
#benefits-ribbon .br-list{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columnas en escritorio */
  column-gap: 34px;
  row-gap: 18px;
}

/* Cada ítem */
#benefits-ribbon .br-item{
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr; /* badge + cuerpo */
  align-items: start;
  gap: 12px;
  padding: 12px 12px 12px 6px;
}

/* Riel vertical por ítem */
#benefits-ribbon .br-item::before{
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--rail);
  border-radius: 3px;
}

/* Badge numerado */
#benefits-ribbon .br-badge{
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px rgba(2,6,23,.10);
}

#benefits-ribbon .br-badge span{
  font-weight: 900;
  color: #000;
  font-size: 1.05rem;
}

/* Tarjeta del error */
#benefits-ribbon .br-body{
  background: var(--bg);
  border: 1px solid rgba(2,6,23,.06);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

#benefits-ribbon .br-body:hover{
  transform: translateY(-2px);
  border-color: rgba(134,239,172,.55);
  background: #fffefc;
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

#benefits-ribbon .br-body h3{
  margin: .1rem 0 .35rem 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}

#benefits-ribbon .br-body p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(.95rem, .2vw + .9rem, 1rem);
  line-height: 1.6;
}

/* Conector badge → tarjeta */
#benefits-ribbon .br-item::after{
  content: "";
  position: absolute;
  left: 48px;
  top: 34px;
  width: 14px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Iconos de incorrecto/correcto */
#benefits-ribbon .br-flag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  margin-right: .25rem;
  font-size: .95em;
}

#benefits-ribbon .br-bad{
  color: #dc2626; /* rojo */
}

#benefits-ribbon .br-good{
  color: #16a34a; /* verde */
}

/* Responsive: 1 columna en móvil */
@media (max-width: 920px){
  #benefits-ribbon .br-list{
    grid-template-columns: 1fr;
  }
}








/* ============================================== */
/* ===== ENCAJA TU LIBRO - Promocionar un Libro ===== */
/* ============================================== */


.tg-scenarios{margin-block:clamp(24px,3.2vw,40px)}
.tg-scn__head h2{margin:.1em 0 .25em;font-weight:900;letter-spacing:.2px}
.tg-scn__head p{margin:0 0 1rem;color:var(--tg-muted)}
.tg-scn__grid{display:grid;gap:clamp(14px,2vw,18px);grid-template-columns:1fr}
@media (min-width:980px){.tg-scn__grid{grid-template-columns:repeat(3,1fr)}}

.tg-scn-card{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--tg-card);border:1px solid var(--tg-border);border-radius:16px;
  padding:clamp(16px,2.2vw,22px);box-shadow:var(--tg-shadow);
  transition:transform .06s ease, box-shadow .2s ease, outline-color .2s ease;
  outline:3px solid transparent;
}
.tg-scn-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(2,6,23,.09)}

.tg-scn-card__icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:1.25rem;background:#f8fafc;border:1px solid #e5e7eb
}
.tg-scn-card h3{margin:.2em 0 .2em;font-weight:800}
.tg-scn-list{margin:.1rem 0 .4rem;padding-left:1.05em;display:grid;gap:.5rem}
.tg-scn-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.tg-scn-badge{
  display:inline-flex;align-items:center;gap:.4ch;padding:.24rem .6rem;border-radius:999px;border:1px solid #cbd5e1;
  font-weight:800;font-size:.78rem;background:#f1f5f9;color:#0f172a
}
.tg-scn-badge--rec{background:#eef2ff;border-color:#c7d2fe;color:#1e40af}
.tg-scn-badge--amz{background:#fffbeb;border-color:#fde68a;color:#92400e}

.tg-scn__foot{margin-top:10px}
.tg-scn__note{margin:0;color:var(--tg-muted)}

/* Acentos por escenario (borde en hover) */
.tg-scn--p1:hover{outline-color: color-mix(in srgb, var(--tg-accent-p1) 28%, transparent)}
.tg-scn--p2:hover{outline-color: color-mix(in srgb, var(--tg-accent-p2) 28%, transparent)}
.tg-scn--p3:hover{outline-color: color-mix(in srgb, var(--tg-accent-p3) 35%, transparent)}


/* Aplicar 19px a los elementos de la lista de contenido principal */
.tg-scn-list li {
    font-size: 19px !important;
    line-height: 1.5;
}

/* Aplicar 19px al texto de nota al pie de la tarjeta */
.tg-scn__note {
    font-size: 19px !important;
    line-height: 1.4;
}



/* QUITAR SUBRAYADO DE BOTONES (clase .tg-btn) */
.tg-btn,
.tg-btn:link,
.tg-btn:visited,
.tg-btn:hover,
.tg-btn:focus,
.tg-btn:active{
  text-decoration: none !important;
}

/* Si usas variantes tipo “btn-link”, también sin subrayado ni línea inferior */
.tg-btn--link,
.tg-btn--link:hover,
.tg-btn--link:focus{
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Ajuste del tamaño del texto de cada tarjeta */
/* 1. Selector para el HTML original que enviaste (clase .card) */
.tg-showcase .card p:not(.pack) {
    font-size: 19px !important; /* ¡Forzamos 19px! */
    line-height: 1.5; 
    margin-bottom: 1.25rem; /* Ajuste de espaciado inferior */
}

/* 2. Selector para el CSS antiguo que tienes (clase .tg-tile) */
.tg-showcase .tg-tile p:not(.pack) {
    font-size: 19px !important; /* ¡Forzamos 19px! */
    line-height: 1.5; 
    margin-bottom: 1.25rem; /* Ajuste de espaciado inferior */
}




/* ==================================== */
/* ===== TABLA COMPARTIVA ===== */
/* ==================================== */


/* Cambiar tamaño del texto */
.tg-compare__table th,
.tg-compare__table td {
    /* Aplica el tamaño de 19px a todas las celdas */
    font-size: 19px; 
}

/* Opcional: Si los títulos de las columnas (th) quedan demasiado grandes, 
   puedes reducir el font-size de la cabecera (thead) a un valor inferior: */
.tg-compare__table thead th {
    font-size: 1.05rem; /* Mantener un tamaño más pequeño y basado en rem */
    font-weight: 800; 
}

/* Opcional: Asegurar que el pie de tabla (summary) mantenga su tamaño actual si 19px es demasiado grande */
.tg-compare__summary th,
.tg-compare__summary td {
    /* Ya tienes font-size: 1.02rem; lo mantenemos o ajustamos */
    font-size: 1.02rem; 
}

.tg-compare{
  --tg-text:#0f172a; --tg-muted:#64748b; --tg-border:#e5e7eb; --tg-bg:#fff;
  --tg-shadow:0 8px 24px rgba(0,0,0,.06);
  --tg-brand:#0ea5e9;     /* primario */
  --tg-rec:#2563eb;       /* recomendado */
  --tg-amz:#f59e0b;       /* amazon */
  font: inherit; color:var(--tg-text);
}

.tg-compare__head{margin-bottom:clamp(16px,2.2vw,24px)}
.tg-compare__head h2{margin:0 0 .35em;font-weight:800}
.tg-compare__intro{margin:0;color:var(--tg-muted)}

.tg-compare__wrap{overflow:auto;border:1px solid var(--tg-border);border-radius:16px;background:var(--tg-bg);box-shadow:var(--tg-shadow)}
.tg-compare__table{width:100%;border-collapse:separate;border-spacing:0}
.tg-compare__table th,
.tg-compare__table td{padding:16px;vertical-align:top;border-bottom:1px solid var(--tg-border);background:#fff;transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease}
.tg-compare__table thead th{position:sticky;top:0;background:#f8fafc;z-index:1}

.tg-compare__feature{width:26ch;background:#f8fafc;font-weight:700}
.tg-compare__col{text-align:left}
.tg-compare__title{display:block;font-weight:800;margin:.25rem 0 .15rem}
.tg-compare__price{display:inline-block;font-weight:800}

.tg-badge{
  display:inline-flex;align-items:center;gap:.5ch;
  padding:.28rem .6rem;border-radius:999px;
  border:1px solid #cbd5e1;background:#f1f5f9;color:#0f172a;font-weight:700;font-size:.8rem;
}
.tg-badge--primary{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.tg-badge--amazon{background:#fffbeb;border-color:#fde68a;color:#92400e}

.is-recommended{box-shadow:inset 0 -2px 0 0 color-mix(in srgb, var(--tg-rec) 40%, transparent)}
.is-recommended .tg-compare__title{color:#1e40af}

/* Hover por columna con :has() (navegadores modernos) */
.tg-compare__table:has(th:nth-child(2):hover),
.tg-compare__table:has(td:nth-child(2):hover) td:nth-child(2),
.tg-compare__table:has(th:nth-child(2):hover) th:nth-child(2){
  background:#f9fafb;
}
.tg-compare__table:has(th:nth-child(3):hover),
.tg-compare__table:has(td:nth-child(3):hover) td:nth-child(3),
.tg-compare__table:has(th:nth-child(3):hover) th:nth-child(3){
  background:#f8fbff; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--tg-rec) 14%, transparent);
  transform:translateY(-2px);
}
.tg-compare__table:has(th:nth-child(4):hover),
.tg-compare__table:has(td:nth-child(4):hover) td:nth-child(4),
.tg-compare__table:has(th:nth-child(4):hover) th:nth-child(4){
  background:#fffbf2; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--tg-amz) 16%, transparent);
  transform:translateY(-2px);
}

/* Footer aspiracional diferenciado */
.tg-compare__summary th,
.tg-compare__summary td{
  background:#f1f5f9 !important;
  border-top:2px solid #cbd5e1;
  font-size:1.02rem;
}
.tg-compare__feature--summary{
  background:#e2e8f0; color:#0f172a; letter-spacing:.2px;
}

/* CTAs bajo la tabla */
.tg-compare__ctas{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(14px,2vw,18px)
}
.tg-cta{
  display:inline-flex;align-items:center;gap:.6ch;
  padding:.85rem 1.1rem;border-radius:12px;border:1px solid transparent;
  font-weight:800;text-decoration:none;box-shadow:var(--tg-shadow);
  transition:filter .15s ease, transform .05s ease;
}
.tg-cta:hover{filter:brightness(.97)} .tg-cta:active{transform:translateY(1px)}
.tg-cta--primary{background:#2563eb;color:#fff}
.tg-cta--amazon{background:#f59e0b;color:#111827}
.tg-cta--amazon img{width:20px;height:auto;display:inline-block}

/* Responsive */
@media (max-width: 900px){
  .tg-compare__feature{width:auto}
  .tg-compare__table th, .tg-compare__table td{padding:14px}
}



/*=================================================== */
/* === TABLA COMPARATIVA -Publicar un libro       === */
/*=================================================== */


#tg-pricing-compare .tgpc-card {
  border-radius: 8px;
  overflow: hidden; /* Para que el borde redondeado afecte a la tabla */
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

/* Scroll en pantallas pequeñas */
#tg-pricing-compare .tgpc-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Estilos base de la tabla */
#tg-pricing-compare .tgpc-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.98rem;
}

/* Celdas */
#tg-pricing-compare th,
#tg-pricing-compare td {
  border: 1px solid #e5e7eb;
  padding: .65rem .7rem;
  vertical-align: top;
}

/* Primera columna: más anchura y bold */
#tg-pricing-compare td:first-child {
  font-weight: 700;
  width: 34%;
}

/* ================================
   ENCABEZADO EN VERDE #8ef4ba
================================ */

#tg-pricing-compare thead th {
  background: #8ef4ba;
  color: #0f172a;
  font-weight: 700;
  text-align: left;
  border-color: #8ef4ba;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Bordes redondeados superiores */
#tg-pricing-compare thead th:first-child { border-top-left-radius:8px; }
#tg-pricing-compare thead th:last-child  { border-top-right-radius:8px; }


/* ================================
   HOVER (COLUMNAS Y FILAS)
================================ */

/* Hover por columna (en celdas y cabecera) */
#tg-pricing-compare .tgpc-table td:hover,
#tg-pricing-compare .tgpc-table th:hover {
  background: #e9fff6 !important; /* Verde MUY claro */
}

/* Hover por fila */
#tg-pricing-compare .tgpc-table tr:hover td {
  background: #dcffef; /* Contraste suave */
}

/* Borde en hover */
#tg-pricing-compare .tgpc-table td:hover {
  border-color: #b9f8d4;
}

/* Esquinas redondeadas inferiores */
#tg-pricing-compare tbody tr:last-child td:first-child { border-bottom-left-radius:8px; }
#tg-pricing-compare tbody tr:last-child td:last-child  { border-bottom-right-radius:8px; }


/* ================================
   ESTILOS SECUNDARIOS
================================ */

/* Alternancia de filas */
#tg-pricing-compare tbody tr:nth-child(odd) {
  background: #fcfdff;
}

/* Italica simplificada */
#tg-pricing-compare em {
  color: #475569;
  font-style: normal;
}

/* Nota inferior */
#tg-pricing-compare .tgpc-note {
  margin: .6rem 0 0;
  color: #64748b;
  font-size: .9rem;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

#tg-pricing-compare .no-margin-text { display: block; }

/* Accesibilidad (screen reader only) */
#tg-pricing-compare .tgpc-sr-only {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Responsive tip */
@media (max-width:820px){
  #tg-pricing-compare .tgpc-table {
    font-size: .95rem;
  }
  #tg-pricing-compare td:first-child {
    width: auto;
  }
}





/* ==================================== */
/* ===== ¿LISTO PARA PUBLICAR Y VENDER? -- Publicar un libro ===== */
/* ==================================== */


#trego-hero-publish-v3{
  /* Variables rápidas */
  --green: #86efac;
  --ink:   #e8edf3;
  --muted: #c7d0db;
  --pad:   clamp(18px, 3vw, 28px);
  --gap:   clamp(18px, 2.6vw, 32px);
  --radius: 22px;

  position: relative;
  isolation: isolate;
  border-radius: var(--radius);
  overflow: hidden;
  padding: var(--pad);
  background:
    radial-gradient(1100px 420px at 110% -20%, rgba(134,239,172,.14), transparent 60%),
    radial-gradient(780px 320px at -12% 120%, rgba(134,239,172,.12), transparent 62%),
    linear-gradient(160deg, #0b1320 10%, #101a2a 55%, #0f1b2d 100%);
  /* solo borde interior sutil, sin sombra fuerte */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Halo animado sutil */
#trego-hero-publish-v3::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(360px 220px at 24% 112%, rgba(134,239,172,.26), transparent 60%);
  opacity:.45;
  animation: tregoGlow 7s linear infinite;
  pointer-events: none;
}

@keyframes tregoGlow{
  0%{ transform: translateX(0) }
  50%{ transform: translateX(6%) }
  100%{ transform: translateX(0) }
}

@media (prefers-reduced-motion: reduce){
  #trego-hero-publish-v3::before{ animation: none; }
}

/* Grid interno */
#trego-hero-publish-v3 .hero-inner{
  display: grid;
  grid-template-columns: 1.1fr .9fr;  /* texto | imagen */
  align-items: center;
  gap: var(--gap);
}

/* Columna izquierda (texto) */
#trego-hero-publish-v3 .hero-copy{
  color: var(--ink);
}

/* H2 fijo a 28px */
#trego-hero-publish-v3 h2{
  margin: 0 0 .6rem 0;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* Copy principal */
#trego-hero-publish-v3 .hero-lead{
  margin: 0;
  font-size: clamp(16px, .6vw + 14px, 18px);
  line-height: 1.7;
  color: var(--muted);
}
#trego-hero-publish-v3 .hero-lead strong{ color: var(--ink); }

/* CTA principal: más pequeño, blanco y sin sombra */
#trego-hero-publish-v3 .hero-cta{
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: #ffffff;
  color: #020617;
  text-decoration: none !important;
  border-radius: 8px;
  padding: .7rem 1.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid rgba(148,163,184,.7);
  box-shadow: none;
  transition:
    background .12s ease,
    color .12s ease,
    border-color .12s ease,
    transform .1s ease;
}

#trego-hero-publish-v3 .hero-cta:hover{
  background: #f1f5f9;
  border-color: rgba(148,163,184,.9);
  transform: translateY(-1px);
}

#trego-hero-publish-v3 .hero-cta:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px #0b1320, 0 0 0 6px #ffffff;
  border-radius: 999px;
}

/* Nota bajo CTA (14px) + enlace sin subrayado */
#trego-hero-publish-v3 .hero-note{
  margin: 30px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #c7d1dc;
}
#trego-hero-publish-v3 .hero-note a{
  color: var(--green);
  text-decoration: none !important;
  font-weight: 800;
}
#trego-hero-publish-v3 .hero-note a:hover{ opacity: .9; }

/* Columna derecha (imagen) — a sangre por abajo en desktop */
#trego-hero-publish-v3 .hero-media{
  margin: 0;
  display: grid;
  place-items: end;            /* abajo y derecha */
}

#trego-hero-publish-v3 .hero-media img{
  display: block;
  width: 115%;
  max-width: 345px;
  height: auto;
  margin-bottom: calc(-1 * var(--pad) - 2px); /* a sangre inferior */
  border-radius: 14px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  filter: none;
}

/* —— Responsive ——————————————————————————— */
@media (max-width: 980px){
  #trego-hero-publish-v3 .hero-inner{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  #trego-hero-publish-v3 .hero-media{
    place-items: center;
  }
  #trego-hero-publish-v3 .hero-media img{
    width: 120%;
    max-width: min(380px, 90vw);
    margin-bottom: 0;          /* en móvil, sin sangre para evitar saltos */
    border-radius: 14px;
  }
}



#cards-grid-wrap{
    --tg-green:#86efac; --tg-green-hover:#a7f3d0;
    --tg-ink:#0f172a; --tg-ink-strong:#0b1220;
    --tg-shadow:0 8px 24px rgba(2,6,23,.12);
    --tg-shadow-hover:0 16px 32px rgba(2,6,23,.18);
    --tg-radius:16px; --tg-gap:20px;
    --tg-copy:18px; --tg-title:1.25rem; /* ≈20px */
    --tg-icon:40px; --tg-stroke:2;
    font-family:"Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
    color:var(--tg-ink);
  }

  /* GRID 2 columnas: 4 cards izquierda, 1 card + imagen derecha */
  #cards-grid{
    display:grid; grid-template-columns: 1.1fr .9fr; gap:24px;
    align-items:start;
  }
  .col-left{ display:grid; gap:24px; }
  .col-right{ display:grid; gap:24px; }

  /* Tarjeta base */
  .post-card{
    background: var(--tg-green);
    border: 1px solid rgba(2,6,23,.06);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    outline: none;
  }
  .post-card:hover{ background:var(--tg-green-hover); transform:translateY(-4px); box-shadow:var(--tg-shadow-hover); }
  .post-card:focus-within{ box-shadow:var(--tg-shadow-hover), 0 0 0 3px rgba(15,23,42,.15); }
  .post-card__body{ padding:24px; }
  @media (min-width:1024px){ .post-card__body{ padding:32px; } }

  /* Iconos NEGROS */
  .post-card__icon{ color:#000; margin:0 0 12px 0; }
  .post-card__icon svg{ width:var(--tg-icon); height:var(--tg-icon); display:block; }
  .post-card__icon svg *{ stroke: currentColor; stroke-width: var(--tg-stroke); stroke-linecap: round; stroke-linejoin: round; fill:none; }

  /* Títulos + copy */
  .post-card__title{ margin:0 0 .35rem 0; line-height:1.25; font-size:var(--tg-title); font-weight:700; color:var(--tg-ink); }
  .post-card p{ margin:.35rem 0 0 0; line-height:1.6; font-size:19px; font-weight:400; color:var(--tg-ink); }

  /* Logos POD — sin “fondo blanco” + 25% tamaño */
  .platform-logos{ margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px 18px; align-items:center; }
  @media (max-width:560px){ .platform-logos{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .platform-logos a{ display:inline-flex; align-items:center; gap:8px; }
  .platform-logos a:focus-visible{ outline:2px solid #0f172a; outline-offset:3px; border-radius:6px; }
  .platform-logos img{
    height:30px; /* 24px → +25% */
    width:auto; object-fit:contain; display:block; background:transparent;
    mix-blend-mode: multiply; image-rendering:-webkit-optimize-contrast;
  }

  /* Slot para tu imagen vertical */
  .promo-figure{
    display:block; margin:0; padding:0; border:0; background:transparent;
    overflow:hidden; border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow);
  }
  .promo-figure img{ width:100%; height:auto; display:block; }

  /* Responsive: 1 columna */
  @media (max-width: 860px){
    #cards-grid{ grid-template-columns: 1fr; }
  }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce){
    .post-card{ transition:none; } .post-card:hover{ transform:none; }
  }


	

/* =========================================================
   VARIABLES GENERALES
   ========================================================= */
:root{
  /* Colores de marca */
  --tg-text: #111;                 /* Texto principal */
  --tg-text-muted: #585858;        /* Texto secundario */
  --tg-bg: #ffffff;                /* Fondo de tarjeta */

  /* Verde Tregolam para el botón */
  --tg-accent: #86efac;            /* Botón (principal) */
  --tg-accent-contrast: #022c22;   /* Texto del botón (más legible sobre el verde) */

  --tg-badge-bg: rgba(0,0,0,0.75); /* Fondo etiqueta género */
  --tg-badge-text: #fff;           /* Texto etiqueta género */

  /* Dimensiones */
  --tg-gap: 1rem;                  /* Separaciones internas/entre tarjetas */
  --tg-radius: 14px;               /* Radio de tarjetas */
  --tg-shadow: 0 6px 20px rgba(0,0,0,.08); /* Sombra al hover */
  --tg-img-max-w: 240px;           /* Ancho máximo visible de la portada */
  --tg-content-max-w: 1200px;      /* Ancho máximo del bloque */
  --tg-font-size: 15.5px;          /* Tamaño base de tipografía del bloque */
}


	
	
/* =========================================================
   GALERÍA "NUESTROS AUTORES" — ESTILOS
   ========================================================= */

.book-shelf{
  max-width: var(--tg-content-max-w);
  margin-inline: auto;
  font-size: var(--tg-font-size);
  line-height: 1.5;
  color: var(--tg-text);
}

/* ---------- FILA (DUPLICABLE) ---------- */
.book-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas en desktop */
  gap: calc(var(--tg-gap) * 1.25);
}

/* Responsivo: 2 columnas en tablet */
@media (max-width: 1023.98px){
  .book-row{ grid-template-columns: repeat(2, 1fr); }
}
/* Responsivo: 1 columna en móvil */
@media (max-width: 639.98px){
  .book-row{ grid-template-columns: 1fr; }
}


/* ---------- TARJETA ---------- */
.book{
  position: relative;
  background: var(--tg-bg);
  border-radius: var(--tg-radius);
  border: 1px solid #e5e7eb;          /* borde gris muy suave */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover/focus sutil */
.book:is(:hover, :focus-within){
  transform: translateY(-2px);
  box-shadow: var(--tg-shadow);
  border-color: #d1d5db;
}

/* ---------- PORTADA ---------- */
.book-cover{
  position: relative;
  padding: var(--tg-gap);
  display: grid;
  place-items: center; /* centra la portada */
}

/* Marco que preserva relación 2:3 y limita el ancho */
.cover-frame{
  width: 100%;
  max-width: var(--tg-img-max-w);
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: calc(var(--tg-radius) - 6px);
}

/* Imagen de portada */
.book-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #f4f4f4;
}

/* ---------- CUERPO DE LA TARJETA ---------- */
.book-body{
  padding: 0 var(--tg-gap) var(--tg-gap) var(--tg-gap);
}

/* Título del libro */
.book-title{
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 .35rem 0;
  font-weight: 700;
}

/* Metadatos (autor, género, ISBN) — letra más pequeña */
.book-meta{
  margin: 0 0 .75rem 0;
  color: var(--tg-text-muted);
  display: grid;
  gap: .15rem;
  font-size: 0.9rem;          /* ↓ más pequeña que el cuerpo */
  line-height: 1.4;
}

/* ---------- BOTÓN COMPRAR ---------- */
.book-actions{ margin-top: .5rem; }

.book-actions .btn{
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  padding: .6rem .9rem;
  border-radius: 8px;                 /* ← ahora 8px */
  background: var(--tg-accent);       /* verde Tregolam */
  color: var(--tg-accent-contrast);   /* texto oscuro/legible */
  transition: filter .18s ease, transform .18s ease;
  outline: none;
}

.book-actions .btn:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-accent) 40%, #ffffff 60%);
}

.book-actions .btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}
	
/* =========================================================
   VARIANTE CELESTE PARA "NUESTROS AUTORES"
   ========================================================= */

/* Botón celeste */
.book-shelf.books-blue .book-actions .btn {
  background: #6dc6d9 !important;
  color: #0f172a !important;
}

.book-shelf.books-blue .book-actions .btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* Etiquetas (badges) */
.book-shelf.books-blue .badge {
  background: #6dc6d9 !important;
  color: #0f172a !important;
}

	

/* ============================================================ */
/* ===== POR QUE PUBLICAR CON TREGOLAM -Publicar un libro--===== */
/* ==================================================== */


/* Layout de columnas izquierda / derecha */
#cards-grid-wrap #cards-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
  gap: 24px;
}
@media (max-width: 960px){
  #cards-grid-wrap #cards-grid{
    grid-template-columns: 1fr;
  }
}

/* Columnas internas en modo stack */
#cards-grid-wrap .col-left,
#cards-grid-wrap .col-right{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===== Tarjeta base ===== */
#cards-grid-wrap .post-card{
  border-radius: 16px;
  background: #86efac;                    /* verde base */
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 4px 12px rgba(15,23,42,.14); /* sombra más pequeña */
  transition:
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    border-color .18s ease;
  height: 100%;
}

/* Cuerpo interno */
#cards-grid-wrap .post-card__body{
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  color: #022c22;
}

/* Icono */
#cards-grid-wrap .post-card__icon{
  color: #000;
  margin-bottom: .5rem;
}
#cards-grid-wrap .post-card__icon svg{
  display:block;
  width: 40px;
  height: 40px;
}

/* Título */
#cards-grid-wrap .post-card__title{
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #022c22;
}

/* Texto */
#cards-grid-wrap .post-card p{
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  color: #064e3b;
}

/* ===== Hover / focus ===== */
#cards-grid-wrap .post-card:hover,
#cards-grid-wrap .post-card:focus-within{
  background-color: #a7f3d0;             /* verde más claro */
  transform: translateY(-2px);
  border-color: rgba(15,23,42,.16);
  box-shadow: 0 6px 16px rgba(15,23,42,.16); /* un poco más marcada pero suave */
}

/* Foco accesible si hay enlaces dentro */
#cards-grid-wrap .post-card:focus-within{
  outline: 0;
  box-shadow:
    0 0 0 2px #0b1120,
    0 0 0 5px #86efac;
}



/* ===========================================================================*/
/* ===== COMPARATIVA AUTOPUBLICACION VS PUBLICACION - Publicar un Libro ===== */
/* =========================================================================== */


#cluster-bifurcacion-v2{
  --brand: #86efac;
  --brand-hover: #6feaa7;
  --ink: #0b3a2c;
  --muted: #0f2d20;
  --ring: rgba(16, 42, 67, .28);
  --pad: 20px;
  --pillH: 34px;   /* pill más pequeña */
  --pillG: 8px;
}

/* Grid de tarjetas */
#cluster-bifurcacion-v2 .bif-cards{
  list-style:none;
  margin:16px auto 8px;
  padding:0 16px;
  max-width:72rem;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:700px){
  #cluster-bifurcacion-v2 .bif-cards{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Tarjeta */
#cluster-bifurcacion-v2 .bif-card{
  background:var(--brand);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 8px 20px rgba(2,6,23,.10);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#cluster-bifurcacion-v2 .bif-card:hover{
  transform:translateY(-2px);
  background:var(--brand-hover);
  box-shadow:0 10px 26px rgba(2,6,23,.16);
}

/* Wrapper interno (ya no es <a>, pero mantiene el layout) */
#cluster-bifurcacion-v2 .bif-card__inner{
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto; /* pill, icono, título, lista, botón */
  gap:12px;
  padding:calc(var(--pad) + var(--pillH) + var(--pillG)) var(--pad) var(--pad) var(--pad);
  height:100%;
  color:inherit;
}

/* Pill superior (más compacta) */
#cluster-bifurcacion-v2 .bif-pill{
  position:absolute;
  top:var(--pad);
  left:var(--pad);
  height:var(--pillH);
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.01em;
  font-size:.8rem;
  background:#10b981;
  color:#052e16;
  pointer-events:none;
  z-index:2;
}

/* Icono */
#cluster-bifurcacion-v2 .bif-icon{
  width:56px;
  height:56px;
  color:var(--ink);
}
#cluster-bifurcacion-v2 .bif-icon svg{
  width:100%;
  height:100%;
}

/* Título */
#cluster-bifurcacion-v2 .bif-title{
  margin:2px 0 4px;
  font-weight:800;
  color:var(--ink);
  font-size:clamp(1rem,0.85rem + 0.6vw,1.35rem);
  line-height:1.2;
  letter-spacing:-.01em;
}

/* Lista descriptiva */
#cluster-bifurcacion-v2 .bif-desc{
  margin:0;
  padding-left:20px;
  color:var(--muted);
  font-size:clamp(.98rem,.3vw + .9rem,1.05rem);
  line-height:1.5;
}
#cluster-bifurcacion-v2 .bif-desc li{
  margin-bottom:8px;
}
#cluster-bifurcacion-v2 .bif-desc li:last-child{
  margin-bottom:0;
}

/* CTA wrap */
#cluster-bifurcacion-v2 .bif-cta-wrap{
  margin-top:6px;
}

/* Botón negro */
#cluster-bifurcacion-v2 .bif-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem 1rem;
  border-radius:999px;
  background:#020617;
  color:#f9fafb;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  border:1px solid rgba(15,23,42,.6);
  gap:.35rem;
  transition:background .14s ease, transform .12s ease, box-shadow .14s ease;
}
#cluster-bifurcacion-v2 .bif-btn:hover{
  background:#0b1120;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,23,42,.35);
}
#cluster-bifurcacion-v2 .bif-btn:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:3px;
}






/* ==================================== */
/* ===== FORMATO YOUTUBE===== */
/* ==================================== */

.tg-youtube {
  position: relative;
  width: 100%;
  margin: 1.5rem auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #000;
}

.tg-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

/* Wrapper para mantener proporción 16:9 */
.tg-youtube::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}



/* =========================================================================
   Toggle - DISEÑO DE PORTADA
   ========================================================================= */


#kdp-toggle{
  /* —— Colores/variables —— */
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --soft:#f8fafc;
  --accent:#86efac;                   /* verde Tregolam */
  --accent-soft:#D9FBE5;              /* verde suave para fondos */
  --radius:18px; --gap:26px;          /* radios y separación entre tarjetas */

  /* —— Tabs —— */
  --tab-pad-y:12px;                   /* ↑ padding vertical tabs */
  --tab-pad-x:20px;                   /* ↑ padding horizontal */
  --tab-fz:18px;                      /* ↑ tamaño texto tabs */
}

#kdp-toggle .kt-wrap{
  max-width:1200px;
  margin:0 auto;
}

/* ===== Tabs =============================================================== */
#kdp-toggle .kt-tabs{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px;
  background: var(--accent-soft);          /* barra verde clara */
  border:1px solid rgba(134,239,172,.55);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  margin: 0 0 20px;
}

#kdp-toggle .kt-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding: var(--tab-pad-y) var(--tab-pad-x);
  border-radius:999px; line-height:1;
  font-weight:800; font-size:16px;
  color:#094235;                         /* verde oscuro legible */
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

#kdp-toggle .kt-tab.is-active{
  background: var(--accent); color:#0b1420;
  box-shadow:0 4px 12px rgba(134,239,172,.45);
  border:1px solid rgba(0,0,0,.06);
}

/* ===== Panels ============================================================= */
#kdp-toggle .kt-panels{
  position:relative;
}

#kdp-toggle .kt-panel{
  display:none;
}

#kdp-toggle .kt-panel.is-active{
  display:block;
}

/* ===== Grid tarjetas ====================================================== */
#kdp-toggle .kt-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width:1024px){
  #kdp-toggle .kt-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width:640px){
  #kdp-toggle .kt-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== Tarjeta ============================================================ */
#kdp-toggle .kt-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow:0 8px 22px rgba(2,6,23,.07);
  display:grid;
  grid-template-rows:auto 1fr;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

#kdp-toggle .kt-card:hover{
  transform:translateY(-3px);
  border-color: rgba(247,148,104,.45);
  box-shadow:0 16px 32px rgba(2,6,23,.10);
}

/* Media → MÁS ALTA (rectangular) */
#kdp-toggle .kt-media{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
}

#kdp-toggle .kt-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition: transform .35s ease;
}

#kdp-toggle .kt-card:hover .kt-media img{
  transform:scale(1.03);
}

/* Cuerpo */
#kdp-toggle .kt-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#kdp-toggle .kt-title{
  margin:0;
  font-size:1.15rem;
  line-height:1.25;
  font-weight:800;
  color:var(--ink);
}

#kdp-toggle .kt-sub{
  margin:0;
  font-size:1rem;
  color:#334155;
}

/* Meta (chips a la izquierda + logo a la derecha) */
#kdp-toggle .kt-meta{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
}

#kdp-toggle .kt-logo{
  height:32px;
  width:auto;
  object-fit:contain;
}

/* Chips */
#kdp-toggle .kt-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#kdp-toggle .chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:7px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:.82rem;
  line-height:1;
  border:1px solid transparent;
}

/* — Relleno verde — */
#kdp-toggle .chip-green{
  background: var(--accent-soft);
  color:#0A7A3E;
  border-color: rgba(134,239,172,.55);
}

/* — Contorno verde (fondo blanco) — */
#kdp-toggle .chip-outline-green{
  background:#fff;
  color:#0A7A3E;
  border-color: rgba(134,239,172,.8);
}

/* SR-only (accesibilidad) */
#kdp-toggle .sr-only{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* === Ajustes de ancho para la guía KDP en #kdp-toggle === */

/* Que el contenido no se quede como una columna estrecha */
#kdp-toggle .kt-panel .kt-grid{
  display: block;              /* en lugar de grid de varias tarjetas */
}

/* La tarjeta ocupa todo el ancho disponible */
#kdp-toggle .kt-panel .kt-card{
  width: 100%;
  max-width: 70rem;            /* puedes subir o bajar este valor, p. ej. 60–80rem */
  margin: 0 auto;              /* centrada */
}

/* Tablas responsivas dentro de la guía */
#kdp-toggle .kt-table-wrap{
  overflow-x: auto;
}

#kdp-toggle .kt-table-wrap table{
  width: 100%;
  border-collapse: collapse;
}
/* === Ajuste específico para la guía KDP: padding interno en la tarjeta === */
#kdp-toggle .kt-panel .kt-card{
  display:block;              /* rompe el grid interno de la card, aquí no lo necesitamos */
  padding: 34px 36px;         /* separación interior para que el texto no pegue al borde */
  box-sizing: border-box;
}
/* ==== Igualar tamaño tipográfico de párrafos, listas y tablas solo en #kdp-toggle ==== */
#kdp-toggle .kt-panel .kt-card p,
#kdp-toggle .kt-panel .kt-card li,
#kdp-toggle .kt-panel .kt-card table,
#kdp-toggle .kt-panel .kt-card th,
#kdp-toggle .kt-panel .kt-card td{
  font-size: 1rem;      /* mismo tamaño en todo el contenido */
  line-height: 1.55;    /* respiración cómoda para lectura técnica */
  color: var(--ink);    /* mismo color de texto */
}

/* Un poco de aire entre los elementos de lista */
#kdp-toggle .kt-panel .kt-card li{
  margin-bottom: .45rem;
}
/* ==== Espacio debajo de los H3 dentro del toggle KDP ==== */
#kdp-toggle .kt-panel .kt-card h3{
  margin-bottom: 10px;
}
/* Tamaño y legibilidad SOLO en las listas de la guía KDP y la caja CTA */
#kdp-toggle .kt-card li,
.tg-autopub-wrapper .svc li {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 400;
  margin-bottom: .4em;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Iconos SVG SOLO en esas listas */
#kdp-toggle .kt-card li .ico svg,
.tg-autopub-wrapper .svc li .ico svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}





/* ===============================================
   TIMELINE BOOKTRAILER – Página de Booktrailer
   =============================================== */

.timeline-bt {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1rem;
  font-family: "Roboto Condensed", system-ui, sans-serif;
  color: #0f172a;
}

/* Contenedor timeline */
.timeline-container {
  position: relative;
  width: 100%;
}

/* Línea vertical central */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(134, 239, 172, 0),
    #86efac,
    rgba(134, 239, 172, 0)
  );
  z-index: 1;
}

/* Cada item del timeline */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 0 2rem;
  margin-bottom: -40px; /* superposición */
}

.timeline-item.left {
  left: 0;
}

.timeline-item.right {
  left: 50%;
}

/* Tarjeta */
.timeline-card {
  background: #ffffff;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 1.6rem 1.9rem 1.7rem;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.07);
  position: relative;
  z-index: 3;
}

/* Fila superior: icono + PASO */
.timeline-toprow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

/* Iconos SIN fondo, trazo verde */
.timeline-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-icon svg {
  width: 38px;
  height: 38px;
  stroke: #008554;
  stroke-width: 2.5;
  fill: none;
}

/* PASO */
.timeline-step-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #008554;
}

/* Títulos (h3) */
.timeline-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
}

/* Texto interior */
.timeline-card p {
  font-size: 0.96rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

/* ================================
   STICKIES estilo “Relatos cortos”
   ================================ */



/* Número en la línea central */
.timeline-num {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  background: #86efac;
  color: #065f46;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 6px rgba(134, 239, 172, 0.35);
}

/* Responsive */
@media (max-width: 900px) {
  .timeline-item,
  .timeline-item.left,
  .timeline-item.right {
    width: 100%;
    left: 0;
    margin-bottom: 1.8rem;
  }

  .timeline-line {
    left: 20px;
  }

  .timeline-num {
    left: 20px;
  }

  .timeline-item {
    padding-left: 52px;
    padding-right: 0.5rem;
  }
}
/* FORZAR estilo sticky tipo "Relatos cortos" */
.timeline-card .chips .chip,
.timeline-card .bt-tags .bt-tag,
.timeline-card [class*="sticky"],
.timeline-card [class*="stiky"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.37rem 1.1rem 0.37rem 1.6rem !important;
  border-radius: 999px !important;
  background: #86efac !important;   /* verde fondo */
  font-family: "Roboto Condensed", system-ui, sans-serif;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #032131 !important;        /* texto negro */
  border: none !important;
  box-shadow: none !important;
}

.timeline-card .chips .chip::before,
.timeline-card .bt-tags .bt-tag::before,
.timeline-card [class*="sticky"]::before,
.timeline-card [class*="stiky"]::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00a154;              /* punto verde */
}





/* ==================================================== */
/* ===== CLOUSTER - COMPARADOR Página Autopublicar===== */
/* ===================================================== */



/* encabezado */
#cluster-comparador h2{
  margin:0 0 6px;
  font-size:clamp(1.35rem,1.1rem + 1.2vw,1.8rem);
  line-height:1.2;
}
#cluster-comparador .lead{
  margin:0;
  color:var(--muted);
  font-size:.98rem;
}

/* grid de tarjetas */
#cluster-comparador .cards{
  list-style:none;
  margin:18px auto 8px;
  padding:0 16px;
  max-width:72rem;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:640px){#cluster-comparador .cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){#cluster-comparador .cards{grid-template-columns:repeat(2,1fr)}}

/* tarjeta base */
#cluster-comparador .card{
  background:var(--bg);
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  overflow:hidden;
}

/* contenedor interno (no hace falta que sea ) */
#cluster-comparador .card-link{
  display:grid;
  font-size:19px;
  grid-template-rows:auto auto auto auto; /* icono, título, comparador, cta */
  gap:12px;
  padding:18px;
  height:100%;
  position:relative;
  color:inherit;
  text-decoration:none;
}

/* icono */
#cluster-comparador .icon{
  width:40px;height:40px;display:grid;place-items:center
}
#cluster-comparador .icon svg{
  width:100%;height:100%;
  stroke:var(--green);fill:none;stroke-width:1.8
}

/* título */
#cluster-comparador .title{
  margin:0;
  font-size:1.15rem;
  font-weight:800;
}

/* ===== comparador de 2 columnas ===== */
#cluster-comparador .cmp{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:720px){
  #cluster-comparador .cmp{grid-template-columns:1fr}
}

/* columnas */
#cluster-comparador .cmp .col{
  background:linear-gradient(0deg, rgba(2,6,23,.02), rgba(2,6,23,0));
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
}

/* cabeceras de columna (chips) */
#cluster-comparador .cmp-head{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.2px;
  margin-bottom:8px;
  color:#0f172a;
  background:#eef2ff; /* base neutra, luego sobrescribo por tipo */
}
#cluster-comparador .cmp-risk .cmp-head{
  background:rgba(185,28,28,.08);
  color:var(--risk);
}
#cluster-comparador .cmp-safe .cmp-head{
  background:rgba(5,150,105,.1);
  color:var(--green);
}

/* texto de las columnas */
#cluster-comparador .cmp p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:.95rem;
}
#cluster-comparador .cmp p strong{
  color:var(--ink); font-weight:800;
}

/* CTA */
#cluster-comparador .cta{
  align-self:flex-end;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--green);font-weight:700;text-decoration:none;border:0;
}
#cluster-comparador .cta::after{
  content:"\2192";font-size:1.2em;line-height:1;transition:transform .2s ease;color:var(--green)
}
#cluster-comparador .card-link:hover .cta::after{ transform: translateX(4px); }

/* hover sutil sobre la tarjeta completa */
#cluster-comparador .card-link::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg, rgba(5,150,105,.06), rgba(5,150,105,0));
  opacity:0;transition:opacity .2s ease;
}
#cluster-comparador .card-link:hover::before{ opacity:1; }









/* ================= Comparador en tarjetas ================= */
#cluster-comparador{
  --ink:#0f172a;           /* texto principal */
  --muted:#475569;         /* texto secundario */
  --bg:#fff;               /* fondo tarjeta */
  --green:#059669;         /* verde marca (garantía/cta/iconos) */
  --risk:#b91c1c;          /* rojo suave para “riesgo” (acento) */
  --border:rgba(2,6,23,.06);
  color:var(--ink);
  padding:2.5rem 16px;
  text-align:left;
}







/* ==================================== */
/* ===== CLOUSTER FINAL DE PAGINA===== */
/* ==================================== */

:root{
  --tg-text:#0f172a; --tg-muted:#475569; --tg-card:#ffffff; --tg-border:#e5e7eb;
  --tg-shadow:0 10px 24px rgba(2,6,23,.06);
  --tg-brand:#0ea5e9; --tg-brand-2:#2563eb;
}

/* ===== Contenedor ===== */
.tg-related{margin-block:clamp(20px,3vw,32px)}
.tg-related__head h2{margin:.1em 0 .25em;font-weight:900}
.tg-related__intro{margin:0 0 .6rem;color:var(--tg-muted);font-size:.98rem}

/* ===== Grid 3 columnas (discreto) ===== */
.tg-related__grid{
  display:grid;gap:12px;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .tg-related__grid{grid-template-columns:repeat(3,1fr)}
}

/* ===== Card enlazada (ligera y sobria) ===== */
.tg-rel-card{
  display:block;
  background:var(--tg-card);
  border:1px solid var(--tg-border);
  border-radius:14px;
  padding:clamp(12px,1.8vw,16px);
  color:var(--tg-text);
  text-decoration:none;
  box-shadow:var(--tg-shadow);
  transition:transform .06s ease, box-shadow .2s ease, outline-color .2s ease;
  outline:2px solid transparent;
  min-height:120px;
}
.tg-rel-card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(2,6,23,.08);
  outline-color: color-mix(in srgb, var(--tg-brand-2) 20%, transparent);
}

/* Icono discreto */
.tg-rel__icon{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;font-size:1.1rem;
  background:#f8fafc;border:1px solid #e5e7eb;margin-bottom:.45rem
}

/* Títulos y descripciones */
.tg-rel__title{margin:.1em 0 .15em;font-weight:800;font-size:.95rem}
.tg-rel__desc{margin:0;color:var(--tg-muted);font-size:.95rem;line-height:1.45}

/* Acentos sutiles por tarjeta (opcional) */
.tg-rel--correccion:hover{outline-color: color-mix(in srgb, #10b981 22%, transparent)}
.tg-rel--publicar:hover{outline-color: color-mix(in srgb, #3b82f6 22%, transparent)}
.tg-rel--portadas:hover{outline-color: color-mix(in srgb, #f59e0b 26%, transparent)}

/* Quitar subrayado global en estos enlaces (por si el tema los subraya) */
.tg-rel-card,
.tg-rel-card:hover,
.tg-rel-card:focus{
  text-decoration:none !important;
}



/* ================================== */
/* ===== BANNERS PARA LOS POST ===== */
/* ================================== */


/* ================================== */
/* ===== BANNERS PARA LOS POST ===== */
/* ================================== */

/* ===== CTA VISUAL – BIG GPT ===== */
:root{
  --cta-bg-1:#0f172a;     /* fondo base oscuro */
  --cta-bg-2:#1e293b;     /* degradado intermedio */
  --cta-bg-3:#7c3aed;     /* acento morado */
  --cta-glow:#f59e0b;     /* resplandor naranja */
  --cta-text:#ffffff;     /* texto principal */
  --cta-muted:#cbd5e1;    /* texto secundario */
  --cta-pill:#fde68a;     /* pastilla destacada (amarillo suave) */
  --cta-btn:#f97316;      /* botón (naranja) */
  --cta-btn-hover:#ea580c;/* hover botón */
  --cta-ring:#fb923c;     /* anillo foco */
}

.cta-box{
  position:relative;
  overflow:hidden;
  color:var(--cta-text);
  border-radius:16px;
  padding:clamp(1rem,2.5vw,2rem);
  background:
    radial-gradient(1200px 400px at 120% -20%, rgba(124,58,237,.45), transparent 60%),
    linear-gradient(135deg,var(--cta-bg-1),var(--cta-bg-2) 45%,var(--cta-bg-3));
  box-shadow:0 10px 30px rgba(16,24,40,.35);
  display:grid;
  grid-template-columns: 1fr auto;
  gap:clamp(.75rem,2vw,1.25rem);
  align-items:center;
  isolation:isolate;
}
.cta-box::before{
  /* halo animado sutil */
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(350px 200px at -10% 110%, var(--cta-glow), transparent 60%);
  z-index:0; opacity:.6;
  animation:ctaGlow 6s linear infinite;
}
@keyframes ctaGlow{
  0%{transform:translateX(0)}
  50%{transform:translateX(6%)}
  100%{transform:translateX(0)}
}
@media (prefers-reduced-motion: reduce){
  .cta-box::before{animation:none}
}

.cta-content{z-index:1; max-width:70ch}
.cta-eyebrow{
  display:inline-block;
  font-weight:700;
  font-size: 17px;
  color:#0f172a;
  background:var(--cta-pill);
  padding:.25rem .6rem;
  border-radius:999px;
  letter-spacing:.02em;
  margin-bottom:.6rem;
}
.cta-title{
  margin:0 0 .25rem;
   margin-top:.8rem;
  font-size:clamp(1rem,2.2vw,1.4rem);
   font-weight:700;
  line-height:1.2;
  color: var(--cta-text); /* Agrega esta línea para forzar el color blanco */
}
.cta-sub{
  margin:0 0 .9rem;
  color:var(--cta-muted);
  font-size:clamp(.95rem,1.7vw,1.05rem);
}

.cta-actions{
  z-index:1;
  font-size:19px;
  display:flex; flex-direction:column; align-items:flex-end; gap:.5rem;
}
.cta-btn{
  --pad-x:1.0rem;
  --pad-y:.75rem;
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-weight:800; text-decoration:none;
  color:#fff; background:var(--cta-btn);
  padding:var(--pad-y) var(--pad-x);
  border-radius:12px;
  box-shadow:0 5px 12px rgba(249,115,22,.35);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
  outline: none;
}
.cta-btn:hover{ background:var(--cta-btn-hover); transform:translateY(-1px) }
.cta-btn:active{ transform:translateY(0) }
.cta-btn:focus-visible{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--cta-ring);
}

.cta-note{
  font-size:.85rem; color:var(--cta-muted); text-align:right; max-width:32ch;
}
.cta-emoji{ filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }

.cta-inline{ /* variante compacta, para insertar dentro de párrafos o entre H2 */
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; 
  padding:.75rem 1rem; border-radius:12px;
  background:
    linear-gradient(180deg, rgba(124,58,237,.18), rgba(124,58,237,.05));
  border:1px solid rgba(124,58,237,.35);
  color:#111;
}
.cta-inline strong{ color:#111 }
.cta-inline a{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; font-weight:800;
  color:#7c3aed; border-bottom:2px solid rgba(124,58,237,.25);
  padding-bottom:2px;
}
.cta-inline a:hover{ color:#5b21b6; border-color:#5b21b6 }

@media (max-width:720px){
  .cta-box{ grid-template-columns: 1fr; }
  .cta-actions{ align-items:flex-start }
  .cta-note{ text-align:left }
}

/* Modo oscuro (si tu tema lo usa) */
@media (prefers-color-scheme: dark){
  .cta-inline{ color:#e5e7eb; border-color:rgba(124,58,237,.45);}
  .cta-inline a{ color:#c4b5fd; border-color:rgba(196,181,253,.4) }
  .cta-inline a:hover{ color:#a78bfa; border-color:#a78bfa }
}
/* ===== Overrides: quitar subrayado en los enlaces de los CTAs ===== */

/* Enlaces dentro del CTA ancho y CTA en línea */
.cta-box a,
.cta-inline a{
  text-decoration: none !important;   /* fuera subrayado */
}

/* El CTA en línea ya no usa borde inferior como pseudo-subrayado */
.cta-inline a{
  border: 0 !important;
  padding-bottom: 0 !important;
  font-weight: 800;
}

/* Hover/focus accesibles sin subrayar */
.cta-inline a:hover{
  color:#5b21b6;                       /* mismo cambio de color */
}
.cta-inline a:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--cta-ring);
  border-radius: 8px;
}

/* (Opcional) si tu tema fuerza subrayado global con más especificidad */
.cta-box .cta-btn,
.cta-inline a{
  -webkit-text-decoration: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
}


/* =========================================================== */
/* COMO TRABAJAMOS - Pagina Publicar un libro */
/* =========================================================== */

.cluster-cards {
  padding: 2rem 1rem;
  background: #f9f9f9;
}

.cluster-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
}

.card-item {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  flex: 1 1 280px;
  max-width: 360px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.card-icon {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon svg {
  width: 100%;
  height: 100%;
  fill: #86efac;
}

.card-text {
  flex: 1;
}

.card-label {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.card-arrow {
  font-size: 1.2rem;
  color: #cbd5e1;
  margin-left: 1rem;
  flex-shrink: 0;
}
.cluster-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
}
.cluster-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
/* --- Fondo del bloque informativo sin gris --- */
.cluster-cards--info { background: transparent !important; }

/* --- 2 tarjetas por fila (y 1 en móvil) --- */
section.cluster-cards.cluster-cards--info.two-per-row > .cluster-container{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100%;
}
@media (max-width: 860px){
  section.cluster-cards.cluster-cards--info.two-per-row > .cluster-container{
    grid-template-columns: 1fr !important;
  }
}

/* --- Alinear el icono a la altura del H3 (misma línea) --- */
.cluster-cards--info .card-item--info{
  display: grid !important;
  grid-template-columns: 40px 1fr;   /* icono | texto */
  grid-template-rows: auto auto;     /* h3 arriba, párrafo abajo */
  column-gap: 1rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.cluster-cards--info .card-text{ display: contents; } /* permite posicionar h3 y p en la grid */

.cluster-cards--info .card-icon{
  grid-column: 1; grid-row: 1;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.cluster-cards--info .card-icon svg{ width: 100%; height: 100%; fill: #86efac; }

.cluster-cards--info .card-title{
  grid-column: 2; grid-row: 1;
  margin: 0 0 .35rem;
  font-size: 1.125rem; /* h3 un punto más grande */
}

.cluster-cards--info .card-desc{
  grid-column: 2; grid-row: 2;
  margin: 0;
}


/* ==============================*/
   BOTONES VERDES · OVERRIDE FINAL
   Aplica a: cards de pricing y CTAs de la comparativa
 /*  ============================== */
:root{
  --trego-green: #86efac;      /* verde de marca */
  --trego-green-ink: #0b1220;  /* texto sobre el verde (mejor contraste) */
  --trego-green-bd: #34d399;   /* borde/halo algo más oscuro */
  --trego-green-hover: #6feaa7;/* hover sutil */
}

/* Botón principal de cada tarjeta de precios */
.tg-pricing .tg-pricing__btn{
  background: var(--trego-green) !important;
  color: var(--trego-green-ink) !important;
  border: 1px solid var(--trego-green-bd) !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(3, 7, 18, .06) !important;
}
.tg-pricing .tg-pricing__btn:hover{
  background: var(--trego-green-hover) !important;
  filter: none !important;
}
.tg-pricing .tg-pricing__btn:focus-visible{
  outline: 3px solid #fff !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--trego-green-bd) 50%, transparent) !important;
}

/* “Quiero este pack” (CTA bajo la comparativa / cualquier primario) */
.tg-compare__ctas .tg-cta--primary,
.tg-compare__table .tg-cta--primary,
.tg-cta--primary{
  background: var(--trego-green) !important;
  color: var(--trego-green-ink) !important;
  border: 1px solid var(--trego-green-bd) !important;
  text-decoration: none !important;
}
.tg-compare__ctas .tg-cta--primary:hover,
.tg-compare__table .tg-cta--primary:hover,
.tg-cta--primary:hover{
  background: var(--trego-green-hover) !important;
  filter: none !important;
}
.tg-compare__ctas .tg-cta--primary:focus-visible,
.tg-compare__table .tg-cta--primary:focus-visible,
.tg-cta--primary:focus-visible{
  outline: 3px solid #fff !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--trego-green-bd) 50%, transparent) !important;
}

/* Por si algún tema subraya enlaces por defecto */
.tg-pricing .tg-pricing__btn,
.tg-compare__ctas .tg-cta,
.tg-cta,
.tg-cta:link,
.tg-cta:visited{
  text-decoration: none !important;
}

/* ============================================================== */
/* ============= MUESTRAS REALES TREGOLAM (WCAG + SEO) ========== */
/* ============================================================== */

.tg-showcase {
  --bg: #6feaa7;
  --bg-hover: #8ef4ba;
  --border: #d1fae5;
  --ink: #0f172a;
  --muted: #1f2937;
  background-color: #f9f9f9;
  padding: 2rem 1rem;
}
.tg-showcase .wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.tg-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: background 0.2s ease, transform 0.2s ease;
  min-height: 240px;
}
.card:hover {
  background: var(--bg-hover);
  transform: translateY(-4px);
}
.card .icon {
  width: 40px;
  height: 40px;
  color: #000;
  display: grid;
  place-items: center;
}
.card .icon svg {
  width: 36px;
  height: 36px;
}
.card header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--ink);
}
.card .pack {
  font-size: 0.85rem;
  color: #065f46;
  font-weight: 600;
  margin-top: 0.2rem;
}
.card p {
  margin: 0.3rem 0;
  color: var(--muted);
  line-height: 1.5;
}
.card ul.link-list {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0.4rem 0;
}
.card ul.link-list li {
  margin-bottom: 0.2rem;
}
.card .tg-link {
  color: #065f46;
  font-weight: 600;
  text-decoration: underline;
  display: inline-block;
  margin-top: 0.4rem;
  border: none; /* ✅ Elimina líneas no deseadas */
  outline: none;
  box-shadow: none;
}
.card .tg-link:hover {
  text-decoration: none;
}



/* =========================================================================
   TARJETA INSTITUCIONAL · Encapsulada en #inst-card
   — Ajusta ESPACIOS/TAMAÑOS cambiando las variables de abajo —
   ========================================================================= */
#inst-card{
  /* ===== Colores/Bordes ===== */
  --ink: #0f172a;         /* texto principal */
  --muted: #475569;       /* texto secundario */
  --line: #e5e7eb;        /* borde exterior */
  --accent: #86efac;      /* color iconos */
  --radius: 16px;         /* radio esquinas */

  /* ===== Espacios/Layout ===== */
  --cols-gap: 28px;       /* separación texto/imagen */
  --side-pad: 26px;       /* padding lado de texto */
  --h2-mb: 18px;          /* margen inferior H2 */
  --lead-mb: 40px;        /* separación H2→copy→features (>=40px solicitado) */
  --features-gap: 26px;   /* separación entre las 3 mini-tarjetas */
  --feat-gap: 12px;       /* espacio icono↔texto dentro de cada mini-tarjeta */
  --cta-mt: 40px;         /* *** margen superior del botón respecto a features *** */

  /* ===== Tipografías ===== */
  --h2-size: 28px;        /* *** H2 EXACTO 28 px *** */
  --lead-size: 18px;      /* tamaño copy principal */
  --feat-size: 18px;      /* tamaño mini-copys */
  --feat-weight: 400;     /* *** mini-copys sin negrita *** */

  /* ===== Imagen ===== */
  --media-min-h: 520px;   /* *** altura mínima visible de la imagen (más grande) *** */
  --media-col: 1.25fr;    /* peso de la columna de imagen (más ancho que texto) */
}

/* Contenedor de 2 columnas, imagen a sangre */
#inst-card .inst-wrap{
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr var(--media-col);
  gap: var(--cols-gap);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Texto (izquierda) */
#inst-card .inst-copy{ padding: var(--side-pad); }
#inst-card h2{
  margin: 0 0 var(--h2-mb);
  font-size: var(--h2-size); line-height: 1.2;
  font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
#inst-card .inst-lead{
  margin: 0 0 var(--lead-mb);
  font-size: var(--lead-size); line-height: 1.6; color: var(--muted);
}

/* Mini-tarjetas (3 columnas, icono arriba, texto debajo) */
#inst-card .inst-features{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--features-gap);
}
#inst-card .feat{
  display: flex; flex-direction: column; gap: var(--feat-gap);
  align-items: flex-start; background: transparent;
}
#inst-card .feat-ico{ width: 52px; height: 52px; color: var(--accent); }
#inst-card .feat-ico svg{ width: 100%; height: 100%; stroke: var(--accent); }

/* *** Mini-copys SIN negrita *** */
#inst-card .feat-text{
  margin: 0; font-size: var(--feat-size); line-height: 1.35;
  font-weight: var(--feat-weight) !important;  /* fuerza 400 (normal) */
  color: var(--ink);
}
#inst-card .feat-text strong{ font-weight: 700 !important; }

/* CTA negro */
#inst-card .inst-cta{ margin-top: var(--cta-mt); }
#inst-card .btn-black{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 10px;
  background: #000; color: #fff; font-weight: 800; font-size: 16px;
  text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .15s ease, opacity .12s ease;
}
#inst-card .btn-black:hover{ transform: translateY(-1px); opacity: .95; }
#inst-card .btn-black:active{ transform: translateY(0); }
#inst-card .btn-black:focus-visible{
  outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000;
}

/* Imagen (derecha) a sangre */
#inst-card .inst-media{ margin: 0; display: block; }
#inst-card .inst-media img{
  width: 100%; height: 100%; display: block;
  min-height: var(--media-min-h); object-fit: cover;
  aspect-ratio: 16/9; object-position: 60% 50%;
}

/* Responsive */
@media (max-width: 980px){
  #inst-card .inst-wrap{ grid-template-columns: 1fr; }
  #inst-card .inst-features{ grid-template-columns: 1fr; }
  #inst-card .inst-media img{ min-height: 360px; }
}

#inst-card .h2-split{
  margin:0 0 var(--h2-mb);
  font-size:var(--h2-size);   /* 28px */
  line-height:1.2;
}
#inst-card .h2-split .h2-strong{ display:block; font-weight:800; }
#inst-card .h2-split .h2-light{  display:block; font-weight:400; }



/* =================================================== */
/* === TARJETAS EDITING LITERARIO Problmeas en los textos === */
/* =================================================== */

/* Grid interno de la descripción: problema / solución */
#cluster-editing-issues .cards-issues .desc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0.4rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}

/* Columnas internas */
#cluster-editing-issues .desc-col {
  display: block;
  padding: 0.85rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Columna problema */
#cluster-editing-issues .desc-problem {
  background: #fff4f1; /* puedes ajustar a tu paleta */
  border-right: 1px dashed rgba(0,0,0,0.06);
}

/* Columna solución */
#cluster-editing-issues .desc-solution {
  background: #ebf8f3; /* verde muy suave; cámbialo por tu tono */
}

/* Cabeceras internas (Si hay / Así lo solucionamos) */
#cluster-editing-issues .desc-head {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
  color: rgba(0,0,0,0.7);
}

/* Texto interno */
#cluster-editing-issues .desc-text {
  display: block;
  color: rgba(0,0,0,0.85);
}

/* Responsive: apilar problema/solución en móvil */
@media (max-width: 700px) {
  #cluster-editing-issues .cards-issues .desc {
    grid-template-columns: 1fr;
  }

  #cluster-editing-issues .desc-problem {
    border-right: none;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
  }
}



/* =================================================== */
/* === ANTES Y DESPUES · EDITING LITERARIO === */
/* =================================================== */


.tg-editing-examples{
  --pad:16px; --radius:12px; --border:#e8eaee; --bg:#fff; --bgA:#fffdfa; --bgB:#f6fbff; --muted:#6b7280;
}
.tg-editing-examples .tg-card{
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); padding:0; overflow:hidden;
  margin-bottom:18px;
}
.tg-editing-examples .tg-card > summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:14px 18px; font-weight:700;
}
.tg-editing-examples .tg-card > summary::-webkit-details-marker{ display:none; }
/* +1 “punto” en el título */
.tg-editing-examples .tg-card > summary span{ font-size:1.05rem; } 
.tg-editing-examples .tg-card > summary em{ font-style:normal; color:var(--muted); font-weight:400; font-size:.95rem; }

.tg-editing-examples .tg-card[open] > summary{
  border-bottom:1px solid var(--border); background:#fafbfd;
}

.tg-editing-examples .tg-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:0 18px 16px;
}
.tg-editing-examples .tg-pane{
  position:relative; padding: var(--pad); border:1px solid var(--border); border-radius:10px; line-height:1.65; background:#fff;
}
.tg-editing-examples .tg-antes{ background:var(--bgA); }
.tg-editing-examples .tg-despues{ background:var(--bgB); }

.tg-editing-examples .tg-badge{
  position:absolute; top:-10px; left:12px; background:#eef2f7; color:#111827; border:1px solid var(--border);
  padding:2px 8px; border-radius:999px; font-size:.78rem; font-weight:700;
}
.tg-editing-examples .tg-antes .tg-badge{ background:#fde6b3; }
.tg-editing-examples .tg-despues .tg-badge{ background:#cfe3ff; }

/* 10px de aire bajo la etiqueta */
.tg-editing-examples .tg-pane p:first-of-type{ margin-top:15px; }

/* Responsive */
@media (max-width: 820px){
  .tg-editing-examples .tg-cols{ grid-template-columns:1fr; }
}




/* =================================================== */
/* === AMAZON TARJETA · AUTOPUB === */
/* =================================================== */

/* 1) Sin padding/gap en el contenedor: la imagen sangra de verdad */
.tg-autopub.v3{ padding:0 !important; }
.tg-autopub.v3 .tg-autopub__wrap{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0 !important;              /* ← sin espacio entre columnas */
  align-items: stretch;            /* ← la imagen ocupa la altura completa */
}

/* 2) Columna de imagen sin márgenes; ocupa todo y recorta bien */
.tg-autopub.v3 .tg-autopub__media{ margin:0 !important; }
.tg-autopub.v3 .tg-autopub__media img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;                /* ← llena el área sin bandas */
  object-position:center;          /* ajusta si quieres otro encuadre */
}

/* 3) El padding va SOLO en la columna derecha (contenido) */
.tg-autopub.v3 .tg-autopub__content{
  padding: clamp(18px, 4vw, 40px) !important;
  display:flex; flex-direction:column;
}

/* 4) H2 blanco a 28px exactos */
.tg-autopub.v3 h2{
  font-size: 28px !important;
  color: #fff !important;
  line-height: 1.15;
  margin: 0 0 .45em;
}

/* 5) Servicios SIN negrita y SIN subrayado */
.tg-autopub.v3 .svc a{
  font-weight: 400 !important;     /* ← normal */
  text-decoration: none !important;
}

/* 6) Tira de logos: 100% del ancho de la columna derecha */
.tg-autopub.v3 .logos{
  margin-top: .6rem;
  background: transparent !important; /* sin cajita para que “respire” como en la maqueta */
  padding: 0 !important;
  border: 0 !important;
}
.tg-autopub.v3 .logos img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* 7) Responsive: en móvil la imagen arriba, sin sangrar raro */
@media (max-width: 960px){
  .tg-autopub.v3 .tg-autopub__wrap{ grid-template-columns:1fr; }
  .tg-autopub.v3 .tg-autopub__media img{ min-height: 360px; }
}



/* ====== AMAZON ====== */
.tg-autopub.v3{
  background:#202230; color:#fff;
  border-radius:24px; overflow:hidden; padding:0;
}
.tg-autopub.v3 .tg-autopub__wrap{
  display:grid; grid-template-columns:1.05fr 1fr; gap:0; align-items:stretch;
}
@media (max-width:960px){ .tg-autopub.v3 .tg-autopub__wrap{ grid-template-columns:1fr; } }

/* Imagen a sangre */
.tg-autopub.v3 .tg-autopub__media{ margin:0; }
.tg-autopub.v3 .tg-autopub__media img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
}

/* Contenido */
.tg-autopub.v3 .tg-autopub__content{
  padding: clamp(18px, 4vw, 40px);
  display:flex; flex-direction:column;
}
.tg-autopub.v3 h2{
  font-size:28px !important; line-height:1.15;
  margin:0 0 .45em; color:#fff !important;
}
.tg-autopub.v3 .lead{ color:#cbd5e1; margin:0 0 1rem; }
.tg-autopub.v3 a{ text-decoration:none !important; }

/* ====== Lista de estrellas (H3-like) ====== */
.tg-autopub.v3 .svc{
  list-style:none; margin:1rem 0 1.25rem; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
}
@media (max-width:640px){ .tg-autopub.v3 .svc{ grid-template-columns:1fr; } }

.tg-autopub.v3 .svc-stars li{
  display:grid; grid-template-columns:36px 1fr;
  grid-template-rows:auto auto; align-items:start; column-gap:12px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.06);
}
.tg-autopub.v3 .svc-stars li:hover{ background:rgba(255,255,255,.1); }

.tg-autopub.v3 .svc-stars .ico{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:20px; line-height:1;
  background:#fff1cf; color:#7a5a00;
}
.tg-autopub.v3 .svc-stars .svc-title{
  font-weight:800; font-size:17px; line-height:1.2; color:#ffffff;
}
.tg-autopub.v3 .svc-stars .svc-sub{
  grid-column:2 / -1; color:#cbd5e1; font-size:15px; margin-top:2px;
}

/* ====== CTA ====== */
.tg-autopub.v3 .cta-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:.5rem 0 0;
}
.tg-autopub.v3 .btn-white{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; padding:12px 14px; font-weight:800; line-height:1;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 4px 12px rgba(2,6,23,.08);
  color:#202230; background:#fff;
}
.tg-autopub.v3 .btn-white:hover{ filter:brightness(.95); }
.tg-autopub.v3 .btn-white:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }

/* Variante verde (tu color #86efac) */
.tg-autopub.v3 .btn-green{
  background:#86efac; color:#0b1320; border-color:rgba(134,239,172,.3);
}
.tg-autopub.v3 .btn-green:hover{ filter:brightness(.98); }

/* (Opcional) logos */
.tg-autopub.v3 .logos{ margin-top:.6rem; padding:0; background:transparent; }
.tg-autopub.v3 .logos img{ width:100%; height:auto; display:block; }


/* ====== CTA ====== */
.tg-autopub.v3 .cta-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:.5rem 0 0;
}

/* ------------------------------------------- */
/* --- ESTILOS BASE DEL BOTÓN (.btn-white) --- */
/* ------------------------------------------- */
.tg-autopub.v3 .btn-white{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; padding:12px 14px; 
  /* --- TAMAÑO Y PESO --- */
  font-weight: 800 !important; /* Negrita */
  font-size: 19px !important; /* Tamaño del texto */
  line-height:1;
  border:1px solid rgba(255,255,255,.08); 
  /* --- HOVER/ACTIVE TRANSITIONS --- */
  box-shadow:0 4px 12px rgba(2,6,23,.08);
  transition: filter .15s ease, transform .05s ease, box-shadow .2s ease;
  
  color:#202230; background:#fff;
}

/* ------------------------------------------- */
/* --- ESTADOS INTERACTIVOS (HOVER/ACTIVE) --- */
/* ------------------------------------------- */
.tg-autopub.v3 .btn-white:hover{ 
  filter: brightness(.95); 
  transform: translateY(-2px); 
  box-shadow: 0 10px 20px rgba(2, 6, 23, .12);
}
.tg-autopub.v3 .btn-white:active{ 
  transform: translateY(1px); 
  box-shadow: 0 4px 10px rgba(2, 6, 23, .08);
}


/* ------------------------------------------- */
/* --- VARIANTE VERDE (.btn-green) --- */
/* ------------------------------------------- */
.tg-autopub.v3 .btn-green{
  /* Hereda el tamaño y hover de .btn-white */
  background:#86efac; color:#0b1320; border-color:rgba(134,239,172,.3);
}

.tg-autopub.v3 .btn-green:hover{ 
  filter: brightness(.98); 
  transform: translateY(-2px); 
  box-shadow: 0 10px 20px rgba(2, 6, 23, .12);
}

.tg-autopub.v3 .btn-green:active{
  transform: translateY(1px); 
  box-shadow: 0 4px 10px rgba(2, 6, 23, .08);
}





/* =================================================== */
/* === GALERIA DE BOOKTRAILER - Página de Booktrailer  === */
/* =================================================== */

/* ==========================================================
   Galería de Booktrailers (grid 2x, tarjetas horizontales)
   ========================================================== */

#bt-gallery {
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --soft:#f8fafc;
  --accent:#86efac;
  --accent-soft:#d9fbe5;
  --radius-card:12px;
  --shadow-soft:0 8px 22px rgba(15,23,42,.06);
  --shadow-hover:0 16px 34px rgba(15,23,42,.14);
  color:var(--ink);
}

#bt-gallery .bt-inner{
  max-width:1200px;
  margin:0 auto;
  padding:14px 12px 0;
}

/* Grid: 2 tarjetas por fila, con buen espacio entre ellas */
#bt-gallery .bt-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;                 /* más aire entre columnas y filas */
}

@media (max-width:960px){
  #bt-gallery .bt-grid{
    grid-template-columns:1fr;
  }
}

/* Tarjeta */
#bt-gallery .bt-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  transition:
    transform .16s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

#bt-gallery .bt-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(248,113,113,.55);
}

/* Enlace que abarca toda la tarjeta */
#bt-gallery .bt-card-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  height:100%;
}

#bt-gallery .bt-card-link:focus-visible{
  outline:2px solid #0f766e;
  outline-offset:3px;
}

/* Media: formato 16:9 */
#bt-gallery .bt-card-media{
  background:#020617;
  aspect-ratio:16/9;
  overflow:hidden;
}

#bt-gallery .bt-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  transition:transform .3s ease, opacity .3s ease;
}

#bt-gallery .bt-card:hover .bt-card-media img{
  transform:scale(1.05);
}

/* Cuerpo de la tarjeta */
#bt-gallery .bt-card-body{
  padding:14px 16px 16px;
}

/* Fila meta: chip género + dato de impacto */
#bt-gallery .bt-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

/* Chip verde (género) */
#bt-gallery .bt-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:999px;
  background:var(--accent);
  color:#022c22;
  font-size:.8rem;
  font-weight:800;
}

#bt-gallery .bt-tag-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#16a34a;
}

/* Dato de impacto principal */
#bt-gallery .bt-stat{
  padding:4px 11px;
  border-radius:999px;
  background:var(--accent-soft);
  color:#047857;
  font-size:.8rem;
  font-weight:700;
}

/* Título del vídeo/libro */
#bt-gallery .bt-title{
  margin:4px 0 2px;
  font-size:1rem;
  line-height:1.3;
  font-weight:800;
  color:var(--ink);
}

/* Descripción con más datos y porcentajes */
#bt-gallery .bt-desc{
  margin:2px 0 0;
  font-size:.86rem;
  line-height:1.45;
  color:var(--muted);
}

/* SR-only utilitario */
#bt-gallery .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================
   Versión Azul Personalizada (#6DC6D9)
   Solo para secciones con la clase .bt-gallery--blue
   ========================================================== */

#bt-gallery.bt-gallery--blue {
  /* Aplicamos tu azul específico */
  --accent: #6DC6D9;           /* Azul principal para el tag */
  --accent-soft: #eef9fb;      /* Azul muy pálido derivado para el fondo del stat */
}

/* Ajustes de contraste para que el texto sea legible sobre tu azul */
#bt-gallery.bt-gallery--blue .bt-tag {
    background: var(--accent);
    color: #ffffff;            /* Texto blanco para mejor contraste con este azul */
}

#bt-gallery.bt-gallery--blue .bt-tag-dot {
    background: #ffffff;       /* Punto blanco para que resalte sobre el azul */
}

#bt-gallery.bt-gallery--blue .bt-stat {
    background: var(--accent-soft);
    color: #2c7a8b;            /* Texto azul oscuro para el fondo claro */
}

/* Cambio de color de borde en hover al azul de la marca */
#bt-gallery.bt-gallery--blue .bt-card:hover {
    border-color: var(--accent);
}





/* ===== BOOKTRAILER ===== */
#trego-showcase{
  margin-top:26px;
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --soft:#f9fafb;
  --brand:#86efac; --radius:16px;
}
#trego-showcase .trego-wrap{max-width:1200px;margin:0 auto;padding:8px 16px}

#trego-showcase .trego-head h2{
  margin:0 0 8px; font-size:clamp(1.45rem,1.1rem + 1.6vw,2rem);
  line-height:1.2; color:var(--ink); font-weight:800; letter-spacing:-.01em;
}
#trego-showcase .trego-head .trego-lead{
  margin:0 0 18px; color:var(--muted);
  font-size:clamp(1rem,.35vw + .95rem,1.08rem)
}

/* Panel */
#trego-showcase .trego-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:36px; box-shadow:0 14px 34px rgba(2,6,23,.08);
}

/* Layout interno */
#trego-showcase .trego-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; align-items:start }
@media (max-width: 900px){ #trego-showcase .trego-grid{ grid-template-columns:1fr; } }

#trego-showcase .trego-media{ display:flex; flex-direction:column; gap:14px }
#trego-showcase .trego-content{ display:flex; flex-direction:column; gap:10px }

/* Titulares y párrafos */
#trego-showcase .trego-h3{ margin:.2rem 0 .2rem; font-size:1.16rem; line-height:1.32; font-weight:800; color:var(--ink) }
#trego-showcase p{ margin:0; color:var(--muted); font-size:1.04rem }

/* Listas */
#trego-showcase .trego-list{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:.38rem; color:#374151; font-size:.99rem }
#trego-showcase .trego-list li{ position:relative; padding-left:16px }
#trego-showcase .trego-list li::before{
  content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; border-radius:50%; background:#0f172a;
}

/* KPIs */
#trego-showcase .trego-kpis{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
#trego-showcase .trego-kpis li{
  background:rgba(134,239,172,.35); border:1px solid rgba(134,239,172,.5);
  color:#0b3a2c; font-weight:800; border-radius:999px; padding:.46rem .75rem; font-size:.94rem;
}

/* Video responsive */
#trego-showcase .trego-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000 }
#trego-showcase .trego-video iframe{ position:absolute; inset:0; width:100%; height:100% }

/* CTAs */
#trego-showcase .trego-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px }
#trego-showcase .trego-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.05rem; border-radius:999px; font-weight:800; text-decoration:none !important;
  background:var(--brand); color:#0f172a; border:1px solid rgba(134,239,172,.45);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
#trego-showcase .trego-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(2,6,23,.12) }
#trego-showcase .trego-btn--ghost{ background:#fff; color:#0f172a; border:1px solid var(--line); }





/* =========================================================================
   GALERIA IMAGENES - Diseño de Portada
   ========================================================================= */


#tg-masonry-gallery {
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --soft:#f8fafc;
  --accent:#86efac;
  --accent-soft:#d9fbe5;
  --radius-card:10px;
  --gap:20px;
  --shadow-soft:0 8px 22px rgba(15,23,42,.06);
  --shadow-hover:0 14px 30px rgba(15,23,42,.12);
  --sticky-top:80px;
  color:var(--ink);
}

/* Utilidad SR-only */
#tg-masonry-gallery .sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Contenedor */
#tg-masonry-gallery .tg-mason-inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 12px 0;
}

/* ===== Filtros =================================================== */

#tg-masonry-gallery .tg-mason-filters{
  position:sticky;
  top:var(--sticky-top);
  z-index:20;
  background:rgba(248,250,252,.98);
  backdrop-filter:blur(10px);
  padding:10px 12px;
  margin:0 0 18px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

#tg-masonry-gallery .tg-mason-filters-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

#tg-masonry-gallery .tg-mason-filters-label{
  font-size:.9rem;
  font-weight:600;
  color:var(--muted);
}

/* Botones filtro */
#tg-masonry-gallery .tg-mason-filter{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:8px 16px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:800;
  color:#03634a;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}

#tg-masonry-gallery .tg-mason-filter:focus-visible{
  outline:2px solid #0f766e;
  outline-offset:2px;
}

#tg-masonry-gallery .tg-mason-filter.is-active{
  background:var(--accent);
  color:#022c22;
  box-shadow:0 4px 14px rgba(22,163,74,.4);
  transform:translateY(-1px);
}

/* ===== Grid Masonry ============================================= */

#tg-masonry-gallery .tg-mason-grid{
  column-count:3;
  column-gap:var(--gap);
}

@media (max-width:1024px){
  #tg-masonry-gallery .tg-mason-grid{
    column-count:2;
  }
}

@media (max-width:640px){
  #tg-masonry-gallery .tg-mason-grid{
    column-count:1;
  }
}

/* ===== Tarjeta =================================================== */

#tg-masonry-gallery .tg-mason-item{
  display:block;
  break-inside:avoid;
  margin:0 0 var(--gap);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:
    transform .16s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

#tg-masonry-gallery .tg-mason-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(248,113,113,.55);
}

#tg-masonry-gallery .tg-mason-item:focus-within{
  outline:none;
  box-shadow:0 0 0 2px #0f766e;
}

/* ===== Imagen de portada ========================================= */

#tg-masonry-gallery .tg-mason-cover{
  position:relative;
  overflow:hidden;
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 10px 10px;
}

#tg-masonry-gallery .tg-mason-cover img{
  display:block;
  width:215px;
  height:300px;
  max-width:none;
  transform:none;
  transition: transform .25s ease;
}

#tg-masonry-gallery .tg-mason-item:hover .tg-mason-cover img{
  transform:scale(1.03);
}

/* ===== Mini ficha (SEO + prueba social) ========================= */

/* ⚠️ AQUÍ ES DONDE SE ARREGLA TODO */
#tg-masonry-gallery .tg-mason-meta{
  padding:14px 16px 18px;
  background:#fff;
  border-top:1px solid var(--line);

  /* SIEMPRE visible */
  transform:translateY(0);   /* antes: 6px */
  opacity:1;                 /* antes: 0 */
  visibility:visible;        /* antes: hidden */

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility 0s;
}

/* No elimina hover (opcional), pero ya no afecta nada */
#tg-masonry-gallery .tg-mason-item:hover .tg-mason-meta,
#tg-masonry-gallery .tg-mason-item:focus-within .tg-mason-meta{
  opacity:1;
  transform:translateY(0);
  visibility:visible;
}

/* Título */
#tg-masonry-gallery .tg-mason-title{
  margin:0 0 6px;
  font-size:1rem;
  line-height:1.25;
  font-weight:800;
  color:var(--ink);
}

/* Línea género + métrica */
#tg-masonry-gallery .tg-mason-genre-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  font-size:.86rem;
}

#tg-masonry-gallery .tg-mason-genre-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  background:var(--accent-soft);
  color:#065f46;
  font-weight:700;
}

#tg-masonry-gallery .tg-mason-genre-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#22c55e;
}

#tg-masonry-gallery .tg-mason-stat{
  color:#047857;
  font-weight:600;
  white-space:nowrap;
}

/* Badges */
#tg-masonry-gallery .tg-mason-badges{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

#tg-masonry-gallery .tg-mason-badges li{
  font-size:.78rem;
  line-height:1.3;
  padding:4px 9px;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  color:#374151;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

#tg-masonry-gallery .tg-mason-badges li::before{
  content:"★";
  font-size:.8em;
  opacity:.85;
}

/* Estado oculto por filtro */
#tg-masonry-gallery .tg-mason-item.is-hidden{
  display:none;
}

#tg-masonry-gallery li {
  font-size: 0.85rem !important;
  font-family: inherit !important;
  line-height: 1.35;
}




  /*====================================================== */
  /*====== GUIA DIFUSIÓN + PUBLICACION + TARJETAS=========*/
  /*====================================================== */
  #accessibility-cards,
  #accessibility-cards * {
    box-sizing: border-box;
  }

  /* ===============================
     Tarjetas (estilo de marca)
  =============================== */
  #accessibility-cards.post-cards-brand .post-card {
    background: #86efac; /* verde Tregolam */
    border: 1px solid rgba(2, 6, 23, .06);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .12);
    color: #0f172a; /* texto oscuro para contraste */
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    padding: 24px; /* AIRE INTERNO: 4 costados */
  }
  @media (min-width: 1024px) {
    #accessibility-cards.post-cards-brand .post-card {
      padding: 32px; /* más aire en escritorio */
    }
  }

  #accessibility-cards.post-cards-brand .post-card__body { color: #0f172a; }
  #accessibility-cards.post-cards-brand .post-card__title {
    color: #0f172a;
    margin: 0 0 .35rem;
    line-height: 1.25;
  }

  /* Icono en NEGRO (usa currentColor) */
  #accessibility-cards.post-cards-brand .post-card__icon {
    color: #000000; /* iconos negros */
    margin-bottom: 12px;
  }
  #accessibility-cards.post-cards-brand .post-card__icon svg { display: block; }

  /* Hover: lift + verde claro */
  #accessibility-cards.post-cards-brand .post-card:hover {
    transform: translateY(-4px);
    background: #a7f3d0; /* hover verde claro */
    box-shadow: 0 16px 32px rgba(2, 6, 23, .18);
  }

  /* Copy: subimos +1 punto aprox (17px si root=16px) */
  #accessibility-cards.post-cards-brand p,
  #accessibility-cards.post-cards-brand li {
    color: #0f172a;
    line-height: 1.6;
    font-size: 1.0625rem; /* +1px aprox */
  }
  #accessibility-cards.post-cards-brand b,
  #accessibility-cards.post-cards-brand strong { color: #0b1220; }

  /* Listas */
  #accessibility-cards.post-cards-brand ul {
    padding-left: 20px;
    margin-top: 1rem;
    margin-bottom: 0;
  }
  #accessibility-cards.post-cards-brand ul li { margin-bottom: 0.5rem; }



  /* =============================================
     CONTENEDOR: una sola columna + ancho 1200 px
     y AIRE EXTERNO (padding en 4 lados)
     ============================================= */
  #accessibility-cards.trego-related-posts {
    display: grid;
    grid-template-columns: 1fr; /* una sola columna */
    gap: 20px; /* espacio entre tarjetas */
    max-width: 1200px; /* ancho máximo del contenedor */
    width: 100%;
    margin: 0 auto; /* centrado */
    padding: 24px; /* AIRE EXTERNO */
  }
  @media (min-width: 1024px) {
    #accessibility-cards.trego-related-posts { padding: 32px; }
	 
/* Enlaces DENTRO del bloque de tarjetas */
#accessibility-cards a,
#accessibility-cards a:link,
#accessibility-cards a:visited {
  color: #047857 !important;        /* o el color que tú quieras */
  text-decoration: underline !important;
  font-weight: 600;
  cursor: pointer;
}

/* Hover/focus para accesibilidad */
#accessibility-cards a:hover,
#accessibility-cards a:focus {
  color: #065f46 !important;
  text-decoration: underline !important;
}

/* ======== VARIANTE CELESTE SOLO PARA CILOS PUBLICAR ======== */
#accessibility-cards.cards-blue .post-card {
  background: #6dc6d9 !important;
}

#accessibility-cards.cards-blue .post-card:hover {
  background: #8ad5e3 !important; /* un poquito más claro al hover */
}

#accessibility-cards.cards-blue .post-card__icon {
  color: #0f172a;
}

#accessibility-cards.cards-blue a,
#accessibility-cards.cards-blue a:link,
#accessibility-cards.cards-blue a:visited {
  color: #0f172a !important;
  text-decoration: underline;
}
	  
  }
.black-btn{
  display:inline-block;
  padding:.6rem 1rem;
  background:#10b981;
  color:#fff!important;
  font-weight:600;
  border-radius:8px;
  text-decoration:none;
  transition:opacity .18s ease, transform .18s ease;
  margin-top: 0.85rem;   /* ← aquí mandas tú: súbelo o bájalo a gusto */
}
.black-btn:hover{
  opacity:.9;
  transform:translateY(-1px);
}




/* ==========================================================================
   TREGO RELATED POSTS – SISTEMA UNIFICADO (General + Landings)
   ========================================================================== */

/* 1. CONTENEDOR GRID (Estructura base) */
.trego-related-posts {
    --gap: 28px;
    --card-radius: 16px;
    --line: #e5e7eb;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin: 0 auto;
}

/* 2. TARJETA: FONDO BLANCO PERMANENTE (Fix Rollover) */
.trego-related-posts .post-card,
.trego-related-posts .post-card:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    text-decoration: none !important;
}

.trego-related-posts .post-card {
    border: 1px solid var(--line) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 8px 22px rgba(2,6,23,.06) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.trego-related-posts .post-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 25px rgba(2,6,23,.12) !important;
}

/* 3. IMAGEN Y MEDIA */
.trego-related-posts .post-card__media {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.trego-related-posts .post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.trego-related-posts .post-card:hover .post-card__media img {
    transform: scale(1.03);
}

/* 4. CUERPO Y TEXTOS (Control de Padding y Espacios) */
.trego-related-posts .post-card__body {
    padding: 0 20px 20px 20px !important; /* Cero arriba para control total */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Etiqueta Blog (Kicker) */
.trego-related-posts .post-card__kicker {
    margin-top: 15px !important; /* Espacio con la imagen */
    margin-bottom: 5px !important; /* Espacio con el título */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #6B8AA6;
    text-transform: none !important; /* Minúsculas */
}

/* Título (Sin Bold) */
.trego-related-posts .post-card__title {
    margin: 0 !important;
    line-height: 1.25 !important;
}

.trego-related-posts .post-card__title a {
    display: block;
    font-weight: 500 !important; /* Peso medio, no negrita */
    font-size: clamp(18px, 1.1vw + .9rem, 21px) !important;
    color: #0f172a !important;
    text-decoration: none !important;
    margin-bottom: 55px !important; /* VALOR PARA EDITAR ESPACIO CON CATEGORÍA */
}

/* Categoría (Chip) */
.trego-related-posts .post-card__chip {
    align-self: flex-start;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: #D9FBE5; /* Color por defecto */
    color: #0A7A3E;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important; /* Minúsculas */
    margin-top: auto !important;
}

/* 5. EXCEPCIONES AZULES (Solo para tus 5 Landings) */
body.page-id-160558 .trego-related-posts .post-card__kicker, 
body.page-id-160774 .trego-related-posts .post-card__kicker,
body.page-id-160476 .trego-related-posts .post-card__kicker,
body.page-id-158288 .trego-related-posts .post-card__kicker,
body.page-id-144707 .trego-related-posts .post-card__kicker,
body.page-id-158418 .trego-related-posts .post-card__kicker,
body.page-id-160260 .trego-related-posts .post-card__kicker,
body.page-id-160372 .trego-related-posts .post-card__kicker,
body.page-id-160558 .trego-related-posts .post-card__chip,
body.page-id-160476 .trego-related-posts .post-card__chip,
body.page-id-158288 .trego-related-posts .post-card__chip,
body.page-id-144707 .trego-related-posts .post-card__chip,
body.page-id-158418 .trego-related-posts .post-card__chip,
body.page-id-160774 .trego-related-posts .post-card__chip,
body.page-id-160372 .trego-related-posts .post-card__chip,
body.page-id-160260 .trego-related-posts .post-card__chip {
    background-color: #6dc6d9 !important;
    color: #0f172a !important;
    background-image: none !important;
}

/* 6. RESPONSIVE */
@media (max-width: 1024px) {
    .trego-related-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .trego-related-posts { grid-template-columns: 1fr; }
}




/* ================================================ */
/* ====== BLOQUE WORKFLOW - COLORES RECUPERADOS ==== */
/* ================================================ */

/* Forzar las 3 columnas */
.benefits-section .benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 28px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* Estilo base de la etiqueta del paso */
.benefits-section .benefit-step-label {
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    font-weight: 800 !important; /* Más peso para que el color destaque */
    letter-spacing: 0.05em;
    display: block !important;
    margin-bottom: 8px !important;
}

/* --- RECUPERACIÓN DE COLORES ESPECÍFICOS POR PASO --- */

/* Paso 1 - Azul */
.benefits-section .benefit-box:nth-child(1) .benefit-step-label {
    color: #3B82F6 !important;
}

/* Paso 2 - Verde */
.benefits-section .benefit-box:nth-child(2) .benefit-step-label {
    color: #10B981 !important;
}

/* Paso 3 - Naranja/Amarillo */
.benefits-section .benefit-box:nth-child(3) .benefit-step-label {
    color: #F59E0B !important;
}

/* Paso 4 - Morado */
.benefits-section .benefit-box:nth-child(4) .benefit-step-label {
    color: #8B5CF6 !important;
}

/* --- RESTO DE ESTILOS MANTENIDOS --- */

.benefits-section .benefit-box {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-radius: 16px !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #374151 !important;
    transition: transform 0.3s ease !important;
	
}
.benefits-grid {
  /* ya tienes 3 columnas iguales */
  grid-template-columns: repeat(3, 1fr);
  /* fuerza que todas las filas tengan la misma altura */
  grid-auto-rows: 1fr;
}

/* la celda que ocupa 2 columnas */
.benefit-image-card {
  grid-column: span 2;
  /* la hacemos flex para que el img ocupe todo */
  display: flex;
}

.benefit-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recorta lo que sobre, manteniendo proporción */
  border-radius: 16px;
}

.benefits-section .benefit-number {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    color: #fff !important;
}

.benefits-section .benefit-box h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 5px 0 15px 0 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}

.benefits-section .benefit-box p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #d1d5db !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .benefits-section .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .benefits-section .benefits-grid { grid-template-columns: 1fr !important; }
}




/* =======================================*/
/* ===== Ejemplos de Documentación ===== */
/* =======================================*/

/* ================================================ */
/* ====== BLOQUE WORKFLOW - FORZAR 3 COLUMNAS ===== */
/* ================================================ */

/* Forzamos el contenedor para que no use el auto-fit anterior */
.benefits-section .benefits-grid {
    display: grid !important;
    /* ESTA ES LA CLAVE: Forzamos 3 columnas fijas en escritorio */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Estilo de las cajas para que coincidan con la estética de la web */
.benefits-section .benefit-box {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-radius: 16px !important;
    padding: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #374151 !important;
    transition: transform 0.3s ease !important;
}

.benefits-section .benefit-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important;
}

/* Círculo con el número */
.benefits-section .benefit-number {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    color: #fff !important;
}

/* Títulos y textos corregidos */
.benefits-section .benefit-box h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 10px 0 15px 0 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}

.benefits-section .benefit-box p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: #d1d5db !important;
}

/* Texto del paso (Paso 1, Paso 2...) */
.benefits-section .benefit-step-label {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    display: block !important;
}

/* RESPONSIVE: Ajuste para tablets y móviles */
@media (max-width: 1024px) {
    .benefits-section .benefits-grid { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

@media (max-width: 640px) {
    .benefits-section .benefits-grid { 
        grid-template-columns: 1fr !important; 
    }
}




/* ============================================================================ */
/* ====== IMPACTO QUE SE VE - pagina de Contenidos e-learning a medida ====== */
/* ============================================================================ */

:root{
  --accent:#86efac; --ink:#0f172a; --muted:#475569; --soft:#f9fafb; --line:#e5e7eb;
  --radius:16px; --h2:clamp(22px,1.2vw + 1rem,36px); --h3:clamp(16px,.55vw + .8rem,20px); --p:clamp(15px,.6vw + .6rem,18px);
  --col-gap: 20px; /* Definimos el espacio deseado entre columnas */
}

.trego-impact{padding:3.5rem 1.25rem}

/* 1. ANCHO COMPLETO (Se anula la limitación de 1100px) */
.trego-impact .container{
    max-width: 100%; /* El contenedor ocupa todo el ancho */
    margin: 0;       /* Elimina el centrado */
}
/* ----------------------------------------------------- */

.impact-title{font-size:var(--h2);line-height:1.2;margin:0 0 .4rem;color:var(--ink)}
.impact-lead{margin:0 0 1.5rem;color:var(--muted);font-size:var(--p)}

/* 2. DISTRIBUCIÓN Y EXPANSIÓN DE TARJETAS (Flexbox) */
.impact-wheel{
  /* Configuramos Flexbox para distribución en fila y espacio entre ítems */
  display: flex; 
  justify-content: space-between; /* Distribuye el espacio entre elementos */
  gap: var(--col-gap); /* Usa el espacio definido (20px) */

  /* Estilos heredados/ajustados */
  background:var(--soft);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(28px,4vw,40px);
  min-height: unset; 
  overflow:visible;
}

/* Ocultamos los elementos del diseño circular original */
.wheel-link, .wheel-core {
    display: none !important;
}

/* Tarjetas (Columnas) */
.wheel-node{
  /* Permitimos que las tarjetas crezcan (flex-grow: 1) y eliminamos la limitación de ancho */
  width: auto; /* Ancho automático */
  flex-grow: 1; /* Permite que cada tarjeta ocupe una parte igual del espacio disponible */
  flex-basis: 0; /* Base de cálculo para que el crecimiento sea uniforme */
  
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,.05);padding:16px 16px 14px;

  /* Eliminamos posicionamiento estático (residuo del diseño circular) */
  position: static !important;
  transform: none !important;
  top: unset !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
}
/* -------------------------------------------------------------------- */

.node-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.node-emoji{font-size:1.25rem;line-height:1}
.wheel-node h3{margin:0;font-size:var(--h3);font-weight:800;color:var(--ink)}
.node-kpi{
  display:inline-block;margin:.3rem 0 .4rem;background:rgba(247,148,104,.12);
  color:#7a3415;border:1px solid rgba(247,148,104,.25);padding:.2rem .5rem;border-radius:8px;
  font-weight:700;font-size:.9rem
}
.node-points{list-style:none;margin:0;padding:0;color:#374151;font-size:.96rem;display:grid;gap:.25rem}
.node-points b{color:var(--ink)}

/* Nota */
.impact-note{margin:.8rem 0 0;color:#64748b;font-size:.9rem}

/* Responsive: Ajustamos el responsive para Flexbox */
@media (max-width:860px){
  .impact-wheel{
    flex-direction: column; /* Apilamos las tarjetas en móvil */
    gap: 10px; /* Reducimos el espacio vertical */
    padding:18px;
  }
  .wheel-node{width:100%; margin:0} /* En móvil, ocupan el 100% */
}
/* === Impact Wheel · Fix: Limpieza y simplificación para el nuevo diseño === */

.impact-wheel .wheel-node{
  min-height: unset !important;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start;
}







/* ==================================================== */
/* ===== ARTICULOS RELACIONADOS - Varias Páginas ===== */
/* ==================================================== */


/* Variables globales */
:root{
  --ink:#0f172a;
  --muted:#475569;
  --line:#e5e7eb;
  --card:#fff;
  --soft:#f9fafb;
  --accent:#86efac;
  --ok:#16a34a;
  --warn:#f59e0b;
  --info:#2563eb;
  --radius:14px;
}

/* Contenedor principal */
.trego-now{
  padding:3rem 1.25rem;
  background:var(--soft); /* antes estaba dos veces, lo dejamos aquí */
}

.trego-now .container{
  max-width:1280px;
  margin:0 auto;
}

/* Título del bloque */
.now-title{
  margin:0 0 1.25rem;
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.01em;
}

.now-title .now-kicker{
  display:inline-block;
  margin-right:.6rem;
  padding:.18rem .55rem;
  border-radius:999px;
  background:rgba(247,148,104,.1);
  color:var(--accent);
  border:1px solid rgba(247,148,104,.25);
  font-weight:700;
  font-size:0.8rem;
  vertical-align:middle;
}

/* Grid de tarjetas */
.now-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,2vw,20px);
}

/* Tarjeta individual */
.now-card{
  grid-column:span 4;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:
    transform .18s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.now-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  border-color:rgba(247,148,104,.45);
}

/* Responsivo tarjetas */
@media (max-width:900px){
  .now-card{ grid-column:span 6; }
}

@media (max-width:600px){
  .now-card{ grid-column:1 / -1; }
}

/* Cabecera de la tarjeta: chips + algo más */
.now-head{
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* Chips genéricos */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.18rem .5rem;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:700;
  font-size:.78rem;
  background:#eef2f7;
  color:#334155;
}

/* Chip específico del post card (separación respecto al h3) */
.post-card__chip{
  padding-top:120px; /* 👈 separación superior respecto al título */
}

/* Variantes de chip */
.chip-type{
  background:#fff;
  border-color:var(--line);
}

.chip-state{
  background:#fff;
}

.state-progress{
  border-color:rgba(245,158,11,.35);
  color:#7a3e00;
}

.state-qa{
  border-color:rgba(37,99,235,.35);
  color:#1e40af;
}

.state-done{
  border-color:rgba(22,163,74,.35);
  color:#166534;
}

/* Título de la tarjeta (H3 lógico) */
/* 👇 AQUÍ controlas el tamaño del “h3” */
.now-h3{
  margin:.2rem 0 0;
  font-size:.95rem;   /* Tamaño de tu h3 */
  line-height:1.3;
  font-weight:800;
  color:var(--ink);
}

/* Metadatos debajo del título */
.now-meta{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* Lista de especificaciones */
.now-specs{
  list-style:none;
  margin:.2rem 0 0;
  padding:0;
  display:grid;
  gap:.25rem;
  color:#374151;
  font-size:.95rem;
}

.now-specs .i{
  display:inline-block;
  width:1.1rem;
  text-align:center;
  margin-right:.25rem;
}

/* Fase / progreso */
.now-phase{
  margin-top:.4rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.6rem;
}

.phase-label{
  font-size:.8rem;
  color:#64748b;
}

.phase-bar{
  position:relative;
  width:100%;
  height:8px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid var(--line);
  overflow:hidden;
}

.phase-bar i{
  display:block;
  height:100%;
  width:var(--p,50%);
  background:linear-gradient(90deg,var(--accent),#f7b18f);
}

.phase-tag{
  font-size:.8rem;
  color:#374151;
  font-weight:700;
}




/* ==================================================== */
/* ===== ULTIMOS TRABAJOS - Varias Páginas ===== */
/* ==================================================== */

:root{
  --now-dark: #0f172a;                 /* fondo tarjeta */
  --now-dark-2: #0b1320;               /* hover */
  --now-ink: #e5e7eb;                  /* texto principal */
  --now-muted: #cbd5e1;                /* texto secundario */
  --now-line-dark: rgba(255,255,255,.14);
}

/* Tarjeta base en oscuro */
.now-card{
  background: var(--now-dark) !important;
  border-color: var(--now-line-dark) !important;
  box-shadow: 0 6px 16px rgba(2,6,23,.35);
  color: var(--now-ink);
}
.now-card:hover{
  transform: translateY(-4px);
  background: var(--now-dark-2);
  border-color: rgba(247,148,104,.55);
  box-shadow: 0 16px 32px rgba(2,6,23,.5);
}

/* Titulares y textos dentro de la tarjeta */
.now-h3{ color: var(--now-ink) !important; }
.now-meta{ color: var(--now-muted) !important; }
.now-specs{ color: var(--now-muted) !important; }
.now-specs .i{ opacity: .9; }

/* Chips en modo oscuro */
.chip{
  background: rgba(255,255,255,.06) !important;
  border-color: var(--now-line-dark) !important;
  color: var(--now-ink) !important;
}
.state-progress{ color:#fbbf24 !important; border-color: rgba(251,191,36,.35) !important; }
.state-qa{ color:#93c5fd !important; border-color: rgba(147,197,253,.35) !important; }
.state-done{ color:#86efac !important; border-color: rgba(134,239,172,.35) !important; }

/* Barra de fase con pista clara sobre fondo oscuro */
.phase-bar{ background: rgba(255,255,255,.08) !important; border-color: var(--now-line-dark) !important; }
.phase-bar i{ background: linear-gradient(90deg, var(--accent), #f7b18f) !important; }

/* Kicker del título (fuera de las tarjetas) mantiene su estilo */



/* Asegura que los bloques CTA estén por delante */
.cta-row {
  position: relative;
  z-index: 5;
}

/* Imagen decorativa colocada dentro del mismo row */
.decor-img {
  margin-top: -250px !important; /* o el valor que uses */
  position: relative;
  z-index: 1 !important; /* 👈 esto la pone detrás */
}

/* Opcional: si los módulos CTA tuvieran problemas de z-index */
.cta-row .vc_cta3-container {
  position: relative;
  z-index: 10;
}

  
 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* ::::: CLUSTER DE REDACCION DE CONTENIDOS EN EL PIE Y MARKETING (AZUL)::::::: */
 /* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.cluster-cards {
  padding: 2rem 1rem;
  background: #f9f9f9;
}

.cluster-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
}

.card-item {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  flex: 1 1 280px;
  max-width: 360px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.card-icon {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon svg {
  width: 100%;
  height: 100%;
  fill: #86efac;
}

.card-text {
  flex: 1;
}

.card-label {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.card-arrow {
  font-size: 1.2rem;
  color: #cbd5e1;
  margin-left: 1rem;
  flex-shrink: 0;
}
.cluster-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
}
.cluster-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
/* --- Fondo del bloque informativo sin gris --- */
.cluster-cards--info { background: transparent !important; }

/* --- 2 tarjetas por fila (y 1 en móvil) --- */
section.cluster-cards.cluster-cards--info.two-per-row > .cluster-container{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  width: 100%;
}
@media (max-width: 860px){
  section.cluster-cards.cluster-cards--info.two-per-row > .cluster-container{
    grid-template-columns: 1fr !important;
  }
}

/* --- Alinear el icono a la altura del H3 (misma línea) --- */
.cluster-cards--info .card-item--info{
  display: grid !important;
  grid-template-columns: 40px 1fr;   /* icono | texto */
  grid-template-rows: auto auto;     /* h3 arriba, párrafo abajo */
  column-gap: 1rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.cluster-cards--info .card-text{ display: contents; } /* permite posicionar h3 y p en la grid */

.cluster-cards--info .card-icon{
  grid-column: 1; grid-row: 1;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.cluster-cards--info .card-icon svg{ width: 100%; height: 100%; fill: #86efac; }

.cluster-cards--info .card-title{
  grid-column: 2; grid-row: 1;
  margin: 0 0 .35rem;
  font-size: 1.125rem; /* h3 un punto más grande */
}

.cluster-cards--info .card-desc{
  grid-column: 2; grid-row: 2;
  margin: 0;
}

/* ========================================= */
/* Cluster cards – iconos en azul             */
/* Pages: 158558, 158288, 144707, 158418     */
/* ========================================= */

.page-id-158558 .cluster-cards .card-icon svg,
.page-id-158288 .cluster-cards .card-icon svg,
.page-id-158418 .cluster-cards .card-icon svg{
  fill: #6dc6d9 !important;
}






/* =========================================================
   HOW TO · Tarjetas en 5 pasos (autónomo y sin colisiones)
   ========================================================= */

/* —— Opcional: variables del bloque ———————————————— */
:root{
  --howto-bg: #86efac;      /* verde base */
  --howto-bg-hover: #a7f3d0;/* verde al hover */
  --howto-ink: #000000;     /* texto principal */
  --howto-pill: rgba(0,0,0,.15); /* chip “Paso” */
  --howto-radius: 16px;
  --howto-shadow: 0 4px 10px rgba(0,0,0,.10);
  --howto-shadow-hover: 0 8px 18px rgba(0,0,0,.15);
}

/* —— Contenedor del bloque ———————————————— */
.howto-green{
  margin: 2rem auto;
  background: none; /* deja ver tu gris de página */
}

/* Grid responsive de tarjetas */
.howto-container{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  background: none; /* sin fondo del wrapper */
}

/* —— Tarjeta ———————————————— */
.howto-card{
  background: var(--howto-bg);
  color: var(--howto-ink);
  border-radius: var(--howto-radius);
  box-shadow: var(--howto-shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Hover/Focus */
.howto-card:hover,
.howto-card:focus-within{
  transform: translateY(-4px);
  background: var(--howto-bg-hover);
  box-shadow: var(--howto-shadow-hover);
  outline: none;
}

/* Accesibilidad: foco visible con teclado */
.howto-card:focus{
  outline: 3px solid rgba(0,0,0,.15);
  outline-offset: 2px;
}

/* —— Chip “Paso X” ———————————————— */
.howto-step{
  display: inline-block;
  align-self: flex-start;
  background: var(--howto-pill);
  color: var(--howto-ink);
  font-weight: 700;
  font-size: .875rem;
  line-height: 1;
  padding: .35rem .75rem;
  border-radius: 999px;
}

/* —— Título y texto ———————————————— */
.howto-title{
  margin: 0;                 /* evita márgenes del tema */
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--howto-ink);
}

.howto-desc{
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--howto-ink);
}

/* —— Listas dentro del texto (si las usas) ————————— */
.howto-desc ul{ margin:.25rem 0 0; padding-left:1.1rem }
.howto-desc li{ margin:.2rem 0 }

/* —— Responsive ———————————————— */
@media (max-width: 768px){
  .howto-container{ grid-template-columns: 1fr; }
}

/* —— Modo oscuro opcional (si el usuario lo prefiere) — */
@media (prefers-color-scheme: dark){
  :root{
    --howto-ink: #0b0b0b; /* mantenemos negro para contraste */
  }
}


/* ==============================*/
/* === ARTÍCULOS RELACIONADOS ==== */
/* ==============================*/

/* ===== Config rápida (ajusta a tu marca) */
:root{
  --card-bg: #fff;
  --card-radius: 16px;
  --card-shadow: 0 8px 24px rgba(2,6,23,.06);
  --title-color: #0f172a;        /* azul muy oscuro */
  --link-color: #0f172a;
  --kicker-color: #6B8AA6;       /* mismo “tono” que usas en “Tregolam Contenidos” */
  --kicker-size: 15px;           /* +1px respecto a 14px */

  /* Todas las chips en verde (unificadas) */
  --chip-bg: #D9FBE5;            /* verde Tregolam */
  --chip-text: #0A7A3E;

  --gap: 28px;
}

/* ===== Grid contenedor (transparente: hereda del row) */
.trego-related-posts{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* ===== Card */
.post-card{
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* Media */
.post-card__media{
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.post-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
}
.post-card:hover .post-card__media img{ transform: scale(1.03); }

/* Cuerpo */
.post-card__body{
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
}

/* Kicker “Blog” (encima del H3) */ 
.post-card__kicker{ 
font-size: var(--kicker-size); /* ya subido +1px por variable */ 
font-weight: 700; 
letter-spacing: .02em; 
color: var(--kicker-color); 
margin-bottom: 15px; /* pegado al H3 sin ruido */ 
display: inline-block; }


/* Título */
.post-card__title{
  /* +1px sobre el clamp original */
  font-size: calc(clamp(18px, 1.15vw + .8rem, 22px) + 1px);
  font-weight: 600;
  line-height: 1.18;
  margin: 0;
  color: var(--title-color);
}

/* ===== Enlaces SIN subrayado (en todo el bloque de la card) */
.post-card a,
.post-card__title a,
.post-card__kicker a{
  color: var(--link-color);
  text-decoration: none !important;   /* sin subrayado */
}
.post-card a:hover,
.post-card__title a:hover,
.post-card__kicker a:hover{ 
  opacity: .85; 
}

/* Chip de categoría (todas en verde) */
.post-card__chip{
  align-self: flex-start;
  margin-top: 55px;            /* “bajar” la etiqueta como pediste */
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--chip-bg);
  color: var(--chip-text);
  
}

/* Eliminamos variantes: forzamos verde siempre (compatibilidad) */
.post-card__chip--green{
  background: var(--chip-bg);
  color: var(--chip-text);
}

/* ===== Responsive */
@media (max-width: 1024px){
  .trego-related-posts{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .trego-related-posts{ grid-template-columns: 1fr; }
}

/* Overrides requested: green background + black text for kicker labels */
.now-title .now-kicker,
.post-card__kicker{
  background-color:#86efac !important;
  color:#000 !important;
}





/* HOVER PARA LAS TARJETAS DE Elige solo lo que necesitas :::::::::*/
#traceability-cards .post-card{
  transition: transform .2s ease, box-shadow .2s ease;
}
#traceability-cards .post-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(2,6,23,.08);
}
/* Iconos a verde claro en hover (sirve tanto para fill como stroke) */
#traceability-cards .post-card:hover .post-card__icon svg path,
#traceability-cards .post-card:hover .post-card__icon svg circle,
#traceability-cards .post-card:hover .post-card__icon svg line {
  fill: #a7f3d0;
  stroke: #a7f3d0;
}

/* ========== FIX "Blog" con barra verde en Artículos relacionados ========== */

/* 1) El contenedor del kicker NO debe pintar barras, bordes ni backgrounds decorativos */
.trego-related-posts .post-card__body{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}
.trego-related-posts .post-card__body::before,
.trego-related-posts .post-card__body::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) El kicker en sí, como pastilla (sin subrayados ni trucos del tema) */
.trego-related-posts .post-card__kicker,
.trego-related-posts .post-card__kicker:link,
.trego-related-posts .post-card__kicker:visited{
  display: inline-block !important;
  width: auto !important;                 /* evita 100% ancho */
  max-width: max-content !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background-color: #86efac !important;   /* verde */
  background-image: none !important;      /* mata subrayados por bg-image */
  color: #0f172a !important;              /* texto oscuro */
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative !important;
  line-height: 1 !important;
}

/* 3) Por si el tema añade pseudos justo en el kicker */
.trego-related-posts .post-card__kicker::before,
.trego-related-posts .post-card__kicker::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hacer que la tarjeta de comparativa ignore el ancho de .card-item */
.cluster-cards .compare-card{
  max-width: 100% !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;   /* si el contenedor es grid */
  flex: 0 0 100% !important;         /* si el contenedor es flex en algún breakpoint */
  display: block !important;         /* quita el layout 'grid' heredado de variantes */
}

/* Asegurar que la tabla use todo el ancho disponible */
.compare-card .card-table-wrap{ width:100%; }
.compare-card .compare-table{ width:100%; table-layout:auto; }



/* Carta limpia y legible */
.card-item.card-item--info{
  display:flex; flex-direction:column; gap:.5rem;
  border-radius:14px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:16px;
}
.card-icon{ margin-bottom:.25rem; }
.card-title{ margin:0; }
.card-desc{ margin: .25rem 0 .25rem 0; }

/* Meta como chips (evita columna estrecha) */
.meta-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin:.25rem 0 0 0; padding:0; list-style:none;
  font-size:.9rem; color:#6b7280;
}
.meta-chips li{
  background:#f3f4f6; color:#374151; border-radius:999px; padding:.25rem .5rem;
  white-space:nowrap;
}
@media (max-width: 720px){
  .meta-chips li{ white-space:normal; }
}




/* =========================================================
   CLUSTER CARDS · INFO (three-per-row) · FIX ÚNICO
   - Grid estable
   - Sin guiones raros ni cortes por carácter
   - Icono + texto alineados
   - Chips sin desbordes ni solapes
   ========================================================= */

/* Contenedor: grid fluido de tarjetas */
section.cluster-cards.cluster-cards--info.three-per-row > .cluster-container{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch;
}

/* Tarjeta: grid 40px (icono) + 1fr (contenido) */
section.cluster-cards.cluster-cards--info.three-per-row .card-item.card-item--info{
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-auto-rows: auto;
  column-gap: 1rem;
  row-gap: .5rem;
  padding: 18px !important;
  writing-mode: horizontal-tb !important;     /* neutraliza rarezas globales */
}

/* Texto dentro de la tarjeta: sin guiones automáticos ni cortes por carácter */
section.cluster-cards.cluster-cards--info.three-per-row .card-item.card-item--info *{
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;       /* solo corta por palabra */
  white-space: normal !important;
}

/* Icono fijo (columna 1) */
section.cluster-cards.cluster-cards--info.three-per-row .card-icon{
  grid-column: 1; grid-row: 1 / span 2;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 !important;
}
section.cluster-cards.cluster-cards--info.three-per-row .card-icon svg{
  width: 40px; height: 40px; flex: 0 0 auto;
}

/* Bloque de texto (columna 2) */
section.cluster-cards.cluster-cards--info.three-per-row .card-text{
  display: block !important;                  /* NO display:contents */
  grid-column: 2; grid-row: 1 / span 2;
}

/* Título y párrafo */
section.cluster-cards.cluster-cards--info.three-per-row .card-title{
  margin: 0 0 .25rem 0 !important;
  line-height: 1.25 !important;
  font-size: 1.125rem !important;
}
section.cluster-cards.cluster-cards--info.three-per-row .card-desc{
  margin: 0 !important;
  line-height: 1.5 !important;
  color: #374151;
}

/* Chips: siempre debajo, sin solapar y sin desbordar */
section.cluster-cards.cluster-cards--info.three-per-row .meta-chips{
  grid-column: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 10px !important;
  list-style: none;
  padding: 0;
  margin-top: .6rem !important;
  position: static !important;
  z-index: auto !important;
}
section.cluster-cards.cluster-cards--info.three-per-row .meta-chips li{
  display: inline-block !important;
  max-width: 100% !important;
  padding: .28rem .65rem !important;
  background: #e8eef5 !important;
  color: #334155 !important;
  border-radius: 9999px !important;
  font-weight: 700;
  white-space: normal !important;            /* permite multilínea si hace falta */
  overflow-wrap: anywhere !important;        /* evita que se salga la pastilla */
}

/* Responsive: una columna en móvil */
@media (max-width: 720px){
  section.cluster-cards.cluster-cards--info.three-per-row > .cluster-container{
    grid-template-columns: 1fr !important;
  }
}





/* ===== TIMELINE ===== */
/* ===== PROC-CLEAN · 4 columnas, icono arriba, flechas entre tarjetas ===== */
.proc-clean{
  --green:#86efac;        /* hover */
  --green-ink:#064e3b;    /* iconos/enlaces */
  --ink:#0f172a;          /* títulos */
  --muted:#475569;        /* texto */
  --ico:36px;             /* tamaño icono */
  --gap:24px;             /* separación entre tarjetas */
  padding: 0 16px;
}
.proc-clean .proc-wrap{ max-width:1200px; margin:0 auto; }

/* Grid: 4 columnas desktop, 2 tablet, 1 móvil */
.proc-clean .proc-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: var(--gap);
}

/* Tablet */
@media (max-width:1024px){
  .proc-clean .proc-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
/* Móvil */
@media (max-width:640px){
  .proc-clean .proc-grid{ grid-template-columns: 1fr; }
}

/* Tarjeta */
.proc-clean .proc-item{
  position:relative;
  padding: 10px 18px 12px 0;   /* sin padding a la izquierda: todo bien pegado */
  border-radius:16px;
  background:transparent;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* Icono ARRIBA del H3 (alineado izquierda) */
.proc-clean .ico{
  display:block;
  width:var(--ico); height:var(--ico);
  color:var(--green-ink);
  margin: 2px 0 8px 0;
}
.proc-clean .ico svg{ width:100%; height:100%; }

/* Títulos y texto */
.proc-clean h3{
  margin:0 0 6px 0;
  font-size:1.08rem; line-height:1.25;
  font-weight:800; color:var(--ink);
}
.proc-clean p{
  margin:0; font-size:1rem; line-height:1.6; color:var(--muted);
}
.proc-clean a{
  color:var(--green-ink);
  font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}

/* Hover */
.proc-clean .proc-item:hover,
.proc-clean .proc-item:focus-within{
  background: rgba(134,239,172,.35);
  box-shadow: 0 8px 22px rgba(2,6,23,.08);
  transform: translateY(-2px);
}

/* —— Flecha entre tarjetas (gris) —— */
.proc-clean .proc-item::after{
  content:"";
  position:absolute;
  top: 28px;               /* cerca del título */
  right: calc(var(--gap) / -2 + 2px); /* centrada en el gap */
  width: 22px; height: 22px;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,\
");
  opacity:.9;
  pointer-events:none;
}

/* Ocultar flecha en el último de la fila */
/* Desktop: cada 4º */
.proc-clean .proc-item:nth-child(4n)::after{ display:none; }
/* Tablet: cada 2º */
@media (max-width:1024px){
  .proc-clean .proc-item:nth-child(2n)::after{ display:none; }
}
/* Móvil: una columna (sin flechas) */
@media (max-width:640px){
  .proc-clean .proc-item::after{ display:none; }
}

/* Anti “break-all” del tema SOLO aquí */
.proc-clean .proc-grid, .proc-clean .proc-grid *{
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: auto !important;
}



/* Más separación icono–título */
.proc-clean .ico{ margin: 0 0 14px 0 !important; }

/* Nada recorta la flecha */
.proc-clean .proc-wrap,
.proc-clean .proc-grid,
.proc-clean .proc-item{
  position: relative !important;
  overflow: visible !important;
}

/* Flecha gris entre tarjetas (sin imágenes, compatible CSP) */
.proc-clean .proc-item::after{
  content:"";
  position:absolute;
  top: 44px;              /* ↑ baja/sube la flecha (40–52) */
  right: -12px;           /* mete la flecha en el gap */
  width: 18px; height: 18px;
  border-right: 3px solid #94a3b8;  /* gris */
  border-top:   3px solid #94a3b8;
  transform: rotate(45deg);         /* chevron > */
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
}

/* Ocultar flecha en el último de cada fila */
.proc-clean .proc-item:nth-child(4n)::after{ display:none; }   /* desktop: 4 por fila */
@media (max-width:1024px){
  .proc-clean .proc-item:nth-child(2n)::after{ display:none; } /* tablet: 2 por fila */
}
@media (max-width:640px){
  .proc-clean .proc-item::after{ display:none; }               /* móvil: 1 por fila */
}
/* Bajar flechas 30px */
.proc-clean .proc-item::after{
  top: calc(44px + 22px) !important;  /* antes 44px */
}


/* --- Últimos trabajos: enlaces sin subrayado dentro de la tarjeta --- */
.now-card a{ text-decoration:none !important; }
.now-card a:hover{ opacity:.9; }

/* --- Botón CTA dentro de la tarjeta --- */
.now-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .8rem; 
	border-radius:999px;
  background:#86efac; 
	color:#0f172a; 
	font-weight:700; 
	font-size:.92rem;
  border:1px solid rgba(134,239,172,.35);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.now-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(2,6,23,.25); }
.now-cta .arr{ font-size:1.15em; line-height:1; }


 /* ====== LOGOS DE LIBRERÍAS (ajustado y optimizado) ====== */
:root {
  --logos-max-width: 1200px; /* ancho máximo del bloque */
  --logos-gap: 1.25rem;      /* espacio entre logos */
  --logo-h-desktop: 44px;    /* altura visible desktop */
  --logo-h-tablet: 40px;     /* altura visible tablet */
  --logo-h-mobile: 36px;     /* altura visible móvil */
  --logo-opacity: 0.95;      /* opacidad base */
  --logo-hover-opacity: 1;   /* opacidad hover */
}

.store-logos {
  max-width: var(--logos-max-width);
  margin-inline: auto;
}

.store-logos-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 por fila en desktop */
  align-items: center;
  gap: var(--logos-gap);
}

.store-logos-grid li {
  display: grid;
  place-items: center;
  min-height: var(--logo-h-desktop); /* 🔹 Reserva altura para evitar CLS */
}

.store-logos-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: var(--logo-opacity);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.store-logos-grid a:hover,
.store-logos-grid a:focus-visible {
  opacity: var(--logo-hover-opacity);
  transform: translateY(-1px);
  outline: none;
}

.store-logos-grid img {
  height: var(--logo-h-desktop);
  width: auto;           /* respeta proporción del PNG */
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Tablet: 3 columnas y altura algo menor */
@media (max-width: 1023.98px) {
  .store-logos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .store-logos-grid li {
    min-height: var(--logo-h-tablet); /* 🔹 Reserva altura también en tablet */
  }
  .store-logos-grid img {
    height: var(--logo-h-tablet);
  }
}

/* Móvil: 2 columnas y altura algo menor */
@media (max-width: 639.98px) {
  .store-logos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .store-logos-grid li {
    min-height: var(--logo-h-mobile); /* 🔹 Reserva altura también en móvil */
  }
  .store-logos-grid img {
    height: var(--logo-h-mobile);
  }
}




/* ===== Card compacta, contrastada y creativa ===== */
#cv-callout2{
  --bg:#0b1220;           /* base oscura */
  --ink:#e6edf6;          /* texto principal */
  --muted:#9fb0c7;        /* texto secundario */
  --accent:#86efac;       /* verde Tregolam */
  --line:rgba(255,255,255,.10);

  color:var(--ink);
  border-radius:14px;
  overflow:hidden;
  /* Fondo con fantasía sutil + borde luminoso */
  background:
    radial-gradient(600px 220px at 110% -20%, rgba(134,239,172,.10), transparent 60%),
    radial-gradient(500px 200px at -10% 120%, rgba(134,239,172,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
    var(--bg);
  box-shadow:0 10px 26px rgba(2,6,23,.25), inset 0 0 0 1px var(--line);
  margin-top:18px;
}

#cv-callout2 .cv2-wrap{
  max-width:1100px; margin:0 auto;
  padding:16px 14px;                   /* MÁS COMPACTO */
  display:grid; gap:14px;
  grid-template-columns: 1.05fr .95fr; /* proporción ajustada */
}
@media (max-width: 980px){
  #cv-callout2 .cv2-wrap{ grid-template-columns:1fr; padding:14px 12px; }
}

/* ===== Columna Copy ===== */
#cv-callout2 .cv2-pill{
  display:inline-block;
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  color:#0b1420; background:var(--accent);
  padding:4px 10px; border-radius:999px;
  box-shadow:0 4px 14px rgba(134,239,172,.35);
  margin-bottom:8px;
}

#cv-callout2 h3{
  margin:0 0 6px;
  font-weight:800;
  font-size:clamp(1.15rem, .9rem + 1.2vw, 1.6rem); /* legible, NO gigante */
  line-height:1.15;
  color:#f2f6fb;                         /* más contraste */
}

#cv-callout2 .cv2-lead{
  margin:0 0 8px;
  font-weight:600;
}

#cv-callout2 .cv2-list{
  margin:6px 0 8px; padding:0; list-style:none;
  display:grid; gap:6px;
}
#cv-callout2 .cv2-list li{
  position:relative; padding-left:22px; color:var(--muted); line-height:1.35;
}
#cv-callout2 .cv2-list li:before{
  content:""; position:absolute; left:0; top:.45em;
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.7), rgba(255,255,255,.2) 60%), var(--accent);
  box-shadow:0 0 0 2px rgba(134,239,172,.18);
}

#cv-callout2 .cv2-note{
  margin:4px 0 0; color:var(--muted); font-size:.95rem;
}



/* ========================================= */
/* === CASOS DE EXITO - Varias Páginas  === */
/* ========================================= */

#work-toggle .wt-chips{
  margin-top: 40px !important;     /* ⬅️ separación desde el mini copy */
  display: flex !important;
  gap: 8px 10px !important;         /* espacio entre chips */
  flex-wrap: wrap !important;
}

/* Base del chip dentro del toggle */
#work-toggle .wt-chips .chip{
  display:inline-flex !important;
  align-items:center;
  gap:.35rem;
  padding:.28rem .6rem !important;
  border-radius:999px !important;
  font-weight:700 !important;            /* baja a 600 si lo prefieres */
  font-size:.82rem !important;
  line-height:1 !important;
}

/* Relleno verde (ej.: FP, Corrección de Estilo, Traducción + corrección) */
#work-toggle .wt-chips .chip:is(.chip-green, .chip--green, .is-green){
  background: var(--accent) !important;
  color: #0f172a !important;
  border: 1px solid var(--accent) !important;
}

/* Contorno verde (ej.: Manual) */
#work-toggle .wt-chips .chip:is(.chip-outline-green, .chip--outline, .is-outline){
  background: #fff !important;
  color: #0a7a3e !important;
  border: 2px solid var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(134,239,172,.30) !important;
}
.wt-figures{
  font-size: 0.9rem;
  color: #2e7d32;
  margin: .25rem 0 .75rem;
}
.wt-figures span{ color: #ffb300; }

/* ============================= */
/* Patrón portada 350x541 arriba */
/* ============================= */

#work-toggle .wt-card{
  display:flex;
  flex-direction:column;
}

/* Contenedor de portada */
#work-toggle .wt-media{
  width:350px;
  height:541px;
  display:block;
  overflow:hidden;
  border-radius: 20px 20px 0px 0px; /* ajusta si tu card ya redondea */
}

/* Portada llena al 100% */
#work-toggle .wt-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  display:block;
}

/* Si tu grid estira las cards, esto centra la imagen en la columna */
#work-toggle .wt-card .wt-media{
  margin:0 auto;
}
@media (max-width: 768px){
  #work-toggle .wt-media{
    width:100%;
    height:541px;
  }
}

/* ========================================= */
/* Casos de éxito – color azul SOLO landing */
/* Page ID: 158558                           */
/* ========================================= */

.page-id-158558 #work-toggle .wt-chips .chip:is(.chip-green, .chip--green, .is-green){
  background: #6dc6d9 !important;
  border-color: #6dc6d9 !important;
  color: #0f172a !important;
}

/* Opcional: cifras también en azul solo aquí */
.page-id-158558 #work-toggle .wt-figures{
  color: #6dc6d9;
}







/* =============================================
   Cluster bifurcación · encapsulado y compatible
   ============================================= */
#cluster-bifurcacion{
  --brand:#86efac;          /* verde deliverables */
  --brand-hover:#6feaa7;    /* hover */
  --ink:#0b3a2c;            /* títulos/iconos sobre verde claro */
  --muted:#0f2d20;          /* texto secundario */
  --ring:rgba(16,42,67,.28);
  --pad:20px;               /* padding base tarjeta */
  --pillH:44px;             /* alto de la píldora */
  --pillG:10px;             /* separación bajo la píldora */
}

/* Head */
#cluster-bifurcacion .cluster-head{
  max-width:72rem; margin:0 auto 16px; padding:0 16px;
}
#cluster-bifurcacion h2{
  margin:0 0 10px;
  font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.25rem); /* H2 grande */
  line-height:1.2; color:var(--ink);
}

/* Grid */
#cluster-bifurcacion .cards{
  list-style:none; margin:16px auto 8px; padding:0 16px; max-width:72rem;
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:700px){
  #cluster-bifurcacion .cards{ grid-template-columns:repeat(2,1fr) }
}

/* Tarjeta */
#cluster-bifurcacion .card{
  background:var(--brand);
  border-radius:16px; overflow:hidden; border:1px solid rgba(2,6,23,.06);
  box-shadow:0 8px 20px rgba(2,6,23,.10);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#cluster-bifurcacion .card:hover{
  transform:translateY(-2px);
  background:var(--brand-hover);
  box-shadow:0 10px 26px rgba(2,6,23,.16);
}

/* Enlace interior + reserva para la píldora (no solapa) */
#cluster-bifurcacion .card-link{
  position:relative;
  display:grid; grid-template-rows:auto auto auto auto; gap:12px;
  padding: calc(var(--pad) + var(--pillH) + var(--pillG)) var(--pad) var(--pad) var(--pad);
  height:100%; text-decoration:none; color:inherit;
}

/* Píldora sin sombra */
#cluster-bifurcacion .pill{
  font-size:18px; 
  position:absolute; top:var(--pad); left:var(--pad);
  height:var(--pillH); display:inline-flex; align-items:center; padding:0 18px;
  border-radius:999px; font-weight:800; letter-spacing:.01em;
  background:#10b981;  /* más intenso */
  color:#052e16;        /* texto oscuro */
  box-shadow:none;      /* SIN sombra */
  pointer-events:none; z-index:2;
}

/* Icono principal */
#cluster-bifurcacion .icon{ width:56px; height:56px; color:var(--ink) }
#cluster-bifurcacion .icon svg{ width:100%; height:100% }

/* H3 (título) más pequeño */
#cluster-bifurcacion .title{
  margin:2px 0 4px; font-weight:800; color:var(--ink);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  line-height:1.2; letter-spacing:-.01em;
}

/* Descripción corta */
#cluster-bifurcacion .desc{
  margin:0; color:var(--muted);
  font-size: clamp(.98rem, .3vw + .9rem, 1.05rem);
  line-height:1.5;
}

/* CTA */
.tg-tabs .cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #0b1220;
  border-radius: 12px;
  margin-top: auto !important;
  align-self: flex-start;
  font-family: "Roboto Condensed", system-ui;
  font-weight: 700;
  transition: transform .15s ease, opacity .15s ease;

  /* 🔥 FIX: sin subrayado nunca */
  text-decoration: none !important;
  border-bottom: 0 !important;

  /* tamaño reducido */
  font-size: 15px !important;
  padding: 12px 16px !important;
}

.tg-tabs .cta:hover{ 
  transform: translateY(-2px); 
  opacity: .95; 
  text-decoration: none !important;
  border-bottom: 0 !important;
}




/* =============================================
   TARJETA DOBRE PRECIO - Pagina Booktrailer 
   ============================================= */



#booktrailer-bridge{
  --brand:#86efac;          /* verde base */
  --brand-hover:#6feaa7;    /* hover tarjeta */
  --ink:#0b3a2c;            /* títulos/iconos */
  --muted:#0f2d20;          /* texto secundario */
  --ring:rgba(16,42,67,.28);
  --pad:20px;               /* padding tarjeta */
  --pillH:40px;             /* alto píldora */
  --pillG:10px;             /* gap bajo píldora */
  --price-bg:#ecfdf3;       /* fondo banda precio */
  font-family:"Roboto Condensed", system-ui, sans-serif;
}

/* Grid 1 col móvil · 2 cols escritorio */
#booktrailer-bridge .cards{
  list-style:none;
  margin:16px auto 8px;
  padding:0 16px;
  max-width:72rem;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width:700px){
  #booktrailer-bridge .cards{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Tarjeta base */
#booktrailer-bridge .card{
  background:var(--brand);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(2,6,23,.06);    /* <- borde normal en ambas tarjetas */
  box-shadow:0 8px 20px rgba(2,6,23,.10);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  height:100%;
}
#booktrailer-bridge .card:hover{
  transform:translateY(-2px);
  background:var(--brand-hover);
  box-shadow:0 10px 26px rgba(2,6,23,.16);
}

/* Variante pricing (sin borde extra ahora, solo para semántica) */
#booktrailer-bridge .card--pricing{
  /* sin cambios visuales extra de borde */
}

/* Contenido clicable */
#booktrailer-bridge .card-link{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:calc(var(--pad) + var(--pillH) + var(--pillG)) var(--pad) var(--pad) var(--pad);
  height:100%;
  text-decoration:none;
  color:inherit;
}

/* Píldora superior */
#booktrailer-bridge .pill{
  font-size:15px;
  position:absolute;
  top:var(--pad);
  left:var(--pad);
  height:var(--pillH);
  display:inline-flex;
  align-items:center;
  padding:0 16px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  background:#10b981;
  color:#052e16;
  box-shadow:none;
  pointer-events:none;
  z-index:2;
}

/* Ocultar la píldora en la tarjeta informativa (derecha) */
#booktrailer-bridge .card--info .pill{
  display:none;
}

/* Icono */
#booktrailer-bridge .icon{
  width:52px;
  height:52px;
  color:var(--ink);
}
#booktrailer-bridge .icon svg{
  width:100%;
  height:100%;
}

/* Título */
#booktrailer-bridge .title{
  margin:4px 0 2px;
  font-weight:800;
  color:var(--ink);
  font-size:clamp(1.05rem,0.9rem + 0.6vw,1.4rem);
  line-height:1.2;
  letter-spacing:-.01em;
}

/* Descripción corta */
#booktrailer-bridge .desc{
  margin:0;
  color:var(--muted);
  font-size:clamp(.95rem,.3vw + .9rem,1.02rem);
  line-height:1.5;
}

/* Listas de características (modo tabla de precios) */
#booktrailer-bridge .features{
  margin:4px 0 0;
  padding:0;
  list-style:none;
  color:var(--muted);
  font-size:.96rem;
}
#booktrailer-bridge .features li{
  position:relative;
  padding-left:18px;
  margin-bottom:4px;
}
#booktrailer-bridge .features li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#047857;
}

/* Micro-datos: ahora se ven como bullets normales, igual que features */
#booktrailer-bridge .microdata{
  margin:6px 0 0;
  padding:0;
  list-style:none;
  color:var(--muted);
  font-size:.96rem;
}
#booktrailer-bridge .microdata li{
  position:relative;
  padding-left:18px;
  margin-bottom:4px;
}
#booktrailer-bridge .microdata li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.55em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#047857;
}

/* Banda de precio al final de la tarjeta de la izquierda */
#booktrailer-bridge .price{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:12px;
  background:var(--price-bg);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
#booktrailer-bridge .price-amount{
  font-size:1.4rem;
  font-weight:800;
  color:#052e16;
}
#booktrailer-bridge .price-note{
  font-size:.85rem;
  color:#166534;
}

/* CTA tipo botón */
#booktrailer-bridge .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-family:"Roboto Condensed", system-ui;
  font-weight:700;
  font-size:15px;
  padding:11px 16px;
  text-decoration:none;
  border:0;
  box-shadow:0 4px 10px rgba(15,23,42,.18);
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
  background:#000000;      /* CTA negro */
  color:#ffffff;           /* texto blanco */
}

/* CTA: separación respecto al bloque de precio solo en la tarjeta izquierda */
#booktrailer-bridge .card--pricing .cta{
  margin-top:30px;         /* separación desde la caja de precio */
}

/* Ocultar el CTA en la tarjeta derecha */
#booktrailer-bridge .card--info .cta{
  display:none;
}

/* Hover del CTA cuando se hace hover en la tarjeta */
#booktrailer-bridge .card-link:hover .cta{
  transform:translateY(-2px);
  opacity:.97;
  box-shadow:0 8px 18px rgba(15,23,42,.22);
}






/* ===== BIFURCACION ENLACES -AURES Y EMPRESAS ===== */
#bridge-two-cols{ --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --brand:#86efac; }
#bridge-two-cols .wrap{ max-width:1100px; margin:0 auto; padding:8px 16px; }

#bridge-two-cols h2{
  margin:0 0 10px;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem);
  line-height:1.2; color:var(--ink); font-weight:800; letter-spacing:-.01em;
}
#bridge-two-cols .lead{ margin:0 0 14px; color:var(--muted); font-size:1.02rem; }

/* Grid 2 columnas (stack en móvil) */
#bridge-two-cols .cols{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 820px){
  #bridge-two-cols .cols{ grid-template-columns: 1fr; }
}

#bridge-two-cols .col-title{
  margin:.25rem 0 .35rem; color:var(--ink);
  font-size:1.05rem; font-weight:800; letter-spacing:.01em;
}

/* Lista vertical por columna */
#bridge-two-cols .usecases-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:12px;
}

/* Tarjeta-chip reutilizada */
#bridge-two-cols .usecase-card{
  display:flex; align-items:center; gap:.65rem;
  min-height:56px; padding:.75rem .9rem;
  background:#fff; color:var(--ink); text-decoration:none !important;
  border:1px solid var(--line);
  border-left:6px solid var(--brand);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease;
}
#bridge-two-cols .usecase-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(2,6,23,.08);
  border-color:rgba(0,0,0,.06);
  opacity:.96;
}

#bridge-two-cols .usecase-ico{ width:22px; height:22px; flex:0 0 22px; color:#000; }
#bridge-two-cols .usecase-ico svg{ width:100%; height:100%; display:block; }

/* ================================================= */
/* ===== ESTILOS MODIFICADOS Y AÑADIDOS AQUÍ ===== */
/* ================================================= */

/* Ahora .usecase-text es el contenedor de las dos líneas */
#bridge-two-cols .usecase-text {
  display: flex;
  flex-direction: column;
  line-height: 1; /* Ajuste para el contenedor flex */
}

/* Estilo para la línea superior (Categoría: Autores/Empresas) */
#bridge-two-cols .usecase-category {
  font-size: 0.825rem;  /* Más pequeño */
  font-weight: 600;     /* Más suave (semi-bold) */
  color: var(--muted);  /* Color gris (variable --muted) */
  line-height: 1.3;
}

/* Estilo para la línea inferior (Título del servicio) */
#bridge-two-cols .usecase-title {
  font-size: 1.05rem; /* Ligeramente más grande y pesado */
  font-weight: 800;   /* El peso original (pesado) */
  line-height: 1.25;  /* El line-height original */
  color: var(--ink);    /* Color principal */
}



/* =========================================================================
   TARJETA INSTITUCIONAL · Encapsulada en #inst-card
   — Ajusta ESPACIOS/TAMAÑOS cambiando las variables de abajo —
   ========================================================================= */
#inst-card{
  /* ===== Colores/Bordes ===== */
  --ink: #0f172a;         /* texto principal */
  --muted: #475569;       /* texto secundario */
  --line: #e5e7eb;        /* borde exterior */
  --accent: #86efac;      /* color iconos */
  --radius: 16px;         /* radio esquinas */

  /* ===== Espacios/Layout ===== */
  --cols-gap: 28px;       /* separación texto/imagen */
  --side-pad: 26px;       /* padding lado de texto */
  --h2-mb: 18px;          /* margen inferior H2 */
  --lead-mb: 40px;        /* separación H2→copy→features (>=40px solicitado) */
  --features-gap: 26px;   /* separación entre las 3 mini-tarjetas */
  --feat-gap: 12px;       /* espacio icono↔texto dentro de cada mini-tarjeta */
  --cta-mt: 40px;         /* *** margen superior del botón respecto a features *** */

  /* ===== Tipografías ===== */
  --h2-size: 28px;        /* *** H2 EXACTO 28 px *** */
  --lead-size: 18px;      /* tamaño copy principal */
  --feat-size: 18px;      /* tamaño mini-copys */
  --feat-weight: 400;     /* *** mini-copys sin negrita *** */

  /* ===== Imagen ===== */
  --media-min-h: 520px;   /* *** altura mínima visible de la imagen (más grande) *** */
  --media-col: 1.25fr;    /* peso de la columna de imagen (más ancho que texto) */
}

/* Contenedor de 2 columnas, imagen a sangre */
#inst-card .inst-wrap{
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr var(--media-col);
  gap: var(--cols-gap);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Texto (izquierda) */
#inst-card .inst-copy{ padding: var(--side-pad); }
#inst-card h2{
  margin: 0 0 var(--h2-mb);
  font-size: var(--h2-size); line-height: 1.2;
  font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
#inst-card .inst-lead{
  margin: 0 0 var(--lead-mb);
  font-size: var(--lead-size); line-height: 1.6; color: var(--muted);
}

/* Mini-tarjetas (3 columnas, icono arriba, texto debajo) */
#inst-card .inst-features{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--features-gap);
}
#inst-card .feat{
  display: flex; flex-direction: column; gap: var(--feat-gap);
  align-items: flex-start; background: transparent;
}
#inst-card .feat-ico{ width: 52px; height: 52px; color: var(--accent); }
#inst-card .feat-ico svg{ width: 100%; height: 100%; stroke: var(--accent); }

/* *** Mini-copys SIN negrita *** */
#inst-card .feat-text{
  margin: 0; font-size: var(--feat-size); line-height: 1.35;
  font-weight: var(--feat-weight) !important;  /* fuerza 400 (normal) */
  color: var(--ink);
}
#inst-card .feat-text strong{ font-weight: 700 !important; }

/* CTA negro */
#inst-card .inst-cta{ margin-top: var(--cta-mt); }
#inst-card .btn-black{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 10px;
  background: #000; color: #fff; font-weight: 800; font-size: 16px;
  text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .15s ease, opacity .12s ease;
}
#inst-card .btn-black:hover{ transform: translateY(-1px); opacity: .95; }
#inst-card .btn-black:active{ transform: translateY(0); }
#inst-card .btn-black:focus-visible{
  outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000;
}

/* Imagen (derecha) a sangre */
#inst-card .inst-media{ margin: 0; display: block; }
#inst-card .inst-media img{
  width: 100%; height: 100%; display: block;
  min-height: var(--media-min-h); object-fit: cover;
  aspect-ratio: 16/9; object-position: 60% 50%;
}

/* Responsive */
@media (max-width: 980px){
  #inst-card .inst-wrap{ grid-template-columns: 1fr; }
  #inst-card .inst-features{ grid-template-columns: 1fr; }
  #inst-card .inst-media img{ min-height: 360px; }
}

#inst-card .h2-split{
  margin:0 0 var(--h2-mb);
  font-size:var(--h2-size);   /* 28px */
  line-height:1.2;
}
#inst-card .h2-split .h2-strong{ display:block; font-weight:800; }
#inst-card .h2-split .h2-light{  display:block; font-weight:400; }


/* === AUTOPUB v3 · FIX A SANGRE + TIPOS + LOGOS === */

/* 1) Sin padding/gap en el contenedor: la imagen sangra de verdad */
.tg-autopub.v3{ padding:0 !important; }
.tg-autopub.v3 .tg-autopub__wrap{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0 !important;              /* ← sin espacio entre columnas */
  align-items: stretch;            /* ← la imagen ocupa la altura completa */
}

/* 2) Columna de imagen sin márgenes; ocupa todo y recorta bien */
.tg-autopub.v3 .tg-autopub__media{ margin:0 !important; }
.tg-autopub.v3 .tg-autopub__media img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;                /* ← llena el área sin bandas */
  object-position:center;          /* ajusta si quieres otro encuadre */
}

/* 3) El padding va SOLO en la columna derecha (contenido) */
.tg-autopub.v3 .tg-autopub__content{
  padding: clamp(18px, 4vw, 40px) !important;
  display:flex; flex-direction:column;
}

/* 4) H2 blanco a 28px exactos */
.tg-autopub.v3 h2{
  font-size: 28px !important;
  color: #fff !important;
  line-height: 1.15;
  margin: 0 0 .45em;
}

/* 5) Servicios SIN negrita y SIN subrayado */
.tg-autopub.v3 .svc a{
  font-weight: 400 !important;     /* ← normal */
  text-decoration: none !important;
}

/* 6) Tira de logos: 100% del ancho de la columna derecha */
.tg-autopub.v3 .logos{
  margin-top: .6rem;
  background: transparent !important; /* sin cajita para que “respire” como en la maqueta */
  padding: 0 !important;
  border: 0 !important;
}
.tg-autopub.v3 .logos img{
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* 7) Responsive: en móvil la imagen arriba, sin sangrar raro */
@media (max-width: 960px){
  .tg-autopub.v3 .tg-autopub__wrap{ grid-template-columns:1fr; }
  .tg-autopub.v3 .tg-autopub__media img{ min-height: 360px; }
}




/* ===== BOOKTRAILER ===== */
#trego-showcase{
  margin-top:26px;
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --soft:#f9fafb;
  --brand:#86efac; --radius:16px;
}
#trego-showcase .trego-wrap{max-width:1200px;margin:0 auto;padding:8px 16px}

#trego-showcase .trego-head h2{
  margin:0 0 8px; font-size:clamp(1.45rem,1.1rem + 1.6vw,2rem);
  line-height:1.2; color:var(--ink); font-weight:800; letter-spacing:-.01em;
}
#trego-showcase .trego-head .trego-lead{
  margin:0 0 18px; color:var(--muted);
  font-size:clamp(1rem,.35vw + .95rem,1.08rem)
}

/* Panel */
#trego-showcase .trego-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:36px; box-shadow:0 14px 34px rgba(2,6,23,.08);
}

/* Layout interno */
#trego-showcase .trego-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:24px; align-items:start }
@media (max-width: 900px){ #trego-showcase .trego-grid{ grid-template-columns:1fr; } }

#trego-showcase .trego-media{ display:flex; flex-direction:column; gap:14px }
#trego-showcase .trego-content{ display:flex; flex-direction:column; gap:10px }

/* Titulares y párrafos */
#trego-showcase .trego-h3{ margin:.2rem 0 .2rem; font-size:1.16rem; line-height:1.32; font-weight:800; color:var(--ink) }
#trego-showcase p{ margin:0; color:var(--muted); font-size:1.04rem }

/* Listas */
#trego-showcase .trego-list{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:.38rem; color:#374151; font-size:.99rem }
#trego-showcase .trego-list li{ position:relative; padding-left:16px }
#trego-showcase .trego-list li::before{
  content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; border-radius:50%; background:#0f172a;
}

/* KPIs */
#trego-showcase .trego-kpis{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
#trego-showcase .trego-kpis li{
  background:rgba(134,239,172,.35); border:1px solid rgba(134,239,172,.5);
  color:#0b3a2c; font-weight:800; border-radius:999px; padding:.46rem .75rem; font-size:0.94rem;
}

/* Video responsive */
#trego-showcase .trego-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000 }
#trego-showcase .trego-video iframe{ position:absolute; inset:0; width:100%; height:100% }

/* CTAs */
#trego-showcase .trego-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px }
#trego-showcase .trego-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.05rem; border-radius:999px; font-weight:800; text-decoration:none !important;
  background:var(--brand); color:#0f172a; border:1px solid rgba(134,239,172,.45);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  font-size:18px;
}
#trego-showcase .trego-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(2,6,23,.12); }
#trego-showcase .trego-btn--ghost{ background:#fff; color:#0f172a; border:1px solid var(--line); }



/* ====================================================================================*/
/* ===== TARJETA DESARROLLO DE CONTENIDOS SEPE Y FP - TARJETAS BLANCAS - CLUSTER ===== */
/* ====================================================================================*/

#cluster-elearning{
  --brand:#047857;              /* Verde principal (mejor contraste) */
  --brand-rgb: 4,120,87;        /* Mismo verde en RGB para usar rgba() */
  --ink:#0f172a;                /* Texto principal */
  --muted:#475569;              /* Texto secundario */
  --bg:#ffffff;                 /* Fondo tarjeta */
  --ring:rgba(var(--brand-rgb),.30); /* Focus visible ligado al brand */
}

#cluster-elearning .cluster-head{
  max-width: 72rem;
  margin: 0 auto 16px;
  padding: 0 16px;
  text-align: left;
}

#cluster-elearning h2{
  margin:0 0 6px;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem);
  line-height:1.2;
  color: var(--ink);
}

#cluster-elearning .lead{
  margin:0;
  color: var(--muted);
  font-size: .98rem;
}

/* Grid */
#cluster-elearning .cards{
  list-style:none;
  margin: 18px auto 8px;
  padding: 0 16px;
  max-width: 72rem;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px){
  #cluster-elearning .cards{grid-template-columns: repeat(2,1fr)}
}
@media (min-width: 980px){
  #cluster-elearning .cards{grid-template-columns: repeat(3,1fr)}
}

/* Card */
#cluster-elearning .card{
  background: var(--bg);
  border-radius:16px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  overflow:hidden;
  border:1px solid rgba(2,6,23,.06);
  /* 💣 blindaje contra .card global */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

#cluster-elearning .card-link{
  display:grid;
  grid-template-rows: auto auto 1fr auto;
  gap:10px;
  padding:18px;
  height:100%;
  text-decoration:none;
  color:#000000;
  position:relative;
  font-size:17px;
}

#cluster-elearning .card-link::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    0deg,
    rgba(var(--brand-rgb), .08),
    rgba(var(--brand-rgb), 0)
  );
  opacity:0; transition:opacity .2s ease;
}

#cluster-elearning .icon{
  width:56px; height:56px;
  color:var(--brand);
}
#cluster-elearning .icon svg{
  width:100%; height:100%;
}

#cluster-elearning .title{
  font-weight: 800;
  color: var(--ink);
  font-size:1.05rem;
  line-height:1.25;
}

#cluster-elearning .desc{
  color: var(--muted);
  font-size: .95rem;
}

#cluster-elearning .cta{
  margin-top: 4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--brand);
  font-weight:700;
}

#cluster-elearning .cta::after{
  content:"\203A";
  font-size:1.1rem;
  line-height:1;
}

/* Hover & focus */
#cluster-elearning .card:hover .card-link::before{opacity:1}
#cluster-elearning .card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
  box-shadow:0 10px 26px rgba(2,6,23,.12);
}

#cluster-elearning .card-link:focus-visible{
  outline:3px solid var(--ring);
  border-radius:14px;
}

/* Nota */
#cluster-elearning .note{
  max-width:72rem;
  margin: 8px auto 0;
  padding: 0 16px 8px;
  font-size:.9rem;
  color: var(--muted);
}
#cluster-elearning .note a{
  color: var(--brand);
  text-decoration: underline;
}


/* ==========================================
   BLOQUE: #GUIA Autopublicar
   ========================================== */

#howto-guide{
  /* Paleta */
  --brand:#86efac;
  --ink:#0f172a;
  --muted:#475569;

  /* 🔹 CONTROLES PRINCIPALES DE TIPOGRAFÍA */
  --acc-h2-size: clamp(1.2rem, 2.1vw, 0.89rem); /* tamaño de los títulos de las solapas */
  --acc-body-size: 1em;                      /* tamaño del texto interno (1em = igual que el body) */
  --acc-line-height: 1.65;                   /* interlineado del texto interno */

  /* Espaciado general del panel */
  --acc-panel-pad: 40px;
}

#howto-guide *{ box-sizing:border-box; }
#howto-guide img{ max-width:100%; height:auto; }

/* Contenedor */
#howto-guide .wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

/* Acordeón */
#howto-guide .acc{
  display:grid;
  gap:18px;
  margin-top:12px;
}

#howto-guide .acc-item{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(2,6,23,.10);
  overflow:hidden;
}

/* Cabecera (botón) */
#howto-guide .acc-head{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  margin:0;
  border:0;
  display:grid;
  grid-template-columns:32px 1fr 22px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  background:var(--brand);
  color:#0b3b2f;
  text-align:left;
  cursor:pointer;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  min-height:62px; /* reserva alto → evita CLS */
}
#howto-guide .acc-head:focus-visible{
  outline:3px solid #0ea5e9;
  outline-offset:2px;
}
#howto-guide .acc-head .icon,
#howto-guide .acc-head .chev{
  width:22px;
  height:22px;
}
#howto-guide .acc-head .icon svg,
#howto-guide .acc-head .chev svg{
  width:22px;
  height:22px;
  display:block;
}

/* Título visible (H2 de cada solapa) */
#howto-guide .acc-title,
#howto-guide .acc-head h2{  /* por si el editor cambia el span a h2 */
  font-size: var(--acc-h2-size);
  font-weight:800;
  margin:0;
  line-height:1.25;
  color:#0b3b2f;
}

/* Flecha giro */
#howto-guide .acc-item.is-open .chev{
  transform:rotate(180deg);
  transition:transform .2s ease;
}

/* Panel (contenido) */
#howto-guide .acc-panel{
  display:none;
  padding:var(--acc-panel-pad);
  background:#fff;
  color:var(--ink);
  font-size:var(--acc-body-size);     /* 🔹 controla el tamaño del texto */
  line-height:var(--acc-line-height); /* 🔹 controla el interlineado */
}
#howto-guide .acc-item.is-open .acc-panel{
  display:block;
}

/* Texto interno */
#howto-guide .acc-panel p{
  margin:0 0 12px 0;
}
#howto-guide .acc-panel p:last-child{
  margin-bottom:0;
}
#howto-guide .acc-panel ul{
  margin:10px 0 0 1.1rem;
}
#howto-guide .acc-panel li{
  margin:6px 0;
  font-size: 19px;
}

/* Headings internos (H3, etc.) dentro del panel */
#howto-guide .acc-panel h3{
  margin:16px 0 8px 0;
  font-weight:800;
  margin-top:34px;
  color:var(--ink);
  font-size:1.05em; /* un pelín más grande que el texto base del panel */
}

/* Enlaces accesibles */
#howto-guide .acc-panel a{
  color:#065f46;
  text-decoration:underline;
  text-underline-offset:2px;
}
#howto-guide .acc-panel a:focus-visible{
  outline:3px solid #0ea5e9;
  outline-offset:2px;
}

/* Tipografías internas por si Astra “infla” headings globales */
#howto-guide h1,
#howto-guide h2,
#howto-guide h3,
#howto-guide h4{
  line-height:1.25;
  color:var(--ink);
}

/* Tabla comparativa + hover por columna */
#howto-guide .table-wrap{
  overflow:auto;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f9fafb;
  margin-top:10px;
}
#howto-guide .comp-table{
  width:100%;
  min-width:680px;
  border-collapse:separate;
  border-spacing:0;
}
#howto-guide .comp-table th,
#howto-guide .comp-table td{
  font-size: 19px;
  padding:12px 14px;
  border-bottom:1px solid #e5e7eb;
  vertical-align:top;
  background:#fff;
}
#howto-guide .comp-table thead th{
  background:#eefdf4;
  color:#064e3b;
  font-weight:800;
}
#howto-guide .comp-table tr:last-child th,
#howto-guide .comp-table tr:last-child td{
  border-bottom:0;
}

/* Hover por columna (clase añadida por JS) */
#howto-guide .comp-table td.is-col-hover,
#howto-guide .comp-table th.is-col-hover{
  background:#eefdf4;
  outline:1px solid #d1fae5;
}

/* Botón CTA dentro del contenido (si lo usas) */
#howto-guide .cta-btn{
  display:inline-block;
  background:#10b981;
  color:#0b3b2f;
  font-weight:800;
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
}
#howto-guide .cta-btn:hover{
  filter:brightness(1.04);
}
#howto-guide .cta-btn:focus-visible{
  outline:3px solid #0ea5e9;
  outline-offset:3px;
}

/* Responsive */
@media (max-width:640px){
  #howto-guide .acc-head{
    padding:18px;
    grid-template-columns:28px 1fr 20px;
  }
  #howto-guide .acc-panel{
    padding:24px;
  }
}

/* Para asegurar que [hidden] de JS realmente oculta */
#howto-guide [hidden]{ display:none !important; }








/* =========================================================================
   Toggle - TRABAJOS AUTORES Y CONTENIDOS
   ========================================================================= */
#work-toggle{
  /* —— Colores/variables —— */
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --soft:#f8fafc;
  --accent:#86efac;                   /* verde Tregolam */
  --accent-soft:#D9FBE5;              /* verde suave para fondos */
  --radius:18px; --gap:26px;          /* radios y separación entre tarjetas */

  /* —— Tabs —— */
  --tab-pad-y:12px;                   /* ↑ padding vertical tabs */
  --tab-pad-x:20px;                   /* ↑ padding horizontal */
  --tab-fz:18px;                      /* ↑ tamaño texto tabs */
}
#work-toggle .wt-wrap{ max-width:1200px; margin:0 auto; }

/* ===== Tabs =============================================================== */
#work-toggle .wt-tabs{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px;
  background: var(--accent-soft);          /* barra verde clara */
  border:1px solid rgba(134,239,172,.55);
  border-radius:999px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  margin: 0 0 20px;
}
#work-toggle .wt-tab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding: var(--tab-pad-y) var(--tab-pad-x);
  border-radius:999px; line-height:1;
  font-weight:800; font-size:16px;
  color:#094235;                         /* verde oscuro legible */
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
#work-toggle .wt-tab.is-active{
  background: var(--accent); color:#0b1420;
  box-shadow:0 4px 12px rgba(134,239,172,.45);
  border:1px solid rgba(0,0,0,.06);
}

/* ===== Panels ============================================================= */
#work-toggle .wt-panels{ position:relative; }
#work-toggle .wt-panel{ display:none; }
#work-toggle .wt-panel.is-active{ display:block; }

/* ===== Grid tarjetas ====================================================== */
#work-toggle .wt-grid{
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){ #work-toggle .wt-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  #work-toggle .wt-grid{ grid-template-columns: 1fr; } }

/* ===== Tarjeta ============================================================ */
#work-toggle .wt-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  box-shadow:0 8px 22px rgba(2,6,23,.07);
  display:grid; grid-template-rows:auto 1fr;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#work-toggle .wt-card:hover{
  transform:translateY(-3px);
  border-color: rgba(247,148,104,.45);
  box-shadow:0 16px 32px rgba(2,6,23,.10);
}

/* Media → MÁS ALTA (rectangular) */
#work-toggle .wt-media{ display:block; aspect-ratio:16/10; overflow:hidden; } /* antes 16/9 */
#work-toggle .wt-media img{
  width:100%; height:100%; object-fit:cover; transform:scale(1);
  transition: transform .35s ease;
}
#work-toggle .wt-card:hover .wt-media img{ transform:scale(1.03); }

/* Cuerpo */
#work-toggle .wt-body{
  padding:18px 20px 20px;
  display:flex; flex-direction:column; gap:10px;
}
#work-toggle .wt-title{
  margin:0; font-size:1.15rem; line-height:1.25; font-weight:800; color:var(--ink);
}
#work-toggle .wt-sub{
  margin:0; font-size:1rem; color:#334155;
}

/* Meta (chips a la izquierda + logo a la derecha) */
#work-toggle .wt-meta{
  margin-top:10px;
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px;
}
#work-toggle .wt-logo{ height:32px; width:auto; object-fit:contain; }

/* Chips */
#work-toggle .wt-chips{ display:flex; gap:10px; flex-wrap:wrap; }
#work-toggle .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:7px 12px; border-radius:999px; font-weight:800; font-size:.82rem; line-height:1;
  border:1px solid transparent;
}

/* — Relleno verde — */
#work-toggle .chip-green{
  background: var(--accent-soft);
  color:#0A7A3E;
  border-color: rgba(134,239,172,.55);
}

/* — Contorno verde (fondo blanco) — */
#work-toggle .chip-outline-green{
  background:#fff;
  color:#0A7A3E;
  border-color: rgba(134,239,172,.8);
}

/* SR-only (accesibilidad) */
#work-toggle .sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}









/* ====== AUTOPUBLICACION ====== */
.tg-autopub.v3{
  background:#202230; color:#fff;
  border-radius:24px; overflow:hidden;
  padding:0;
}

/* 2 columnas SIN GAP (imagen sangra) */
.tg-autopub.v3 .tg-autopub__wrap{
  display:grid; grid-template-columns:1.05fr 1fr; gap:0;
  align-items:stretch;
}
@media (max-width: 960px){
  .tg-autopub.v3 .tg-autopub__wrap{ grid-template-columns:1fr; }
}

/* IMAGEN: ocupa toda su columna */
.tg-autopub.v3 .tg-autopub__media{ margin:0; }
.tg-autopub.v3 .tg-autopub__media img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
}

/* CONTENIDO: padding solo en la derecha */
.tg-autopub.v3 .tg-autopub__content{
  padding: clamp(18px, 4vw, 40px);
  display:flex; flex-direction:column;
}

/* H2 exacto 28 px y blanco */
.tg-autopub.v3 h2{
  font-size:28px !important; line-height:1.15; margin:0 0 .45em; color:#fff !important;
}

/* Copy secundario */
.tg-autopub.v3 .lead{ color:#cbd5e1; margin:0 0 1rem; }

/* Enlaces sin subrayado SOLO en este bloque */
.tg-autopub.v3 a{ text-decoration:none !important; }

/* Servicios: SIN negrita y 1 punto más pequeños (≈16px) */
.tg-autopub.v3 .svc{
  list-style:none; margin:1rem 0 1.25rem; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
}
@media (max-width:640px){ .tg-autopub.v3 .svc{ grid-template-columns:1fr; } }

.tg-autopub.v3 .svc a{
  display:grid; grid-template-columns:36px 1fr; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06);
  color:#fff; font-weight:400 !important; font-size:16px !important;
}
.tg-autopub.v3 .svc a:hover{ background:rgba(255,255,255,.1); }
.tg-autopub.v3 .svc .ico{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#e7d9ff;color:#3b2a6e;
}
.tg-autopub.v3 .svc li:nth-child(2) .ico{ background:#d7f3e5; color:#145c3f; }
.tg-autopub.v3 .svc li:nth-child(3) .ico{ background:#fff1cf; color:#7a5a00; }
.tg-autopub.v3 .svc li:nth-child(4) .ico{ background:#e3e7ff; color:#243a8f; }
.tg-autopub.v3 .svc svg{ width:22px;height:22px; }

/* CTA en la misma fila */
.tg-autopub.v3 .cta-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:.5rem 0 .75rem;
}
.tg-autopub.v3 .btn-white{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#202230; border-radius:10px;
  padding:12px 14px; 
}


/* IMAGEN DE FONDO BOOKTRAILER - REPEAT */
/* Forzar que el fondo se repita en el grupo */
.bg-repeat {
  background-repeat: repeat !important;   /* o repeat-x / repeat-y */
  background-size: auto !important;       /* quitar el cover de Gutenberg */
}




/* ===== ENVIO CV - HOME -===== */
#cv-card{
  --bg-1:#0f172a;
  --bg-2:#1e293b;
  --bg-3:#7c3aed;
  --glow:#f59e0b;
  --ink:#ffffff;
  --muted:#cbd5e1;
  --accent:#86efac;
  --ring:#fb923c;

  color:var(--ink);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  isolation:isolate;

  background:
    radial-gradient(900px 280px at 110% -25%, color-mix(in oklab, var(--bg-3), transparent 55%), transparent 60%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 48%, var(--bg-3) 100%);
  box-shadow:0 10px 28px rgba(16,24,40,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  margin:20px 0 0;
}
#cv-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 180px at -10% 110%, var(--glow), transparent 60%);
  opacity:.5; z-index:0;
  animation:cvGlow 7s linear infinite;
}
@keyframes cvGlow{ 0%{transform:translateX(0)} 50%{transform:translateX(6%)} 100%{transform:translateX(0)} }
@media (prefers-reduced-motion:reduce){ #cv-card::before{animation:none} }

#cv-card .cvc-wrap{ 
  max-width:1200px;
  margin:0 auto;
  padding: 32px;
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
}
#cv-card .cvc-content-wrapper {
  flex: 1 1 50%;
  min-width: 300px;
}
#cv-card .cvc-head{ margin:0 0 10px; }
#cv-card h2{
  margin:0 0 6px;
  font-weight:800;
  font-size: 28px;
  line-height:1.18;
  color:#fff;
}
#cv-card .cvc-lead{ margin:0; font-weight:600; }
#cv-card .cvc-list{
  margin:12px 0 8px; padding:0; list-style:none;
  display:grid; gap:8px;
}
#cv-card .cvc-list li{
  position:relative; padding-left:22px; color:var(--muted); line-height:1.45;
}
#cv-card .cvc-list li::before{
  content:""; position:absolute; left:0; top:.48em;
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.7), rgba(255,255,255,.2) 60%), var(--accent);
  box-shadow:0 0 0 2px rgba(134,239,172,.18);
}
#cv-card .cvc-note{ margin:2px 0 10px; color:var(--muted); }

#cv-card .cvc-form{
  flex: 1 1 40%;
  min-width: 280px;
  background:
    linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(255,255,255,.04)),
    radial-gradient(480px 180px at 120% -10%, color-mix(in oklab, var(--bg-3), transparent 80%), transparent 60%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

#cv-card .wpforms-container{ margin:0 !important; }
#cv-card .wpforms-field-label{ color:#e8eef7 !important; font-weight:700; }
#cv-card .wpforms-field-description,
#cv-card .wpforms-field-description p,
#cv-card .wpforms-field.wpforms-field-html,
#cv-card .wpforms-field-checkbox li label{ color:#ffffff !important; }
#cv-card .wpforms-field.wpforms-field-html a,
#cv-card .wpforms-field-description a{ color:var(--accent) !important; text-decoration:underline; }

#cv-card .wpforms-field input[type="text"],
#cv-card .wpforms-field input[type="email"],
#cv-card .wpforms-field input[type="url"],
#cv-card .wpforms-field input[type="tel"],
#cv-card .wpforms-field input[type="number"],
#cv-card .wpforms-field textarea,
#cv-card .wpforms-field select{
  background:#0d1526;
  color:#e6edf6;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  min-height:40px; padding:8px 10px;
}
#cv-card .wpforms-field textarea{ min-height:92px; }
#cv-card .wpforms-field input::placeholder,
#cv-card .wpforms-field textarea::placeholder{ color:#9fb0c7 }

#cv-card .wpforms-field-file-upload .wpforms-uploader,
#cv-card .wpforms-field-file-upload .dropzone{
  background:#0b1220 !important;
  border:1px dashed rgba(255,255,255,.22) !important;
  color:#cbd5e1 !important;
  padding: 24px 16px !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#cv-card .wpforms-submit{
  appearance:none;
  background:#f97316 !important; color:#0a0f1a !important;
  border:0 !important; border-radius:999px !important;
  padding:10px 16px !important; font-weight:800 !important;
  box-shadow:0 8px 20px rgba(249,115,22,.35);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
#cv-card .wpforms-submit:hover{ background:#ea580c !important; transform:translateY(-1px) }
#cv-card .wpforms-submit:focus-visible{
  outline:0; box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ring);
}

#cv-card p{ margin:0; }

@media (max-width:768px){ 
  #cv-card .cvc-wrap{ 
    flex-direction: column;
    padding: 24px !important; 
    gap: 20px;
  } 
  #cv-card .cvc-content-wrapper,
  #cv-card .cvc-form {
    flex: 1 1 100%;
    min-width: unset;
  }

}


/* ============================================================*/
/* ===== ESTE CODIGO SOLUCIONA EL PROBLEMA DE LOS ICONOS -===== */
/* ============================================================*/

/* Reset global para todos los iconos de tarjeta */
.card-icon {
  width: 40px;
  height: 40px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  color: inherit;
}

.card-icon svg {
  width: 100%;
  height: 100%;
  stroke: none;
  /* no tocamos fill: lo decide el propio <svg> (como en tus iconos #f79468) */
}




/* =============================================================== */
/* ========== BLOQUE — Desarrollo de contenidos - Todo listo para impartir ================== */
/* =============================================================== */

/* Grid general: 3 columnas fijas */
.tg-deliverables-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);  /* SIEMPRE 3 columnas en desktop */
  gap:24px;
  margin-top:32px;
}

/* Tarjeta base */
.tg-deliverables-grid .tg-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:24px;
  text-align:left;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover sutil */
@media (hover:hover){
  .tg-deliverables-grid .tg-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 14px rgba(0,0,0,.08);
    border-color:#e2e8f0;
  }
}

/* Wrapper del icono */
.tg-deliverables-grid .tg-card .tg-card-icon-wrapper{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  /* sin fondo y sin pastilla redondeada */
  background:transparent;
  border-radius:0;
  /* color de los iconos */
  color:#75d69c;
  margin-bottom:16px;
}
}

/* Icono SVG */
.tg-deliverables-grid .tg-card .tg-icon{
  display:block;
  width:26px;
  height:26px;
}

/* Título */
.tg-deliverables-grid .tg-card h3{
  font-size:1.35rem;
  font-weight:700;
  color:#1f2937;
  margin:0 0 10px 0;
}

/* Texto */
.tg-deliverables-grid .tg-card p{
  font-size:1rem;
  color:#374151;
  line-height:1.65;
  margin:0;
}

/* =============================================================== */
/* =======================   TARJETA CTA   ======================= */
/* =============================================================== */

.tg-deliverables-grid .tg-card--cta{
  background:#75d69c;       /* verde corporativo */
  color:#020617;            /* texto casi negro */
  border-color:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;   /* alinear contenido a la izquierda */
  text-align:left;
  gap:24px;
  padding:48px;
  border-radius:12px;
  grid-column:2 / span 2;   /* ocupa columna 2 y 3 en escritorio */
}

/* Título dentro de la CTA */
.tg-deliverables-grid .tg-card--cta h3{
  margin:0;
  font-size:1.3rem;
  font-weight:700;
  color:#020617;
  max-width:46rem;
}

/* Botón CTA */
.tg-deliverables-grid .tg-card--cta .tg-card-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:14px;
  background:#000;          /* botón negro */
  color:#75d69c;            /* texto verde corporativo */
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  border:1px solid #000;
  align-self:flex-start;    /* botón a la izquierda */
  transition:background .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Hover botón CTA */
@media (hover:hover){
  .tg-deliverables-grid .tg-card--cta .tg-card-cta:hover{
    background:#020617;
    box-shadow:0 8px 18px rgba(0,0,0,.25);
    transform:translateY(-1px);
  }
}

/* =============================================================== */
/* =======================   RESPONSIVE   ======================== */
/* =============================================================== */

/* Tablet → 2 columnas */
@media (max-width:1024px){
  .tg-deliverables-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .tg-deliverables-grid .tg-card--cta{
    grid-column:1 / -1;     /* CTA ocupa las 2 columnas */
  }
}

/* Móvil → 1 columna */
@media (max-width:600px){
  .tg-deliverables-grid{
    grid-template-columns:1fr;
  }

  .tg-deliverables-grid .tg-card--cta{
    grid-column:1 / -1;     /* CTA ocupa el ancho completo */
    padding:32px;           /* un poco menos de padding para móvil */
  }
}






/* ========================================================= */
/*      TIMELINE – PAGINA DE DESARROLLO DE CONTENIDOS      */
/* ========================================================= */

/* Variables y ajustes globales */
.tg-timeline{
  --line-color: #d7dde5;
  --dot-color: #0f1115;
  --dot-size: 14px;
  --num-size: 18px;          /* número más grande */
  --gap-x: 48px;
  --title-top: 40px;
  --line-y: 22px;
  --h3-size: clamp(20px, 2.2vw, 28px);
  --p-size: 18px;
  position: relative;
}

/* ======== LAYOUT DESKTOP: timeline horizontal ======== */
.tg-steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap-x);
  position: relative;
}

/* Línea horizontal principal */
.tg-steps::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--line-y);
  height: 2px;
  background: var(--line-color);
}

/* ======== Cada paso ======== */
.tg-step{
  position: relative;
  padding-top: calc(var(--title-top) + 6px);
  transition: transform .2s ease; /* para el hover */
}

/* Punto del timeline */
.tg-step::after{
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--line-y) - var(--dot-size)/2);
  width: var(--dot-size);
  height: var(--dot-size);
  background: var(--dot-color);
  border-radius: 50%;
  transition: background .2s ease;  /* para el hover */
}

/* Número encima del punto */
.tg-step::before{
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: calc(var(--line-y) - var(--dot-size) - 16px);
  transform: translateX(-3px);
  font: 700 var(--num-size)/1 ui-sans-serif, system-ui;
  color: #6b7280;
}

/* ======== Hover elegante ======== */
@media (hover:hover){
  .tg-step:hover{
    transform: translateY(-2px);
  }

  .tg-step:hover h3{
    color: #111827; /* un poco más oscuro */
  }

  .tg-step:hover::after{
    background: #000; /* punto más oscuro */
  }
}

/* ======== Títulos y texto ======== */
.tg-step h3{
  margin: 0 0 10px 0;
  font-weight: 800;
  font-size: var(--h3-size);
  line-height: 1.25;
  color: #1f2937;
  transition: color .2s ease;
}

.tg-step p{
  margin: 0;
  font-size: var(--p-size);
  line-height: 1.7;
  color: #1f2937;
}




/* ========================================================= */
/*      MUEVE EL SHORTCODE RESEÑAS ARRIBA -Paginas Contenidos     */
/* ========================================================= */

/* PASO 1: Establecer el Bloque Columna (el padre, con tu clase 'resena') como el punto de anclaje */
.wp-block-column.resena {
    /* ESTO ES CRUCIAL para que el elemento hijo se mueva respecto a este punto */
    position: relative;
    /* Crea espacio en la columna para que el elemento que sube no solape el contenido de arriba */
    padding-top: 350px; 
}

/* PASO 2: Mover el contenido DENTRO de la columna 350px hacia arriba */
.wp-block-column.resena > * {
    position: absolute;
    top: -320px; /* Movimiento vertical hacia arriba */
    left: 0; 
    z-index: 10;
}




/* ========================================================= */
/*      SOLUCIONA ELPROBLEMA DE LAS TARJETAS Y LOS BORDES GORDOS    */
/* ========================================================= */

/* 💣 Blindaje global: corrige TODAS las tarjetas de todos los clusters */
section.cluster ul.cards > li.card {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
}





/* ========================================================= */
/*  TODO LO QUE INCLUYE UN MANUAL - Página Manuales de formación a medida para FP, SEPE y enseñanza reglada */
/* ========================================================= */


#deliverables-cards {
  margin-block: 3rem;
}

/* Grid 3–2–1 */
#deliverables-cards .deliverables-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  #deliverables-cards .deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #deliverables-cards .deliverables-grid {
    grid-template-columns: 1fr;
  }
}

/* Tarjeta base */
#deliverables-cards .deliverable-card {
  background: #ffffff;
  border: 1px solid rgba(2, 6, 23, .06);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 8px 20px rgba(2, 6, 23, .08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  box-sizing: border-box;
  margin: 0;

  /* transición para el “pestañeo” */
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

/* Hover / focus: efecto “pestañeo” sutil */
#deliverables-cards .deliverable-card:hover,
#deliverables-cards .deliverable-card:focus-within {
  transform: translateY(-4px);
  background-color: #f8fdfb; /* blanco con toque verde suave */
  border-color: #86efac;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .12);
}

/* Título */
#deliverables-cards .deliverable-card h3 {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
  line-height: 1.3;
  color: #0f172a;
}

/* Texto */
#deliverables-cards .deliverable-card p {
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: #0f172a;
}

/* Badges */
#deliverables-cards .badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

#deliverables-cards .badge {
  background: #e6f9f0;
  color: #065f46;
  border: 1px solid #86efac;
  padding: .35rem .6rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
}

/* Meta */
#deliverables-cards .meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .9rem;
  color: #0f172a;
}



/* ========================================================= */
/*  PACK VISUAL - Página Manuales de formación a medida para FP, SEPE y enseñanza reglada */
/* ========================================================= */

  /* Scope al bloque */
  #visual-pack { --brand:#86efac; --ink:#0f172a; --muted:#475569; --pill:#ecfdf5; }
  #visual-pack .wrap{max-width:1280px;margin:0 auto;padding:8px 16px;}
  #visual-pack h2{margin:0 0 10px 0;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.2;color:var(--ink);}
  #visual-pack .lead{margin:6px 0 22px 0;color:var(--muted);}

  /* Grid de tarjetas: 2 columnas (1 en móvil) */
  #visual-pack .card-grid{
    display:grid; gap:18px;
    grid-template-columns: repeat(2, minmax(0,1fr));
    row-gap: 36px;      /* ↑ aumenta el espacio vertical entre filas */
  }
  @media (max-width: 900px){
    #visual-pack .card-grid{ grid-template-columns: 1fr; }
  }

  /* Tarjeta */
  #visual-pack .card{
    background:#fff; border:1px solid rgba(2,6,23,.06);
    border-radius:18px; overflow:hidden;
    box-shadow:0 10px 28px rgba(2,6,23,.08);
    display:flex; flex-direction:column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  #visual-pack .card:hover{
    transform: translateY(-4px);
    box-shadow:0 16px 36px rgba(2,6,23,.14);
    border-color: rgba(2,6,23,.12);
  }

  /* Imagen */
  #visual-pack .card .media{
    display:block; width:100%; aspect-ratio: 16/10; background:#f1f5f9;
  }
  #visual-pack .card .media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Cuerpo de la tarjeta */
  #visual-pack .card .txt{ padding:16px 16px 18px 16px; }
  #visual-pack .card h3{ margin:8px 0 8px 0; font-size:1.2rem; color:var(--ink); line-height:1.25; }
  #visual-pack .card p{ margin:0; color:#374151; line-height:1.55; }
  #visual-pack .badges{margin:8px 0 10px 0}
  #visual-pack .pill{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--pill); border:1px solid var(--brand);
    padding:.28rem .6rem; border-radius:999px; font-size:.85rem; color:#065f46; margin:0 10px 8px 0;
    white-space:nowrap;
  }
  #visual-pack .dot{width:.55rem;height:.55rem;border-radius:999px;background:var(--brand);display:inline-block}

  /* Icono monocromo arriba del título */
  #visual-pack .icon{
    color:#000; /* negro */
    width:40px; height:40px;
  }
  #visual-pack .icon svg{ display:block; width:40px; height:40px; }




/* ========================================================= */
/*  TIMELINE- Página Manuales de formación a medida para FP, SEPE y enseñanza reglada */
/* ========================================================= */

  /* Scope del timeline */
  #img-timeline { --brand:#86efac; --hover:#a7f3d0; --ink:#0f172a; --muted:#475569; }
  #img-timeline .wrap{max-width:1280px;margin:0 auto;padding:8px 16px;}
  #img-timeline h3{margin:0 0 14px 0;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink)}

  /* Lista vertical con línea */
  #img-timeline .timeline{
    position:relative; margin:0; padding:0; list-style:none;
  }
  #img-timeline .timeline::before{
    content:""; position:absolute; left:18px; top:0; bottom:0;
    width:2px; background:rgba(2,6,23,.08);
  }

  /* Item */
  #img-timeline .step{
    position:relative; display:grid; gap:6px;
    grid-template-columns: 48px 1fr;
    padding:12px 12px 12px 0; border-radius:14px;
    transition:background-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  #img-timeline .step:hover{
    background:var(--hover);
    box-shadow:0 8px 20px rgba(2,6,23,.08);
    transform:translateY(-1px);
  }

  /* Burbuja numerada */
  #img-timeline .bubble{
    position:relative; z-index:1;
    width:36px; height:36px; border-radius:999px;
    background:var(--brand); color:#0b1220; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    margin:2px 0 0 0; box-shadow:0 2px 0 rgba(2,6,23,.06);
  }

  /* Contenido */
  #img-timeline .title{
    margin:0; font-weight:700; color:var(--ink); line-height:1.25;
  }
  #img-timeline .desc{
    margin:0; color:#374151; line-height:1.5;
  }

  /* Accesibilidad movimiento */
  @media (prefers-reduced-motion: reduce){
    #img-timeline .step{ transition:none }
    #img-timeline .step:hover{ transform:none }
  }

  /* Responsive */
  @media (max-width:680px){
    #img-timeline .step{ grid-template-columns:44px 1fr; }
    #img-timeline .timeline::before{ left:16px; }
  }





/* ========================================================= */
/* ESTILOS GLOBALES PARA TARJETAS DESPLEGABLES (ACORDEÓN) */
/* ========================================================= */


#areas-y-titulaciones.areas-wrap{
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --brand:#86efac; --brand-ink:#064e3b;
}
#areas-y-titulaciones .container{max-width:1200px;margin:0 auto;padding:8px 16px 28px}
#areas-y-titulaciones .sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* Grid 3 columnas (fluido) */
#areas-y-titulaciones .areas-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start
}
@media (max-width:1024px){#areas-y-titulaciones .areas-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){#areas-y-titulaciones .areas-grid{grid-template-columns:1fr}}

#areas-y-titulaciones .areas-col{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);padding:14px
}
#areas-y-titulaciones .col-head{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;margin-bottom:10px}
#areas-y-titulaciones .col-head .ico{width:40px;height:40px;color:#000}
#areas-y-titulaciones .col-head .ico svg{width:100%;height:100%}
#areas-y-titulaciones .col-title{margin:0;color:#0b1320;font-size:1.15rem;font-weight:800}

/* Familia (acordeón) */
#areas-y-titulaciones .family{
  background:color-mix(in srgb, var(--brand) 22%, #fff);
  border:1px dashed rgba(2,6,23,.08); border-radius:12px; padding:8px; margin:10px 0;
}
#areas-y-titulaciones .family.open{background:color-mix(in srgb, var(--brand) 30%, #fff)}

#areas-y-titulaciones .fam-head{
  width:100%; 
  background:none;
  border:0; 
  padding:6px 4px; 
  border-radius:10px;
  display:flex; 
  align-items:center; gap:.65rem; 
  cursor:pointer; 
  text-align:left;
  font-size: 0.95rem;
  font-weight:700; 
  color:#0b1320;
}
#areas-y-titulaciones .fam-head:focus{outline:3px solid rgba(0,0,0,.2); outline-offset:2px}
#areas-y-titulaciones .fam-icon{width:28px;height:28px;color:#000;display:inline-grid;place-items:center}
#areas-y-titulaciones .fam-icon svg{width:100%;height:100%}
#areas-y-titulaciones .fam-title{line-height:1.2}
#areas-y-titulaciones .chev{margin-left:auto;opacity:.7}

#areas-y-titulaciones .fam-body{margin:8px 0 2px}
#areas-y-titulaciones .fam-items{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#areas-y-titulaciones .fam-items li{
  display:block; line-height:1.45;
  background:#fff; border-radius:10px; border:1px solid rgba(2,6,23,.06);
  padding:8px 10px; box-shadow:0 2px 8px rgba(2,6,23,.05); color:#374151;
}

/* accesos */
#areas-y-titulaciones a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
</style>


/* ===== Estilos SEPE Familias (verde #86efac, iconos sin fondo) ===== */

/* ===== Estilos SEPE Familias (verde #86efac, iconos sin fondo) ===== */
#sepe-familias.sepe-wrap{
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --brand:#86efac; --brand-ink:#064e3b;
}
#sepe-familias .container{max-width:1200px;margin:0 auto;padding:8px 16px 28px}
#sepe-familias .sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* Grid de 3 columnas (fluido) */
#sepe-familias .fam-grid{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0
}
@media (max-width:1024px){#sepe-familias .fam-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){#sepe-familias .fam-grid{grid-template-columns:1fr}}

#sepe-familias .fam-card{
  display:flex;align-items:center;gap:.65rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  text-decoration:none;color:var(--ink);font-weight:800;line-height:1.2;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#sepe-familias .fam-card:hover,#sepe-familias .fam-card:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow:0 12px 28px rgba(2,6,23,.08);
  outline:none;
  background:color-mix(in srgb, var(--brand) 18%, #fff);
}

#sepe-familias .ico{width:36px;height:36px;display:inline-grid;place-items:center;color:#000;flex:0 0 auto}
#sepe-familias .ico svg{width:100%;height:100%}
#sepe-familias .label{flex:1;white-space:normal}



/* ========================================================= */
/* CASOS DE EXITO - Pagina de Contenidos e-learning para SEPE y FP */
/* ========================================================= */

    /* 1) Texto visible en negro puro */
#case-fp .example-card p,
#case-fp .example-card span,
#case-fp .example-card li,
#case-fp .example-card a,
#case-fp .example-card h1,
#case-fp .example-card h2,
#case-fp .example-card h3,
#case-fp .example-card h4,
#case-fp .example-card h5,
#case-fp .example-card h6,
#case-fp .example-card strong,
#case-fp .example-card b {
  color: #000000 !important;      /* negro absoluto */
  opacity: 1 !important;          /* evitar tonos apagados */
}

/* 2) Chips VERDES (sin tocar los de otras secciones) */
#case-fp .meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0.5rem 0 1rem;
  list-style: none;
}
#case-fp .meta-chips li {
  background: #D9FBE5;            /* verde claro */
  color: #0A7A3E;                 /* verde texto */
  border: 1px solid rgba(10, 122, 62, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-weight: 700;
}

/* 3) Bullets/emoji bien alineados */
#case-fp .now-specs .i {
  width: 1.25rem;
  text-align: center;
  margin-right: 0.35rem;
}

/* 4) Respeta responsive existente */
@media (max-width: 720px) {
  #case-fp .meta-chips li {
    white-space: normal;
  }
}




  /* ===== BLOQUE CENTROS ===== */
  :root{ --uc-ink:#0f172a; --uc-muted:#475569; --uc-line:#e5e7eb; --uc-brand:#86efac; }

section.sect-anchor.usecase#editoriales,
section.sect-anchor.usecase#centros,
section.sect-anchor.usecase#onboarding,
section.sect-anchor.usecase#compliance-prl,
section.sect-anchor.usecase#sales-enablement,
section.sect-anchor.usecase#academia-soporte{
  background:#fff;
  border:1px solid var(--uc-line);
  border-left:6px solid var(--uc-brand);
  border-radius:14px;
  padding:18px 18px 16px;
  margin:22px 0;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}

  .usecase h2{
    margin:0 0 8px;
    color:var(--uc-ink);
    font-weight:800;
    font-size: clamp(1.2rem, 1.1vw + 1rem, 1.6rem);
    letter-spacing:-.01em;
  }
  .usecase p{ margin:0 0 10px; color:var(--uc-muted); line-height:1.55; }
  .usecase h3{ margin:10px 0 6px; color:var(--uc-ink); font-size:1.05rem; font-weight:800; }

  /* Bullets “check” */
  .usecase ul{ margin:.25rem 0 8px 1.15rem; padding:0; list-style:none; color:#374151; }
  .usecase li{ position:relative; margin:.35rem 0; padding-left:1.1rem; }
  .usecase li::before{
    content:""; position:absolute; left:0; top:.6rem; width:.6rem; height:.35rem;
    border-left:2px solid #16a34a; border-bottom:2px solid #16a34a; transform:rotate(-45deg);
  }

  /* Línea de formatos si la usas como Formatos: ... */
  .usecase .formats{ color:var(--uc-ink); font-weight:700; margin-top:6px; }

  /* CTA botón (aplicar class="btn" al enlace) */
  .usecase .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    margin-top:6px; padding:.6rem .9rem; border-radius:12px;
    background:var(--uc-brand); color:#000 !important; font-weight:900; text-decoration:none !important;
    border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 6px rgba(0,0,0,.06);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .usecase .btn::after{
    content:""; width:8px; height:8px; border-right:2px solid #000; border-top:2px solid #000; transform:rotate(45deg);
  }
  .usecase .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.08); }

  /* Responsivo suave */
  @media (max-width:700px){
    .usecase{ padding:16px; }
  }



/* ======================================*/
/* ======= CASOS POR ETAPAS - Página Programación LOMLOE====== */
/* ======================================*/


.stage-showcase .stages-lead{ margin:.35rem 0 1.25rem; color:#475569; font-size:clamp(15px,.6vw + .6rem,18px); }

/* Radios ocultos accesibles */
.stage-showcase .stage-radio{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Tabs */
.stage-showcase .stages-tabs{
  display:inline-grid; grid-auto-flow:column; gap:8px; margin-bottom:14px;
  background:#f8fafc; padding:6px; border-radius:999px; border:1px solid #e5e7eb;
}
.stage-showcase .stages-tabs label{
  cursor:pointer; padding:.5rem .9rem; border-radius:999px; font-weight:800;
  color:#0f172a; user-select:none; transition:background .15s ease, transform .1s ease;
}
.stage-showcase .stages-tabs label:hover{ transform:translateY(-1px); }

/* Estado activo (verde, texto negro) */
.stage-showcase #tab-primaria:checked ~ .stages-tabs label[for="tab-primaria"],
.stage-showcase #tab-eso:checked      ~ .stages-tabs label[for="tab-eso"],
.stage-showcase #tab-bach:checked     ~ .stages-tabs label[for="tab-bach"],
.stage-showcase #tab-fp:checked       ~ .stages-tabs label[for="tab-fp"],
.stage-showcase #tab-sepe:checked     ~ .stages-tabs label[for="tab-sepe"]{
  background:#86efac; color:#000;
}

/* Panels */
.stage-showcase .stages-panels{
  position:relative; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; background:#fff;
}
.stage-showcase .stages-panels > section{ display:none; padding:20px 22px; }
.stage-showcase #tab-primaria:checked ~ .stages-panels #panel-primaria{ display:block; }
.stage-showcase #tab-eso:checked      ~ .stages-panels #panel-eso{ display:block; }
.stage-showcase #tab-bach:checked     ~ .stages-panels #panel-bach{ display:block; }
.stage-showcase #tab-fp:checked       ~ .stages-panels #panel-fp{ display:block; }
.stage-showcase #tab-sepe:checked     ~ .stages-panels #panel-sepe{ display:block; }

/* Cabecera de panel: no repite la etapa, usa “Enfoque recomendado” */
.stage-showcase .stage-title{
  margin:0 0 .5rem; font-size:1.05rem; font-weight:800;
  display:inline-block; background:#86efac; color:#000; padding:.18rem .55rem; border-radius:8px;
}

/* Lista */
.stage-showcase .stage-points{ margin:.25rem 0 0; padding-left:1.1rem; color:#374151; }
.stage-showcase .stage-points li{ margin:.28rem 0; }

/* CTA */
.stage-showcase .stages-cta{ margin-top:16px; }
.stage-showcase .btn-black{
  display:inline-block; 
  background:#000; 
  color:#fff; 
  text-decoration:none;   /* sin subrayado */
  border-radius:10px; 
  padding:8px 12px; 
  font-size: 19px;
  font-weight:800; 
  letter-spacing:.2px;
}
.stage-showcase .btn-black:hover{ opacity:.9; }

/* Responsive */
@media (max-width:840px){
  .stage-showcase .stages-tabs{ grid-auto-flow:row; width:100%; }
  .stage-showcase .stages-tabs label{ text-align:center; }
}


/* 2) Solapas (Primaria, ESO, Bachillerato, FP, FPE) un punto más grandes */
.stage-showcase .stages-tabs label{
  font-size: 1.05rem;                /* +1 punto aprox. */
  line-height: 1.2;
}

/* Opcional: en móvil mantenlas legibles */
@media (max-width: 840px){
  .stage-showcase .stages-tabs label{ font-size: 1.06rem; }
}




/* =================================================*/
/* ===== EJEMPLOS ANTES / DESPUÉS  Pagina Wcag =====*/
/* =================================================*/

  /* Scope a este bloque para evitar colisiones */
  #acc-examples{
    --accent:#86efac; --accent-2:#a7f3d0; --ink:#0f172a; --muted:#475569;
    --line:#e5e7eb; --card:#fff; --radius:14px;
  }
  #acc-examples .container{max-width:1280px;margin:0 auto;padding:0 1rem}
  #acc-examples h2{margin:0 0 .25rem;line-height:1.2}
  #acc-examples .lead{margin:0 0 1rem;color:var(--muted)}

  /* Grid de tarjetas */
  #acc-examples .cards{
    display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);
  }
  @media (max-width:1000px){ #acc-examples .cards{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ #acc-examples .cards{grid-template-columns:1fr;} }

  /* Tarjeta */
  #acc-examples .card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 6px 16px rgba(2,6,23,.06);
    padding:16px;display:flex;flex-direction:column;gap:.5rem;
    transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }
  #acc-examples .card:hover{
    transform:translateY(-3px); box-shadow:0 14px 28px rgba(2,6,23,.12); border-color:rgba(2,6,23,.12);
  }

  /* Badges, títulos y bloques antes/después */
  #acc-examples .kicker{
    display:inline-block;margin-bottom:.25rem;padding:.18rem .55rem;border-radius:999px;
    background:var(--accent);color:#000;font-weight:700;font-size:.8rem;letter-spacing:.01em
  }
  #acc-examples .card h3{margin:.1rem 0 .2rem;line-height:1.25;color:var(--ink);font-size:1.06rem}
  #acc-examples .before-after{display:grid;grid-template-columns:1fr;gap:.35rem;margin:.15rem 0 .4rem}
  #acc-examples .ba{
    background:#f8fafc;border:1px dashed var(--line);border-radius:10px;padding:.55rem .65rem
  }
  #acc-examples .ba strong{
	  display:block;
	  margin-bottom:.12rem;
	  color:#0f172a;
      font-size:18px
}
  #acc-examples .ba p{margin:0;color:#334155}

  /* Botones de descarga */
  #acc-examples .btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
  #acc-examples .btn{
    display:inline-flex;
	align-items:center;gap:.4rem;
	padding:.45rem .75rem;
	border-radius:.6rem;
    background:var(--accent);color:#000;
	text-decoration:none;
	font-weight:700;
	font-size:19px;
    border:1px solid rgba(2,6,23,.06);
    transition:transform .12s ease,
    box-shadow .2s ease,background .2s ease
  }
  #acc-examples .btn:hover{ background:var(--accent-2); transform:translateY(-1px); box-shadow:0 10px 22px rgba(2,6,23,.1) }
  #acc-examples .btn:focus-visible{ outline:3px solid rgba(134,239,172,.45); outline-offset:2px; }



/* ===============================================================*/
/* ===== COMO HACEMOS UN INFORME - Página Informe de Lectura ===== */
/* ===============================================================*/


.proceso {
  margin-block: 32px;
}

.proceso h2 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin: 0 0 16px;
}

/* ===== Lista de pasos ===== */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: paso;
}

.steps li {
  position: relative;
  padding: 16px 16px 16px 60px; /* más espacio a la izquierda */
  margin: 0 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

/* ===== Fondo verde para pasos 1, 2 y 3 ===== */
.steps li:nth-child(-n + 3) {
  background: #edf7f3;              /* verde MUY suave */
  border-color: #0f766e;            /* borde verde */
}

/* ===== Círculo numerado ===== */
.steps li::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  left: 16px;               /* centrado respecto al nuevo padding */
  top: 16px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

/* ===== Encabezado del paso ===== */
.step-head {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* ===== Badge corregido: VERDE ===== */
.badge {
  font-size: 12px;
  background: #d1fae5;   /* verde suave */
  color: #065f46;         /* verde corporativo más oscuro */
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid #6ee7b7; /* borde verde */
}

/* ===== Viñetas normales ===== */
.bullets {
  margin: 8px 0 0 16px;
}

.bullets li {
  margin: 2px 0;
}

/* ===== Lista con ticks ===== */
.ticks {
  margin: 8px 0 0 16px;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 22px;
  margin: 4px 0;
}

.ticks li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #0ea5e9;
}

/* ===== Details ===== */
details {
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0;
  background: #fafafa;
}

details > summary {
  cursor: pointer;
  font-weight: 600;
}

/* ===== Caja de plazos ===== */
.plazos {
  margin-top: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}

.plazos h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

/* ===== Botón ===== */
.btn {
  display: inline-block;
  margin-top: 8px;
  background: #1f6feb;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
}

/* ===== Modo oscuro ===== */
@media (prefers-color-scheme: dark) {
  .steps li {
    background: #0b1020;
    border-color: #263053;
  }

  /* Paso 1, 2 y 3 – versión verde en modo oscuro */
  .steps li:nth-child(-n + 3) {
    background: #0f2e26;
    border-color: #34d399;
  }

  .ticks li::before {
    color: #38bdf8;
  }

  details {
    border-color: #263053;
    background: #0f172a;
  }

  .plazos {
    background: #0f172a;
    border-color: #263053;
  }
}



/* ===============================================================*/
/* ===== DESCARGAR PDF - Página Informe de Lectura ===== */
/* ===============================================================*/

/* ===== 1. Variables Globales (Light Theme) ===== */
:root {
  --ink: #0f172a;
  --muted: #475569;
  --line: #e5e7eb;
  --bg: #f8fafc; /* Not used directly by .dl-sample anymore */
  --panel: #ffffff;
  --brand: #1f6feb;
  --ok: #10b981;
  --shadow: 0 12px 30px rgba(2, 6, 23, 0.08);
}

/* ===== 2. Estilos del Componente Principal (.dl-sample) ===== */
.dl-sample {
  /* Fondo y borde eliminados según lo solicitado */
  padding: 56px 20px;
}

.dl-sample .wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
  align-items: center;
  grid-template-columns: 1fr;
  color: var(--ink);
}

/* ===== 3. Mockup del Informe (.mock) ===== */
.mock {
  position: relative;
  height: 340px;
  display: grid;
  place-items: center;
}

.sheet {
  position: absolute;
  width: 340px;
  height: 230px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.sheet.back {
  transform: translate(-16px, -10px) rotate(-6deg);
  opacity: 0.8;
}

.sheet.mid {
  transform: translate(16px, 10px) rotate(6deg);
  opacity: 0.9;
}

.sheet.front {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 22px;
  text-align: center;
  background: linear-gradient(160deg, #ffffff 0, #eef2ff 100%);
}

.sheet.front h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.sheet.front p {
  margin: 6px 0 0;
  color: var(--muted);
}

/* 3.1. Cinta PDF en la esquina (.ribbon) */
.ribbon {
  position: absolute;
  top: 14px;
  right: -8px;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25);
}

.ribbon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  border: 6px solid transparent;
  border-top-color: #b91c1c;
}

/* 3.2. Sello “MUESTRA” (.stamp) */
.stamp {
  position: absolute;
  bottom: 18px;
  right: 18px;
  color: #1d4ed8;
  border: 2px dashed #60a5fa;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  transform: rotate(-12deg);
  background: #fff8;
}

/* ===== 4. Texto y CTA (.copy) ===== */
.copy h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 10px;
  /* CAMBIO SOLICITADO */
  font-weight: 800;
}

.copy .lead {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 62ch;
}

/* 4.1. Lista con Checks (.ticks) */
.ticks {
  list-style: none;
  padding: 0;
  margin: 8px 0 14px;
  display: grid;
  gap: 6px;
}

.ticks li {
  position: relative;
  padding-left: 26px;
}

.ticks li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}

/* 4.2. Fila de CTAs (.cta-row) */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 6px 0 8px;
}

/* 4.3. Botones (.btn) */
.btn {
  display: inline-block;
  text-decoration: none;
  background: var(--brand);
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  /* CAMBIO SOLICITADO */
  font-size: 19px;
  box-shadow: 0 10px 24px rgba(31, 110, 235, 0.24);
  transition: transform 0.08s ease, filter 0.2s ease;
}

.btn:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-block;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
}

.btn-ghost:hover {
  background: #f8fafc;
}

.note {
  font-size: 0.92rem;
  color: #64748b;
  font-style: italic;
  margin: 2px 0 8px;
}

/* 4.4. Meta y Tags (.meta, .pill) */
.meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill {
  font-size: 0.8rem;
  background: #e2e8f0;
  color: #0f172a;
  border-radius: 999px;
  padding: 4px 8px;
}

/* ===== 5. Media Queries Generales/Responsive ===== */
@media (min-width: 960px) {
  .dl-sample .wrap {
    grid-template-columns: 1fr 1.1fr;
  }
}

@media (max-width: 480px) {
  .mock {
    height: 280px;
  }
  .sheet {
    width: 300px;
    height: 200px;
  }
}

/* ===== 6. Dark Mode Opcional ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --panel: #0f172a;
    --line: #263053;
    --ink: #e5e7eb;
    --muted: #cbd5e1;
    --brand: #60a5fa;
    --ok: #34d399;
    --shadow: 0 12px 30px rgba(2, 6, 23, 0.55);
  }
  .dl-sample {
   
	  /* Eliminado el background del dark mode también, solo se mantiene el border-top-color */
    border-top-color: var(--line);
  }
  .btn-ghost {
    background: #0b1020;
    color: #e5e7eb;
    border-color: var(--line);
  }
  .sheet.front {
    background: linear-gradient(160deg, #0f172a 0, #111b3a 100%);
  }
  .stamp {
    background: #0b102088;
  }