/* ============================================================
   Talleres de Predicación — Public CSS
   Tipografía: hereda del tema Skudo (inherit)
   Línea gráfica: Predica Fiel — negro, crema, dorado
   ============================================================ */

:root {
    --tp-black:     #0e0e0e;
    --tp-navy:      #1a2535;
    --tp-gold:      #c8a23a;
    --tp-gold-lt:   #e2c06a;
    --tp-gold-dk:   #a07c1e;
    --tp-cream:     #f5f0e8;
    --tp-cream-2:   #ede7d9;
    --tp-white:     #ffffff;
    --tp-gray-200:  #e8e5df;
    --tp-gray-400:  #bbb8b2;
    --tp-gray-600:  #666360;
    --tp-gray-800:  #2e2c2a;
    --tp-red:       #b03020;
    --tp-green:     #2E7D32;

    /* Heredar del tema Skudo */
    --tp-font: inherit;

    --tp-radius:    4px;
    --tp-shadow:    0 4px 24px rgba(0,0,0,.10);
    --tp-shadow-lg: 0 12px 48px rgba(0,0,0,.20);
    --tp-max-w:     1180px;
}

/* Reset solo dentro del plugin */
#tp-taller-page *, #tp-taller-page *::before, #tp-taller-page *::after {
    box-sizing: border-box;
}
#tp-taller-page {
    font-family: inherit; /* usa la fuente del tema Skudo */
    color: var(--tp-gray-800);
    background: var(--tp-cream);
}
.tp-container {
    max-width: var(--tp-max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.tp-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: flex-end;
    background-color: var(--tp-black);
    background-image: var(--tp-banner, none);
    background-size: cover;
    background-position: center top;
    overflow: hidden;
}

.tp-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        110deg,
        rgba(8,8,8,.95) 0%,
        rgba(8,8,8,.80) 50%,
        rgba(8,8,8,.45) 100%
    );
    z-index: 1;
}

/* Triángulo dorado superior derecha */
.tp-hero::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 380px; height: 380px;
    background: linear-gradient(135deg, var(--tp-gold) 0%, var(--tp-gold-dk) 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    opacity: .50; z-index: 1;
}
/* Triángulo inferior derecha */
.tp-hero::after {
    content: '';
    position: absolute; bottom: 0; right: 0;
    width: 200px; height: 200px;
    background: linear-gradient(135deg, var(--tp-gold-dk) 0%, var(--tp-gold) 100%);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    opacity: .30; z-index: 1;
}

/* LOGO en la esquina superior izquierda del hero */
.tp-hero__logo {
    position: absolute;
    top: 2rem; left: 2rem;
    z-index: 10;
}
.tp-hero__logo img {
    height: 60px;
    width: auto;
    filter: brightness(0) invert(1); /* blanco sobre el fondo oscuro */
    opacity: .92;
}

.tp-hero__content {
    position: relative;
    z-index: 2;
    padding: 6rem 1.5rem 5rem;
    width: 100%;
    max-width: 800px;
    margin-left: max(1.5rem, calc((100vw - var(--tp-max-w)) / 2 + 1.5rem));
}

/* Pretítulo "Taller de" */
.tp-hero__pretitulo {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    font-weight: 300;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    line-height: 1;
    margin-bottom: .2rem;
}
.tp-hero__pretitulo-line {
    display: block;
    width: 30px; height: 2px;
    background: var(--tp-gold);
    flex-shrink: 0;
}

/* TÍTULO PRINCIPAL — enorme, como el flyer */
.tp-hero__titulo {
    font-size: clamp(4rem, 11vw, 8.5rem);
    font-weight: 900;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--tp-white);
    line-height: .9;
    margin-bottom: 1.2rem;
    /* Garantizar que hereda la fuente del tema */
    font-family: inherit;
}

.tp-hero__subtitulo {
    font-size: clamp(.8rem, 1.8vw, 1rem);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.50);
    margin-bottom: 2rem;
}
.tp-hero__subtitulo strong { color: var(--tp-gold); font-weight: 700; }

.tp-hero__badges {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 2rem;
}

/* Badge de estado — dorado en lugar de verde */
.tp-estado-badge {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .45em 1.1em;
    border-radius: 2px;
    border: 2px solid currentColor;
}
/* ABIERTO: dorado/ámbar en lugar de verde */
.tp-estado-badge--abierto  { color: var(--tp-gold-lt); border-color: var(--tp-gold); background: rgba(200,162,58,.12); }
.tp-estado-badge--proximo  { color: #fbbf24; border-color: #fbbf24; }
.tp-estado-badge--cerrado,
.tp-estado-badge--completo { color: #f87171; border-color: #f87171; }

.tp-serie-badge {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.7);
    border: 2px solid rgba(255,255,255,.3);
    padding: .45em 1.1em; border-radius: 2px;
}

.tp-hero__meta {
    display: flex; flex-wrap: wrap;
    gap: 1.25rem 2.5rem; margin-bottom: 2.5rem;
}
.tp-meta-item {
    display: flex; align-items: flex-start; gap: .55rem;
    color: rgba(255,255,255,.80); font-size: .92rem;
}
.tp-meta-item svg { flex-shrink: 0; margin-top: .15rem; color: var(--tp-gold); }
.tp-meta-item strong {
    display: block; font-size: .62rem;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--tp-gold); margin-bottom: .1rem; font-weight: 700;
}
.tp-meta-item span { display: block; line-height: 1.4; }

.tp-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.tp-cupos-aviso {
    display: flex; align-items: center; gap: .35rem;
    color: var(--tp-gold-lt); font-size: .78rem;
    font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

/* ─────────────────────────────────────────
   BOTONES
───────────────────────────────────────── */
.tp-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: inherit; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; border-radius: var(--tp-radius);
    transition: all .2s ease; cursor: pointer; border: none; line-height: 1;
}
.tp-btn--primary { background: var(--tp-gold); color: var(--tp-black); padding: .9em 2.2em; }
.tp-btn--primary:hover {
    background: var(--tp-gold-lt); color: var(--tp-black);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(200,162,58,.45);
    text-decoration: none;
}
.tp-btn--lg { font-size: 1rem; padding: 1.1em 2.6em; }
.tp-btn--full { width: 100%; justify-content: center; }
.tp-btn--disabled { background: var(--tp-gray-400); color: var(--tp-gray-600); padding: .9em 2.2em; cursor: not-allowed; }

/* ─────────────────────────────────────────
   CONTADOR
───────────────────────────────────────── */
.tp-countdown-bar {
    background: var(--tp-black);
    border-bottom: 3px solid var(--tp-gold);
    padding: 1rem 1.5rem;
}
.tp-countdown-inner {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 1.25rem;
}
.tp-countdown-label {
    font-size: .75rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
}
.tp-countdown { display: flex; align-items: center; gap: .3rem; }
.tp-countdown-unit {
    display: flex; flex-direction: column; align-items: center;
    gap: .1rem; min-width: 3.5rem;
    background: rgba(255,255,255,.05); padding: .5rem; border-radius: 3px;
}
.tp-count-num { font-size: 2rem; font-weight: 900; color: var(--tp-gold); line-height: 1; }
.tp-count-lbl { font-size: .58rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.tp-countdown-sep { font-size: 1.5rem; font-weight: 900; color: var(--tp-gold); opacity: .5; margin-bottom: 1rem; }

/* ─────────────────────────────────────────
   LAYOUT
───────────────────────────────────────── */
.tp-content-wrap {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 3.5rem;
    padding-top: 4rem; padding-bottom: 5rem;
    align-items: start;
}
@media (max-width: 960px) {
    .tp-content-wrap { grid-template-columns: 1fr; }
    .tp-sidebar { order: -1; }
}

/* ─────────────────────────────────────────
   SECCIONES
───────────────────────────────────────── */
.tp-section { margin-bottom: 4rem; }
.tp-section__title {
    font-size: 1.15rem; font-weight: 800;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--tp-black); margin-bottom: 1.75rem;
    display: flex; align-items: center; gap: .75rem;
}
.tp-title-accent { display: block; width: 28px; height: 3px; background: var(--tp-gold); flex-shrink: 0; }

.tp-lead-text { font-size: 1.08rem; line-height: 1.82; color: var(--tp-gray-800); margin-bottom: 1.5rem; }

.tp-publico-box {
    display: flex; gap: 1rem;
    background: var(--tp-black);
    border-left: 4px solid var(--tp-gold);
    padding: 1.25rem 1.5rem; border-radius: 0 4px 4px 0;
}
.tp-publico-box__icon svg { color: var(--tp-gold); margin-top: .1rem; }
.tp-publico-box__content strong {
    display: block; font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--tp-gold); margin-bottom: .35rem;
}
.tp-publico-box__content p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.82); }

.tp-duracion {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--tp-black); color: var(--tp-gold-lt);
    font-size: .75rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .55em 1.1em; border-radius: 2px; margin-bottom: 1.1rem;
}
.tp-duracion strong { color: var(--tp-white); }

.tp-estructura-text {
    font-size: .97rem; line-height: 1.78; color: var(--tp-gray-800);
    background: var(--tp-cream-2); padding: 1.4rem 1.6rem;
    border-radius: 4px; border-left: 3px solid var(--tp-gold);
}

/* ─────────────────────────────────────────
   INSTRUCTORES — foto + nombre/cargo siempre,
   bio en hover con overlay
───────────────────────────────────────── */
.tp-instructores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.5rem;
}

.tp-instructor-card {
    position: relative;
    border-radius: var(--tp-radius);
    overflow: hidden;
    background: var(--tp-black);
    box-shadow: var(--tp-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
    /* IMPORTANTE: el hover se detecta aquí */
}
.tp-instructor-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--tp-shadow-lg);
}

.tp-instructor-foto {
    width: 100%; height: 260px; overflow: hidden;
    position: relative;
    background: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
}
.tp-instructor-foto img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
    transition: transform .4s ease;
}
.tp-instructor-card:hover .tp-instructor-foto img {
    transform: scale(1.05);
}

/* Círculo dorado decorativo */
.tp-instructor-foto::before {
    content: '';
    position: absolute; bottom: -35px; left: -35px;
    width: 110px; height: 110px;
    background: var(--tp-gold);
    border-radius: 50%; opacity: .22; z-index: 1;
    transition: opacity .3s;
    pointer-events: none;
}
.tp-instructor-card:hover .tp-instructor-foto::before { opacity: .38; }

.tp-foto-fallback {
    color: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}

/* Nombre y cargo — siempre visibles */
.tp-instructor-info-base {
    padding: .9rem 1.1rem .85rem;
    background: var(--tp-black);
    border-top: 2px solid var(--tp-gold);
    position: relative; z-index: 2;
}
.tp-instructor-nombre {
    font-size: 1rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
    color: var(--tp-white); margin: 0 0 .2rem;
    line-height: 1.2;
}
.tp-instructor-cargo {
    font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--tp-gold); margin: 0;
}

/* Bio en hover — overlay sobre toda la card */
.tp-instructor-bio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8,8,8,.94);
    display: flex; flex-direction: column; justify-content: center;
    padding: 1.5rem 1.25rem;
    /* EMPIEZA INVISIBLE */
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 10;
}
/* AL HACER HOVER EN LA CARD → MOSTRAR */
.tp-instructor-card:hover .tp-instructor-bio-overlay {
    opacity: 1;
    pointer-events: auto;
}

.tp-bio-overlay-nombre {
    font-size: .95rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--tp-white); margin: 0 0 .2rem;
}
.tp-bio-overlay-cargo {
    font-size: .65rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tp-gold); margin: 0 0 .85rem;
}
.tp-bio-overlay-sep {
    width: 24px; height: 2px; background: var(--tp-gold); margin-bottom: .85rem;
}
.tp-bio-overlay-text {
    font-size: .87rem; line-height: 1.65; color: rgba(255,255,255,.80);
    margin: 0;
}

/* Hint "Ver más" solo cuando hay bio y no hay hover */
.tp-bio-hover-hint {
    position: absolute; bottom: .55rem; right: .75rem;
    font-size: .6rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--tp-gold); opacity: .65;
    transition: opacity .2s; z-index: 3;
    pointer-events: none;
}
.tp-instructor-card:hover .tp-bio-hover-hint { opacity: 0; }

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
.tp-faq-list { border: 1px solid var(--tp-gray-200); border-radius: var(--tp-radius); overflow: hidden; }
.tp-faq-item + .tp-faq-item { border-top: 1px solid var(--tp-gray-200); }
.tp-faq-question {
    width: 100%; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.5rem; background: var(--tp-white);
    border: none; cursor: pointer; text-align: left;
    font-family: inherit; font-size: .95rem; font-weight: 700;
    color: var(--tp-black); transition: background .15s; letter-spacing: .02em;
}
.tp-faq-question:hover { background: var(--tp-cream-2); }
.tp-faq-question[aria-expanded="true"] { background: var(--tp-black); color: var(--tp-white); }
.tp-faq-question[aria-expanded="true"] .tp-faq-chevron { transform: rotate(180deg); color: var(--tp-gold); }
.tp-faq-chevron { flex-shrink: 0; transition: transform .25s ease; }
.tp-faq-answer { display: none; }
.tp-faq-answer:not([hidden]) { display: block; }
.tp-faq-answer-inner {
    padding: 1.1rem 1.5rem 1.3rem; background: var(--tp-cream-2);
    font-size: .95rem; line-height: 1.72; color: var(--tp-gray-800);
    border-top: 1px solid var(--tp-gray-200);
}

/* ─────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────── */
.tp-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.25rem; }
.tp-sidebar-card {
    background: var(--tp-white); border: 1px solid var(--tp-gray-200);
    border-radius: var(--tp-radius); padding: 1.6rem; box-shadow: var(--tp-shadow);
}
.tp-sidebar-cta { border-top: 4px solid var(--tp-gold); background: var(--tp-black); }
.tp-sidebar-card__title {
    font-size: .72rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--tp-black); margin: 0 0 1.1rem; padding-bottom: .7rem;
    border-bottom: 2px solid var(--tp-gold);
}
.tp-sidebar-cta .tp-sidebar-card__title { color: var(--tp-gold); border-bottom-color: rgba(200,162,58,.25); }

.tp-cupos-sidebar {
    display: flex; align-items: center; gap: .35rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #f87171; margin: .85rem 0 0; justify-content: center;
}

.tp-detalles-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.tp-detalles-list li { display: flex; align-items: flex-start; gap: .65rem; }
.tp-detalles-list li svg { flex-shrink: 0; margin-top: .12rem; color: var(--tp-gold); }
.tp-detalles-list li > div { display: flex; flex-direction: column; gap: .1rem; }
.tp-detalles-list li strong { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tp-gray-600); font-weight: 700; }
.tp-detalles-list li span { color: var(--tp-black); font-weight: 500; font-size: .9rem; line-height: 1.4; }
.tp-detalles-list li em { font-style: normal; opacity: .75; }

.tp-precio-monto { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1.1rem; }
.tp-precio-moneda {
    font-size: .85rem; font-weight: 800; letter-spacing: .05em;
    color: var(--tp-gold); background: var(--tp-black);
    padding: .2em .6em; border-radius: 2px;
}
.tp-precio-num { font-size: 2.6rem; font-weight: 900; color: var(--tp-black); line-height: 1; }
.tp-precio-texto { font-size: 1.05rem; font-weight: 700; color: var(--tp-black); margin-bottom: 1rem; }

.tp-incluye-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.tp-incluye-list li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--tp-gray-800); }
.tp-incluye-list li svg { flex-shrink: 0; }

/* ─────────────────────────────────────────
   CTA FINAL
───────────────────────────────────────── */
.tp-cta-final {
    position: relative; background: var(--tp-black);
    padding: 6rem 1.5rem; text-align: center; overflow: hidden;
}
.tp-cta-final::before {
    content: ''; position: absolute; top: 0; right: 0;
    width: 420px; height: 420px;
    background: linear-gradient(135deg, var(--tp-gold) 0%, var(--tp-gold-dk) 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    opacity: .15; z-index: 0;
}
.tp-cta-final::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 260px; height: 260px;
    background: var(--tp-gold-dk);
    clip-path: polygon(0 100%, 0 0, 100% 100%);
    opacity: .10; z-index: 0;
}
.tp-cta-final__inner { position: relative; z-index: 1; }
.tp-cta-final__eyebrow {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--tp-gold); margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center; gap: .65rem;
}
.tp-cta-final__eyebrow::before,
.tp-cta-final__eyebrow::after { content: ''; display: block; width: 32px; height: 1px; background: var(--tp-gold); opacity: .5; }
.tp-cta-final h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--tp-white); margin: 0 0 .75rem;
}
.tp-cta-final p { color: rgba(255,255,255,.5); font-size: .97rem; margin: 0 0 2.5rem; }

/* ─────────────────────────────────────────
   SHORTCODE GRID
───────────────────────────────────────── */
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.tp-card { display: flex; flex-direction: column; border-radius: var(--tp-radius); overflow: hidden; border: 1px solid var(--tp-gray-200); box-shadow: var(--tp-shadow); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; background: var(--tp-white); }
.tp-card:hover { transform: translateY(-5px); box-shadow: var(--tp-shadow-lg); text-decoration: none; }
.tp-card-img { height: 180px; background: var(--tp-black) center/cover no-repeat; }
.tp-card-body { padding: 1.3rem; }
.tp-badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--tp-gold); display: block; margin-bottom: .4rem; }
.tp-card h3 { font-size: 1.15rem; font-weight: 800; text-transform: uppercase; color: var(--tp-black); margin: 0 0 .5rem; line-height: 1.2; }
.tp-card-fecha, .tp-card-lugar { font-size: .84rem; color: var(--tp-gray-600); margin-top: .25rem; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 640px) {
    .tp-hero { min-height: 72vh; }
    .tp-hero__titulo { font-size: 3.5rem; }
    .tp-hero__content { margin-left: 0; padding: 5rem 1.5rem 3rem; }
    .tp-hero__logo img { height: 44px; }
    .tp-content-wrap { padding-top: 2rem; padding-bottom: 3rem; gap: 2rem; }
    .tp-instructores-grid { grid-template-columns: repeat(2, 1fr); }
    .tp-sidebar { position: static; }
    .tp-hero::before { width: 160px; height: 160px; }
}

/* ─────────────────────────────────────────
   AJUSTES ADICIONALES
───────────────────────────────────────── */

/* Logo — esquina superior DERECHA, gris claro */
.tp-hero__logo {
    position: absolute;
    top: 1.75rem; right: 2rem;
    left: auto;
    z-index: 10;
}
.tp-hero__logo img {
    height: 56px;
    width: auto;
    /* Gris claro: no completamente blanco */
    filter: brightness(0) invert(1) opacity(0.55);
}

/* Pretítulo "Taller de" — 2× más grande que antes, gris muy claro */
.tp-hero__pretitulo {
    font-size: clamp(1.8rem, 4.5vw, 2.8rem);
    font-weight: 300;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);   /* gris claro, no blanco */
    line-height: 1;
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    gap: .65rem;
}
.tp-hero__pretitulo-line {
    display: block;
    width: 30px; height: 2px;
    background: rgba(255,255,255,.3);
    flex-shrink: 0;
}

/* Título — 15% más grande sobre el clamp anterior */
.tp-hero__titulo {
    font-size: clamp(4.6rem, 12.65vw, 9.8rem);
    font-weight: 900;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--tp-white);
    line-height: .9;
    margin-bottom: 1.1rem;
    font-family: inherit;
}

/* "Dirigido a" + público — gris claro igual que pretítulo */
.tp-hero__subtitulo {
    font-size: clamp(.85rem, 2vw, 1.05rem);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);   /* gris claro */
    margin-bottom: 2rem;
}
.tp-hero__subtitulo-publico {
    color: rgba(255,255,255,.38);   /* mismo gris, sin destacar */
    font-weight: 500;
}

/* Estructura como lista */
.tp-estructura-lista {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .65rem;
}
.tp-estructura-lista li {
    display: flex; align-items: flex-start; gap: .65rem;
    font-size: .97rem; line-height: 1.55; color: var(--tp-gray-800);
    padding: .75rem 1rem;
    background: var(--tp-cream-2);
    border-radius: var(--tp-radius);
    border-left: 3px solid var(--tp-gold);
}
.tp-estructura-lista li::before {
    content: '';
    display: block;
    width: 6px; height: 6px;
    background: var(--tp-gold);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .45rem;
}

/* Responsive ajustes */
@media (max-width: 640px) {
    .tp-hero__pretitulo { font-size: 1.5rem; }
    .tp-hero__titulo    { font-size: 3.8rem; }
    .tp-hero__logo      { top: 1rem; right: 1rem; }
    .tp-hero__logo img  { height: 38px; }
}