/* =====================================================
   TIPOGRAFÍA GLOBAL · Roboto Condensed
   ===================================================== */

/* Importar familia con pesos necesarios */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

/* Fuente global */
body, button, input, textarea, select {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 24px;             /* equivalente a 18 pt */
  line-height: 1.6;
  color: #1f2937;              /* gris oscuro agradable */
}

/* Encabezados */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* Tamaños según tus valores convertidos de pt → px */
h1 {
  font-size: 47px;   /* 35 pt */
}

h2 {
  font-size: 39px;   /* 30 pt */
  font-weight: 400 !important;
}

h3 {
  font-size: 31px;   /* 23 pt */
}

/* Párrafos */
p {
  font-size: 24px;   /* 18 pt */
  margin-bottom: 1.2rem;
}

/* ---- 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;
}


/* ==========================================
   PAGE: HOME
   ========================================== */



/* ========================================================== */
/* ====== CSS: STICKY KPI / TREGO STICKY KPIS ====== */
/* ========================================================== */

/* ====== 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;

  /* Tamaños individuales (si usas múltiples KPIs) */
  --kpi-size-1: var(--kpi-size);
  --kpi-size-2: var(--kpi-size);
  --kpi-size-3: var(--kpi-size);
}

/* ====== CONTENEDOR PRINCIPAL ====== */
.trego-sticky-kpis{
  position: sticky;
  top: var(--kpi-top);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: var(--kpi-gap);
  padding: var(--kpi-pad-y) var(--kpi-pad-x);
  border-radius: var(--kpi-radius);
  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 (para contenedores con fondo oscuro) */
.trego-sticky-kpis{
  --kpi-bg: #111827;    /* fallback (sin alpha) */
  --kpi-bg: #111827C7;    /* #111827 con ~78% de opacidad */
}

/* Separadores (no están en tu HTML, pero son parte del CSS base) */
.trego-sticky-kpis .sep{
  opacity: .45;
  padding: 0 .25rem;
  font-size: 1.25em;
  color: #FFFFFF;
}

/* ====== ESTILO DE CADA ETIQUETA (SPAN) ====== */
.trego-sticky-kpis span:not(.sep){
  font-weight: var(--kpi-weight);
  color: #0f172a;                /* fallback: texto negro */
  font-size: var(--kpi-size);
  white-space: nowrap;
}

/* Aplicación del color (verde en este caso) al primer span */
.trego-sticky-kpis span:nth-of-type(1){
  color: var(--kpi-color-1); /* #86efac (verde) */
  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; }
}

/* ====== MODO OSCURO OPCIONAL ====== */
@media (prefers-color-scheme: dark){
  :root{
    --kpi-bg: rgba(255,255,255,.08);
    --kpi-shadow: 0 6px 20px rgba(0,0,0,.25);
  }
}



  /* ====== BLOQUE “POR QUÉ ELEGIR TREGOLAM” ====== */
  
.benefits-section {
  padding: 4rem 2rem;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.benefit-box {
  background-color: #1f2937;
  color: #f9fafb;
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  transition: transform 0.3s ease;
}

.benefit-box:hover {
  transform: translateY(-6px);
}

.benefit-number {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  line-height: 2rem;
  margin-bottom: 1rem;
}

.benefit-box h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

.benefit-box p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}


/* ===== Ejemplos de Documentación ===== */
.trego-examples {
  padding: 4rem 2rem;
  background: #f9fafb;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.example-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.example-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.example-card ul {
  list-style: disc inside;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.95rem;
  color: #374151;
}

.example-card table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}
.example-card th,
.example-card td {
  border: 1px solid #e5e7eb;
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.example-card th {
  background: #f3f4f6;
  font-weight: 600;
}

.tag {
  font-size: 0.8rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  display: inline-block;
}

/* ====== TIMELINE · CÓMO TRABAJAMOS ====== */
:root{
  --proc-maxw: 1200px;
  --ink: #0f172a;          /* títulos */
  --muted: #374151;        /* texto */
  --track: #e5e7eb;        /* línea */
  --dot: #0f172a;          /* punto */
  --num: #6b7280;          /* número */
  --h2: clamp(22px, 1.2vw + 1rem, 36px);
  --h3: clamp(16px, .55vw + .8rem, 20px);
  --p: clamp(15px, .6vw + .6rem, 18px);
}

.trego-process{ padding: 3.5rem 1.25rem; }
.trego-process .container{ max-width: var(--proc-maxw); margin: 0 auto; }
.process-title{
  font-size: var(--h2); line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 2rem;
}

/* GRID horizontal: una fila si cabe; si no, se envuelve en varias */
.process-grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: clamp(22px, 2vw, 32px);
  list-style: none; margin: 0; padding: 48px 0 0; /* 48px deja sitio al track/puntos */
  position: relative;
}

/* Línea continua detrás de los puntos */
.process-grid::before{
  content:""; position: absolute; top: 24px; left: 0; right: 0;
  height: 3px; background: var(--track); border-radius: 2px;
}

/* Cada paso */
.process-step{
  position: relative; color: var(--muted);
}

/* Número sobre el punto */
.process-step::before{
  content: attr(data-step);
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  font-size: .9rem; font-weight: 600; color: var(--num);
}

/* Punto en la línea */
.process-step::after{
  content:""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; background: var(--dot);
  box-shadow: 0 0 0 6px #fff; /* halo blanco sutil para despegar del track */
}

/* Textos */
.process-step h3{
  margin: 40px 0 8px; /* baja debajo de los puntos */
  font-size: var(--h3); font-weight: 800; color: var(--ink); line-height: 1.25;
}
.process-step p{
  margin: 0; font-size: var(--p); color: var(--muted);
}

/* ====== Responsive ====== */
/* Tablets: permite envolverse a 2 filas si no entra en una sola */
@media (max-width: 1100px){
  .process-grid{ grid-auto-columns: minmax(260px, 1fr); row-gap: 2.25rem; }
}

/* Móvil: timeline vertical con línea a la izquierda */
@media (max-width: 700px){
  .process-grid{
    grid-auto-flow: row;
    grid-auto-rows: auto;
    grid-auto-columns: unset;
    padding-top: 0;
  }
  .process-grid::before{
    top: 0; bottom: 0; width: 3px; left: 10px; right: auto; height: auto;
  }
  .process-step{
    padding-left: 36px; margin-left: 10px;
  }
  .process-step::before{
    left: 0; transform: none; top: 0; /* número al lado del punto */
  }
  .process-step::after{
    left: 10px; transform: translateX(-50%); top: .9rem;
  }
  .process-step h3{ margin-top: 0; }
}
/* ==== FIX TIMELINE: color puntos/números + línea completa ==== */

/* 1) Colores de puntos y números (tu naranja) */
.trego-process {
  --dot: #86efac;   /* color del punto */
  --num: #86efac;   /* color del número */
  --track: #e5e7eb; /* línea */
}

/* 2) Asegurar números visibles y bien posicionados */
.process-step::before{
  color: var(--num);
  top: -14px;           /* más arriba para que no “choque” con el punto */
  z-index: 2;           /* por encima del track y del punto */
  background: transparent;
}

/* 3) Punto con el nuevo color */
.process-step::after{
  background: var(--dot);
  box-shadow: 0 0 0 6px #fff; /* halo blanco para despegar del track */
  z-index: 1;
}

/* 4) Hacer que la línea alcance el centro del primer y último paso */
.process-grid{
  /* definimos el gap como variable para calcular el “medio gap” */
  --g: clamp(22px, 2vw, 32px);
  gap: var(--g);
  padding-top: 48px;
}

/* extendemos la línea media-gap hacia cada lado */
.process-grid::before{
  left: calc(var(--g) / -2);
  right: calc(var(--g) / -2);
}

/* Por si el contenedor padre recorta, evitamos “clips” accidentales */
.trego-process .container{ overflow: visible; }

/* extra margen si tu .container tiene padding grande */
@media (min-width: 901px){
  .process-grid::before{ left: calc(var(--g) / -2 - 16px); right: calc(var(--g) / -2 - 16px); }
}

/* CTA TEXTO NEGRO :::::::::::: */
.cta-texto-negro,
.cta-texto-negro p,
.cta-texto-negro span,
.cta-texto-negro h1,
.cta-texto-negro h2,
.cta-texto-negro h3,
.cta-texto-negro h4,
.cta-texto-negro h5,
.cta-texto-negro h6 {
  color: #000 !important;
}

/* ===== INTERACCIÓN TIMELINE: hover/focus/activo ===== */
.trego-process{
  --active: #86efac;                    /* color activo (números y punto) */
  --active-bg: rgba(247,148,104,.08);   /* fondo suave del paso activo */
  --active-glow: rgba(247,148,104,.28); /* halo alrededor del punto */
}

/* Que los pasos acepten foco con teclado (si el HTML no lo trae) */
.process-step{ outline: none; border-radius: 12px; transition: background .2s ease, transform .15s ease; }

/* Estado interactivo (hover o focus dentro) y estado fijo (.is-active) */
.process-step:is(:hover,:focus-within),
.process-step.is-active{
  background: var(--active-bg);
  transform: translateY(-2px);
}

/* Cambios de color en título/texto cuando está activo */
.process-step:is(:hover,:focus-within) h3,
.process-step.is-active h3{ color: var(--active); }

.process-step:is(:hover,:focus-within) p,
.process-step.is-active p{ color: #1f2937; } /* un poco más contrastado */

/* Punto y número “encendidos” con halo */
.process-step:is(:hover,:focus-within)::after,
.process-step.is-active::after{
  background: var(--active) !important;
  box-shadow: 0 0 0 6px #fff, 0 0 0 10px var(--active-glow);
}

.process-step:is(:hover,:focus-within)::before,
.process-step.is-active::before{
  color: var(--active) !important;
  font-weight: 700;
}

/* Accesibilidad: foco visible para teclado */
.process-step:focus{
  box-shadow: 0 0 0 3px rgba(247,148,104,.35);
}

/* Respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce){
  .process-step{ transition: none; }
}


/* ====== METRICS DASHBOARD (mockup) ====== */
/* ===== Impact Wheel (corregido) ===== */
: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);
}

.trego-impact{padding:3.5rem 1.25rem}
.trego-impact .container{max-width:1100px;margin:0 auto}
.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)}

.impact-wheel{
  position:relative;background:var(--soft);border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);padding:clamp(28px,4vw,40px);
  min-height:560px;overflow:visible;
}

/* Capas */
.wheel-link{position:absolute;z-index:0;pointer-events:none;opacity:.5}
.wheel-core {position:absolute;z-index:1}
.wheel-node {position:absolute;z-index:2}

/* Núcleo visible (no lo tapan las tarjetas) */
.wheel-core{
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(200px,26vw,260px); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(closest-side, #fff 60%, rgba(247,148,104,.08) 61%, rgba(247,148,104,.08) 66%, transparent 67%),
    #fff;
  border:2px solid var(--line);
  box-shadow:0 8px 26px rgba(0,0,0,.06);
  display:grid;place-items:center;text-align:center;padding:18px;
}
.wheel-core .core-kicker{
  display:inline-block;background:rgba(247,148,104,.12);color:var(--accent);
  border:1px solid rgba(247,148,104,.25);border-radius:999px;padding:.18rem .55rem;
  font-weight:700;font-size:.8rem;margin-bottom:.25rem
}
.wheel-core strong{display:block;font-size:clamp(18px,1vw + .9rem,26px);color:var(--ink)}
.wheel-core em{display:block;color:#64748b;font-style:normal;font-size:.95rem}

/* Tarjetas */
.wheel-node{
  width:clamp(260px,28vw,320px);
  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;
}
.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)}

/* Posiciones (triángulo) */
.node-1{ top:22px; left:50%; transform:translateX(-50%); }
.node-2{ bottom:22px; left:22px; }
.node-3{ bottom:22px; right:22px; }

/* Conectores: anclados al centro del wheel y rotados */
.wheel-link{
  left:50%; top:50%; transform:translate(-50%,-50%) rotate(var(--angle,0deg));
  width:var(--len,300px); height:3px; background:var(--line); transform-origin:left center;
}
.wheel-link::after{
  content:""; position:absolute; right:-8px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 6px #fff;
}

/* Longitudes/ángulos de cada conector (ajustables) */
.wheel-link-1{ --angle:-90deg; --len:min(28vw,280px); }  /* hacia nodo superior */
.wheel-link-2{ --angle:205deg; --len:min(32vw,340px); }  /* abajo-izquierda */
.wheel-link-3{ --angle:-25deg; --len:min(32vw,340px); }  /* abajo-derecha */

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

/* Responsive: en móvil se apilan y ocultamos conectores */
@media (max-width:860px){
  .impact-wheel{padding:18px;min-height:unset}
  .wheel-core{position:static;transform:none;margin:0 auto 14px;width:100%;max-width:520px;border-radius:18px;aspect-ratio:auto}
  .wheel-node{position:static;width:100%;margin:10px 0 0}
  .wheel-link{display:none}
}
/* === Impact Wheel · Fix: alineado + hover robusto === */

/* 0) Capas y conectores no clicables */
.impact-wheel{ position: relative; }
.impact-wheel .wheel-link{ z-index:0; pointer-events:none; }
.impact-wheel .wheel-core { z-index:1; }
.impact-wheel .wheel-node { z-index:2; }

/* 1) Misma altura para las 3 tarjetas */
:root{ --node-h: 360px; } /* ajusta si necesitas más/menos alto */
.impact-wheel .wheel-node{
  min-height: var(--node-h) !important;
  display: flex; flex-direction: column; justify-content: flex-start;
}

/* 2) Alineación superior (todos al mismo top) */
.impact-wheel .node-1,
.impact-wheel .node-2,
.impact-wheel .node-3{
  top: 24px !important;             /* mismos “tops” */
  bottom: auto !important;          /* anulamos cualquier bottom previo */
}

/* 3) Offsets horizontales conservando transform base por nodo */
.impact-wheel .wheel-node{
  --base-x: 0;                      /* desplazamiento X base por nodo */
  --hover-y: -6px;                  /* subida al hacer hover */
  transform: translate(var(--base-x), 0);  /* no pisa el X del nodo 1 */
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.impact-wheel .node-1{ left: 50% !important; --base-x: -50%; } /* centrado */
.impact-wheel .node-2{ left: 24px !important; }                /* izquierda */
.impact-wheel .node-3{ right: 24px !important; }               /* derecha */

/* 4) Hover/focus: elevación sin perder el translateX del nodo 1 */
.impact-wheel .wheel-node:hover,
.impact-wheel .wheel-node:focus-within{
  transform: translate(var(--base-x), var(--hover-y));
  border-color: rgba(247,148,104,.45);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  background: #fffdfb;
  outline: none;
}

/* 5) Núcleo un poco más abajo para que siempre se vea */
.impact-wheel .wheel-core{ top: 64% !important; }

/* 6) Conectores cortos y diagonales (salida desde el centro del wheel) */
.impact-wheel .wheel-link{
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle,0deg));
  width: var(--len, 300px); height: 3px;
  background: #e5e7eb;
  transform-origin: left center;
  opacity: .5;
}
.impact-wheel .wheel-link::after{
  content:""; position:absolute; right:-8px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:#86efac; box-shadow:0 0 0 6px #fff;
}
/* Ajusta longitudes/ángulos si quieres afinar el “enganche” visual */
.impact-wheel .wheel-link-1{ --angle:-90deg;  --len:min(28vw, 320px); }
.impact-wheel .wheel-link-2{ --angle:-160deg; --len:min(34vw, 360px); }
.impact-wheel .wheel-link-3{ --angle:-20deg;  --len:min(34vw, 360px); }

/* 7) Móvil: se apilan y ocultamos conectores */
@media (max-width: 860px){
  .impact-wheel{ padding: 18px; min-height: unset; }
  .impact-wheel .wheel-core{ position: static; transform:none; margin:0 auto 14px; width:100%; max-width:520px; border-radius:18px; aspect-ratio:auto; }
  .impact-wheel .wheel-node{ position: static; transform:none; width:100%; margin:10px 0 0; }
  .impact-wheel .wheel-link{ display:none; }
}

/* ===== Últimos trabajos / Qué estamos haciendo ahora ===== */
:root{
  --ink:#0f172a; --muted:#475569; --line:#e5e7eb; --card:#fff; --soft:#f9fafb;
  --accent:#86efac; --ok:#16a34a; --warn:#f59e0b; --info:#2563eb;
  --radius:14px;
}

.trego-now{padding:3rem 1.25rem;background:#fff}
.trego-now .container{max-width:1100px;margin:0 auto}

.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:.8rem;vertical-align:middle
}

.now-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,20px)}
.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
}
@media (max-width:900px){ .now-card{grid-column:span 6} }
@media (max-width:600px){ .now-card{grid-column:1 / -1} }

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

.now-head{display:flex;gap:.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.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-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}

.now-h3{margin:.2rem 0 0;font-size:1.05rem;line-height:1.3;font-weight:800;color:var(--ink)}
.now-meta{margin:0;color:var(--muted);font-size:.95rem}

.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}

.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}

/* Fondo suave opcional del bloque */
.trego-now{background:var(--soft)
}

/* ==== Últimos trabajos · Tarjetas oscuras ==== */
: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::::::: */
.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;
}

/* METER EL BACKGROUND DE DECORACION - CUADRADITOS- DEBAJO DE LAS TARJETAS */
/* ROW con la imagen de fondo (añade la clase extra 'cluster-row' a esa fila) */
.vc_row.cluster-row,
.wpb_row.cluster-row{
  background-repeat: no-repeat !important;

  /* Tamaño de la imagen (elige 1 de estas líneas y comenta las otras) */
  background-size: clamp(280px, 35vw, 560px) auto !important; /* fluido recomendado */
  /* background-size: auto !important;                   /* respeta tamaño original */
  /* background-size: 520px auto !important;             /* ancho fijo ejemplo */

  /* POSICIÓN anclada al borde derecho del contenedor centrado (1200px) */
  background-position:
    right calc((100vw - 1200px) / 2)   /* offset desde el borde derecho del viewport
                                          igual al margen exterior del contenedor */
    bottom 0 !important;
}
 
 
 
  /* HOW TO:::::::::::::::::::::::::: */

/* =========================================================
   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 — */
/* —— 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: 6px;              /* 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);
  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: 14px;            /* “bajar” la etiqueta como pediste */
  padding: 6px 10px;
  border-radius: 999px;
  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:.55rem .9rem; border-radius:999px;
  background:#86efac; color:#0f172a; font-weight:800; 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;
}

/* === TOGGLE · Chips/stikys: separación y layout === */
#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;
}



/* =============================================
   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{
  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 */
#cluster-bifurcacion .cta{
  margin-top:6px; display:inline-flex; align-items:center; gap:8px;
  color:var(--ink); font-weight:800; text-decoration:underline;
}
#cluster-bifurcacion .cta::after{ content:"\203A"; font-size:1.1rem; line-height:1 }

/* Accesibilidad: foco visible */
#cluster-bifurcacion .card a:focus-visible{
  outline:3px solid var(--ring); border-radius:14px;
}



/* ===== 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:.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); }




/* ===== TARJETA DESARROLLO DE CONTENIDOS SEPE Y FP - TARJETAS BLANCAS - CLUSTER ===== */

#cluster-elearning{
  --brand:#059669;           /* Verde principal */
  --ink:#0f172a;             /* Texto principal */
  --muted:#475569;           /* Texto secundario */
  --bg:#ffffff;              /* Fondo tarjeta */
  --ring:rgba(5,150,105,.3); /* Focus visible */
}
#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);
}
#cluster-elearning .card-link{
  display:grid;
  grid-template-rows: auto auto 1fr auto;
  gap:10px;
  padding:18px;
  height:100%;
  text-decoration:none;
  color:inherit;
  position:relative;
}
#cluster-elearning .card-link::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(5,150,105,.08), rgba(5,150,105,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;
}



/* =========================================================================
   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: var(--tab-fz);
  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; 
}