/* CSS de /twin — extraído de <style> inline (bloqueado por CSP style-src-elem,
   que exige 'self' externo, no basta con 'self' para bloques inline — mismo
   principio ya documentado para <script> inline en este proyecto). Ruta de
   imagen relativa estática (no base_url()), mismo patrón que landing.css. */

.hero-bg {
    position: relative;
    overflow: hidden;
    min-height: 550px;
}

/* Fondo del hero (2026-09-29, a pedido del Usuario): mismo efecto exacto de
   .cav-hero-bg/.cav-hero-bg-img de landing.css — imagen girada -4deg y
   sobredimensionada al 130% (para que el giro no deje bordes vacíos) +
   degradado navy encima, en vez del overlay plano que tenía /twin. */
.twin-hero-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.twin-hero-bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 37, 69, .55), rgba(11, 37, 69, .75));
}

.twin-hero-bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 130%;
    transform: translate(-50%, -50%) rotate(-4deg);
    background-image: url('../images/hero-bg-top50.jpg');
    background-size: cover;
    background-position: center;
    opacity: .55;
}

.icon-box {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size: 1.8rem;
}

.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.125) !important;
}

.twin-banner {
    background: #fef3c7;
    color: #78350f;
    font-size: .85rem;
    text-align: center;
    padding: .5rem 1rem;
}

/* Utilidades puntuales — reemplazan style="" inline (bloqueado por CSP
   style-src-attr: 'self' NO permite atributos inline, a diferencia de lo
   asumido inicialmente — solo 'unsafe-inline'/hash/nonce lo harían).
   Hallazgo real reportado por el Usuario Principal, 2026-09-12. */
.twin-max-w-700 { max-width: 700px; }
.twin-price-featured { position: relative; z-index: 1; }
.twin-fs-7 { font-size: .7rem; }
.twin-fs-8 { font-size: .8rem; }

/* Identidad de color por tier en las cards de precios (2026-09-15, a pedido
   del Usuario Principal) — mismo tratamiento que ya tenía Pro Agent (badge +
   borde + header sólido + botón sólido), recoloreado por tier. Explorer =
   rojo YouTube suave, Enterprise Partner = verde #307030. */
.twin-border-explorer { border-color: #e05252 !important; }
.twin-bg-explorer { background-color: #e05252 !important; }
.twin-btn-explorer { background-color: #e05252; border-color: #e05252; color: #fff; }
.twin-btn-explorer:hover, .twin-btn-explorer:focus { background-color: #c94545; border-color: #c94545; color: #fff; }

.twin-border-enterprise { border-color: #307030 !important; }
.twin-bg-enterprise { background-color: #307030 !important; }
.twin-btn-enterprise { background-color: #307030; border-color: #307030; color: #fff; }
.twin-btn-enterprise:hover, .twin-btn-enterprise:focus { background-color: #285c28; border-color: #285c28; color: #fff; }

/* Links de compra hacia Polar Sandbox deshabilitados (2026-09-28) — el diseño
   de precios ya se portó a la landing real sin checkout; /twin sigue siendo
   el campo de pruebas de diseño, pero deja de disparar compras reales. */
.twin-link-disabled { opacity: .55; cursor: not-allowed; }
.twin-link-disabled:hover, .twin-link-disabled:focus { opacity: .55; }

/* Acento de texto dentro del hero, reutilizado del contenido real de
   landing/index.php (App.landing.heroTitulo/heroSub traen estas 2 clases
   embebidas en el texto). Actualizado 2026-09-29: la card del hero pasó a
   navy/dorado (a pedido del Usuario, ver bloque de abajo), así que estos 2
   acentos vuelven al mismo dorado que ya usaba landing.css (antes usaban
   el azul de Bootstrap, cuando la card todavía era blanca). */
.cav-accent { color: #C9973B; }
.cav-hero-brand { display: inline-block; margin-bottom: .25rem; color: #C9973B; font-weight: 700; }

/* Top-nav (2026-09-29, a pedido del Usuario): azul y dorado ya usados en la
   landing anterior (--cav-navy/--cav-gold de landing.css) — mismos valores
   de color, sin importar esa hoja de estilos. */
.twin-navbar-navy { background-color: #0B2545; }
.twin-gold-text { color: #C9973B; }

/* Card del hero (2026-09-29, a pedido del Usuario): "vidrio" navy con borde
   dorado, mismos valores que .cav-hero-content de landing.css (antes era
   una card blanca de Bootstrap sin relación visual con la landing). */
.twin-hero-card {
    background: rgba(11, 37, 69, .92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #C9973B;
}

.twin-badge-navy-gold { background-color: #0B2545; color: #C9973B; border: 2px solid #C9973B; }
.twin-hero-sub-text { color: #C9D3E0; }
.twin-hero-micro-text { color: #9FAEC2; }
.twin-btn-gold { background-color: #C9973B; border-color: #C9973B; color: #0B2545; }
.twin-btn-gold:hover, .twin-btn-gold:focus { background-color: #A67B2A; border-color: #A67B2A; color: #0B2545; }

/* Sección "Por qué CAV" (2026-09-29, a pedido del Usuario): mismo estilo
   exacto de .cav-section/.cav-card de landing.css — título/intro en el
   mismo tono, cards blancas con borde fino e ícono dorado uniforme, en
   vez de las cards bg-light rounded-4 con 3 íconos de colores distintos
   que tenía /twin. */
.twin-section-title {
    color: #0B2545;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

.twin-section-intro {
    max-width: 640px;
    color: #4A5568;
}

.twin-simple-card {
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: .5rem;
    padding: 2rem 1.5rem;
}

.twin-card-icon-gold {
    font-size: 1.6rem;
    color: #C9973B;
    margin-bottom: 1rem;
}

.twin-card-title {
    color: #0B2545;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}

.twin-card-text {
    color: #4A5568;
    font-size: .95rem;
}

/* Casos de estudio (2026-09-29, a pedido del Usuario). Base: mismo estilo
   exacto de .cav-case-card/.cav-case-stats/.cav-case-bubble/.cav-case-insight
   de landing.css. Actualizado el mismo día: card a fondo navy + borde dorado,
   y la insignia "Perfil compuesto" pasa a flotar sobre el borde superior
   (mismo patrón que las badges "Channel Ad Valorem" de precios), con un
   título distinto por caso en vez del genérico repetido 3 veces. */
.twin-case-card {
    position: relative;
    background: #0B2545;
    border: 2px solid #C9973B;
    border-radius: .6rem;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 .5rem 1.5rem rgba(11, 37, 69, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

.twin-case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .9rem 2rem rgba(11, 37, 69, .26);
}

.twin-case-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #C9973B;
    color: #0B2545;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .4rem .9rem;
    border-radius: 1rem;
    white-space: nowrap;
    z-index: 1;
}

.twin-case-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin: .5rem 0 .5rem;
}

.twin-case-profile {
    color: #C9D3E0;
    font-size: .9rem;
    margin: 0 0 1.25rem;
}

.twin-case-stats {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: repeat(2, auto);
    column-gap: 1.1rem;
    row-gap: .6rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: .4rem;
}

.twin-case-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.twin-case-stat:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.twin-case-stat:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
}

.twin-case-stat-ebitda {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    padding-left: 1.1rem;
    border-left: 1px solid #E2E5EA;
}

.twin-case-stat-label {
    font-size: .7rem;
    color: #8A94A3;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}

.twin-case-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0B2545;
    line-height: 1.15;
}

.twin-case-bubble {
    display: inline-block;
    padding: .45rem 1.2rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .95rem;
    white-space: nowrap;
    color: #fff;
}

.twin-bubble-neg { background: #B3261E; }
.twin-bubble-warn { background: #B36B00; }
.twin-bubble-pos { background: #1E5C3A; }

.twin-case-insight {
    background: rgba(201, 151, 59, .12);
    border-left: 3px solid #C9973B;
    border-radius: .3rem;
    padding: .85rem 1rem;
    margin: 0;
    flex: 1;
}

.twin-case-insight-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #C9973B;
    margin-bottom: .35rem;
}

.twin-case-insight p {
    color: #C9D3E0;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
}

/* Testimonios (2026-09-29, a pedido del Usuario): mismo estilo exacto de
   .cav-testimonial-card de landing.css (comilla decorativa, icono circular,
   cita en cursiva), en vez de las cards bg-light rounded-4 que tenía /twin. */
.twin-testimonial-card {
    background: #fff;
    border: 1px solid #E2E5EA;
    border-radius: .6rem;
    padding: 1.75rem 1.5rem;
    position: relative;
}

.twin-testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: .5rem;
    right: 1.1rem;
    font-family: Georgia, serif;
    font-size: 3rem;
    color: #C9973B;
    opacity: .35;
    line-height: 1;
}

.twin-testimonial-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #F5F6F8;
    border: 1px solid #E2E5EA;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.twin-testimonial-quote {
    position: relative;
    color: #1F2933;
    font-size: .95rem;
    font-style: italic;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}

.twin-testimonial-role {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    color: #0B2545;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* FAQ (2026-09-29, a pedido del Usuario): mismo estilo exacto de .cav-faq
   de landing.css — acordeón con indicador +/- propio, resaltado dorado al
   abrir. Antes /twin usaba style="" inline (bloqueado en silencio por la
   CSP activa: style-src-attr no permite atributos inline) + clases sueltas
   de Bootstrap. */
.twin-faq-container {
    max-width: 640px;
}

.twin-faq details {
    background: #F5F6F8;
    border: 1px solid #E2E5EA;
    border-radius: .5rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: .75rem;
    transition: background-color .15s ease;
}

.twin-faq details:last-child {
    margin-bottom: 0;
}

.twin-faq details[open] {
    background: rgba(201, 151, 59, .08);
    border-color: #C9973B;
}

.twin-faq summary {
    cursor: pointer;
    font-weight: 600;
    color: #0B2545;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.twin-faq summary::-webkit-details-marker {
    display: none;
}

.twin-faq summary::after {
    content: '+';
    font-size: 1.3rem;
    color: #C9973B;
    margin-left: 1rem;
}

.twin-faq details[open] summary::after {
    content: '−';
}

.twin-faq details p {
    margin: .85rem 0 0;
    color: #4A5568;
}

/* Móvil (2026-09-29, a pedido del Usuario): en pantallas angostas el hero
   se centra verticalmente dentro de un contenedor bajo (min-height 550px),
   y la burbuja flotante quedaba pegada al borde superior de la card — lo
   bastante arriba como para taparse con el nav sticky. 20px de aire arriba
   del hero empuja la burbuja lejos del nav. */
@media (max-width: 767px) {
    .hero-bg {
        padding-top: 20px;
    }
}