/* =========================================================
   T3 BASE — Común del rediseño (Tanda 3 · Parte 2)
   Tokens dinámicos desde el admin, topbar/header, footer,
   botones, widget WhatsApp, reveal, FAQ, métricas, responsive.
   Scope: body.t3-rd. Cargado DESPUÉS de sitio_web.css.
   Los colores salen de --brand-* (configurables por cliente).
========================================================= */

body.t3-rd {
    /* Paleta dinámica: resuelve desde los tokens del cliente, con fallback elegante */
    --t3-primary: var(--brand-primary, #8b1e2d);
    --t3-secondary: var(--brand-secondary, #b8893b);
    --t3-accent: var(--brand-accent, #c9a24b);
    --t3-light: var(--brand-bg, #ffffff);
    --t3-surface: var(--brand-surface, #f6f4f1);
    --t3-text: var(--brand-text, #1b1b1d);
    --t3-muted: #6c6a72;
    /* Oscuro cálido derivado del primario del cliente (no negro plano) */
    --t3-dark: color-mix(in srgb, var(--t3-primary) 20%, #1c1620);
    --t3-dark-2: color-mix(in srgb, var(--t3-primary) 26%, #241b27);
    /* Velo de hero derivado de la marca: oscurece el primario hacia negro
       para legibilidad, pero se tiñe con --brand-primary (no vino fijo). */
    --t3-scrim: color-mix(in srgb, var(--t3-primary) 35%, #000);
    --t3-on-dark: #f3eef0;
    --t3-on-dark-muted: #c4b9bf;
    --t3-line: rgba(28, 22, 26, 0.10);
    --t3-line-dark: rgba(255, 255, 255, 0.12);
    /* Fondos suaves cálidos para alternar ritmo sin cajas */
    --t3-soft: color-mix(in srgb, var(--t3-primary) 5%, #faf7f5);
    --t3-soft-2: color-mix(in srgb, var(--t3-accent) 8%, #f7f3ef);
    --t3-radius: 14px;
    --t3-radius-lg: 22px;
    --t3-radius-xl: 30px;
    --t3-shadow: 0 24px 60px rgba(28, 20, 26, 0.13);
    --t3-shadow-soft: 0 12px 34px rgba(28, 20, 26, 0.08);
    --t3-maxw: 1280px;
    --t3-ease: cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-font-smoothing: antialiased;
    /* Defensivo: una palabra/URL sin espacios (texto de cliente) no debe
       forzar overflow horizontal en flex/grid. No afecta texto normal. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.t3-rd .t3-wrap {
    width: min(var(--t3-maxw), calc(100% - 48px));
    margin-inline: auto;
}
/* Contenedores T3 más anchos en desktop (mejor aprovechamiento) */
body.t3-rd .container,
body.t3-rd .t3-container {
    width: min(var(--t3-maxw), calc(100% - 48px));
    margin-inline: auto;
}
body.t3-rd { line-height: 1.7; }

/* Ocultar badges/píldoras decorativas (las secciones se diferencian por título + ritmo) */
body.t3-rd .section-badge,
body.t3-rd .t3-mini-label { display: none !important; }

/* =========================================================
   ESCALA TIPOGRÁFICA GLOBAL (clamp, proporción controlada)
========================================================= */
body.t3-rd {
    --t3-fs-hero: clamp(30px, 4.6vw, 52px);
    --t3-fs-h2: clamp(23px, 2.7vw, 34px);
    --t3-fs-h3: clamp(17px, 1.5vw, 21px);
    --t3-fs-body: clamp(15px, 1.05vw, 16.5px);
    --t3-fs-small: 13.5px;
}
body.t3-rd .t3-section-title { font-size: var(--t3-fs-h2); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
body.t3-rd .t3-section-text { font-size: var(--t3-fs-body); line-height: 1.7; }
body.t3-rd .section-heading h2 { font-size: var(--t3-fs-h2); line-height: 1.14; }
body.t3-rd .t3-dynamic-content h3,
body.t3-rd .t3-service-card h3,
body.t3-rd .t3-purpose-block h3 { font-size: var(--t3-fs-h3); }
body.t3-rd .t3-mini-label,
body.t3-rd .section-badge,
body.t3-rd .t3-eyebrow { font-size: 11.5px; letter-spacing: 0.14em; }
body.t3-rd .btn, body.t3-rd .btn-t3 { font-size: 14.5px; }

/* Helpers de sección reutilizables */
body.t3-rd .t3-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t3-primary);
}
body.t3-rd .t3-accent { color: var(--t3-accent); }

/* ---------- Reveal (gate .t3-js: visible si el JS falla) ---------- */
html.t3-js body.t3-rd .t3-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--t3-ease), transform 0.7s var(--t3-ease);
    will-change: opacity, transform;
}
html.t3-js body.t3-rd .t3-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.t3-js body.t3-rd .t3-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    body.t3-rd .t3-wa-fab { animation: none !important; }
}

/* =========================================================
   TOPBAR — premium, limpio, iconos consistentes
========================================================= */
body.t3-rd .t3-topbar {
    background: var(--t3-dark);
    color: var(--t3-on-dark-muted);
    font-size: 13px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--t3-primary) 28%, transparent);
}
body.t3-rd .t3-topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
    padding-block: 10px !important;
}
body.t3-rd .t3-topbar .topbar-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--t3-on-dark-muted);
    letter-spacing: 0.01em;
}
body.t3-rd .t3-topbar .topbar-item:hover { color: #fff; }
body.t3-rd .t3-topbar .topbar-icon {
    color: var(--t3-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
body.t3-rd .t3-topbar .topbar-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   HEADER sticky premium — nav agrupada con el botón CTA
========================================================= */
body.t3-rd .t3-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--t3-light) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--t3-line);
}
/* Fuerza flex y empuja nav+CTA a la derecha */
body.t3-rd .t3-header-inner {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}
body.t3-rd .t3-header .t3-brand,
body.t3-rd .t3-header .site-brand { flex: 0 0 auto !important; margin-right: auto !important; }
body.t3-rd .t3-header .t3-nav,
body.t3-rd .t3-header .site-nav { margin-left: 24px !important; margin-right: 10px !important; }
body.t3-rd .t3-header-actions { flex-shrink: 0 !important; }

body.t3-rd .t3-nav a {
    position: relative;
    font-weight: 600;
    color: var(--t3-text);
}
body.t3-rd .t3-nav a::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 6px;
    height: 2px;
    background: var(--t3-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s var(--t3-ease);
}
body.t3-rd .t3-nav a:hover::after { transform: scaleX(1); }
body.t3-rd .t3-header-actions .btn {
    background: var(--t3-primary);
    color: #fff;
    border-radius: 999px;
    padding: 11px 24px;
    font-weight: 700;
    border: 0;
    transition: transform 0.2s var(--t3-ease), box-shadow 0.2s var(--t3-ease);
}
body.t3-rd .t3-header-actions .btn:hover { transform: translateY(-2px); box-shadow: var(--t3-shadow-soft); }

/* =========================================================
   BOTONES premium (menos, más claros)
========================================================= */
body.t3-rd .btn-primary,
body.t3-rd .btn-t3.btn-primary,
body.t3-rd .btn-t3-primary {
    background: var(--t3-primary) !important;
    color: #fff !important;
    border-radius: 999px;
    border: 0;
    font-weight: 700;
}
body.t3-rd .btn-secondary,
body.t3-rd .btn-light,
body.t3-rd .btn-t3.btn-secondary,
body.t3-rd .btn-t3.btn-light,
body.t3-rd .btn-t3-secondary {
    background: transparent;
    color: var(--t3-text);
    border: 1.5px solid var(--t3-line);
    border-radius: 999px;
    font-weight: 700;
}
body.t3-rd .btn-t3:hover, body.t3-rd .btn:hover { transform: translateY(-2px); }

/* Botones sobre fondo oscuro */
body.t3-rd .t3-on-dark .btn-secondary,
body.t3-rd .t3-on-dark .btn-light,
body.t3-rd .t3-on-dark .btn-t3-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* =========================================================
   MÉTRICAS / CONTADORES (estructura lista; se alimenta de
   data real cuando exista — ver Parte 2B)
========================================================= */
body.t3-rd .t3-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--t3-line-dark);
    border-radius: var(--t3-radius-lg);
    overflow: hidden;
}
body.t3-rd .t3-metric {
    background: var(--t3-dark);
    padding: 28px 18px;
    text-align: center;
}
body.t3-rd .t3-metric-num {
    font-size: clamp(30px, 6vw, 44px);
    font-weight: 800;
    line-height: 1;
    color: var(--t3-accent);
}
body.t3-rd .t3-metric-label {
    margin-top: 8px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t3-on-dark-muted);
}

/* =========================================================
   FAQ acordeón — referencia cromática principal del sitio
========================================================= */
body.t3-rd .t3-faq-item {
    border: 1px solid var(--t3-line);
    border-radius: var(--t3-radius);
    background: #fff;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(28, 5, 12, 0.05);
    transition: box-shadow 0.22s var(--t3-ease);
}
body.t3-rd .t3-faq-item:hover { box-shadow: var(--t3-shadow-soft); }
body.t3-rd .t3-faq-item.is-open {
    border-color: color-mix(in srgb, var(--t3-primary) 30%, transparent);
    border-left: 3px solid var(--t3-primary);
}
body.t3-rd .t3-faq-q {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 22px 24px;
    font-size: 17px;
    font-weight: 700;
    color: var(--t3-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    line-height: 1.4;
}
body.t3-rd .t3-faq-q::after {
    content: "+";
    font-size: 24px;
    font-weight: 300;
    color: var(--t3-primary);
    flex-shrink: 0;
    transition: transform 0.3s var(--t3-ease);
}
body.t3-rd .t3-faq-item.is-open .t3-faq-q { color: var(--t3-primary); }
body.t3-rd .t3-faq-item.is-open .t3-faq-q::after { transform: rotate(45deg); }
body.t3-rd .t3-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--t3-ease); }
body.t3-rd .t3-faq-a > div { padding: 0 24px 22px; color: var(--t3-muted); line-height: 1.75; font-size: 15.5px; }

/* =========================================================
   FOOTER oscuro · centrado · redes protagonistas
========================================================= */
body.t3-rd .t3-footer {
    background: var(--t3-dark) !important;
    color: var(--t3-on-dark);
    border: 0;
    margin-top: 72px;
    padding: 56px 0 0 !important;
    text-align: center;
}
body.t3-rd .t3-footer-top {
    width: min(720px, calc(100% - 40px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-bottom: 40px;
}
body.t3-rd .t3-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
body.t3-rd .t3-footer-logo {
    max-height: 54px;
    width: auto;
    background: #fff;
    padding: 8px 12px;
    border-radius: 12px;
}
body.t3-rd .t3-footer-brand h3 { color: #fff; margin: 0; font-size: 20px; }
body.t3-rd .t3-footer-desc {
    color: var(--t3-on-dark-muted);
    max-width: 560px;
    line-height: 1.7;
    margin: 0;
    font-size: 14.5px;
}
body.t3-rd .t3-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}
body.t3-rd .t3-footer-nav a {
    color: var(--t3-on-dark);
    font-weight: 600;
    font-size: 14px;
    transition: color 0.2s var(--t3-ease);
}
body.t3-rd .t3-footer-nav a:hover { color: var(--t3-accent); }
body.t3-rd .t3-footer-socials { display: flex; justify-content: center; gap: 14px; }
body.t3-rd .t3-footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    transition: background 0.22s var(--t3-ease), transform 0.22s var(--t3-ease);
}
body.t3-rd .t3-footer-socials a:hover { background: var(--t3-accent); transform: translateY(-3px); }
body.t3-rd .t3-footer-socials svg { width: 22px !important; height: 22px !important; fill: #fff; }
body.t3-rd .t3-footer-socials a:hover svg { fill: var(--t3-dark); }
body.t3-rd .t3-footer-bottom {
    border-top: 1px solid var(--t3-line-dark);
    padding: 20px 0;
    margin-top: 8px;
}
body.t3-rd .t3-footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: var(--t3-on-dark-muted);
    letter-spacing: 0.02em;
}

/* =========================================================
   WIDGET WhatsApp · mini-chat
========================================================= */
body.t3-rd .t3-wa {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 85;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
body.t3-rd .t3-wa-panel {
    width: min(310px, calc(100vw - 36px));
    background: var(--t3-light);
    border-radius: 18px;
    box-shadow: var(--t3-shadow);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transform-origin: bottom right;
    transition: opacity 0.28s var(--t3-ease), transform 0.28s var(--t3-ease);
    pointer-events: none;
}
body.t3-rd .t3-wa.is-open .t3-wa-panel { opacity: 1; transform: none; pointer-events: auto; }
body.t3-rd .t3-wa-head {
    background: #128c4a;
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.t3-rd .t3-wa-head .t3-wa-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
body.t3-rd .t3-wa-head .t3-wa-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.t3-rd .t3-wa-head strong { display: block; font-size: 14.5px; }
body.t3-rd .t3-wa-head span { font-size: 11.5px; opacity: 0.85; }
body.t3-rd .t3-wa-head .t3-wa-close {
    margin-left: auto; background: transparent; border: 0; color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.9;
}
body.t3-rd .t3-wa-body { padding: 16px; background: var(--t3-surface); }
body.t3-rd .t3-wa-msg {
    background: var(--t3-light);
    border-radius: 4px 14px 14px 14px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--t3-text);
    box-shadow: var(--t3-shadow-soft);
}
body.t3-rd .t3-wa-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 2px;
    background: #25d366;
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 14px;
}
body.t3-rd .t3-wa-cta svg { width: 20px; height: 20px; fill: #fff; }
body.t3-rd .t3-wa-fab {
    align-self: flex-end;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #25d366;
    border: 0;
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.25s var(--t3-ease);
    animation: t3-wa-pop 0.5s var(--t3-ease) both;
}
body.t3-rd .t3-wa-fab:hover { transform: scale(1.08); }
body.t3-rd .t3-wa-fab svg { width: 34px; height: 34px; fill: #fff; }
@keyframes t3-wa-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }

/* =========================================================
   FIX: WA container no intercepta taps sobre el footer.
   El div .t3-wa mide ~310px de ancho (fixed, fondo) y sin
   este fix captura todos los taps en esa área aunque el
   panel esté cerrado e invisible.
========================================================= */
body.t3-rd .t3-wa { pointer-events: none; }
body.t3-rd .t3-wa-fab { pointer-events: auto; }

/* touch-action: manipulation — elimina 300ms de delay
   en Android al tocar links y botones del footer/nav. */
body.t3-rd .t3-footer-nav a,
body.t3-rd .t3-footer-socials a,
body.t3-rd .btn-t3,
body.t3-rd .btn,
body.t3-rd .t3-wa-fab,
body.t3-rd .t3-wa-cta { touch-action: manipulation; }

/* =========================================================
   VIDEO FACADE — muestra thumbnail+play y carga el iframe
   solo al clic, evitando la conexión cold a YouTube/Vimeo.
========================================================= */
body.t3-rd .t3-video-facade {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}
body.t3-rd .t3-video-play {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.48);
    transition: transform 0.22s ease, background 0.22s ease;
    touch-action: manipulation;
    flex-shrink: 0;
}
body.t3-rd .t3-video-play:hover,
body.t3-rd .t3-video-facade:hover .t3-video-play { background: #fff; transform: scale(1.1); }
body.t3-rd .t3-video-play svg { width: 34px; height: 34px; fill: #0f172a; margin-left: 5px; }
@media (max-width: 768px) {
    body.t3-rd .t3-video-play { width: 58px; height: 58px; }
    body.t3-rd .t3-video-play svg { width: 26px; height: 26px; margin-left: 4px; }
}

/* =========================================================
   MENOS CAJAS — bloques abiertos editoriales (no tarjetas)
   Neutraliza el look de panel administrativo en claims genéricos.
========================================================= */
body.t3-rd .t3-trust-claim,
body.t3-rd .t3-impact-card,
body.t3-rd .t3-about-signal,
body.t3-rd .t3-origin-point,
body.t3-rd .t3-catalog-side {
    background: transparent !important;
    border: 0 !important;
    border-top: 2px solid var(--t3-accent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 0 !important;
}
body.t3-rd .t3-trust-claim strong,
body.t3-rd .t3-impact-card strong,
body.t3-rd .t3-about-signal strong { color: var(--t3-text); font-size: 16px; display: block; margin-bottom: 6px; }
body.t3-rd .t3-trust-claim p,
body.t3-rd .t3-impact-card p,
body.t3-rd .t3-about-signal p,
body.t3-rd .t3-origin-point p { color: var(--t3-muted); }
/* Ritmo por espaciado, no por borde, en grids de claims */
body.t3-rd .t3-trust-strip-grid,
body.t3-rd .t3-impact-grid,
body.t3-rd .t3-origin-points,
body.t3-rd .t3-about-signals-grid { gap: 28px 36px; }

/* =========================================================
   RESPONSIVE base
========================================================= */
@media (min-width: 769px) {
    body.t3-rd .t3-metrics { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    /* !important documentado: components.css fuerza display flex en topbar-item */
    body.t3-rd .t3-topbar .topbar-message { display: none !important; }
    body.t3-rd .t3-footer { margin-top: 44px; padding-top: 44px !important; }
    body.t3-rd .t3-wa-fab { width: 54px; height: 54px; }
    body.t3-rd .t3-wa-fab svg { width: 30px; height: 30px; }
}