/*
Theme Name: Teppimer
Theme URI: https://teppimer.es
Description: Tema a medida para Teppimer S.L. Basado en Kadence.
Author: VeyraLabs
Version: 6.8.40
Template: kadence
Text Domain: teppimer
*/

:root {
  --tp-bg:         #FFFFFF;
  --tp-bg-soft:    #FAF7F2;   /* crema tibia, no el gris verdoso del resto del sector */
  --tp-brand:      #235024;
  --tp-brand-deep: #163417;
  --tp-accent:     #C4122A;   /* fresa muestreada del rotulo de la furgoneta */
  --tp-accent-dk:  #9C0E21;   /* frambuesa, para los estados de hover */
  --tp-accent-tx:  #A50F22;   /* la misma fresa, un tono mas honda para texto pequeno (7,8:1) */
  --tp-arandano:   #2E4374;   /* azul arandano de la furgoneta, para el banner */
  --tp-mora:       #5B1A4E;
  --tp-ink:        #18231A;   /* verde casi negro: ella no quiere negro */
  --tp-ink-soft:   #63665C;   /* calido, 5,48:1 sobre la crema */
  --tp-line:       #EBE6DE;
  --tp-brand-soft: #E9F0E4;   /* superficie de recuadro: verde muy claro */
  /* Muestreados del PDF corporativo: la pagina 3 es 68% verde de marca, y las
     tarjetas de historia y clientes van en menta sobre ese verde. */
  --tp-menta:      #D5E1E1;   /* tarjetas sobre verde. 6,99:1 con el verde */
  --tp-verde-vivo: #57AF6F;   /* tarjeta destacada. SOLO fondo, nunca texto */
  --tp-sobre-verde:#C7D4C7;   /* texto secundario sobre verde. 6,09:1 */

  --tp-r:     8px;    /* las referencias premium van casi a escuadra */
  --tp-r-sm:  4px;
  --tp-r-xs:  2px;

  --tp-s1: .5rem;  --tp-s2: 1rem;   --tp-s3: 1.5rem;
  --tp-s4: 2.25rem; --tp-s5: 3.5rem;

  /* Tres alturas de respiro, no una sola: el ritmo depende de lo que hace cada
     seccion, no de una escala fija aplicada por igual a todo. */
  --tp-pad-sm: clamp(1.5rem, 2.6vw, 2.25rem);
  --tp-pad:    clamp(2.5rem, 4.5vw, 4rem);
  --tp-pad-lg: clamp(3.5rem, 6vw, 5.75rem);
  --tp-hdr: 96px;

  /* Seis pasos y ninguno mas. */
  --tp-t1: .78rem;                          /* rotulos. Suelo 12,5px */
  --tp-t2: .95rem;                          /* cuerpo pequeño */
  --tp-t3: 1.12rem;                         /* cuerpo */
  --tp-t4: clamp(1.5rem, 2.2vw, 1.95rem);   /* titular de bloque */
  --tp-t5: clamp(2.1rem, 3.6vw, 3.1rem);    /* titular de seccion */
  --tp-t6: clamp(2.8rem, 6vw, 5.2rem);      /* display */
  --tp-globo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
  --tp-shadow: 0 1px 2px rgba(28,34,32,.04), 0 8px 24px rgba(28,34,32,.05);
  --tp-shadow-h: 0 2px 6px rgba(28,34,32,.06), 0 16px 40px rgba(28,34,32,.10);
}

/* Guarda global: varios bloques sangran a proposito (width: calc(100% + 50vw)
   en heroes y banners) para que la foto llegue al borde de la ventana.
   Ponerle overflow-x:hidden a CADA seccion sangrante es fragil (mezclar
   overflow-x distinto de overflow-y en el mismo elemento hace que el eje
   "visible" pase a "auto" -- un scroll oculto que corta el contenido alto en
   vez de dejarlo fluir, tal y como paso en el hero de Our Products con texto
   largo). Se corta el desbordamiento horizontal aqui, una vez, en body. */
body { background: var(--tp-bg); color: var(--tp-ink); overflow-x: hidden; }

/* ============ Contenedores ============ */
.tp-wrap    { width: min(1320px, 94vw); margin-inline: auto; }
.tp-section { padding-block: var(--tp-pad); }
.tp-section--soft  { background: var(--tp-bg-soft); }
.tp-section--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

/* ---- Ritmo vertical ----
   Si dos secciones comparten fondo, nada las separa salvo el hueco: se juntan,
   porque el doble relleno abre un vacio muerto. Si el fondo cambia, el color ya
   hace de separador y basta con el relleno normal. El aire grande se reserva
   para los cierres. Asi el ritmo alterna 36 / 64 / 86 en vez de repetir 64. */
.tp-section + .tp-section { padding-top: var(--tp-pad-sm); }
.tp-section--soft + .tp-section:not(.tp-section--soft),
.tp-section:not(.tp-section--soft) + .tp-section--soft { padding-top: var(--tp-pad); }
.tp-section--tight + .tp-section { padding-top: var(--tp-pad); }

/* La ultima seccion cierra: entra con mas aire y no arrastra el de la anterior. */
.tp-section:last-of-type { padding-bottom: var(--tp-pad-lg); }
.tp-cta { padding-block: var(--tp-pad-lg) var(--tp-pad); }
.tp-section--soft + .tp-cta, .tp-cta:last-of-type { padding-bottom: var(--tp-pad-lg); }

/* Una barra de cierre es una conclusion, no un bloque mas de la lista. */
.tp-section:has(> .tp-wrap > .tp-barra) { padding-top: var(--tp-pad-lg); }

/* ============ Tipografia ============ */
/* Display en grotesca pesada, como el referente. La serif editorial hacia la web
   austera y anticuada; los titulos de seccion van en sans, no en serif. */
.tp-display {
  font-family: Poppins, 'Libre Franklin', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--tp-t6);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--tp-ink);
  margin: 0 0 var(--tp-s2);
}
.tp-h2 {
  font-family: 'Libre Franklin', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--tp-ink);
  margin: 0 0 var(--tp-s2);
}
.tp-h2--display {
  font-family: Poppins, 'Libre Franklin', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--tp-t5);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.06;
}
.tp-lead { font-size: 1.02rem; line-height: 1.62; color: var(--tp-ink-soft); max-width: 56ch; margin: 0 0 var(--tp-s3); }
.tp-body { color: var(--tp-ink-soft); line-height: 1.68; max-width: 62ch; margin: 0; font-size: .96rem; }
.tp-body + .tp-body { margin-top: var(--tp-s2); }

.tp-over {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tp-brand);
  background: var(--tp-accent);
  padding: .42em .85em;
  border-radius: var(--tp-r-xs);
  margin-bottom: var(--tp-s2);
}
.tp-over--plain { background: none; padding: 0; color: var(--tp-ink-soft); letter-spacing: .16em; }
.tp-hero__panel .tp-over, .tp-banner__text .tp-over, .tp-cta__inner .tp-over,
.tp-feature .tp-over { align-self: flex-start; width: fit-content; }

/* ============ Cabecera de seccion + controles ============ */
.tp-head { margin-bottom: var(--tp-s3); }
.tp-head__row { display: flex; align-items: center; justify-content: space-between; gap: var(--tp-s3); }
.tp-head__row .tp-h2 { margin-bottom: 0; }
.tp-ctrl { display: flex; gap: .5rem; flex-shrink: 0; }
.tp-ctrl button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--tp-line); background: #fff; color: var(--tp-ink);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.tp-ctrl button:hover { border-color: var(--tp-brand); }
.tp-ctrl button[data-dir="next"] { background: var(--tp-accent); border-color: var(--tp-accent); }
.tp-ctrl button[data-dir="next"]:hover { background: var(--tp-accent-dk); border-color: var(--tp-accent-dk); }
.tp-ctrl button svg { width: 16px; height: 16px; }
.tp-ctrl button:disabled { opacity: .35; cursor: default; }
.tp-link { font-size: .88rem; font-weight: 600; color: var(--tp-brand); text-decoration: none !important; white-space: nowrap; }
.tp-link:hover { color: var(--tp-brand-deep); }
.tp-link::after { content: " \2192"; }

/* ============ Botones ============ */
.tp-btn {
  display: inline-block; background: var(--tp-brand); color: #fff;
  text-decoration: none !important; font-size: .84rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .95em 1.7em; border: 1px solid var(--tp-brand); border-radius: var(--tp-r-xs);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tp-btn:hover { background: var(--tp-brand-deep); border-color: var(--tp-brand-deep); color: #fff; }
/* El boton "lima" heredaba el color de acento, asi que al pasar a fresa la home
   se quedaba con seis botones rojos. Beatriz pidio el verde como principal y el
   rojo solo para señalar. Pasa a ser el boton INVERSO: verde sobre fondo claro y
   blanco sobre los fondos verdes u oscuros, que es donde se usa de verdad. */
.tp-btn--lima { background: var(--tp-brand); border-color: var(--tp-brand); color: #fff; }
.tp-btn--lima:hover { background: var(--tp-brand-deep); border-color: var(--tp-brand-deep); color: #fff; }
.tp-cta__inner .tp-btn--lima,
.tp-hero-cta .tp-btn--lima,
.tp-banner--verde .tp-btn--lima,
.tp-franja .tp-btn--lima { background: #fff; border-color: #fff; color: var(--tp-brand); }
.tp-cta__inner .tp-btn--lima:hover,
.tp-hero-cta .tp-btn--lima:hover,
.tp-banner--verde .tp-btn--lima:hover,
.tp-franja .tp-btn--lima:hover { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }
.tp-btn--ghost { background: transparent; color: var(--tp-brand); }
.tp-btn--ghost:hover { background: var(--tp-brand); color: #fff; }
.tp-btn--light { background: #fff; color: var(--tp-brand); border-color: #fff; }
.tp-btn--light:hover { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-ink); }
.tp-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: var(--tp-s3); }

/* ============ Hero ============ */
.tp-hero { padding-block: var(--tp-s3); }
.tp-hero__box {
  display: grid; grid-template-columns: minmax(340px, 30%) 1fr;
  border-radius: var(--tp-r); overflow: hidden; background: var(--tp-bg-soft);
  min-height: 440px;
  min-height: max(440px, calc(100svh - var(--tp-hdr) - 2 * var(--tp-s3)));
}
.tp-hero__panel {
  background: var(--tp-accent);
  padding: clamp(1.75rem, 2.8vw, 2.9rem);
  display: flex; flex-direction: column; justify-content: center;
}
.tp-hero__panel .tp-over { background: var(--tp-ink); color: #fff; }
.tp-hero__panel .tp-display {
  color: var(--tp-ink);
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.tp-hero__panel p { font-size: 1rem; max-width: 34ch; }
.tp-hero__panel p { color: rgba(28,34,32,.78); font-size: .93rem; line-height: 1.6; margin: 0 0 var(--tp-s3); }
.tp-hero__media { position: relative; background: var(--tp-bg-soft); }
.tp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-hero__media .tp-ph { width: auto !important; height: auto !important; object-fit: contain !important;
  max-width: 30%; max-height: 45%; opacity: .10; position: absolute; inset: 0; margin: auto; }
@media (max-width: 1024px) {
  .tp-hero__box { grid-template-columns: 1fr; min-height: 0; }
  .tp-hero__media { min-height: 52vw; order: -1; }
  .tp-hero__panel { padding-block: clamp(1.75rem, 4vw, 2.5rem); }
}

/* ============ Tarjetas ============ */
.tp-card {
  background: #fff; display: block; color: inherit; position: relative;
  border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
a.tp-card, a.tp-card * { text-decoration: none !important; }
a.tp-card:hover { box-shadow: var(--tp-shadow-h); transform: translateY(-3px); border-color: transparent; }
.tp-card--vacia { border-color: transparent; background: transparent; pointer-events: none; }

.tp-card__media { aspect-ratio: 4/5; background: var(--tp-bg-soft); position: relative; overflow: hidden; }
.tp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-card__media--ph { display: grid; place-items: center; }
.tp-card__media img.tp-ph {
  width: auto !important; height: auto !important; object-fit: contain !important;
  max-width: 42%; max-height: 42%; opacity: .13;
}
.tp-card__body { padding: .9rem 1rem 1.1rem; }
.tp-card__title {
  font-family: 'Libre Franklin', system-ui, sans-serif; font-size: .93rem; font-weight: 600;
  line-height: 1.35; color: var(--tp-ink); margin: 0 0 .5rem; letter-spacing: -0.01em;
}
a.tp-card:hover .tp-card__title { color: var(--tp-brand); }
.tp-card__meta { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--tp-ink-soft); margin: 0; }
.tp-card__ref { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-ink-soft);
  margin: .55rem 0 0; padding-top: .55rem; border-top: 1px solid var(--tp-line); }

/* Etiquetas sobre la foto, como en el referente. */
.tp-tags { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .3rem; flex-wrap: wrap; z-index: 2; }
.tp-tag {
  font-size: .61rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .32em .62em; border-radius: 3px; background: var(--tp-accent); color: var(--tp-ink);
}
.tp-tag--oscura { background: var(--tp-brand); color: #fff; }

/* ============ Rejillas y carrusel ============ */
.tp-grid { display: grid; gap: 1.1rem; }
.tp-grid--6 { grid-template-columns: repeat(6, 1fr); }
.tp-grid--5 { grid-template-columns: repeat(5, 1fr); }
.tp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tp-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .tp-grid--6 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .tp-grid--6, .tp-grid--4, .tp-grid--5 { grid-template-columns: repeat(3, 1fr); } .tp-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tp-grid--6, .tp-grid--4, .tp-grid--5, .tp-grid--3 { grid-template-columns: repeat(2, 1fr); } }
/* 6/10: con un numero de tarjetas que no es multiplo de las columnas activas
   (p.ej. las 5 familias en tp-grid--3, o 10 productos en tp-grid--4 a tablet)
   la ultima quedaba sola y pegada a la izquierda. Se centra y se le da el
   ancho de una sola columna en vez de dejarla huerfana. */
@media (max-width: 900px) {
  .tp-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - .55rem); margin-inline: auto; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .tp-grid--4 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; max-width: calc(33.333% - .74rem); margin-inline: auto; }
}

/* Fila desplazable con anclaje: carrusel sin libreria. */
.tp-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding-bottom: .3rem;
}
.tp-rail::-webkit-scrollbar { display: none; }
.tp-rail > * { scroll-snap-align: start; }
@media (min-width: 1101px) { .tp-rail { grid-auto-columns: calc((100% - 5 * 1.1rem) / 6); } }

/* ============ Banners ============ */
.tp-banner {
  display: grid; grid-template-columns: 1.15fr .85fr;
  border-radius: var(--tp-r); overflow: hidden; background: var(--tp-bg-soft);
  border: 1px solid var(--tp-line);
}
.tp-banner--flip { grid-template-columns: .85fr 1.15fr; }
.tp-banner--flip .tp-banner__media { order: 2; }
.tp-banner__media { position: relative; background: var(--tp-bg-soft); min-height: 260px; display: grid; place-items: center; }
.tp-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-banner__media img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 34%; max-height: 44%; opacity: .11; }
.tp-banner__text { background: #fff; padding: clamp(1.6rem, 3vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
.tp-banner--verde .tp-banner__text { background: var(--tp-brand); }
/* 30/9: mismo verde de marca (#235024) que el panel de texto, no el fondo
   blanco de la pagina ni un segundo verde de contraste. Banner de un solo
   color solido. */
.tp-banner--verde .tp-banner__media { background: var(--tp-brand); }
.tp-banner--verde .tp-h2, .tp-banner--verde .tp-h2--display, .tp-banner--verde .tp-display { color: #fff; }
.tp-banner--verde .tp-body, .tp-banner--verde .tp-lead { color: rgba(255,255,255,.8); }

/* El titular de la banda se dimensionaba con el ancho de la VENTANA (2.9vw) pero
   vive dentro de una columna: en la fila de dos bandas el texto solo tiene 276px
   y "Productores de confianza" salia partido a mitad de palabra. Con cqi el
   tamano lo decide el contenedor, que es de lo que depende de verdad. */
.tp-banner__text { container-type: inline-size; }
.tp-banner__text .tp-h2--display { font-size: clamp(1.35rem, 7cqi, 2.4rem); }

/* Y en la fila de dos, la banda se apila: a 651px de ancho no caben imagen y
   texto uno al lado del otro sin estrujar ninguno de los dos. */
.tp-dobles .tp-banner, .tp-dobles .tp-banner--flip { grid-template-columns: 1fr; }
.tp-dobles .tp-banner--flip .tp-banner__media { order: 0; }
.tp-dobles .tp-banner__media { min-height: 0; min-width: 0; aspect-ratio: 16/9; overflow: hidden; }
.tp-dobles .tp-banner__media img:not(.tp-ph) { position: absolute; inset: 0; }
@media (max-width: 860px) {
  .tp-banner, .tp-banner--flip { grid-template-columns: 1fr; }
  .tp-banner__media { min-height: 46vw; order: 0 !important; }
}

.tp-dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 860px) { .tp-dobles { grid-template-columns: 1fr; } }

/* ============ Bloque texto/imagen ============ */
.tp-feature { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.75rem); align-items: center; }
.tp-feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
.tp-feature + .tp-feature { margin-top: var(--tp-pad); }
.tp-feature--flip .tp-feature__media { order: -1; }
.tp-feature__media {
  aspect-ratio: 4/3; background: var(--tp-bg-soft); border-radius: var(--tp-r);
  position: relative; display: grid; place-items: center; overflow: hidden;
}
.tp-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-feature__media img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 32%; max-height: 42%; opacity: .11; }
@media (max-width: 900px) { .tp-feature { grid-template-columns: 1fr; } .tp-feature--flip .tp-feature__media { order: 0; } }

/* ============ Listas ============ */
.tp-list { list-style: none; padding: 0; margin: var(--tp-s3) 0 0; display: grid; gap: .55rem; }
.tp-list li { padding-left: 1.6rem; position: relative; color: var(--tp-ink-soft); font-size: .94rem; line-height: 1.5; }
.tp-list li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--tp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C2220' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.62rem no-repeat;
}

/* ============ Cifras ============ */
.tp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.tp-stat { background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm); padding: var(--tp-s3) var(--tp-s3) var(--tp-s4); }
.tp-section--soft .tp-stat { background: #fff; }
.tp-stat__n {
  display: block; font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: var(--tp-brand); letter-spacing: -0.03em;
}
.tp-stat__l { display: block; margin-top: .6rem; font-size: .84rem; line-height: 1.4; color: var(--tp-ink-soft); }
@media (max-width: 780px) { .tp-stats { grid-template-columns: repeat(2, 1fr); } }

/* ============ Sectores ============ */
.tp-sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.tp-sector {
  background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm);
  padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: .8rem;
}
.tp-sector__i { font-size: .7rem; font-weight: 700; color: var(--tp-ink); letter-spacing: .06em;
  background: var(--tp-accent); border-radius: 3px; padding: .25em .5em; }
.tp-sector__n { font-size: .96rem; font-weight: 600; color: var(--tp-ink); }
@media (max-width: 780px) { .tp-sectors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tp-sectors { grid-template-columns: 1fr; } }

/* ============ Banda de llamada ============ */
.tp-cta { padding-block: var(--tp-pad); }
.tp-cta__inner {
  background: var(--tp-brand); border-radius: var(--tp-r); color: #fff;
  padding: clamp(2rem, 4vw, 3.25rem); display: grid; grid-template-columns: 1.5fr auto;
  gap: var(--tp-s4); align-items: center;
}
.tp-cta__inner .tp-h2, .tp-cta__inner .tp-h2--display { color: #fff; }
.tp-cta__inner .tp-lead { color: rgba(255,255,255,.85); margin-bottom: 0; }
.tp-cta__inner .tp-over { background: var(--tp-accent); color: var(--tp-ink); }
@media (max-width: 860px) { .tp-cta__inner { grid-template-columns: 1fr; gap: var(--tp-s3); } }

/* ============ Timeline ============ */
.tp-time { display: grid; gap: .75rem; }
.tp-time__row {
  display: grid; grid-template-columns: 120px 1fr; gap: clamp(1rem, 3vw, 2.25rem);
  background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm);
  padding: var(--tp-s3) var(--tp-s4);
}
.tp-time__y { font-family: 'Libre Franklin', system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--tp-brand); line-height: 1.1; letter-spacing: -0.02em; }
.tp-time__t { font-weight: 600; color: var(--tp-ink); margin: 0 0 .3rem; font-size: 1rem; }
.tp-time__d { color: var(--tp-ink-soft); margin: 0; line-height: 1.6; max-width: 62ch; font-size: .94rem; }
@media (max-width: 700px) { .tp-time__row { grid-template-columns: 1fr; gap: .5rem; } }

/* ============ Certificaciones / rangos ============ */
.tp-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.tp-cert { background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm); padding: var(--tp-s3); }
.tp-cert__n { font-weight: 700; color: var(--tp-ink); font-size: 1rem; margin: 0 0 .45rem; letter-spacing: -0.01em; }
.tp-cert__n::before { content: ""; display: block; width: 1.9rem; height: 3px; background: var(--tp-accent); border-radius: 2px; margin-bottom: .7rem; }
.tp-cert__d { font-size: .88rem; color: var(--tp-ink-soft); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .tp-certs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tp-certs { grid-template-columns: 1fr; } }

/* ============ Contacto ============ */
.tp-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); }
.tp-contact dl { margin: 0; }
.tp-contact dt { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-ink-soft); margin-top: var(--tp-s3); }
.tp-contact dd { margin: .3rem 0 0; font-size: 1rem; color: var(--tp-ink); }
.tp-contact dd a { color: var(--tp-brand); text-decoration: none; }
@media (max-width: 800px) { .tp-contact { grid-template-columns: 1fr; } }

/* ============ Catalogo ============ */
.tp-migas { font-size: .76rem; letter-spacing: .04em; color: var(--tp-ink-soft); margin-bottom: var(--tp-s2); }
.tp-migas a { color: var(--tp-ink-soft); text-decoration: none; }
.tp-migas a:hover { color: var(--tp-brand); }
.tp-migas span { margin: 0 .45rem; color: var(--tp-line); }

.tp-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--tp-s4); }
.tp-filtro {
  font-size: .84rem; font-weight: 500; color: var(--tp-ink-soft); text-decoration: none !important;
  padding: .55em 1.05em; border: 1px solid var(--tp-line); border-radius: 999px; background: #fff;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.tp-filtro:hover { border-color: var(--tp-brand); color: var(--tp-brand); }
.tp-filtro.is-activo { background: var(--tp-brand); border-color: var(--tp-brand); color: #fff; }
.tp-filtro--volver { color: var(--tp-brand); font-weight: 700; }
.tp-filtro--volver::before { content: "\2190"; margin-right: .4rem; }

.tp-pag { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: var(--tp-s4); }
.tp-pag .page-numbers {
  min-width: 2.6rem; text-align: center; padding: .55em .85em; font-size: .88rem; border-radius: var(--tp-r-xs);
  border: 1px solid var(--tp-line); color: var(--tp-ink-soft); text-decoration: none !important; background: #fff;
}
.tp-pag .page-numbers:hover { border-color: var(--tp-brand); color: var(--tp-brand); }
.tp-pag .page-numbers.current { background: var(--tp-brand); border-color: var(--tp-brand); color: #fff; }
.tp-pag .dots { border-color: transparent; background: none; }

.tp-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.tp-ficha__img { aspect-ratio: 1/1; background: var(--tp-bg-soft); border-radius: var(--tp-r); display: grid; place-items: center; overflow: hidden; }
.tp-ficha__img img { width: 100%; height: 100%; object-fit: cover; }
.tp-ficha__img img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 34%; max-height: 36%; opacity: .13; }
.tp-datos { margin: var(--tp-s3) 0 0; }
.tp-datos dt { font-size: .67rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-ink-soft); padding-top: .85rem; }
.tp-datos dd { margin: .25rem 0 0; padding-bottom: .85rem; border-bottom: 1px solid var(--tp-line); color: var(--tp-ink); font-size: .96rem; }
@media (max-width: 860px) { .tp-ficha { grid-template-columns: 1fr; } }

/* ============ Cabecera ============ */
.site-header-wrap, .site-header-row { background: var(--tp-bg); }
.site-main-header-wrap { border-bottom: 1px solid var(--tp-line); }

/* Kadence sirve la cabecera en su propio contenedor de 1290px con relleno propio,
   asi que el logo no cuadraba con la retícula del contenido. */
.site-header-row-container-inner > .site-container {
  width: min(1320px, 94vw);
  max-width: none;
  padding-inline: 0;
}
/* El theme mod header_main_height no aplica; la altura se fija aqui y debe
   coincidir con --tp-hdr, del que depende la altura del hero. */
.site-main-header-inner-wrap { min-height: var(--tp-hdr); }
.site-header-main-section-left, .site-header-main-section-right { gap: .3rem; }
.site-branding img { max-height: 50px; }
.header-navigation .header-menu-container > ul > li.menu-item > a {
  position: relative; font-family: Poppins, sans-serif;
  font-size: .74rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tp-ink); padding-inline: 1rem;
}
.header-navigation .header-menu-container > ul > li.menu-item > a::after {
  content: ""; position: absolute; left: 1.15rem; right: 1.15rem; bottom: .45rem; height: 2px;
  background: var(--tp-accent); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.header-navigation .header-menu-container > ul > li.menu-item > a:hover::after,
.header-navigation .header-menu-container > ul > li.current-menu-item > a::after,
.header-navigation .header-menu-container > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.header-navigation .header-menu-container > ul > li.menu-item > a:hover,
.header-navigation .header-menu-container > ul > li.current-menu-item > a { color: var(--tp-brand); }

.header-navigation .header-menu-container ul ul.sub-menu {
  background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm);
  box-shadow: var(--tp-shadow); padding: .4rem 0; min-width: 264px;
}
/* Kadence fija width:200px en el enlace, asi que el fondo del hover no llegaba
   al borde de la caja; y pinta el item activo en casi negro. */
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item {
  border-bottom: 0;
}
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a {
  width: 100%; box-sizing: border-box;
  font-size: .87rem; font-weight: 400; color: var(--tp-ink-soft);
  padding: .68rem 1.1rem; border-left: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:focus-visible,
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item.current-menu-item > a,
.header-navigation .header-menu-container ul ul.sub-menu li.menu-item.current_page_item > a {
  color: var(--tp-brand); background: var(--tp-bg-soft); border-left-color: var(--tp-accent);
}
.header-navigation .header-menu-container > ul > li.menu-cta > a {
  background: var(--tp-brand); color: #fff; padding: .72em 1.5em; margin-left: 1rem;
  border-radius: var(--tp-r-xs); transition: background .18s ease;
}
.header-navigation .header-menu-container > ul > li.menu-cta > a::after { display: none; }
.header-navigation .header-menu-container > ul > li.menu-cta > a:hover { background: var(--tp-brand-deep); color: #fff; }
/* En su propia pagina, el color de "activo" dejaba el texto verde sobre verde. */
.header-navigation .header-menu-container > ul > li.menu-cta.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-cta.current_page_item > a { color: #fff; }
.header-navigation .header-menu-container > ul > li.menu-cta { margin-right: 1.4rem; }
/* 6/10: en portatiles tipicos (1280-1400px, por encima del punto de corte
   a movil de Kadence en 1024px) el menu de escritorio no cabia entero y
   "Experiencias educativas" se bajaba a una segunda fila. Se aprieta el
   espaciado solo en ese rango en vez de tocar el punto de corte a movil. */
@media (min-width: 1025px) and (max-width: 1400px) {
  .header-navigation .header-menu-container > ul > li.menu-item > a { padding-inline: .5rem; font-size: .66rem; letter-spacing: .08em; }
  .header-navigation .header-menu-container > ul > li.menu-cta > a { padding: .65em 1.1em; margin-left: .5rem; }
  .header-navigation .header-menu-container > ul > li.menu-cta { margin-right: .7rem; }
  .header-navigation .header-menu-container > ul > li.lang-item > a { padding-inline: .35rem; }
}
.header-navigation .header-menu-container > ul > li.lang-item > a {
  font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tp-ink-soft); padding-inline: .55rem;
}
.header-navigation .header-menu-container > ul > li.lang-item > a::after { display: none; }
.header-navigation .header-menu-container > ul > li.lang-item.current-lang > a { color: var(--tp-brand); }
.header-navigation .header-menu-container > ul { align-items: center; }

#mobile-drawer .drawer-inner, .popup-drawer .drawer-inner { background: var(--tp-bg); }
#mobile-drawer .drawer-header .drawer-toggle, .popup-drawer .drawer-header .drawer-toggle { color: var(--tp-brand); }
.mobile-navigation > ul > li { border-bottom: 1px solid var(--tp-line); }
.mobile-navigation > ul > li ul li { border-top: 1px solid var(--tp-line); }
.mobile-navigation ul li a { font-size: 1rem; color: var(--tp-ink); font-weight: 500; border-bottom: 0; }
.mobile-navigation ul li a:hover, .mobile-navigation ul li.current-menu-item > a { color: var(--tp-brand); }
.mobile-navigation ul ul.sub-menu li a { font-size: .92rem; color: var(--tp-ink-soft); padding-left: 1.6rem; }
.mobile-navigation ul li.menu-cta > a { color: var(--tp-brand); font-weight: 700; }
.mobile-navigation ul li.lang-item > a { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tp-ink-soft); }

/* ============ Pie ============ */
.tp-footer { background: var(--tp-bg-soft); border-top: 1px solid var(--tp-line); }
.tp-footer__cols {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.5fr; gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: var(--tp-s5) var(--tp-s4);
}
.tp-footer__t { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-ink); margin: 0 0 1.1rem; }
.tp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tp-footer a { color: var(--tp-ink-soft); text-decoration: none; font-size: .9rem; }
.tp-footer a:hover { color: var(--tp-brand); }
.tp-footer__social { display: grid; gap: .7rem; }
.tp-footer__social a { display: flex; align-items: center; gap: .6rem; }
.tp-footer__social svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--tp-brand); }
.tp-footer__news p { font-size: .9rem; color: var(--tp-ink-soft); line-height: 1.55; margin: 0 0 1rem; }
.tp-news { display: flex; gap: .5rem; flex-wrap: wrap; }
.tp-news input[type="email"] {
  flex: 1 1 190px; padding: .8em 1em; font-size: .9rem; font-family: inherit;
  border: 1px solid var(--tp-line); border-radius: var(--tp-r-xs); background: #fff; color: var(--tp-ink);
}
.tp-news input[type="email"]:focus { outline: 2px solid var(--tp-brand); outline-offset: -1px; }
.tp-footer__contacto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  border-top: 1px solid var(--tp-line); padding-block: var(--tp-s3);
}
.tp-footer__dato { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--tp-ink); }
.tp-footer__dato svg { width: 20px; height: 20px; color: var(--tp-brand); flex-shrink: 0; }
.tp-footer__dato a { color: var(--tp-ink); }
.tp-footer__legal {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--tp-line); padding-block: 1.1rem; font-size: .8rem; color: var(--tp-ink-soft);
}
.tp-footer__legal ul { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.tp-footer__legal a { font-size: .8rem; }
@media (max-width: 980px) { .tp-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .tp-footer__contacto { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tp-footer__cols { grid-template-columns: 1fr; } }

/* ============ Ajustes sobre Kadence ============ */
.home .entry-hero-container-inner, .home .page-title { display: none; }
.entry-content > .wp-block-html:first-child { margin-top: 0; }

/* ==========================================================
   Paginas de Empresa (v3) - segun wireframes del cliente
   ========================================================== */

.tp-i { width: 34px; height: 34px; color: var(--tp-accent-dk); stroke-width: 1.4; }
.tp-i--sm { width: 24px; height: 24px; }
.tp-i--lg { width: 52px; height: 52px; }

/* --- Migas --- */
.tp-crumbs { padding-block: 1.1rem; font-size: .82rem; color: var(--tp-ink-soft); }
.tp-crumbs a { color: var(--tp-ink-soft); text-decoration: none; }
.tp-crumbs a:hover { color: var(--tp-brand); }
.tp-crumbs .sep { margin: 0 .5rem; color: #C9CFC6; }
.tp-crumbs .act { color: var(--tp-accent-tx); }

/* --- Antetitulo de pagina interior --- */
.tp-eyebrow {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tp-accent-tx); margin-bottom: 1rem;
}
.tp-eyebrow--rule::before {
  content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--tp-accent); margin-bottom: .55rem;
}

/* --- Hero de pagina interior: texto + imagen a sangre a la derecha --- */
/* La seccion ocupa el ancho completo y el texto se alinea solo con la retícula,
   asi la imagen llega al borde de la ventana sin trucos de margenes negativos. */
/* 29/9: en Our Products (EN) el texto de la izquierda paso a llevar 4
   parrafos y se cortaba por abajo. Causa real: overflow-x:clip sin
   overflow-y explicito hace que el eje Y compute a "auto" (no "visible"),
   que no crece con el contenido -- se corta igual, solo que en silencio.
   El corte horizontal del sangrado se mueve al body (mas arriba); aqui ya
   no hace falta overflow de ningun tipo. */
.tp-ihero { background: var(--tp-bg); }
/* Grid con fila "auto" no medía bien la altura real cuando el texto se
   alargaba (Our Products EN, 4 parrafos): la imagen y el texto se
   descoordinaban y el texto largo se solapaba con la seccion siguiente.
   Con flex cada columna mide su propia altura de verdad, sin ese lio. */
.tp-ihero__grid { display: flex; align-items: center; }
.tp-ihero__text {
  flex: 0 0 44%; min-width: 0;
  padding-block: clamp(2.5rem, 5vw, 4.25rem);
  padding-right: clamp(1.5rem, 3.5vw, 3rem);
}
.tp-ihero__text .tp-display { margin-bottom: 1.1rem; font-size: clamp(2rem, 3.6vw, 3.1rem); }
.tp-ihero__text p { color: var(--tp-ink-soft); font-size: 1rem; line-height: 1.65; max-width: 44ch; margin: 0 0 1rem; }
.tp-ihero__media { position: relative; flex: 1 1 auto; min-height: 400px; background: var(--tp-bg-soft);
  width: calc(100% + 50vw);
  /* Sin esto, la altura la marca el ratio natural de la foto (puede pasar de
     800px y salirse de la pantalla): se limita para que el texto quede
     centrado en un bloque de tamaño razonable. */
  aspect-ratio: 5 / 4; max-height: 680px; }
.tp-ihero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-ihero__media img.tp-ph {
  width: auto !important; height: auto !important; object-fit: contain !important;
  max-width: 22%; max-height: 40%; opacity: .10;
  /* Se centra sobre la parte visible, no sobre el ancho desbordado. */
  position: absolute; top: 0; bottom: 0; left: 0; right: 50vw; margin: auto;
}
@media (max-width: 1024px) {
  .tp-ihero__grid { flex-direction: column; }
  .tp-ihero__text { flex-basis: auto; }
  .tp-ihero__media { min-height: 52vw; order: -1; }
  .tp-ihero__text { padding-block: clamp(2rem, 5vw, 3rem); padding-inline: 0; }
  /* El sangrado de escritorio (150% de ancho, -25vw de margen) se queda puesto
     por la regla base de arriba; en movil el grid es de una columna y esa
     anchura de sobra recorta la imagen por los dos lados. Se cancela aqui. */
  .tp-ihero__media { width: 100%; margin-left: 0; }
}
/* 6/10: hero sin foto (familias raiz, archivo de catalogo) — el texto ocupa
   todo el ancho en vez de dejar un hueco donde iba la imagen quitada. */
.tp-ihero__text--solo { flex-basis: 100%; padding-right: 0; text-align: center; }
.tp-ihero__text--solo p { max-width: 62ch; margin-inline: auto; }
.tp-ihero__text--solo .tp-barra-cat__n { justify-content: center; }

/* --- Rejilla de puntos con icono --- */
.tp-puntos { display: grid; gap: 1.4rem 2rem; margin-top: 1.75rem; }
.tp-puntos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-puntos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-punto { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.tp-punto p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--tp-ink-soft); }
.tp-punto strong { color: var(--tp-ink); font-weight: 600; }
.tp-puntos--sep .tp-punto + .tp-punto { border-left: 1px solid var(--tp-line); padding-left: 1.75rem; }
@media (max-width: 720px) {
  .tp-puntos--2, .tp-puntos--3 { grid-template-columns: 1fr; }
  .tp-puntos--sep .tp-punto + .tp-punto { border-left: 0; padding-left: 0; }
}

/* --- Lista de puntos en vertical con icono --- */
.tp-pasos-lista { display: grid; gap: 1.35rem; margin-top: 1.75rem; }
.tp-pasos-lista li { list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.tp-pasos-lista h3 { font-size: .84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tp-ink); margin: .15rem 0 .3rem; }
.tp-pasos-lista p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--tp-ink-soft); }

/* --- Banda de cifras con icono --- */
.tp-cifras { background: var(--tp-brand-soft); border-radius: var(--tp-r); padding: clamp(1.75rem, 3.5vw, 2.75rem) 1rem; }
.tp-cifras__t { text-align: center; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tp-accent-tx); margin: 0 0 2rem; }
.tp-cifras__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tp-cifra { text-align: center; padding: 0 1.25rem; }
.tp-cifra + .tp-cifra { border-left: 1px solid var(--tp-line); }
.tp-cifra .tp-i { margin: 0 auto .9rem; display: block; }
.tp-cifra__n { font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1; color: var(--tp-ink); letter-spacing: -0.03em; display: block; }
.tp-cifra__l { display: block; margin-top: .6rem; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tp-ink); }
.tp-cifra__d { margin: .5rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--tp-ink-soft); }
@media (max-width: 860px) {
  .tp-cifras__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .tp-cifra:nth-child(odd) { border-left: 0; }
  .tp-cifra:nth-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 460px) { .tp-cifras__grid { grid-template-columns: 1fr; } .tp-cifra { border-left: 0 !important; } }

/* --- Banner de llamada con imagen de fondo --- */
.tp-hero-cta { position: relative; border-radius: var(--tp-r); overflow: hidden; background: var(--tp-brand-deep); min-height: 220px;
  display: grid; place-items: center; text-align: center; padding: clamp(2.25rem, 5vw, 3.5rem) 1.5rem; }
.tp-hero-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-hero-cta img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important;
  max-width: 22%; max-height: 55%; opacity: .12; inset: 0; margin: auto; }
.tp-hero-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,52,23,.62), rgba(22,52,23,.78)); }
.tp-hero-cta > * { position: relative; }
.tp-hero-cta h2 { font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.08; color: #fff; margin: 0 0 .85rem; letter-spacing: -0.015em; }
.tp-hero-cta p { color: rgba(255,255,255,.86); margin: 0 auto 1.5rem; max-width: 56ch; font-size: .95rem; line-height: 1.6; }

/* --- Barra de cierre --- */
.tp-barra {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
  background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
}
.tp-barra__icono { width: 52px; height: 52px; border-radius: 50%; background: var(--tp-brand-soft); display: grid; place-items: center; }
.tp-barra__icono .tp-i { width: 26px; height: 26px; }
.tp-barra__t { margin: 0; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; color: var(--tp-ink); letter-spacing: -0.01em; }
.tp-barra__s { margin: .2rem 0 0; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; color: var(--tp-accent-tx); letter-spacing: -0.01em; }
@media (max-width: 800px) { .tp-barra { grid-template-columns: 1fr; text-align: left; gap: 1rem; } }

/* --- Linea de tiempo con imagen --- */
.tp-hist { position: relative; display: grid; gap: 2.25rem; }
/* left/width ajustados a ojo en el navegador para que la linea caiga en el centro de los circulos. */
.tp-hist::before { content: ""; position: absolute; left: 150px; top: .5rem; bottom: 3rem; width: 2px; background: var(--tp-line); }
/* El marcado real anida año+título+descripción en un único .tp-hito__c (no en
   columnas sueltas), asi que la rejilla tiene 3 hijos (icono, contenido,
   imagen) y no 4 — con 4 columnas declaradas el contenido caía en la pista de
   64px pensada para el icono y salia una columna de texto de una palabra por
   linea. */
.tp-hito { display: grid; grid-template-columns: 96px 1fr 300px; gap: 1.5rem; align-items: start; }
.tp-hito__y { font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: 1.85rem; color: var(--tp-accent-tx); line-height: 1; text-align: left; letter-spacing: -0.02em; display: block; margin-bottom: .3rem; }
.tp-hito__ico { width: 62px; height: 62px; border-radius: 50%; background: #F4F7E6; display: grid; place-items: center; position: relative; z-index: 1; }
.tp-hito__t { font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; color: var(--tp-ink); margin: .6rem 0 .55rem; }
.tp-hito__d { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--tp-ink-soft); }
.tp-hito__img { aspect-ratio: 3/2; border-radius: var(--tp-r-sm); overflow: hidden; background: var(--tp-bg-soft); display: grid; place-items: center; }
.tp-hito__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.18); }
.tp-hito__img img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 34%; max-height: 42%; opacity: .13; filter: none; }
@media (max-width: 1000px) {
  .tp-hist::before { display: none; }
  .tp-hito { grid-template-columns: 62px 1fr; gap: 1rem 1.25rem; }
  .tp-hito__y { grid-column: 2; text-align: left; padding-top: 0; font-size: 1.6rem; }
  .tp-hito__ico { grid-row: 1 / span 2; }
  .tp-hito__cont { grid-column: 2; }
  .tp-hito__img { grid-column: 1 / -1; }
}

/* --- Cierre de la linea de tiempo --- */
.tp-hist-fin {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; justify-content: center;
  border: 1px solid var(--tp-line); border-radius: var(--tp-r); padding: 1.1rem 1.75rem; margin-top: 2rem;
}
.tp-hist-fin p { margin: 0; font-size: .92rem; color: var(--tp-ink); line-height: 1.45; }

/* --- Pasos numerados con imagen --- */
.tp-ciclo { display: grid; gap: 1.1rem; }
.tp-paso { display: grid; grid-template-columns: 150px 1fr 46%; align-items: stretch;
  background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); overflow: hidden; }
.tp-paso__n { display: grid; place-items: center; font-family: 'Libre Franklin', system-ui, sans-serif;
  font-weight: 700; font-size: 3.1rem; color: var(--tp-accent-tx); letter-spacing: -0.04em; }
.tp-paso__c { background: #fff; padding: clamp(1.35rem, 2.4vw, 1.9rem); display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; align-content: center; }
.tp-paso__t { font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--tp-ink); margin: 0 0 .3rem; letter-spacing: -0.01em; }
.tp-paso__h { font-size: .82rem; font-weight: 700; color: var(--tp-accent-tx); margin: 0 0 .6rem; }
.tp-paso__d { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--tp-ink-soft); }
.tp-paso__img { background: var(--tp-bg-soft); position: relative; display: grid; place-items: center; min-height: 190px; }
.tp-paso__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-paso__img img.tp-ph { position: static; width: auto !important; height: auto !important; object-fit: contain !important; max-width: 26%; max-height: 42%; opacity: .12; }
@media (max-width: 1000px) {
  .tp-paso { grid-template-columns: 92px 1fr; }
  .tp-paso__img { grid-column: 1 / -1; min-height: 46vw; }
}
@media (max-width: 560px) { .tp-paso__c { grid-template-columns: 1fr; gap: .75rem; } }

/* --- Pildora de dato destacado --- */
.tp-pildora {
  display: inline-grid; grid-template-columns: auto auto 1px auto; gap: 1.1rem; align-items: center;
  background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); padding: 1rem 1.6rem; margin-top: 1.75rem;
}
.tp-pildora__n { font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--tp-ink); line-height: 1.1; }
.tp-pildora__n small { display: block; font-family: 'Libre Franklin', sans-serif; font-weight: 400; font-size: .78rem; color: var(--tp-ink-soft); letter-spacing: 0; text-transform: none; }
.tp-pildora__sep { background: var(--tp-line); align-self: stretch; }
.tp-pildora__d { font-size: .87rem; color: var(--tp-ink-soft); line-height: 1.45; }
.tp-pildora__d strong { color: var(--tp-ink); font-weight: 600; }
@media (max-width: 620px) { .tp-pildora { grid-template-columns: auto 1fr; } .tp-pildora__sep { display: none; } }

/* --- Rejilla de sectores con icono --- */
.tp-sect-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.tp-sect {
  background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); padding: 1.75rem 1.1rem 1.6rem; text-align: center;
  transition: background .2s ease, transform .2s ease;
}
.tp-sect:hover { background: #F4F7E6; transform: translateY(-3px); }
.tp-sect .tp-i { margin: 0 auto 1.1rem; display: block; }
.tp-sect__t { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-ink); margin: 0 0 .55rem; }
.tp-sect__d { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--tp-ink-soft); }
@media (max-width: 1100px) { .tp-sect-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .tp-sect-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Frase separadora con hoja --- */
.tp-frase { text-align: center; padding-block: clamp(2rem, 4vw, 3rem); }
.tp-frase__hoja { color: var(--tp-accent-dk); display: grid; place-items: center; margin-bottom: 1.25rem; }
.tp-frase__hoja::before, .tp-frase__hoja::after { content: ""; display: block; }
.tp-frase p { margin: 0 auto; max-width: 62ch; font-size: 1.02rem; line-height: 1.6; color: var(--tp-ink-soft); }
.tp-frase strong { color: var(--tp-ink); font-weight: 700; }
.tp-frase__linea { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.tp-frase__linea::before, .tp-frase__linea::after { content: ""; height: 1px; background: var(--tp-line); }

/* --- Imagen con tarjeta verde superpuesta --- */
.tp-imgcard { position: relative; }
.tp-imgcard__media { aspect-ratio: 4/3; border-radius: var(--tp-r); overflow: hidden; background: var(--tp-bg-soft); display: grid; place-items: center; }
.tp-imgcard__media img { width: 100%; height: 100%; object-fit: cover; }
.tp-imgcard__media img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 30%; max-height: 38%; opacity: .11; }
.tp-imgcard__nota {
  position: absolute; left: 8%; right: 4%; bottom: -1px; transform: translateY(28%);
  background: var(--tp-brand-deep); color: #fff; border-radius: var(--tp-r-sm);
  padding: 1.35rem 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center;
}
.tp-imgcard__nota .tp-i { color: var(--tp-accent); }
.tp-imgcard__nota p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.8); line-height: 1.5; }
.tp-imgcard__nota strong { display: block; color: #fff; font-size: 1rem; font-weight: 700; margin: .15rem 0; }
@media (max-width: 900px) { .tp-imgcard__nota { position: static; transform: none; margin-top: 1rem; left: 0; right: 0; } }

/* --- Rejilla de razones numeradas --- */
.tp-razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tp-razon { position: relative; background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); padding: 2.75rem 1.75rem 2rem; text-align: center; transition: background .2s ease, transform .2s ease; }
.tp-razon:hover { background: #F4F7E6; transform: translateY(-3px); }
.tp-razon__n { position: absolute; top: 1.1rem; left: 1.1rem; background: var(--tp-accent); color: var(--tp-ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; padding: .3em .55em; border-radius: 4px; }
.tp-razon .tp-i { margin: 0 auto 1.4rem; display: block; }
.tp-razon__t { font-size: 1.04rem; font-weight: 700; letter-spacing: -.005em; color: var(--tp-ink); margin: 0 0 .9rem; font-family: 'Libre Franklin', sans-serif; }
.tp-razon__t::after { content: ""; display: block; width: 34px; height: 2px; background: var(--tp-accent); margin: .9rem auto 0; border-radius: 2px; }
.tp-razon__d { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--tp-ink-soft); }
@media (max-width: 980px) { .tp-razones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tp-razones { grid-template-columns: 1fr; } }

/* --- Franja de confianza --- */
.tp-confian { border: 1px solid var(--tp-line); border-radius: var(--tp-r); padding: clamp(1.5rem, 3vw, 2.25rem); }
.tp-confian__t { text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--tp-ink); margin: 0 0 1.5rem; }
.tp-confian__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.tp-confian__hueco { aspect-ratio: 16/7; background: var(--tp-bg-soft); border-radius: var(--tp-r-xs); display: grid; place-items: center; }
.tp-confian__hueco span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tp-ink-soft); }
@media (max-width: 900px) { .tp-confian__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .tp-confian__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ Voz de marca ============ */
/* Poppins es la tipografia de los documentos de Teppimer. Se reserva a las
   versales muy espaciadas del logotipo: antetitulos y rotulos, nunca parrafos. */
.tp-eyebrow, .tp-over, .tp-cifra__l, .tp-stat__l, .tp-card__meta, .tp-card__ref,
.tp-tag, .tp-footer__t, .tp-datos dt, .tp-contact dt, .tp-cifras__t, .tp-sect__t,
.tp-pildora__n small, .tp-paso__h, .tp-crumbs,
.header-navigation .header-menu-container > ul > li.lang-item > a {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 300;
}
.tp-eyebrow { font-weight: 300; letter-spacing: .28em; font-size: .72rem; color: var(--tp-accent-tx); }
.tp-over { font-weight: 400; letter-spacing: .2em; }
.tp-tag { font-weight: 400; letter-spacing: .14em; }
.tp-cifra__l, .tp-stat__l, .tp-sect__t, .tp-footer__t, .tp-cifras__t { font-weight: 400; letter-spacing: .2em; }
.tp-card__meta, .tp-card__ref { font-weight: 400; letter-spacing: .16em; }
.tp-datos dt, .tp-contact dt { font-weight: 400; letter-spacing: .22em; }
.tp-paso__h { font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; }
.tp-crumbs { font-weight: 300; letter-spacing: .08em; }
.header-navigation .header-menu-container > ul > li.lang-item > a { font-weight: 400; letter-spacing: .18em; }

/* ==========================================================
   Catalogo (v5) - segun wireframes del cliente
   ========================================================== */

/* --- Bloque destacado con icono --- */
.tp-nota {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center;
  background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); padding: 1.2rem 1.5rem; margin-top: 1.75rem;
}
.tp-nota__t { margin: 0 0 .25rem; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--tp-ink); }
.tp-nota__d { margin: 0; font-size: .87rem; line-height: 1.5; color: var(--tp-ink-soft); }

/* --- Cabecera de seccion centrada --- */
.tp-centro { text-align: center; margin-bottom: 2.25rem; }
.tp-centro .tp-eyebrow { display: inline-block; }
.tp-centro .tp-eyebrow::before { margin-inline: auto; }
.tp-centro h2 { margin-bottom: .75rem; }
.tp-centro p { margin: 0 auto; max-width: 64ch; color: var(--tp-ink-soft); font-size: .95rem; }

/* --- Tarjetas de familia --- */
.tp-fams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 1100px) { .tp-fams { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .tp-fams { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .tp-fams { grid-template-columns: 1fr; } }
.tp-fam {
  display: flex; flex-direction: column; background: #fff; color: inherit;
  border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm); overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
a.tp-fam, a.tp-fam * { text-decoration: none !important; }
a.tp-fam:hover { box-shadow: var(--tp-shadow-h); transform: translateY(-3px); border-color: transparent; }
.tp-fam__media { aspect-ratio: 4/5; background: var(--tp-bg-soft); display: grid; place-items: center; overflow: hidden; }
.tp-fam__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-fam__media img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 38%; max-height: 42%; opacity: .13; }
.tp-fam__body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.tp-fam__body .tp-i { margin-bottom: .9rem; }
.tp-fam__t {
  font-family: 'Libre Franklin', sans-serif; font-weight: 700;
  font-size: 1.14rem; line-height: 1.18; letter-spacing: -.01em; color: var(--tp-ink); margin: 0 0 .6rem;
}
.tp-fam__d { margin: 0 0 1.25rem; font-size: .85rem; line-height: 1.55; color: var(--tp-ink-soft); }
.tp-fam__pie { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; }
.tp-fam__n { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 2rem; line-height: 1; color: var(--tp-accent-tx); letter-spacing: -.03em; display: block; }
.tp-fam__l { display: block; margin-top: .35rem; font-family: Poppins, sans-serif; font-weight: 400; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tp-ink-soft); }
.tp-flecha {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  border: 1px solid var(--tp-accent-tx); color: var(--tp-accent-tx);
  display: grid; place-items: center; transition: background .18s ease, color .18s ease;
}
.tp-flecha svg { width: 15px; height: 15px; }
a.tp-fam:hover .tp-flecha, a.tp-card:hover .tp-flecha { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-ink); }

/* --- Banda de total --- */
.tp-total {
  display: grid; grid-template-columns: auto auto 1px 1fr; gap: 1.75rem; align-items: center;
  background: var(--tp-brand-soft); border-radius: var(--tp-r); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 3rem);
}
.tp-total__ico .tp-i { width: 58px; height: 58px; }
.tp-total__n { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.8rem); line-height: 1; color: var(--tp-accent-tx); letter-spacing: -.04em; }
.tp-total__c { display: flex; align-items: baseline; gap: .9rem; }
.tp-total__l { font-family: 'Libre Franklin', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.15rem; color: var(--tp-ink); line-height: 1.15; }
.tp-total__l small { display: block; font-family: 'Libre Franklin', sans-serif; font-weight: 400; text-transform: none; font-size: .88rem; color: var(--tp-ink-soft); }
.tp-total__sep { background: var(--tp-line); align-self: stretch; }
.tp-total__d { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--tp-ink-soft); }
@media (max-width: 860px) { .tp-total { grid-template-columns: auto 1fr; gap: 1.25rem; } .tp-total__sep { display: none; } .tp-total__d { grid-column: 1 / -1; } }

/* --- Barra de recuento + buscador --- */
.tp-barra-cat {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center;
  background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); padding: 1rem 1.5rem; margin-bottom: 1.75rem;
}
.tp-barra-cat__n { display: flex; align-items: center; gap: .85rem; }
.tp-barra-cat__n b { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--tp-accent-tx); letter-spacing: -.03em; line-height: 1; }
.tp-barra-cat__n span { font-family: Poppins, sans-serif; font-weight: 400; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tp-ink); line-height: 1.4; max-width: 9ch; }
.tp-buscador { position: relative; min-width: 260px; }
.tp-buscador input {
  width: 100%; padding: .78em 1em .78em 2.6em; font: inherit; font-size: .88rem;
  border: 1px solid var(--tp-line); border-radius: var(--tp-r-xs); background: #fff; color: var(--tp-ink);
}
.tp-buscador input:focus { outline: 2px solid var(--tp-brand); outline-offset: -1px; }
.tp-buscador svg { position: absolute; left: .9em; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tp-ink-soft); pointer-events: none; }
@media (max-width: 800px) { .tp-barra-cat { grid-template-columns: 1fr; } .tp-buscador { min-width: 0; } }

/* --- Layout de catalogo con columna de filtros --- */
.tp-cat { display: grid; grid-template-columns: 232px 1fr; gap: clamp(1.5rem, 2.5vw, 2.25rem); align-items: start; }
@media (max-width: 980px) { .tp-cat { grid-template-columns: 1fr; } .tp-cat__lado { order: 2; } }

.tp-panel { border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm); overflow: hidden; }
.tp-panel + .tp-panel { margin-top: 1rem; }
.tp-panel__t { font-family: Poppins, sans-serif; font-weight: 400; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tp-accent-tx); margin: 0; padding: 1rem 1.1rem .8rem; }
.tp-panel__lista { list-style: none; margin: 0; padding: 0 0 .5rem; }
.tp-panel__lista a {
  display: flex; justify-content: space-between; gap: .75rem; align-items: baseline;
  padding: .62rem 1.1rem; font-size: .86rem; color: var(--tp-ink-soft); text-decoration: none !important;
  border-left: 2px solid transparent; transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.tp-panel__lista a:hover { background: var(--tp-bg-soft); color: var(--tp-brand); border-left-color: var(--tp-accent); }
.tp-panel__lista .is-activo a { background: var(--tp-brand-soft); color: var(--tp-brand); font-weight: 600; border-left-color: var(--tp-accent); }
.tp-panel__lista em { font-style: normal; font-size: .78rem; color: var(--tp-ink-soft); }
.tp-panel__cuerpo { padding: 0 1.1rem 1.25rem; }
.tp-panel__cuerpo p { margin: 0 0 1rem; font-size: .84rem; line-height: 1.55; color: var(--tp-ink-soft); }

/* Escalera de nivel actual */
.tp-nivel { list-style: none; margin: 0; padding: 0 1.1rem 1.25rem; display: grid; gap: .55rem; }
.tp-nivel li { position: relative; padding-left: 1.35rem; font-size: .84rem; color: var(--tp-ink-soft); }
.tp-nivel li::before { content: ""; position: absolute; left: 0; top: .38em; width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid var(--tp-line); }
.tp-nivel li::after { content: ""; position: absolute; left: .26rem; top: 1.15em; bottom: -.55rem; width: 1.5px; background: var(--tp-line); }
.tp-nivel li:last-child::after { display: none; }
.tp-nivel .is-aqui { color: var(--tp-brand); font-weight: 600; }
.tp-nivel .is-aqui::before { border-color: var(--tp-accent-dk); background: var(--tp-accent); }
.tp-nivel__sub { display: block; font-size: .78rem; color: var(--tp-accent-tx); font-weight: 600; margin-top: .1rem; }

.tp-ayuda { text-align: center; padding: 1.5rem 1.25rem; }
.tp-ayuda .tp-i { margin: 0 auto .9rem; display: block; }
.tp-ayuda__t { font-family: Poppins, sans-serif; font-weight: 400; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-brand); margin: 0 0 .7rem; line-height: 1.5; }
.tp-ayuda p { font-size: .84rem; line-height: 1.55; color: var(--tp-ink-soft); margin: 0 0 1.1rem; }
.tp-ayuda .tp-btn { font-size: .74rem; padding: .8em 1.3em; }

/* --- Herramientas sobre la rejilla --- */
.tp-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tp-tools__c { font-size: .84rem; color: var(--tp-ink-soft); }
.tp-tools__d { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--tp-ink-soft); }
.tp-select {
  font: inherit; font-size: .84rem; padding: .5em 2em .5em .8em; color: var(--tp-ink);
  border: 1px solid var(--tp-line); border-radius: var(--tp-r-xs); background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B736E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6em center; background-size: 14px;
}
.tp-vista { display: flex; gap: .35rem; }
.tp-vista button {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--tp-line); border-radius: var(--tp-r-xs); background: #fff; color: var(--tp-ink-soft); padding: 0;
}
.tp-vista button svg { width: 16px; height: 16px; }
.tp-vista button[aria-pressed="true"] { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-ink); }

/* --- Tarjeta de producto del catalogo --- */
.tp-cat .tp-card__body { display: flex; flex-direction: column; min-height: 92px; }
.tp-card__pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tp-card__fam { font-family: Poppins, sans-serif; font-weight: 400; font-size: .72rem; letter-spacing: .1em; color: var(--tp-accent-tx); }
.tp-card .tp-flecha { width: 28px; height: 28px; }
.tp-card .tp-flecha svg { width: 13px; height: 13px; }

/* Vista de lista */
.tp-grid.es-lista { grid-template-columns: 1fr; gap: .6rem; }
.tp-grid.es-lista .tp-card { display: grid; grid-template-columns: 92px 1fr; align-items: center; }
.tp-grid.es-lista .tp-card__media { aspect-ratio: 1/1; }
.tp-grid.es-lista .tp-card__body { min-height: 0; padding: .85rem 1.1rem; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
.tp-grid.es-lista .tp-card__title { margin: 0; }
.tp-grid.es-lista .tp-card__pie { margin-top: 0; }

/* --- Ficha de producto --- */
.tp-prod { display: grid; grid-template-columns: minmax(0, 47%) 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .tp-prod { grid-template-columns: 1fr; } }
.tp-galeria__main { position: relative; aspect-ratio: 4/5; background: var(--tp-bg-soft); border-radius: var(--tp-r-sm); display: grid; place-items: center; overflow: hidden; }
.tp-galeria__main img { width: 100%; height: 100%; object-fit: cover; }
.tp-galeria__main img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 34%; max-height: 34%; opacity: .13; }
.tp-galeria__et { position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-xs); padding: .45em .8em;
  font-family: Poppins, sans-serif; font-weight: 400; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-ink); }
.tp-galeria__et .tp-i { width: 14px; height: 14px; }
.tp-galeria__tiras { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: .6rem; }
.tp-galeria__t { aspect-ratio: 1/1; background: var(--tp-bg-soft); border: 1px solid var(--tp-line); border-radius: var(--tp-r-xs); display: grid; place-items: center; }
.tp-galeria__t--act { border-color: var(--tp-accent-dk); }
.tp-galeria__t img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tp-galeria__t img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 40%; max-height: 40%; opacity: .14; }
.tp-galeria__t .tp-i { color: #C9CFC6; width: 20px; height: 20px; }

.tp-prod__fam { font-family: Poppins, sans-serif; font-weight: 400; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tp-accent-tx); display: block; margin-bottom: .7rem; }
.tp-prod h1 { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.06; letter-spacing: -.022em; margin: 0 0 .9rem; color: var(--tp-ink); }
.tp-prod h1 + .tp-regla { width: 26px; height: 3px; border-radius: 2px; background: var(--tp-accent); margin-bottom: 1.1rem; }
.tp-prod__d { color: var(--tp-ink-soft); font-size: .95rem; line-height: 1.65; margin: 0 0 1.5rem; max-width: 56ch; }

.tp-datos-t { background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); padding: .4rem 1.25rem; margin-bottom: 1.5rem; }
.tp-dato { display: grid; grid-template-columns: auto 150px 1fr; gap: .9rem; align-items: center; padding: .85rem 0; }
.tp-dato + .tp-dato { border-top: 1px solid var(--tp-line); }
.tp-dato__k { font-family: Poppins, sans-serif; font-weight: 400; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tp-ink); }
.tp-dato__v { font-size: .92rem; color: var(--tp-ink-soft); }
@media (max-width: 560px) { .tp-dato { grid-template-columns: auto 1fr; } .tp-dato__v { grid-column: 2; } }

.tp-interes { background: var(--tp-brand-soft); border-radius: var(--tp-r-sm); padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; }
.tp-interes .tp-i { width: 46px; height: 46px; }
.tp-interes h2 { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 0 0 .4rem; color: var(--tp-ink); letter-spacing: -.01em; }
.tp-interes p { margin: 0 0 1rem; font-size: .87rem; line-height: 1.55; color: var(--tp-ink-soft); }
@media (max-width: 560px) { .tp-interes { grid-template-columns: 1fr; } }

/* --- Banda de garantias --- */
.tp-garantias { background: var(--tp-brand-soft); border-radius: var(--tp-r); padding: clamp(1.75rem, 3.5vw, 2.5rem) 1rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.tp-garantia { text-align: center; padding: 0 1.25rem; }
.tp-garantia + .tp-garantia { border-left: 1px solid var(--tp-line); }
.tp-garantia .tp-i { margin: 0 auto 1rem; display: block; }
.tp-garantia h3 { font-family: Poppins, sans-serif; font-weight: 400; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tp-ink); margin: 0 0 .6rem; }
.tp-garantia p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--tp-ink-soft); }
@media (max-width: 860px) { .tp-garantias { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; } .tp-garantia:nth-child(odd) { border-left: 0; } }
@media (max-width: 480px) { .tp-garantias { grid-template-columns: 1fr; } .tp-garantia { border-left: 0 !important; } }

/* --- Carrusel de relacionados con flechas a los lados --- */
.tp-rel { position: relative; }
.tp-rel .tp-ctrl { position: static; }
.tp-rel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.tp-rel__nav--prev { left: -18px; }
.tp-rel__nav--next { right: -18px; }
.tp-rel__nav button { box-shadow: var(--tp-shadow); background: #fff; }
@media (max-width: 1400px) { .tp-rel__nav--prev { left: 4px; } .tp-rel__nav--next { right: 4px; } }

/* --- Franja final de datos --- */
.tp-franja { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding-top: 1.75rem; border-top: 1px solid var(--tp-line); }
.tp-franja__i { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.tp-franja__i .tp-i { width: 26px; height: 26px; }
.tp-franja__t { display: block; font-family: Poppins, sans-serif; font-weight: 400; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tp-ink); }
.tp-franja__d { margin: .3rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--tp-ink-soft); }
@media (max-width: 900px) { .tp-franja { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tp-franja { grid-template-columns: 1fr; } }

/* ── Explorador de productos ──────────────────────────────────────────────────
   Familia principal -> subfamilia -> articulo, todo sin salir de la pagina ni
   saltar al encabezado. Montado con <details name> nativo: acordeon, teclado y
   estado abierto/cerrado sin escribir una linea de JavaScript.
   Sin lima: el cliente pidio verde de marca y nada fluorescente. */
.tp-exp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 1024px) { .tp-exp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tp-exp { grid-template-columns: 1fr; } }

.tp-exp__fam {
  background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm);
  overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.tp-exp__fam:not([open]):hover { box-shadow: var(--tp-shadow-h); border-color: transparent; transform: translateY(-3px); }
/* Abierta ocupa la fila entera y suelta la caja: era la misma tarjeta blanca
   con borde envolviendo enlace-de-vuelta + rejilla entera, todo apretado
   dentro de un marco de mas — sin caja, el grid de subfamilias respira igual
   que el de familias. */
.tp-exp__fam[open] {
  grid-column: 1 / -1; background: none; border: 0; box-shadow: none; overflow: visible;
}

.tp-exp__cab { position: relative; display: block; padding-bottom: 1.3rem; cursor: pointer; list-style: none; }
.tp-exp__cab::-webkit-details-marker { display: none; }
.tp-exp__cab:focus-visible { outline: 2px solid var(--tp-brand); outline-offset: -2px; }
.tp-exp__media { display: grid; place-items: center; aspect-ratio: 4/3; background: var(--tp-bg-soft); overflow: hidden; }
.tp-exp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-exp__media img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 34%; max-height: 40%; opacity: .13; }
.tp-exp__ico { display: block; padding: 1.15rem 1.3rem .55rem; color: var(--tp-brand); }
.tp-exp__ico .tp-i { width: 30px; height: 30px; }
.tp-exp__t {
  display: block; padding: 0 1.3rem; font-family: 'Libre Franklin', sans-serif; font-weight: 700;
  font-size: 1.26rem; line-height: 1.15; letter-spacing: -.01em; color: var(--tp-ink);
}
.tp-exp__meta {
  display: block; padding: .6rem 4rem 0 1.3rem; font-family: Poppins, sans-serif; font-weight: 400;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tp-ink-soft);
}
.tp-exp__meta b { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0; color: var(--tp-brand); }
.tp-exp__chev {
  position: absolute; right: 1.1rem; bottom: 1.05rem; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--tp-brand); color: var(--tp-brand);
  display: grid; place-items: center; transition: transform .2s ease, background .18s ease, color .18s ease;
}
.tp-exp__chev svg { width: 15px; height: 15px; }
.tp-exp__cab:hover .tp-exp__chev { background: var(--tp-brand); color: #fff; }

/* Con una familia abierta, las otras cuatro desaparecen del todo (Beatriz: "el
   segundo nivel tiene que ser identico al primero, quitar lo otro y poner el
   segundo") — nada de barra compacta, no hay nada suyo que enseñar mientras
   estas dentro de otra familia. Lo unico que queda de la cabecera es un enlace
   pequeño para volver, el resto es la rejilla de subfamilias a pantalla
   completa, con el mismo grid y el mismo hueco que el nivel 1. */
.tp-exp:has(.tp-exp__fam[open]) .tp-exp__fam:not([open]) { display: none; }

.tp-exp__fam[open] .tp-exp__cab .tp-exp__media { display: none; }
.tp-exp__fam[open] .tp-exp__cab {
  display: flex; align-items: center; gap: .5rem; padding: 0 0 1.1rem; background: none;
}
.tp-exp__fam[open] .tp-exp__cab .tp-exp__ico { padding: 0; color: var(--tp-brand); }
.tp-exp__fam[open] .tp-exp__cab .tp-exp__ico .tp-i { width: 20px; height: 20px; }
.tp-exp__fam[open] .tp-exp__cab .tp-exp__t { padding: 0; font-size: .98rem; color: var(--tp-brand); }
.tp-exp__fam[open] .tp-exp__cab .tp-exp__meta { padding: 0; margin-left: auto; color: var(--tp-ink-soft); }
.tp-exp__fam[open] .tp-exp__cab .tp-exp__meta b { color: var(--tp-accent); }
.tp-exp__fam[open] .tp-exp__cab .tp-exp__chev {
  position: static; width: 26px; height: 26px; transform: rotate(90deg);
  border-color: var(--tp-line); color: var(--tp-ink-soft);
}
.tp-exp__fam[open] .tp-exp__cab:hover .tp-exp__chev { background: var(--tp-bg-soft); color: var(--tp-brand); }

.tp-exp__panel { padding: 0; background: none; }

/* Nivel 2: misma rejilla de tarjetas que el nivel 1 — mismas columnas, mismo
   hueco. Enlace directo a la pagina de familia, no hay nivel 3 inline. */
.tp-exp__subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
@media (max-width: 1024px) { .tp-exp__subs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .tp-exp__subs { grid-template-columns: 1fr; } }

/* Misma caja que .tp-exp__fam del nivel 1, sin nada propio: ico/t/meta llevan
   su padding de serie (las mismas clases que usa el nivel 1), asi que la
   tarjeta de subfamilia sale identica a la de familia sin declarar nada de eso
   otra vez. */
.tp-exp__subcard {
  display: block; background: #fff; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm);
  overflow: hidden; padding-bottom: 1.3rem; text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.tp-exp__subcard:hover, .tp-exp__subcard:focus-visible {
  box-shadow: var(--tp-shadow-h); border-color: transparent; transform: translateY(-3px);
}
.tp-exp__subcard:focus-visible { outline: 2px solid var(--tp-brand); outline-offset: 2px; }
/* .tp-i trae su propio color (el lima oscuro): en el explorador el icono va en
   verde de marca, y en blanco sobre la barra abierta. */
.tp-exp__ico .tp-i { color: inherit; }

/* ══ Paleta de frutos rojos ═══════════════════════════════════════════════════
   Beatriz, textualmente: "cero el negro y los mostaza, cero patatero", y "el
   verde que te pase o derivados de ese verde; si tienes que usar otro color,
   que sea de una fresa, un arandano, una frambuesa o una mora".

   El lima #C8E020 y el oliva #63700A que yo habia creado para pasar el
   contraste eran justo el fluorescente y el mostaza que rechaza. Fuera los dos.

   El rojo sale de muestrear "FUGONETA DISEÑO 2026.jpg": la fresa del rotulo es
   #C4122A. Tiene una propiedad util, 6,06:1 tanto como texto sobre blanco como
   con texto blanco encima, asi que el mismo color sirve para marca y para
   texto sin necesidad de un segundo tono como pasaba con el lima.

   Reparto: el verde manda, el rojo es el acento puntual (cifras, etiquetas,
   estados) y los rotulos en versales vuelven al verde para no llenar de rojo
   una pagina que lleva un antetitulo por seccion. */

/* Rotulos y versales: al verde de marca. El rojo se reserva para las cifras. */
.tp-eyebrow,
.tp-cifras__t,
.tp-paso__h,
.tp-panel__t,
.tp-card__fam,
.tp-prod__fam,
.tp-nivel__sub,
.tp-crumbs .act { color: var(--tp-brand); }

/* Texto blanco sobre los fondos rojos: la tinta oscura sobre fresa no pasa. */
.tp-over,
.tp-btn--light:hover,
.tp-tag,
.tp-sector__i,
.tp-cta__inner .tp-over,
.tp-razon__n,
.tp-ctrl button[data-dir="next"],
.tp-vista button[aria-pressed="true"],
a.tp-fam:hover .tp-flecha,
a.tp-card:hover .tp-flecha { color: #fff; }

/* El tic de las listas iba en tinta sobre lima; ahora va en blanco sobre fresa. */
.tp-list li::before {
  background: var(--tp-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/.62rem no-repeat;
}

/* El panel del hero ocupaba media pantalla de lima. Pasa al verde de marca,
   que es lo que ella pide como color principal. */
.tp-hero__panel { background: var(--tp-brand); }
.tp-hero__panel .tp-over { background: var(--tp-accent); color: #fff; }
.tp-hero__panel .tp-display { color: #fff; }
.tp-hero__panel p { color: rgba(255,255,255,.82); }
.tp-hero__panel .tp-btn--lima { background: #fff; border-color: #fff; color: var(--tp-brand); }
.tp-hero__panel .tp-btn--lima:hover { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }

/* Los iconos heredaban el lima oscuro: al verde. */
.tp-i { color: var(--tp-brand); }
.tp-imgcard__nota .tp-i { color: var(--tp-accent); }

/* Cifra del explorador en fresa, que es el dato que se quiere mirar. */
.tp-exp__meta b { color: var(--tp-accent); }

/* Con el panel del hero en verde, un .tp-btn verde queda invisible dentro. */
.tp-hero__panel .tp-btn { background: #fff; border-color: #fff; color: var(--tp-brand); }
.tp-hero__panel .tp-btn:hover { background: var(--tp-accent); border-color: var(--tp-accent); color: #fff; }

/* ══ Banner de cabecera ═══════════════════════════════════════════════════════
   El óvalo de frutos rojos del rótulo de las furgonetas, tal cual. Es lo que
   pidió Beatriz y lo que pedía Mercedes: el dibujo envolviendo el nombre.
   Sustituye a las cuñas diagonales en degradado, que además llevaban un violeta
   y un azul que no están en la paleta.

   La imagen manda: sin caja, sin relleno, sin filete de color. La rotulación ya
   trae su propia composición y ponerle chrome encima la ensucia. */
.tp-cab { background: #fff; overflow: hidden; }
.tp-cab__link { display: block; line-height: 0; }
.tp-cab img {
  /* El rótulo se ve entero: recortarlo corta el wordmark, que es justo lo que
     la clienta quería destacar. El ancho lo acota el contenedor. */
  display: block; margin: 0 auto; height: auto;
  width: min(100%, 1180px);
}

/* El wordmark ya está en el banner, así que sale de la fila del menú y la
   navegación se centra. Solo en escritorio: por debajo de 1025 Kadence cambia a
   cabecera móvil y ahí la marca sí hace falta. */
/* Logo a la izquierda, navegacion centrada, idioma a la derecha. Esta regla
   ocultaba la marca porque el wordmark iba en el banner de cabecera; con el
   banner desactivado se habia quedado sin logo en toda la web. */
.site-main-header-inner-wrap {
  display: flex !important; align-items: center; justify-content: flex-start;
  gap: 1.5rem;
}
.site-header-main-section-left { flex: 0 0 auto; }
/* La seccion derecha tiene que ESTIRARSE para llenar el hueco tras el logo:
   sin esto el nav no tiene sobre-espacio donde centrarse de verdad. */
.site-header-main-section-right { flex: 1 1 auto; }
/* 6/10: en movil, dentro de .site-header-main-section-right .site-header-item
   (linea ~1907) solo vive el boton de hamburguesa: un unico hijo en un
   contenedor "justify-content: space-between" se queda pegado al principio
   (space-between con 1 item = flex-start), de ahi que saliera junto al
   logo en vez de en el extremo opuesto. margin-left:auto lo empuja al
   borde derecho sea cual sea el numero de hermanos. */
@media (max-width: 1024px) {
  .mobile-toggle-open-container { margin-left: auto; }
}
.site-branding img { max-height: 34px; width: auto; }
@media (max-width: 640px) {
  /* En móvil el texto del rótulo no se leería: se recorta al centro, donde está
     el wordmark, y la fila del menú aporta la marca. */
  .tp-cab img { width: 100%; }
}

/* ══ Hero de marca (portada) ══════════════════════════════════════════════════
   28/9, 4a vuelta: imagen creada por Badar (hero-teppimer.png, con ChatGPT),
   recortada para centrar el bloque de texto en el eje vertical (el original
   lo llevaba ~90px por encima del centro). Ya trae logo, eslogan y frutas
   horneados; solo los 3 iconos siguen en HTML real debajo, traducibles.
   28/9, 5a vuelta: "que ocupe todo el espacio, hay margen en los laterales":
   fuera la caja crema con tope de 960px -- la tarjeta va a ancho completo del
   tp-wrap, sin marco alrededor. */
.tp-marca-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.tp-marca-hero__box { width: 100%; }
.tp-marca-hero__card {
  width: 100%; background: #fff; border-radius: var(--tp-r);
  overflow: hidden; box-shadow: 0 24px 60px -28px rgba(22, 52, 23, .35);
}
.tp-marca-hero__img { width: 100%; height: auto; display: block; }
.tp-marca-hero__badges {
  display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3rem);
  padding: clamp(1.1rem, 3vw, 1.6rem) 1.2rem;
}
.tp-marca-hero__badge {
  display: flex; align-items: center; gap: .5rem; font-family: 'Libre Franklin', system-ui, sans-serif;
  font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tp-brand);
}
.tp-marca-hero__badge .tp-i { width: 22px; height: 22px; color: var(--tp-accent); flex: none; }
@media (max-width: 560px) {
  .tp-marca-hero__badges { gap: 1.1rem 1.6rem; }
  .tp-marca-hero__badge { font-size: .74rem; }
}

/* ══ Hero al estilo Baldor ════════════════════════════════════════════════════
   Antes era una rejilla 30/70 con el panel de color a la izquierda y la foto a
   la derecha. Baldor —la referencia de layout— monta una sola fotografia grande
   con el panel de texto en crema ENCIMA, y ese panel no llega ni a la mitad del
   ancho. Gana la foto, que es lo que va a vender aqui, y el titular pasa a verde
   sobre crema en vez de blanco sobre verde: mas cerca del "verde principal" que
   pide la clienta y menos superficie de color plano.

   Tambien deja de ocupar la pantalla entera (antes 100svh): ninguna de las
   referencias premium lo hace, y asi la banda de cifras ya se intuye al entrar. */
.tp-hero__box {
  display: flex; align-items: center; position: relative;
  /* Badar (18/9): "un poco mas alto", ahora que el hero es solo la imagen sin
     panel de texto. */
  min-height: clamp(480px, 64vh, 680px);
  border-radius: var(--tp-r); overflow: hidden; background: var(--tp-bg-soft);
}
.tp-hero__media {
  position: absolute; inset: 0;
  /* Un tono mas hondo que el panel: mientras no hay foto, el panel de crema se
     perdia sobre un fondo del mismo color. La foto lo tapa igual. */
  background: #EFE9DF;
}
.tp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-hero__media img.tp-ph {
  position: absolute; inset: 0; margin: auto;
  width: auto !important; height: auto !important; object-fit: contain !important;
  max-width: 32%; max-height: 42%; opacity: .13;
}
.tp-hero__panel {
  position: relative; z-index: 1;
  margin: clamp(1.25rem, 3vw, 3rem);
  width: min(456px, 76%);
  background: #FCFAF6; border-radius: var(--tp-r);
  padding: clamp(1.5rem, 2.4vw, 2.4rem);
  display: block;
  box-shadow: 0 2px 8px rgba(24,35,26,.06), 0 18px 44px rgba(24,35,26,.09);
}
.tp-hero__panel .tp-over { background: var(--tp-accent); color: #fff; }
.tp-hero__panel .tp-display {
  color: var(--tp-brand);
  font-size: clamp(1.85rem, 3.2vw, 2.9rem);
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.tp-hero__panel p { color: var(--tp-ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 var(--tp-s3); max-width: 34ch; }
.tp-hero__panel .tp-btn { background: var(--tp-brand); border-color: var(--tp-brand); color: #fff; }
.tp-hero__panel .tp-btn:hover { background: var(--tp-brand-deep); border-color: var(--tp-brand-deep); color: #fff; }

@media (max-width: 860px) {
  /* El panel va antes que la foto en el HTML, asi que en movil el texto queda
     arriba sin tocar el orden. */
  .tp-hero__box { display: block; min-height: 0; }
  .tp-hero__media { position: relative; aspect-ratio: 16/10; }
  .tp-hero__panel { width: auto; margin: 0; border-radius: 0; box-shadow: none; }
}

/* ══ Huecos de foto ═══════════════════════════════════════════════════════════
   Mientras no hay fotografia, los huecos eran un rectangulo de crema con el
   icono al 13% de opacidad: en las bandas grandes se leian como un hueco vacio y
   la seccion parecia rota ("50 años al lado de la hosteleria" era el caso claro).
   Ahora el hueco se declara como tal, con un lavado de la gama y el icono algo
   mas presente. La foto lo tapa entero, asi que esto no hay que deshacerlo. */
.tp-banner__media:has(> img.tp-ph),
.tp-feature__media:has(> img.tp-ph),
.tp-imgcard__media:has(> img.tp-ph),
.tp-paso__img:has(> img.tp-ph),
.tp-hito__img:has(> img.tp-ph),
.tp-ihero__media:has(> img.tp-ph) {
  background:
    linear-gradient(135deg, rgba(196,18,42,.07), rgba(46,67,116,.06) 52%, rgba(35,80,36,.08)),
    var(--tp-bg-soft);
}
.tp-banner__media img.tp-ph,
.tp-feature__media img.tp-ph,
.tp-imgcard__media img.tp-ph { max-width: 30% !important; max-height: 44% !important; opacity: .2; }

/* La banda verde llevaba el texto en la columna estrecha (.85fr) y la foto en la
   ancha, asi que el panel de color quedaba mas pequeño que el hueco vacio. Se
   invierte: manda el texto. */
.tp-banner--verde { grid-template-columns: 1.12fr .88fr; }
.tp-banner--verde .tp-banner__media { min-height: 0; }

/* ══ Selector de idioma ═══════════════════════════════════════════════════════
   Antes salian ESPAÑOL y ENGLISH como dos items sueltos en versales, con mucho
   peso al lado del boton de contacto. Ahora Polylang lo sirve en modo
   desplegable (meta _pll_menu_item, clave dropdown), asi que en la fila solo se
   ve el idioma actual con un globo, y el otro cuelga del desplegable normal.
   Sin JavaScript: Kadence ya abre los submenus. */
.header-navigation .header-menu-container > ul > li.pll-parent-menu-item > a {
  font-family: Poppins, sans-serif; font-weight: 400; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tp-ink-soft);
  padding-inline: .7rem;
  display: flex; align-items: center; gap: .38rem;
}
.header-navigation .header-menu-container > ul > li.pll-parent-menu-item > a::before {
  content: "";
  width: 15px; height: 15px; flex-shrink: 0;
  background: currentColor;
  /* Globo de Lucide, en mascara para que herede el color del enlace. */
  -webkit-mask: var(--tp-globo) center/contain no-repeat;
          mask: var(--tp-globo) center/contain no-repeat;
}
.header-navigation .header-menu-container > ul > li.pll-parent-menu-item > a::after { display: none; }
.header-navigation .header-menu-container > ul > li.pll-parent-menu-item:hover > a,
.header-navigation .header-menu-container > ul > li.pll-parent-menu-item:focus-within > a { color: var(--tp-brand); }
/* El desplegable de idioma no necesita el ancho de los de contenido. */
.header-navigation .header-menu-container > li.pll-parent-menu-item ul.sub-menu,
.header-navigation .header-menu-container > ul > li.pll-parent-menu-item ul.sub-menu { min-width: 150px; }
.header-navigation .header-menu-container ul ul.sub-menu li.lang-item > a {
  font-family: Poppins, sans-serif; font-weight: 400; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
/* El idioma en curso ya se ve en la fila: en el desplegable sobra el resalte. */
.header-navigation .header-menu-container ul ul.sub-menu li.lang-item.current-lang > a { color: var(--tp-ink-soft); }

/* ══ Mapa de cobertura ════════════════════════════════════════════════════════
   SVG en linea, sin libreria: 19 trazados con la geometria real de las
   comunidades. Cada zona lleva su <title>, asi que el navegador da el nombre al
   pasar por encima y el lector de pantalla lo lee. La lista de al lado no es
   decorativa: es la version en texto del mismo dato, que es lo que indexa
   Google y lo que se puede leer sin ver el mapa. */
.tp-mapa--solo { display: block; padding: clamp(1rem, 2.5vw, 2rem); }
.tp-mapa--solo .tp-mapa__pie { text-align: center; }
.tp-mapa--solo .tp-mapa__fig { max-width: 640px; margin-inline: auto; }
.tp-mapa { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; }
.tp-mapa__fig { min-width: 0; }
.tp-mapa__fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.tp-mapa__z {
  fill: var(--tp-brand-soft); stroke: var(--tp-bg); stroke-width: 2.2;
  transition: fill .16s ease;
}
.tp-mapa__z--dia  { fill: var(--tp-brand); }
.tp-mapa__z--prog { fill: #8FAE8C; }
.tp-mapa__z--cons { fill: #DCD8CF; }
.tp-mapa__z:hover { fill: var(--tp-accent); }
.tp-mapa__pie {
  margin: .9rem 0 0; font-family: Poppins, sans-serif; font-weight: 400;
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tp-ink-soft);
}
.tp-mapa__grupo + .tp-mapa__grupo { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--tp-line); }
.tp-mapa__t {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem;
  font-family: Poppins, sans-serif; font-weight: 400; font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tp-ink);
}
.tp-mapa__t b { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: .92rem; letter-spacing: 0; color: var(--tp-accent-tx); }
.tp-mapa__punto { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.tp-mapa__punto.tp-mapa__z--dia  { background: var(--tp-brand); }
.tp-mapa__punto.tp-mapa__z--prog { background: #8FAE8C; }
.tp-mapa__punto.tp-mapa__z--cons { background: #DCD8CF; }
.tp-mapa__lista { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.1rem; }
.tp-mapa__lista li { font-size: .86rem; line-height: 1.7; color: var(--tp-ink-soft); break-inside: avoid; }

@media (max-width: 900px) {
  .tp-mapa { grid-template-columns: 1fr; }
  .tp-mapa__lista { columns: 3; }
}
@media (max-width: 560px) { .tp-mapa__lista { columns: 2; } }

/* El hueco de imagen es una rejilla con place-items:center, asi que el mapa se
   quedaba en su tamaño minimo en medio del panel. Aqui manda el mapa. */
.tp-banner__media--mapa { display: block !important; background: none !important; padding: clamp(1rem, 2.4vw, 2rem); }
.tp-banner__media--mapa .tp-mapa--solo { padding: 0; }

/* Los sectores eran seis cajas con un numero y una palabra. Ahora cada uno dice
   que le sirve Teppimer a ese tipo de cliente, con su icono, asi que la tarjeta
   pasa de fila a bloque con jerarquia. */
.tp-sectors { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tp-sector {
  display: grid; grid-template-columns: auto 1fr; gap: .95rem; align-items: start;
  padding: 1.35rem 1.4rem; background: #fff;
}
.tp-sector .tp-i { width: 27px; height: 27px; color: var(--tp-brand); }
.tp-sector__n {
  font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700;
  font-size: 1rem; line-height: 1.2; color: var(--tp-ink); margin: 0 0 .35rem;
}
.tp-sector__d { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--tp-ink-soft); }
@media (max-width: 900px) { .tp-sectors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tp-sectors { grid-template-columns: 1fr; } }

/* La foto de la furgoneta viene sobre blanco y a 2.7:1, asi que ni recortada a
   4/3 ni estirada funciona: se deja entera, centrada y con aire, sobre el mismo
   crema del bloque. Es un rotulo, no una fotografia de ambiente. */
/* El rotulo viene sobre un blanco roto (#FCFCFC) y en 2,69:1, asi que ni se
   recorta ni se estira: se sirve a todo el ancho del panel y el panel se pinta
   del mismo tono que su fondo, con lo que el borde del recorte desaparece.
   El texto de al lado manda la altura, asi que la banda tampoco es de la altura
   de la foto: la banda se acorta hasta que la diferencia deja de notarse. */
.tp-banner:has(> .tp-banner__media--furgo) { grid-template-columns: 1.02fr .98fr; }
.tp-banner__media--furgo {
  background: #FCFCFC !important;
  display: grid; place-items: center;
  /* El relleno no se ve, el panel y el fondo de la foto son el mismo tono: es
     solo para que la furgoneta no toque los bordes y parezca cortada. */
  padding: clamp(1rem, 2.2vw, 2rem);
}
.tp-banner__media--furgo img {
  width: 100%; height: auto !important; max-height: none; object-fit: contain !important;
}
.tp-banner:has(> .tp-banner__media--furgo) > .tp-banner__text { padding-block: clamp(1.5rem, 2.4vw, 2.1rem); }

/* Mientras una banda no tenga foto de verdad, en vez de dejar el hueco vacio
   —que es lo que hacia que estas secciones se leyeran como a medio hacer— la
   banda se queda en tarjeta de solo texto. Se detecta por el marcador .tp-ph,
   asi que en cuanto se sustituya por una foto real la regla deja de aplicar y
   las dos columnas vuelven solas. */
.tp-banner:has(> .tp-banner__media > img.tp-ph) { grid-template-columns: 1fr !important; }
.tp-banner:has(> .tp-banner__media > img.tp-ph) > .tp-banner__media { display: none; }
.tp-banner--verde:has(> .tp-banner__media > img.tp-ph) > .tp-banner__text { padding-block: clamp(2rem, 4vw, 3.25rem); }

/* El h2 lleva 57,6px de margen superior, que es el aire que necesita entre
   parrafos de una pagina larga. Dentro de una banda va justo detras de su
   antetitulo, asi que ahi sobra: el antetitulo ya pone la separacion. */
.tp-banner__text > .tp-over + .tp-h2,
.tp-banner__text > .tp-over + .tp-h2--display,
.tp-hero__panel > .tp-over + .tp-display,
.tp-cta__inner .tp-over + .tp-h2,
.tp-cta__inner .tp-over + .tp-h2--display { margin-top: 0; }

/* La regla de la banda de la furgoneta lleva :has(), asi que gana en
   especificidad a la del corte de 860px y en movil se quedaba en dos columnas
   con la foto a 154px. Aqui se apila como el resto. */
@media (max-width: 860px) {
  .tp-banner:has(> .tp-banner__media--furgo) { grid-template-columns: 1fr; }
  .tp-banner__media--furgo { padding: clamp(1rem, 4vw, 1.75rem); }
}

/* ══ Sistema visual de la presentación corporativa ════════════════════════════
   Beatriz: "la web debería ser las presentaciones llevadas a una web", y tres
   veces "tal cual está en mis presentaciones".

   Medido sobre PRESENTACION COMERCIAL HORECA 2026.pdf a 150dpi: la página 3 es
   68% verde #235024, la de historia 68,9% verde + 8,6% menta + 8,5% verde vivo.
   El verde no es el acento del sistema: es el papel. Nosotros lo usábamos como
   tinta sobre fondo claro, y por eso "sigue sin funcionar para nosotros".

   Tres reglas del PDF que aquí se invierten respecto a lo que teníamos:
   1. Titulares en caja baja. En 14 páginas no hay uno solo en mayúsculas.
   2. Cero antetítulos. El único texto en versales espaciadas es el wordmark.
   3. El verde es superficie, no acento. */

/* — Titulares al verde de marca ————————————————————————————————————
   Había 62 elementos en negro #18231A y 9 en el verde. La clienta lleva desde
   la primera reunión diciendo "nada de negro". */
.tp-h2, .tp-h2--display, .tp-display,
.tp-sect__t, .tp-razon__t, .tp-hito__t, .tp-paso__t,
.tp-fam__t, .tp-exp__t, .tp-sector__n, .tp-card__title,
.tp-prod h1, .tp-interes h2, .tp-hero-cta h2 { color: var(--tp-brand); }

/* — Fuera las mayúsculas de los titulares ————————————————————————— */
.tp-display, .tp-h2--display, .tp-h2,
.tp-hero-cta h2, .tp-total__l, .tp-fam__t, .tp-exp__t,
.tp-hito__t, .tp-paso__t, .tp-razon__t, .tp-prod h1, .tp-interes h2 {
  text-transform: none;
  letter-spacing: -.02em;
  font-family: Poppins, 'Libre Franklin', system-ui, sans-serif;
  font-weight: 700;
}

/* — Los antetítulos desaparecen ————————————————————————————————————
   No se borran del HTML porque están horneados en post_content de 23 páginas;
   se ocultan por CSS, que es reversible y no obliga a reejecutar los builders.
   Los de la portada repetían literalmente el titular ("TEMPORADA" sobre
   "Producto en su punto") o la miga de pan. */
.tp-eyebrow, .tp-over { display: none; }

/* — Suelo tipográfico de 12,5px ————————————————————————————————————
   Había texto a 9,76px en las garantías del banner y 46 nodos bajo 11px en
   móvil. Eso no es texto pequeño, es textura. */
.tp-cab__gar span, .tp-tag, .tp-card__ref, .tp-card__meta,
.tp-fam__l, .tp-mapa__pie, .tp-sector__i,
.tp-footer__t, .tp-datos dt, .tp-contact dt, .tp-vista button,
.tp-crumbs, .tp-panel__t, .tp-ayuda__t, .tp-card__fam, .tp-prod__fam {
  font-size: var(--tp-t1);
  letter-spacing: .08em;
}

/* — Bandas verdes a sangre ————————————————————————————————————————
   El gesto central del PDF: la sección entera en verde, no una caja verde
   dentro de una sección clara. */
.tp-section--verde {
  background: var(--tp-brand);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.tp-section--verde .tp-h2,
.tp-section--verde .tp-h2--display,
.tp-section--verde .tp-display,
.tp-section--verde h2, .tp-section--verde h3 { color: #fff; }
.tp-section--verde p,
.tp-section--verde .tp-body,
.tp-section--verde .tp-lead { color: var(--tp-sobre-verde); }
.tp-section--verde .tp-i { color: var(--tp-menta); }

/* — Tarjeta menta, la del PDF ————————————————————————————————————— */
.tp-ficha {
  background: var(--tp-menta); border-radius: 14px;
  padding: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--tp-brand);
}
.tp-ficha--vivo { background: var(--tp-verde-vivo); color: #fff; }
.tp-ficha__y {
  display: block; font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 1.3rem; margin-bottom: .5rem;
}
.tp-ficha p { margin: 0; font-size: var(--tp-t2); line-height: 1.55; color: inherit; }

/* — Cifra grande, para la banda de clientes por categoría ————————————— */
.tp-dato-n {
  display: block; font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1;
  color: var(--tp-brand); letter-spacing: -.03em;
}
.tp-section--verde .tp-dato-n { color: #fff; }
.tp-dato-l {
  display: block; margin-top: .4rem; font-size: var(--tp-t1);
  line-height: 1.35; color: var(--tp-ink-soft);
}
.tp-section--verde .tp-dato-l { color: var(--tp-sobre-verde); }

/* La fresa sobre el verde da 1,54:1: ilegible. Nunca texto fresa sobre verde. */
.tp-section--verde .tp-dato-n,
.tp-section--verde .tp-exp__meta b { color: #fff; }

/* — Los últimos focos de mayúsculas ————————————————————————————————
   .tp-card__meta son las 41 etiquetas de familia de las tarjetas de producto:
   una por tarjeta, así que multiplicaba el efecto por 41 en una sola pantalla.
   Los botones también: el PDF los lleva en caja baja. */
.tp-card__meta, .tp-card__ref, .tp-btn,
.tp-footer__t, .tp-tag, .tp-sector__i,
.tp-datos dt, .tp-contact dt, .tp-panel__t, .tp-ayuda__t,
.tp-card__fam, .tp-prod__fam, .tp-mapa__t, .tp-mapa__pie,
.tp-fam__l, .tp-total__l, .tp-cab__gar span, .tp-exp__meta,
.tp-vista button, .tp-barra-cat__n span, .tp-nivel__sub,
.header-navigation .header-menu-container > ul > li.menu-item > a {
  text-transform: none;
  letter-spacing: .01em;
}
/* El wordmark del banner sí conserva las versales espaciadas: en el PDF es el
   único elemento que las lleva, arriba a la izquierda de cada página. */
.tp-cab__marca span { text-transform: uppercase; letter-spacing: .3em; }

/* — Los cinco tamaños entre 13,4 y 15,4px que nadie distingue ————————— */
.tp-btn, .tp-link, .tp-body, .tp-lead, .tp-card__title, .tp-list li,
.tp-fam__d, .tp-sector__d,
.tp-mapa__lista li, .tp-dato__v, .tp-ficha p,
.tp-banner__text p, .tp-hero__panel p { font-size: var(--tp-t2); }

.tp-h2 { font-size: var(--tp-t4); }

/* Zonas fuera de cobertura: dibujadas pero sin resaltar, como en el mapa del
   PDF corporativo. Canarias, Ceuta y Melilla no entran en el reparto. */
.tp-mapa__z--no { fill: #E8E4DC; }

/* — Rejilla de datos y categorías, para las bandas verdes ————————————————
   Antes era solo un filete arriba: numero y etiqueta sueltos sobre el verde,
   sin ninguna caja que los agrupe. Pasa a tarjeta real (menta, pensado para
   "tarjeta sobre verde") para que cada cifra respire y la rejilla no se lea
   como una lista de numeros sueltos. */
.tp-datos-g {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
.tp-dato-c {
  background: var(--tp-menta); border-radius: var(--tp-r-sm);
  padding: 1.3rem 1.1rem; transition: transform .2s ease, box-shadow .2s ease;
}
.tp-dato-c:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-h); }
.tp-section--verde .tp-dato-n { color: var(--tp-brand-deep); }
.tp-section--verde .tp-dato-l { color: var(--tp-ink-soft); }

.tp-cats {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.tp-cats li {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: .5em 1.1em;
  font-size: var(--tp-t2); color: #fff;
}

/* — Certificaciones: una fila por norma, como en el PDF ————————————— */
.tp-certs { display: grid; grid-template-columns: 1fr !important; gap: 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.tp-cert { border: 0 !important; border-top: 1px solid var(--tp-line) !important; border-radius: 0 !important; background: none !important; padding: clamp(1.25rem, 2.4vw, 1.9rem) 0 !important; }
.tp-cert:last-child { border-bottom: 1px solid var(--tp-line); }
.tp-cert__c { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: clamp(1rem, 2.5vw, 2.5rem); align-items: start; }
.tp-cert__n {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.18rem;
  color: var(--tp-brand); line-height: 1.25;
}
.tp-cert__t { grid-column: 2; font-size: var(--tp-t3); margin: 0 0 .4rem; color: var(--tp-brand); }
.tp-cert p { grid-column: 2; margin: 0; font-size: var(--tp-t2); line-height: 1.55; color: var(--tp-ink-soft); }
.tp-cert__v { margin-top: .5rem !important; font-size: var(--tp-t1) !important; }
@media (max-width: 640px) {
  .tp-cert__c { grid-template-columns: 1fr; gap: .6rem; }
  .tp-cert__t, .tp-cert p { grid-column: 1; }
}

/* — Titulares sobre superficies oscuras ————————————————————————————
   La regla que lleva los titulares al verde de marca también alcanzaba a los
   que van DENTRO de un bloque verde: verde sobre verde, 1,46:1. Estos
   contenedores mandan sobre el color de texto. */
.tp-cta__inner .tp-h2, .tp-cta__inner .tp-h2--display, .tp-cta__inner h2,
.tp-hero-cta h2, .tp-hero-cta .tp-h2, .tp-hero-cta .tp-h2--display,
.tp-banner--verde .tp-h2, .tp-banner--verde .tp-h2--display,
.tp-franja .tp-h2, .tp-franja h2,
.tp-section--verde .tp-h2, .tp-section--verde .tp-h2--display { color: #fff; }
.tp-section--verde .tp-cats li { color: #fff; }

/* — El suelo de 12,5px también en las píldoras y garantías ————————————
   Quedaban nodos a 9,8px que no entraban por selector de clase. */
.tp-cab__gar span, .tp-cab__claim,
.tp-tag, .tp-over, .tp-eyebrow { font-size: var(--tp-t1) !important; }
small, .tp-total__l small { font-size: var(--tp-t1); }

/* El separador de las migas es decorativo. */
.tp-crumbs .sep { color: var(--tp-line); }

/* — Portada de página en verde, como las del PDF ————————————————————
   El titular a la izquierda ocupando su columna, el texto de apoyo a la
   derecha. Es la composición de "¿Quiénes somos?" y "Experiencias educativas". */
.tp-edu__intro { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.tp-edu__intro .tp-display { margin: 0; }
.tp-edu__intro .tp-lead { margin: 0 0 .8rem; }
.tp-edu__zona {
  margin: 0; font-family: Poppins, sans-serif; font-size: var(--tp-t1);
  letter-spacing: .14em; color: var(--tp-menta);
}
@media (max-width: 780px) { .tp-edu__intro { grid-template-columns: 1fr; align-items: start; } }

/* — Programas educativos ——————————————————————————————————————— */
.tp-edu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.tp-edu {
  background: var(--tp-menta); border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.tp-edu__ico { color: var(--tp-brand); margin-bottom: 1.1rem; }
.tp-edu__ico .tp-i { width: 34px; height: 34px; }
.tp-edu__t {
  font-family: Poppins, sans-serif; font-weight: 700; font-size: var(--tp-t4);
  color: var(--tp-brand); margin: 0 0 .9rem; letter-spacing: -.02em;
}
.tp-edu p { margin: 0; font-size: var(--tp-t2); line-height: 1.65; color: var(--tp-brand); }
.tp-edu__n {
  margin-top: 1.1rem !important; padding-top: .9rem;
  border-top: 1px solid rgba(35,80,36,.2);
  font-family: Poppins, sans-serif; font-size: var(--tp-t1) !important; letter-spacing: .06em;
}
@media (max-width: 780px) { .tp-edu__grid { grid-template-columns: 1fr; } }

/* — Socios: el logo manda, la caja desaparece ————————————————————— */
.tp-socios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.tp-socio {
  background: #fff; border: 1px solid var(--tp-line); border-radius: 12px;
  height: 116px; display: grid; place-items: center; padding: 1.1rem;
}
.tp-socio img {
  max-width: 100%; max-height: 74px; width: auto; height: auto;
  object-fit: contain; display: block;
  filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease;
}
.tp-socio:hover img { filter: none; opacity: 1; }

/* — Selector de idioma: dos botones, no un desplegable ————————————————
   Beatriz lo pidió expreso. Antes eran dos items en versales espaciadas con
   mucho peso al lado del botón de contacto; ahora son dos pastillas pequeñas
   con un filete entre ellas, que ocupan lo justo y se ven las dos. */
.header-navigation .header-menu-container > ul > li.lang-item > a {
  font-family: Poppins, sans-serif; font-weight: 400; font-size: var(--tp-t1);
  letter-spacing: .04em; text-transform: none;
  color: var(--tp-ink-soft); padding: .3em .6em; border-radius: 4px;
}
.header-navigation .header-menu-container > ul > li.lang-item > a::after { display: none; }
.header-navigation .header-menu-container > ul > li.lang-item.current-lang > a {
  color: var(--tp-brand); background: var(--tp-brand-soft); font-weight: 600;
}
.header-navigation .header-menu-container > ul > li.lang-item:not(.current-lang) > a:hover { color: var(--tp-brand); }
/* Un filete separa el par del resto del menú, como estaba antes. */
.header-navigation .header-menu-container > ul > li.lang-item-first {
  margin-left: .9rem; padding-left: .9rem; border-left: 1px solid var(--tp-line);
}
.header-navigation .header-menu-container > ul > li.lang-item { padding-inline: .1rem; }

/* — Ficha de producto: nombre y fotografía ————————————————————————
   "No queremos fichas de producto, solo el nombre y la fotografía." Con 737
   referencias, la ficha es un punto de paso, no un destino: lo que resuelve
   una duda es ver el producto y saltar al resto de su gama. */
.tp-prod--simple { padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 4rem); }
.tp-prod__ruta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: Poppins, sans-serif; font-size: var(--tp-t1);
  color: var(--tp-ink-soft); margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.tp-prod__ruta a { color: var(--tp-ink-soft); text-decoration: none; }
.tp-prod__ruta a:hover { color: var(--tp-brand); }
.tp-prod__ruta a:last-of-type { color: var(--tp-brand); }
.tp-prod__ruta .sep { color: var(--tp-line); }

.tp-prod__simple {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
}
.tp-prod__foto {
  background: var(--tp-bg-soft); border-radius: 14px; overflow: hidden;
  aspect-ratio: 4/3; display: grid; place-items: center;
}
.tp-prod__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-prod__foto img.tp-ph {
  width: auto !important; height: auto !important; object-fit: contain !important;
  max-width: 34%; max-height: 44%; opacity: .18;
}
.tp-prod__id h1 {
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em;
  color: var(--tp-brand); text-transform: none; margin: 0 0 .6rem;
}
.tp-prod__id .tp-prod__fam {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: Poppins, sans-serif; font-size: var(--tp-t3);
  color: var(--tp-ink-soft); letter-spacing: 0; text-transform: none;
}
@media (max-width: 780px) { .tp-prod__simple { grid-template-columns: 1fr; } }

/* — El resto de la subfamilia, en nombres ————————————————————————— */
.tp-hermanos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .1rem 1.25rem; margin-top: 1.5rem;
}
.tp-hermano {
  display: block; padding: .5rem .1rem; font-size: var(--tp-t2); line-height: 1.4;
  color: var(--tp-ink); text-decoration: none; border-bottom: 1px solid transparent;
}
.tp-hermano:hover, .tp-hermano:focus-visible { color: var(--tp-brand); border-bottom-color: var(--tp-brand); }

/* — Formulario de contacto ————————————————————————————————————————
   Seis campos y un envío, montado en el tema: un plugin de formularios aquí
   solo añadiría peso, su propio CSS y superficie de actualizaciones. */
.tp-form__wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.tp-form__intro .tp-h2 { margin-top: 0; }
@media (max-width: 860px) { .tp-form__wrap { grid-template-columns: 1fr; } }

.tp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.tp-form__c { display: flex; flex-direction: column; gap: .4rem; }
.tp-form__c--ancho { grid-column: 1 / -1; }
.tp-form label {
  font-family: Poppins, sans-serif; font-size: var(--tp-t1);
  color: var(--tp-ink); letter-spacing: .02em;
}
.tp-form input, .tp-form textarea {
  font: inherit; font-size: var(--tp-t2); color: var(--tp-ink);
  background: #fff; border: 1px solid var(--tp-line); border-radius: 8px;
  padding: .75em .9em; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tp-form input:focus, .tp-form textarea:focus {
  outline: none; border-color: var(--tp-brand);
  box-shadow: 0 0 0 3px rgba(35,80,36,.12);
}
.tp-form textarea { resize: vertical; min-height: 130px; }
.tp-form [aria-invalid="true"] { border-color: var(--tp-accent-tx); }
.tp-form__e { font-size: var(--tp-t1); color: var(--tp-accent-tx); }
.tp-form__aviso {
  grid-column: 1 / -1; margin: 0; padding: .8rem 1rem; border-radius: 8px;
  background: #FBEDEF; color: var(--tp-accent-tx); font-size: var(--tp-t2);
}
/* El honeypot no se muestra pero tampoco se oculta con display:none: algunos
   robots detectan esa regla y se saltan el campo. */
.tp-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tp-form__pie {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; margin-top: .4rem;
}
.tp-form__lopd { margin: 0; font-size: var(--tp-t1); color: var(--tp-ink-soft); max-width: 44ch; }
.tp-form__lopd a { color: var(--tp-brand); }
.tp-form--ok {
  display: block; background: var(--tp-brand-soft); border-radius: 14px;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.tp-form--ok h2 { margin: 0 0 .5rem; color: var(--tp-brand); font-size: var(--tp-t4); }
.tp-form--ok p { margin: 0; color: var(--tp-ink-soft); }
@media (max-width: 560px) { .tp-form { grid-template-columns: 1fr; } }

/* — Canal de pedidos por WhatsApp ————————————————————————————————— */
.tp-wa {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.25rem;
  background: #fff; border: 1px solid var(--tp-line); border-radius: 999px;
  padding: .6em 1.1em; text-decoration: none;
  font-family: Poppins, sans-serif; font-size: var(--tp-t2); color: var(--tp-brand);
  transition: border-color .16s ease, background .16s ease;
}
.tp-wa svg { width: 20px; height: 20px; color: #25D366; flex-shrink: 0; }
.tp-wa:hover { border-color: var(--tp-brand); background: var(--tp-brand-soft); }

/* — Cabecera: logo a la izquierda, nav centrada, Contacto+idioma a la derecha —
   El JS de wp_footer saca "Contacto" y "Idioma" del <ul> y los mete en
   .tp-nav-util, hermano de .header-navigation. Con eso ya son dos bloques
   independientes dentro de la seccion derecha: uno se centra, el otro se fija. */
.site-header-main-section-right { flex: 1 1 auto; display: flex; }
/* Kadence mete un div.site-header-item entre la seccion y el nav: el flex de
   verdad va aqui, un nivel mas adentro de lo que parece a simple vista. */
.site-header-main-section-right .site-header-item {
  display: flex !important; align-items: center; flex: 1 1 auto;
  justify-content: space-between; gap: 1rem; width: 100%;
}
.header-navigation { flex: 1 1 auto; display: flex; justify-content: center; }
.tp-nav-util { display: flex; align-items: center; flex: 0 0 auto; gap: .3rem; }
.tp-nav-util li.menu-cta { margin-right: 0; }

/* — Estilos de Contacto e idioma, ahora fuera del <ul> —————————————————
   El JS de cabecera saca estos <li> del <ul> para poder centrar la navegacion
   de verdad. Al cambiar de padre, las reglas ".header-navigation
   .header-menu-container > ul > li..." dejan de encajar: se repiten aqui,
   iguales, apuntando a .tp-nav-util. */
.tp-nav-util { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.tp-nav-util a { text-decoration: none !important; }
.tp-nav-util li.menu-cta > a {
  background: var(--tp-brand); color: #fff; padding: .72em 1.5em;
  border-radius: var(--tp-r-xs); transition: background .18s ease;
  font-family: Poppins, sans-serif; font-size: .74rem; letter-spacing: .04em; text-transform: none;
}
.tp-nav-util li.menu-cta > a:hover { background: var(--tp-brand-deep); color: #fff; }
.tp-nav-util li.menu-cta.current-menu-item > a,
.tp-nav-util li.menu-cta.current_page_item > a { color: #fff; }
.tp-nav-util li.lang-item > a {
  font-family: Poppins, sans-serif; font-weight: 400; font-size: var(--tp-t1);
  letter-spacing: .04em; text-transform: none;
  color: var(--tp-ink-soft); padding: .3em .6em; border-radius: 4px;
}
.tp-nav-util li.lang-item.current-lang > a {
  color: var(--tp-brand); background: var(--tp-brand-soft); font-weight: 600;
}
.tp-nav-util li.lang-item:not(.current-lang) > a:hover { color: var(--tp-brand); }
.tp-nav-util li.lang-item-first {
  margin-left: .9rem; padding-left: .9rem; border-left: 1px solid var(--tp-line);
}
.tp-nav-util li.lang-item { padding-inline: .1rem; }

/* ── Quienes somos, rediseño 18/9 (Badar pasó capturas de un deck) ──────────
   Cuatro bloques nuevos reutilizando tokens y componentes ya existentes
   (tp-section--verde, tp-certs/tp-cert, tp-datos-g) en vez de inventar un
   sistema de color aparte. */

/* Nuestra historia: parrafo + 3 tarjetas en fila, tonos alternos del propio
   tp-menta/tp-verde-vivo (ya pensados para "tarjeta sobre verde"). */
.tp-hist2 { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-top: var(--tp-s3); }
.tp-hist2__intro { color: var(--tp-sobre-verde); font-size: var(--tp-t3); line-height: 1.6; margin: 0; }
/* Linea de tiempo: los 3 hitos comparten un hilo horizontal con un punto por
   año, en vez de 3 tarjetas de color plano (pedido del cliente: "parece la
   presentacion"). El hilo va de centro a centro de la 1a y la 3a tarjeta. */
.tp-hist2__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; position: relative; padding-top: 2.9rem; }
.tp-hist2__cards::before {
  content: ""; position: absolute; top: 1.05rem; left: calc(100%/6); right: calc(100%/6); height: 0;
  border-top: 2px dashed rgba(255,255,255,.32);
}
.tp-hist2__card {
  position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--tp-r); padding: var(--tp-s3);
}
.tp-hist2__card::before {
  content: ""; position: absolute; left: 50%; top: -1.85rem; width: 15px; height: 15px; border-radius: 50%;
  transform: translateX(-50%); background: var(--tp-menta); border: 3px solid var(--tp-brand-deep);
}
.tp-hist2__card:nth-child(2)::before { background: var(--tp-verde-vivo); }
.tp-hist2__card:nth-child(3)::before { background: #fff; }
.tp-hist2__card .tp-i { display: none; }
.tp-hist2__y {
  display: block; font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 800;
  font-size: 2rem; letter-spacing: -.01em; margin-bottom: .5rem; color: var(--tp-menta);
}
.tp-hist2__d { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--tp-sobre-verde); }
@media (max-width: 860px) {
  .tp-hist2 { grid-template-columns: 1fr; }
  .tp-hist2__cards { grid-template-columns: 1fr; gap: 1.6rem; padding-top: .2rem; padding-left: 1.6rem; }
  .tp-hist2__cards::before { top: 0; bottom: 0; left: 5px; right: auto; width: 0; height: auto; border-top: 0; border-left: 2px dashed rgba(255,255,255,.32); }
  .tp-hist2__card::before { left: -1.6rem; top: .35rem; transform: none; }
}

/* Soluciones a medida / Compromiso: dos columnas simples con icono circular. */
.tp-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.tp-duo__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--tp-verde-vivo); display: grid; place-items: center; margin-bottom: 1rem; }
.tp-duo__ico svg { width: 18px; height: 18px; color: #fff; }
.tp-duo__t { color: #fff; font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; margin: 0 0 .5rem; }
.tp-duo__d { color: var(--tp-sobre-verde); margin: 0; font-size: .95rem; line-height: 1.6; }
@media (max-width: 700px) { .tp-duo { grid-template-columns: 1fr; } }

/* Como trabajamos: texto | imagen | lista numerada, todo sobre verde. */
.tp-como3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; margin-top: var(--tp-s3); }
.tp-como3__sub { color: #fff; font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: 1.1rem; margin: 0 0 .6rem; }
.tp-como3__lead { color: var(--tp-sobre-verde); margin: 0; font-size: .92rem; line-height: 1.6; }
.tp-como3__media { border-radius: var(--tp-r-sm); overflow: hidden; aspect-ratio: 3/4; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.tp-como3__media img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 40%; max-height: 40%; opacity: .18; }
.tp-como3__media img:not(.tp-ph), .tp-difs__media img:not(.tp-ph) { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-como3__list { display: grid; gap: 1.2rem; }
.tp-como3__n { font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--tp-menta); display: block; margin-bottom: .3rem; }
.tp-como3__t { color: #fff; font-weight: 700; font-size: .98rem; margin: 0 0 .35rem; }
.tp-como3__d { color: var(--tp-sobre-verde); margin: 0; font-size: .88rem; line-height: 1.5; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.tp-como3__item:last-child .tp-como3__d { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 900px) { .tp-como3 { grid-template-columns: 1fr; } .tp-como3__media { aspect-ratio: 16/9; } }

/* Factores diferenciales: imagen pequeña + lista con guion (reutiliza
   tp-certs/tp-cert, la misma que Certificaciones, tenida de verde). */
/* 1/10: "la imagen queda muy alta respecto al texto" -- la columna de la foto
   (cuadrada, 180-260px) iba pegada arriba (align-items:start) junto a una
   lista de 4 items bastante mas alta: centrada en vez de arriba. */
.tp-difs { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; margin-top: var(--tp-s3); }
.tp-difs__media { aspect-ratio: 1; border-radius: var(--tp-r-sm); overflow: hidden; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.tp-difs__media img.tp-ph { width: auto !important; height: auto !important; object-fit: contain !important; max-width: 40%; max-height: 40%; opacity: .18; }
.tp-section--verde .tp-cert { border-top-color: rgba(255,255,255,.22) !important; }
.tp-section--verde .tp-cert:last-child { border-bottom-color: rgba(255,255,255,.22); }
.tp-section--verde .tp-cert__n { color: #fff; }
.tp-section--verde .tp-cert p { color: var(--tp-sobre-verde); }
@media (max-width: 860px) { .tp-difs { grid-template-columns: 1fr; } .tp-difs__media { max-width: 160px; } }

/* Boton de contacto del pie: el color de enlace del pie lo dejaba verde
   oscuro sobre verde (casi ilegible). Texto blanco, como el resto de .tp-btn. */
.tp-footer__news .tp-btn, .tp-footer__news .tp-btn:hover { color: #fff; }

.tp-prod-grupo { margin-top: 2.5rem; }
.tp-prod-grupo > h3 { margin-bottom: 1.25rem; }
.tp-prod-texto { max-width: 76ch; margin-inline: auto; text-align: center; }
.tp-prod-texto p { margin: 0 0 1rem; color: var(--tp-ink-soft); }

/* Global Presence: mapa mundial + lista numerada */
.tp-mundo { display: grid; grid-template-columns: 230px 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.tp-mundo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.tp-mundo__lista li { display: flex; align-items: center; gap: .7rem; color: var(--tp-ink); font-size: .95rem; }
.tp-mundo__lista b { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tp-brand); color: #fff; font-size: .68rem; font-weight: 600; }
/* 29/9: "quieren protagonismo al mapa como en español". El mapa pasa de
   columna estrecha junto a la lista a protagonista, ancho y centrado (como
   .tp-mapa--solo en cobertura-nacional); la lista de paises baja debajo, en
   fila de pildoras en vez de columna estrecha. */
.tp-mundo--solo { display: block; text-align: center; }
.tp-mundo--solo .tp-mundo__mapa { max-width: 980px; margin: 0 auto; }
.tp-mundo--solo .tp-mundo__lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem;
  margin-top: 1.75rem;
}
.tp-mundo--solo .tp-mundo__lista li { font-size: .88rem; }
/* 2/10: mapa rehecho con pais-por-pais real (antes alfileres + lineas de
   puntos sobre un planisferio generico, "se nota que es copia pega de una
   presentacion"). Cada pais operativo se sombrea en verde de marca y
   lleva su <title> nativo (tooltip del navegador al pasar el raton), sin
   JS ni libreria de mapas. */
/* 7/10: tooltip propio al pasar el raton por un pais del mapa, sustituye a
   la lista numerada de arriba. */
.tp-wm__wrap { position: relative; }
.tp-wm__tip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 14px));
  background: var(--tp-brand); color: #fff; padding: .4rem .8rem; border-radius: var(--tp-r-xs);
  font-family: Poppins, sans-serif; font-size: .78rem; font-weight: 500; white-space: nowrap;
  transition: opacity .12s ease; box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.tp-wm__tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--tp-brand);
}
.tp-wm__tip.is-on { opacity: 1; }
.tp-wm { width: 100%; height: auto; display: block; }
.tp-wm__land { fill: var(--tp-line); stroke: #fff; stroke-width: .6; }
/* 6/10: mercados pequenos (Catar, Singapur, Hong Kong...) se perdian en el
   mapa, su silueta real es demasiado chica para leerse. Un contorno de ancho
   fijo en pantalla (no en unidades del viewBox) les da bulto sin redibujar
   la geometria. */
.tp-wm__hi {
  fill: var(--tp-brand); cursor: pointer; transition: fill .15s;
  stroke: var(--tp-brand); stroke-width: 2.5; paint-order: stroke; vector-effect: non-scaling-stroke;
}
.tp-wm__hi:hover, .tp-wm__hi:focus-visible { fill: var(--tp-verde-vivo); stroke: var(--tp-verde-vivo); }
.tp-wm__pt { stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; r: 6; }
@media (max-width: 900px) { .tp-mundo { grid-template-columns: 1fr; } .tp-mundo__lista { grid-template-columns: 1fr 1fr; order: 2; } }
.tp-mundo__mapa { min-width: 0; }
@media (max-width: 900px) { .tp-mundo__mapa { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tp-mundo__mapa .tp-wm { min-width: 640px; } }

/* Why Teppimer: 4 pilares + cierre */
.tp-pilar__n { display: block; font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; color: var(--tp-menta); margin-bottom: .25rem; }
.tp-section--soft .tp-pilar__n { color: #fff; -webkit-text-stroke: 0; text-shadow: none; color: var(--tp-menta); }
.tp-pilar__sub { color: var(--tp-brand); font-weight: 600; font-size: 1.1rem; margin: 0 0 1rem; }
.tp-pilar__text p { color: var(--tp-ink-soft); margin: 0 0 .9rem; }
.tp-pilar__q { background: var(--tp-menta); color: var(--tp-brand-deep); border-radius: 12px; padding: 1rem 1.25rem; font-weight: 600; margin: 1.25rem 0 0 !important; }
.tp-quatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2rem 0; }
.tp-quatro__c { background: var(--tp-menta); border-radius: 14px; padding: 1.4rem 1.1rem; text-align: center; color: var(--tp-brand-deep); font-weight: 700; font-size: 1.05rem; }
.tp-quatro__c .tp-i { display: block; width: 28px; height: 28px; margin: 0 auto .75rem; color: var(--tp-brand); }
.tp-dif { text-align: center; max-width: 60ch; margin-inline: auto; }
.tp-dif p { color: var(--tp-sobre-verde); }
.tp-dif .tp-btn { margin-top: 1.25rem; background: #fff; border-color: #fff; color: var(--tp-brand); }
.tp-dif .tp-btn:hover { background: var(--tp-menta); border-color: var(--tp-menta); color: var(--tp-brand-deep); }
@media (max-width: 900px) { .tp-quatro { grid-template-columns: repeat(2, 1fr); } }

/* Sectores a los que servimos (home): 10 tarjetas, rejilla fija para que no
   quede una fila coja (antes auto-fit dejaba 7 arriba y 3 abajo). */
.tp-datos-g--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .tp-datos-g--5 { grid-template-columns: repeat(2, 1fr); } }

/* Quienes somos (ES): las bandas verdes iban 5 seguidas y se juntaban en una
   sola masa. Ahora alternan verde / claro, con el mismo relleno vertical en
   todas (antes la regla de secciones contiguas les dejaba arriba 36px y abajo
   104px). Solo estilos: los textos no cambian. */
.tp-qs.tp-qs.tp-qs { padding-block: clamp(3rem, 6vw, 5rem); }
.tp-qs > .tp-wrap > .tp-h2 { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.tp-qs--claro .tp-duo__t { color: var(--tp-brand); }
.tp-qs--claro .tp-duo__d { color: var(--tp-ink-soft); }
.tp-qs--claro .tp-difs__media { background: var(--tp-bg-soft); }
.tp-qs--claro .tp-difs__media img.tp-ph { opacity: .3; }

/* Subfamilia (hoja del catalogo): titulo suelto sobre el contador/buscador. */
.tp-fam-titulo { margin: 0 0 clamp(1rem, 2.5vw, 1.75rem); }

/* Mapa de cobertura en modo solo: la regla .tp-mapa (rejilla de 2 columnas)
   iba despues de .tp-mapa--solo y la pisaba, asi que el mapa quedaba
   encogido a 300px en la columna izquierda. Bloque real, grande y centrado. */
.tp-mapa.tp-mapa--solo { display: block; padding: 0; }
.tp-mapa.tp-mapa--solo .tp-mapa__fig { width: 100%; max-width: min(900px, 100%); margin-inline: auto; }
.tp-mapa.tp-mapa--solo + .tp-lead { margin-inline: auto; max-width: 62ch; text-align: center; }

/* Tarjetas de familia/subfamilia con foto de producto: cuadradas, sin el
   recorte 4/3 pensado para el icono de relleno. */
.tp-exp__media:has(img:not(.tp-ph)) { aspect-ratio: 1 / 1; }

/* Banner verde (+50 años): una columna en móvil, con la foto encima */
@media (max-width: 860px) {
  .tp-banner--verde { grid-template-columns: 1fr; }
  .tp-banner--verde .tp-banner__media { min-height: 46vw; }
}

/* ══ Textos legales (aviso, privacidad, cookies) ══════════════════════════════
   29/9: textos reales de Andres, ya no placeholder. Tipografia de lectura
   larga: numeracion en h2, listas con vineta simple (no el tick de .tp-list,
   que es para argumentarios comerciales), tabla de cookies con lineas finas. */
.tp-legal { max-width: 74ch; }
.tp-legal h2 {
  font-family: 'Libre Franklin', system-ui, sans-serif; font-weight: 700;
  font-size: 1.2rem; letter-spacing: -0.01em; color: var(--tp-brand);
  margin: 2.2rem 0 .75rem;
}
.tp-legal h2:first-child { margin-top: 0; }
.tp-legal p { color: var(--tp-ink-soft); line-height: 1.68; margin: 0 0 1rem; }
.tp-legal ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.tp-legal li { margin-bottom: .4rem; color: var(--tp-ink-soft); line-height: 1.6; }
.tp-legal a { color: var(--tp-brand); text-decoration: underline; }
.tp-legal__tabla { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; font-size: .9rem; }
.tp-legal__tabla th, .tp-legal__tabla td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--tp-line); vertical-align: top; }
.tp-legal__tabla th { color: var(--tp-brand); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.tp-legal__fecha { margin-top: 2rem; font-size: .85rem; color: var(--tp-ink-soft); font-style: italic; }
@media (max-width: 640px) {
  .tp-legal__tabla { display: block; overflow-x: auto; }
}

/* ══ Aviso de cookies ══════════════════════════════════════════════════════ */
.tp-cookies {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90;
  max-width: 640px; margin-inline: auto; background: #fff; color: var(--tp-ink);
  border-radius: var(--tp-r); box-shadow: 0 20px 50px -20px rgba(0,0,0,.35);
  /* 6/10: en paginas con un hero alto (el mapa de cobertura) el aviso
     tapaba parte del contenido al cargar; se aprieta el bulto vertical. */
  padding: .85rem 1.2rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1.2rem;
}
.tp-cookies[hidden] { display: none; }
.tp-cookies__texto { flex: 1 1 320px; font-size: .88rem; line-height: 1.55; color: var(--tp-ink-soft); margin: 0; }
.tp-cookies__texto a { color: var(--tp-brand); text-decoration: underline; }
.tp-cookies__acciones { flex: none; display: flex; gap: .6rem; }
@media (max-width: 480px) {
  .tp-cookies { left: .6rem; right: .6rem; bottom: .6rem; padding: 1.1rem; }
  .tp-cookies__acciones { width: 100%; }
  .tp-cookies__acciones .tp-btn { flex: 1 1 auto; }
}