/* ══════════════════════════════════════
   S6 — FORMULARIO
   Todo scopeado a .lt-s6 para evitar
   conflictos con globals/form-modal.
   Variables CSS de core.css — nunca hex
   directos ni nombres de fuente literales.

   SISTEMA RESPONSIVE — 1 breakpoint de layout:
   @media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) → desktop
   su negación → mobile/portrait
   Tipografía con clamp() lineal, no breakpoints.
══════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   1. FONDO + DECORATIVOS (agnósticos al layout)
════════════════════════════════════════════════════════ */

.lt-s6 .lt-section__inner {
    background:
        radial-gradient(ellipse 100% 80% at 50% 50%, var(--color-s6-bg) 0%, var(--color-black) 65%),
        radial-gradient(ellipse 55% 40% at 5% 10%,   rgba(2, 60, 160, .3) 0%, transparent 55%),
        radial-gradient(ellipse 45% 35% at 95% 90%,  rgba(2, 60, 160, .2) 0%, transparent 50%);
    overflow: clip;
}

.lt-s6 .lt-section__inner::before {
    content: '';
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(ellipse 60% 50% at 25% 35%, rgba(2, 87, 210, .18) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 75% 65%, rgba(57, 181, 74, .09) 0%, transparent 55%);
    animation: s6-bg 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes s6-bg {
    0%   { transform: translate(0, 0)   scale(1);    }
    50%  { transform: translate(5%, -4%) scale(1.08); }
    100% { transform: translate(-3%, 4%) scale(1.04); }
}

/* ── Anillos ── */
.lt-s6 .s6-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.lt-s6 .s6-ring {
    position: absolute;
    border-radius: 50%;
    /* Centrado explícito — flex no mueve elementos position:absolute */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lt-s6 .s6-ring:nth-child(1) {
    width: 18vw; height: 18vw;
    border: 1.5px solid rgba(57, 181, 74, .6);
    box-shadow: 0 0 20px rgba(57, 181, 74, .1);
    animation: s6-r1 4s ease-in-out infinite;
}
.lt-s6 .s6-ring:nth-child(2) {
    width: 36vw; height: 36vw;
    border: 1px solid rgba(2, 87, 210, .45);
    animation: s6-r2 6.5s ease-in-out infinite;
    animation-delay: -1.4s;
}
.lt-s6 .s6-ring:nth-child(3) {
    width: 56vw; height: 56vw;
    border: 1px solid rgba(57, 181, 74, .2);
    animation: s6-r3 9s ease-in-out infinite;
    animation-delay: -3.2s;
}
.lt-s6 .s6-ring:nth-child(4) {
    width: 78vw; height: 78vw;
    border: 1px solid rgba(2, 87, 210, .14);
    animation: s6-r2 11s ease-in-out infinite;
    animation-delay: -5s;
}
.lt-s6 .s6-ring:nth-child(5) {
    width: 106vw; height: 106vw;
    border: 1px solid rgba(57, 181, 74, .06);
    animation: s6-r1 14s ease-in-out infinite reverse;
    animation-delay: -6s;
}

/* translate(-50%,-50%) incluido en cada keyframe para preservar el centrado */
@keyframes s6-r1 {
    0%   { opacity: .3;  transform: translate(-50%,-50%) scale(.95)  rotate(0deg);   }
    40%  { opacity: 1;   transform: translate(-50%,-50%) scale(1.06) rotate(8deg);   }
    70%  { opacity: .5;  transform: translate(-50%,-50%) scale(.99)  rotate(-5deg);  }
    100% { opacity: .3;  transform: translate(-50%,-50%) scale(.95)  rotate(0deg);   }
}
@keyframes s6-r2 {
    0%   { opacity: .65; transform: translate(-50%,-50%) scale(1.03) rotate(0deg);   }
    35%  { opacity: .2;  transform: translate(-50%,-50%) scale(.94)  rotate(-12deg); }
    65%  { opacity: .75; transform: translate(-50%,-50%) scale(1.05) rotate(6deg);   }
    100% { opacity: .65; transform: translate(-50%,-50%) scale(1.03) rotate(0deg);   }
}
@keyframes s6-r3 {
    0%   { opacity: .2;  transform: translate(-50%,-50%) scale(1)    rotate(0deg);   }
    50%  { opacity: .55; transform: translate(-50%,-50%) scale(1.06) rotate(18deg);  }
    100% { opacity: .2;  transform: translate(-50%,-50%) scale(1)    rotate(0deg);   }
}

/* ── Canvas nodos ── */
.lt-s6 .s6-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}


/* ════════════════════════════════════════════════════════
   2. INTRO — desktop only
   position:absolute centrado, encima de la card (z 20).
   BUG FIX: estado inicial controlado aquí, no solo en JS.
   - Desktop: visible por defecto → JS anima entrada y salida
   - Mobile:  display:none → nunca aparece, sin overlap
════════════════════════════════════════════════════════ */

.lt-s6 .s6-intro {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 20;
    pointer-events: none;
    /* Mobile-first: oculto por defecto */
    display: none;
}

.lt-s6 .s6-intro-line { overflow: hidden; padding-top: 0.2em; margin-top: -0.2em; }

.lt-s6 .s6-intro h2 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 5.5vw, 7rem);
    color: var(--color-white);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    will-change: opacity, transform;
}

.lt-s6 .s6-intro-line:nth-child(5) h2 {
    font-size: clamp(3.3rem, 6.2vw, 8rem);
}

.lt-s6 .s6-intro-sep {
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, transparent, rgba(57, 181, 74, .6), transparent);
    margin: .3rem auto;
    transition: height .6s ease;
}
.lt-s6 .s6-intro.revealed .s6-intro-sep { height: 28px; }

/* Glow letters */
.lt-s6 .glow-letter {
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .4);
    transition: color .2s, text-shadow .2s, -webkit-text-stroke-color .2s;
}
.lt-s6 .glow-letter.lit {
    color: var(--color-green);
    -webkit-text-stroke-color: var(--color-green);
    text-shadow: 0 0 12px rgba(57, 181, 74, .9), 0 0 35px rgba(57, 181, 74, .45);
}

/* CTA */
.lt-s6 .s6-cta-wrap {
    margin-top: 2rem;
    pointer-events: auto;
    will-change: opacity;
}

.lt-s6 .s6-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 2.5rem;
    border: 1.5px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: clamp(11px, .85vw, 13px);
    font-weight: 600;
    letter-spacing: .25em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color .35s, border-color .35s;
    text-decoration: none;
}
.lt-s6 .s6-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.87, 0, .13, 1);
    z-index: 0;
}
.lt-s6 .s6-cta:hover { color: var(--color-black); border-color: var(--color-green); }
.lt-s6 .s6-cta:hover::before { transform: scaleX(1); }
.lt-s6 .s6-cta span,
.lt-s6 .s6-cta-arrow { position: relative; z-index: 1; }
.lt-s6 .s6-cta-arrow { transition: transform .3s; }
.lt-s6 .s6-cta:hover .s6-cta-arrow { transform: translateX(4px); }


/* ════════════════════════════════════════════════════════
   3. CARD + PANEL — base mobile-first
   Mobile: columna (video arriba, panel abajo), scroll libre.
   La sección fluye en el documento, min-height 100svh.
════════════════════════════════════════════════════════ */

/* Sección — mobile: flujo normal */
.lt-s6 {
    height: auto;
    min-height: 100svh;
}

.lt-s6 .lt-section__inner {
    position: relative;
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: clip;
}

/* Canvas y anillos — solo desktop */
.lt-s6 .s6-canvas,
.lt-s6 .s6-rings { display: none; }

/* ── Card ── */
.lt-s6 .frm-card {
    position: relative;
    inset: auto;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    opacity: 1;
    z-index: 15;
}

/* ── Video ── */
.lt-s6 .frm-video {
    position: relative;
    flex: none;
    width: 100%;
    height: clamp(180px, 50vw, 300px);
    overflow: hidden;
    background: var(--color-black);
}

.lt-s6 .frm-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transform: scale(1.12); /* recorta marca de agua */
}

.lt-s6 .frm-video-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--color-s6-ph) 0%, var(--color-navy) 60%, var(--color-s6-detail) 100%);
}
.lt-s6 .frm-video-ph-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: .35;
}
.lt-s6 .frm-video-ph-icon {
    width: 56px; height: 56px;
    border: 1.5px solid rgba(57, 181, 74, .5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lt-s6 .frm-video-ph-icon svg {
    width: 22px; height: 22px;
    fill: none;
    stroke: var(--color-green);
    stroke-width: 1.5;
    margin-left: 3px;
}
.lt-s6 .frm-video-ph span {
    font-size: .7rem;
    color: rgba(255,255,255,.5);
    letter-spacing: .25em;
    text-transform: uppercase;
}

/* ── Context panel: hero image flotante en mobile ── */
.lt-s6 .frm-context {
    position: relative;
    width: 90%;
    margin: clamp(4.5rem, 10vw, 5.5rem) auto 0;
    border-radius: clamp(16px, 2.5vw, 24px);
    overflow: hidden;
    height: clamp(250px, 68vw, 420px);
    flex: none;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .50),
        0 0 0 1px rgba(2, 87, 210, .20);
}

.lt-s6 .frm-ctx-photo {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(0.55) brightness(0.75);
    display: block;
}

.lt-s6 .frm-ctx-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(155deg, rgba(2, 50, 150, .40) 0%, transparent 55%),
        linear-gradient(to bottom, transparent 38%, rgba(0, 5, 20, .82) 100%);
    z-index: 1;
}

.lt-s6 .frm-ctx-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(.9rem, 3vw, 1.4rem) clamp(1rem, 3.5vw, 1.6rem);
    gap: .3rem;
    background: none;
    overflow: visible;
}

.lt-s6 .frm-ctx-label {
    font-family: var(--font-body);
    font-size: clamp(.6rem, 1.6vw, .7rem);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-green);
    background: rgba(0, 0, 0, .42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(57, 181, 74, .30);
    align-self: flex-start;
    margin-bottom: .2rem;
}

.lt-s6 .frm-ctx-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3.2rem);
    color: #fff;
    line-height: 1.0;
    font-weight: 400;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}

.lt-s6 .frm-ctx-bullets,
.lt-s6 .frm-ctx-stats,
.lt-s6 .frm-ctx-stat-sep { display: none; }

/* ── Panel ── */
.lt-s6 .frm-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(1rem, 3vw, 1.6rem);
    background: linear-gradient(155deg, var(--color-s6-panel-b) 0%, var(--color-s6-panel) 45%, var(--color-black) 100%);
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: clamp(1.6rem, 4.5vw, 2.4rem) clamp(1.2rem, 4vw, 1.8rem) clamp(2.4rem, 6vw, 3rem);
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 1;
}
.lt-s6 .frm-panel::-webkit-scrollbar { display: none; }

.lt-s6 .frm-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 45%;
    background: radial-gradient(ellipse at top left, rgba(57, 181, 74, .08) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}
.lt-s6 .frm-panel > * { position: relative; z-index: 1; }

/* ── Panel header ── */
.lt-s6 .frm-panel-header {
    flex-shrink: 0;
}

.lt-s6 .frm-panel-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: clamp(.3rem, 1vw, .6rem);
}
.lt-s6 .frm-panel-label::before {
    content: '';
    width: 18px; height: 1.5px;
    background: var(--color-green);
    flex-shrink: 0;
    border-radius: 2px;
}
.lt-s6 .frm-panel-label span {
    font-family: var(--font-body);
    font-size: clamp(.68rem, 2vw, .85rem);
    font-weight: 600;
    color: var(--color-green);
    letter-spacing: .38em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Título — clamp lineal 375→1920, min 2rem max 8rem */
.lt-s6 .frm-panel-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.058rem + 4.065vw, 8rem);
    color: var(--color-white);
    line-height: .87;
    letter-spacing: .02em;
    margin-bottom: clamp(.3rem, 1vw, .8rem);
    white-space: normal;
}

.lt-s6 .frm-accent {
    color: var(--color-green);
    text-shadow: 0 0 30px rgba(57, 181, 74, .35);
}

.lt-s6 .frm-panel-rule {
    width: 55%;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,.18), rgba(255,255,255,.06) 70%, transparent);
    margin-bottom: clamp(.2rem, .5vw, .4rem);
    display: none; /* oculto en mobile, visible en desktop */
}

.lt-s6 .frm-panel-sub {
    font-family: var(--font-body);
    font-size: clamp(.7rem, 2vw, .85rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .35);
    letter-spacing: .1em;
    font-style: italic;
    display: none; /* oculto en mobile, visible en desktop */
}

/* ── Fields ── */
.lt-s6 .frm-fields {
    display: flex;
    flex-direction: column;
    gap: clamp(.6rem, 2vw, 1rem);
    flex-shrink: 0;
}
.lt-s6 .frm-fields::-webkit-scrollbar { display: none; }

.lt-s6 .frm-chips-wrap {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.lt-s6 .frm-service-label {
    font-family: var(--font-body);
    font-size: clamp(.7rem, 2vw, .88rem);
    font-weight: 600;
    color: rgba(255, 255, 255, .5);
    letter-spacing: .25em;
    text-transform: uppercase;
}

.lt-s6 .frm-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.3rem, 1vw, .55rem);
}

.lt-s6 .frm-chip {
    position: relative;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .65);
    padding: clamp(.45rem, 1.5vw, .75rem) .5rem;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, .03);
    overflow: hidden;
    transition: color .22s, border-color .22s, background .22s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px; /* touch target */
}

.lt-s6 .frm-chip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: .5rem;
    transform: translateY(-50%) scale(0);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--color-green);
    opacity: 0;
    transition: opacity .2s, transform .2s;
}

.lt-s6 .frm-chip:hover {
    border-color: rgba(57, 181, 74, .35);
    color: var(--color-white);
    background: rgba(57, 181, 74, .05);
}
.lt-s6 .frm-chip span {
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    display: block;
}
.lt-s6 .frm-chip.selected {
    background: rgba(57, 181, 74, .1);
    border-color: rgba(57, 181, 74, .7);
    color: var(--color-green);
}
.lt-s6 .frm-chip.selected::before { opacity: 1; transform: translateY(-50%) scale(1); }

.lt-s6 .frm-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(.6rem, 2vw, 1rem);
}

.lt-s6 .frm-group {
    display: flex;
    flex-direction: column;
    gap: .28rem;
}

.lt-s6 .frm-group--grow { flex: none; }
.lt-s6 .frm-group--grow .frm-input {
    height: clamp(4rem, 15vw, 7rem);
    min-height: 4rem;
}

.lt-s6 .frm-label {
    font-family: var(--font-body);
    font-size: clamp(.76rem, 2vw, .9rem);
    font-weight: 500;
    color: rgba(255, 255, 255, .65);
    display: block;
    flex-shrink: 0;
}

.lt-s6 .frm-input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem; /* fijo — evita zoom iOS */
    color: var(--color-white);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
    padding: clamp(.6rem, 2vw, .9rem) clamp(.8rem, 2.5vw, 1.1rem);
    outline: none;
    transition: border-color .25s, background .25s, box-shadow .25s;
    min-height: 44px; /* touch target */
}
.lt-s6 .frm-input::placeholder { color: rgba(255, 255, 255, .28); }
.lt-s6 .frm-input:focus {
    border-color: rgba(57, 181, 74, .5);
    background: rgba(57, 181, 74, .04);
    box-shadow: 0 0 0 3px rgba(57, 181, 74, .07);
}
.lt-s6 .frm-input.error { border-color: rgba(255, 80, 80, .5); }

.lt-s6 textarea.frm-input {
    resize: none;
    min-height: clamp(4rem, 15vw, 7rem);
    height: auto;
}

/* ── Submit row ── */
.lt-s6 .frm-submit-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: clamp(.5rem, 1.5vw, .8rem);
    border-top: 1px solid rgba(255,255,255,.06);
}

/* Línea divisoria — oculta en mobile, visible en desktop */
.lt-s6 .frm-submit-line { display: none; }
.lt-s6 .frm-submit-line-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--color-green), rgba(57, 181, 74, .3));
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(0);
    opacity: 0;
    transition: opacity .3s;
}
.lt-s6 .frm-submit-line.timing .frm-submit-line-fill { opacity: 1; }

.lt-s6 .frm-submit {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: clamp(.88rem, 2.5vw, 1rem);
    font-weight: 600;
    color: var(--color-black);
    background: var(--color-green);
    border: 2px solid var(--color-green);
    border-radius: 7px;
    padding: clamp(.7rem, 2vw, 1rem) clamp(1.8rem, 4vw, 3rem);
    cursor: pointer;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background .3s, color .3s, box-shadow .3s;
    white-space: nowrap;
    min-height: 44px;
    width: 100%;
    text-align: center;
}
.lt-s6 .frm-submit:hover {
    background: transparent;
    color: var(--color-green);
    box-shadow: 0 0 28px rgba(57, 181, 74, .2);
}

/* ── Stats — ocultas en mobile ── */
.lt-s6 .frm-stats { display: none; }

@keyframes metal-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes border-glow {
    0%   { box-shadow: 0 0 0px 0px rgba(57,181,74,0);   border-color: rgba(57,181,74,.1); }
    50%  { box-shadow: 0 0 8px 1px rgba(57,181,74,.25); border-color: rgba(57,181,74,.45); }
    100% { box-shadow: 0 0 0px 0px rgba(57,181,74,0);   border-color: rgba(57,181,74,.1); }
}

.lt-s6 .frm-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: 0 clamp(.8rem, 2vw, 2rem);
    text-align: left;
}
.lt-s6 .frm-stat:first-child { padding-left: 0; }

.lt-s6 .frm-stat-top {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.lt-s6 .frm-stat-value,
.lt-s6 .frm-stat-icon {
    background: linear-gradient(
        105deg,
        #6b7f8f 0%, #a8bcc8 18%, #ddeaf0 35%,
        #ffffff 50%, #ddeaf0 65%, #a8bcc8 82%, #6b7f8f 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: metal-shimmer 4s linear infinite;
}
.lt-s6 .frm-stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vh, 2.8rem);
    line-height: 1;
    letter-spacing: .03em;
}
.lt-s6 .frm-stat-icon {
    font-size: clamp(.9rem, 1.6vh, 1.6rem);
    animation-delay: -.8s;
    overflow: visible;
    display: inline-block;
}
.lt-s6 .frm-stat-label {
    font-family: var(--font-body);
    font-size: clamp(.6rem, .9vh, .78rem);
    color: rgba(255, 255, 255, .4);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.35;
    max-width: 140px;
}
.lt-s6 .frm-stat-divider {
    width: 1px;
    height: clamp(1.8rem, 3.5vh, 3rem);
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.25), rgba(255,255,255,.25), transparent);
    flex-shrink: 0;
}

/* ── Success state ── */
.lt-s6 .frm-state-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    min-height: 50svh;
    padding: 2rem 1rem;
    gap: clamp(.5rem, 2vw, 1.2rem);
}

.lt-s6 .frm-ss-icon {
    width: clamp(3rem, 8vw, 5rem);
    height: clamp(3rem, 8vw, 5rem);
    border: 1.5px solid var(--color-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(57,181,74,.25), 0 0 60px rgba(57,181,74,.08);
    flex-shrink: 0;
    animation: ss-pop .4s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes ss-pop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.lt-s6 .frm-ss-icon svg {
    width: 46%; height: 46%;
    stroke-dasharray: 28;
    stroke-dashoffset: 28;
    animation: ss-draw .5s .25s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes ss-draw { to { stroke-dashoffset: 0; } }

.lt-s6 .frm-ss-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 7rem);
    color: var(--color-white);
    letter-spacing: .04em;
    line-height: .95;
    animation: ss-fade-up .45s .15s ease both;
}
.lt-s6 .frm-ss-text {
    font-family: var(--font-body);
    font-size: clamp(.82rem, 2vw, 1rem);
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
    max-width: 300px;
    animation: ss-fade-up .45s .25s ease both;
}
@keyframes ss-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.lt-s6 .frm-ss-bar {
    width: 180px; height: 2px;
    background: rgba(255,255,255,.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: clamp(.3rem, 1vw, .6rem);
    animation: ss-fade-up .4s .4s ease both;
}
.lt-s6 .frm-ss-bar-fill {
    height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--color-green), rgba(57,181,74,.3));
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(1);
}
.lt-s6 .frm-ss-hint {
    font-family: var(--font-body);
    font-size: clamp(.66rem, 1.5vw, .8rem);
    color: rgba(255, 255, 255, .35);
    letter-spacing: .1em;
    animation: ss-fade-up .4s .5s ease both;
}


/* ════════════════════════════════════════════════════════
   4. DESKTOP
   @media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px)

   BUG FIX: intro visible, card opacity:0 — JS maneja transición.
   La sección ocupa exactamente 100vh (pineada por ScrollTrigger).
   Layout horizontal: video izquierda, panel derecha.
════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

    /* Sección — altura fija, GSAP la pina */
    .lt-s6 {
        height: 100svh;
        min-height: 0;
    }

    .lt-s6 .lt-section__inner {
        position: absolute;
        inset: 0;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: row; /* horizontal */
        overflow: clip;
    }

    /* Canvas y anillos — solo desktop */
    .lt-s6 .s6-canvas,
    .lt-s6 .s6-rings { display: block; }

    /* Intro — visible, absolute centrado, encima de la card */
    .lt-s6 .s6-intro {
        display: flex; /* sobreescribe el display:none base */
        flex-direction: column;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* Card — absolute inset:0, oculta hasta que JS la revela.
       BUG FIX: opacity:0 aquí, no solo en el bloque min-width:1100px anterior */
    .lt-s6 .frm-card {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        background: var(--color-black);
        opacity: 0;
        will-change: opacity;
    }

    /* Video — columna izquierda, ancho fijo proporcional */
    .lt-s6 .frm-video {
        flex: 0 0 40%;
        height: 100%;
        width: auto;
    }

    .lt-s6 .frm-video video { transform: none; }

    /* Context panel — columna izquierda en fragmentos sin video.
       En index.html (que tiene .frm-video), se oculta aquí. */
    .lt-s6 .frm-context {
        display: none;
    }

    .lt-s6 .frm-ctx-content {
        padding: clamp(1.8rem, 3.5vh, 3rem) clamp(1.8rem, 3vw, 3rem);
        gap: .6rem;
    }

    .lt-s6 .frm-ctx-label {
        font-size: clamp(.6rem, .85vh, .75rem);
    }

    .lt-s6 .frm-ctx-title {
        font-size: clamp(2rem, min(4.5vh, 3.5vw), 4rem);
    }

    .lt-s6 .frm-ctx-bullets {
        display: flex;
        flex-direction: column;
        list-style: none;
        padding: 0;
        margin: .3rem 0 0;
        gap: .55rem;
    }

    .lt-s6 .frm-ctx-bullets li {
        display: flex;
        align-items: center;
        gap: .65rem;
        font-family: var(--font-body);
        font-size: clamp(.66rem, 1.1vh, .8rem);
        color: rgba(255, 255, 255, .72);
        line-height: 1.35;
    }

    .lt-s6 .frm-ctx-bullets li svg {
        width: clamp(13px, 1.3vh, 17px);
        height: clamp(13px, 1.3vh, 17px);
        stroke: var(--color-green);
        fill: none;
        stroke-width: 1.5;
        flex-shrink: 0;
    }

    .lt-s6 .frm-ctx-stats {
        display: flex;
        align-items: center;
        padding: .65rem .9rem;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 10px;
        margin-top: .3rem;
    }

    .lt-s6 .frm-ctx-stat {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .15rem;
        text-align: center;
    }

    .lt-s6 .frm-ctx-stat-val {
        font-family: var(--font-display);
        font-size: clamp(1.1rem, 1.9vh, 1.7rem);
        color: var(--color-green);
        line-height: 1;
        letter-spacing: .03em;
    }

    .lt-s6 .frm-ctx-stat-lbl {
        font-family: var(--font-body);
        font-size: clamp(.52rem, .75vh, .65rem);
        color: rgba(255, 255, 255, .42);
        text-transform: uppercase;
        letter-spacing: .07em;
        line-height: 1.3;
    }

    .lt-s6 .frm-ctx-stat-sep {
        display: block;
        width: 1px;
        height: clamp(1.4rem, 2.8vh, 2rem);
        background: rgba(255, 255, 255, .14);
        flex-shrink: 0;
    }

    /* Panel — columna derecha, ocupa el resto */
    .lt-s6 .frm-panel {
        flex: 1;
        height: 100%;
        border-top: none;
        border-left: 1px solid rgba(255, 255, 255, .04);
        border-top: 1px solid rgba(57, 181, 74, .18);
        justify-content: flex-start;
        gap: clamp(1rem, 2.2vh, 1.8rem);
        padding: clamp(1.8rem, 4vh, 4.5rem) clamp(1.5rem, 3.5vw, 5rem) clamp(1.2rem, 2.5vh, 3rem);
        overflow-y: auto;
    }

    /* Fields — crece para absorber espacio libre; textarea lo hereda */
    .lt-s6 .frm-fields {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Grupo del textarea — eslabón necesario en la cadena flex */
    .lt-s6 .frm-group--grow { flex: 1; }

    /* Fila nombre + teléfono en 2 columnas */
    .lt-s6 .frm-row { grid-template-columns: 1fr 1fr; gap: clamp(.5rem, 1.2vw, 1.2rem); }

    /* Submit row — horizontal con línea decorativa a la izquierda */
    .lt-s6 .frm-submit-row {
        flex-direction: row-reverse;
        align-items: center;
        gap: 1rem;
    }
    .lt-s6 .frm-submit-line {
        display: block;
        flex: 1;
        height: 2px;
        background: rgba(255, 255, 255, .07);
        border-radius: 2px;
        overflow: hidden;
        position: relative;
    }

    /* Submit — ancho auto, no full width */
    .lt-s6 .frm-submit { width: auto; }

    /* Rule y sub visibles en desktop */
    .lt-s6 .frm-panel-rule { display: block; }
    .lt-s6 .frm-panel-sub  { display: block; }

    /* Stats visibles */
    .lt-s6 .frm-stats {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        align-items: center;
        gap: 0;
        padding: clamp(.5rem, 1.2vh, 1.4rem) clamp(.6rem, 1.2vw, 1.4rem);
        background: rgba(255, 255, 255, .03);
        border: 1px solid rgba(57, 181, 74, .15);
        border-radius: 10px;
        animation: border-glow 3s ease-in-out infinite;
    }

    /* Título desktop — escala entre 375→1920, pero acotado por vh en pantallas cortas */
    .lt-s6 .frm-panel-title {
        font-size: clamp(1.8rem, min(7.5vh, 5vw), 9rem);
        line-height: .87;
    }

    /* Textarea — absorbe el espacio sobrante dentro del grupo flex */
    .lt-s6 .frm-group--grow .frm-input { height: auto; min-height: 3rem; }
    .lt-s6 textarea.frm-input { flex: 1; min-height: 80px; resize: none; }

    /* Intro h2 — tamaño desktop */
    .lt-s6 .s6-intro h2 { font-size: clamp(2.8rem, 5.5vw, 7rem); }
    .lt-s6 .s6-intro-line:nth-child(5) h2 { font-size: clamp(3rem, 6.2vw, 8rem); }
}

/* ════════════════════════════════════════════════════════
   5. AJUSTE LAPTOP CORTA (landscape, alto ≤ 780px)
   1280×720, 1366×768, 1536×864 con 125% DPI.

   ESTRATEGIA: space-between distribuye, título por vw.
   Sub-bloque ≤730px oculta rule+sub para ganar espacio.
════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) and (max-height: 780px) {

    .lt-s6 .frm-panel {
        justify-content: flex-start;
        gap: clamp(.6rem, 1.6vh, 1.2rem);
        padding: clamp(.7rem, 1.8vh, 1.8rem) clamp(1.2rem, 2.5vw, 3rem) clamp(.5rem, 1vh, 1rem);
        overflow-y: auto;
    }

    .lt-s6 .frm-panel-title { font-size: clamp(1.6rem, 3.5vw, 4rem); margin-bottom: .15rem; }

    .lt-s6 .frm-panel-label { margin-bottom: .1rem; }
    .lt-s6 .frm-panel-label span { font-size: .7rem; }
    .lt-s6 .frm-panel-rule  { display: block; margin-bottom: .08rem; }
    .lt-s6 .frm-panel-sub   { display: block; font-size: .65rem; }

    .lt-s6 .frm-fields { gap: clamp(.25rem, .7vh, .7rem); }
    .lt-s6 .frm-chips  { gap: clamp(.18rem, .4vw, .35rem); }
    .lt-s6 .frm-service-label { font-size: .65rem; }

    .lt-s6 .frm-chip { padding: .32rem .4rem; font-size: clamp(.65rem, 1vw, .78rem); min-height: 36px; }

    .lt-s6 .frm-label  { font-size: .72rem; }
    .lt-s6 .frm-input  { padding: .38rem .7rem; font-size: .86rem; min-height: 36px; }
    .lt-s6 textarea.frm-input { height: clamp(2.2rem, 5vh, 4rem); min-height: 2.2rem; }
    .lt-s6 .frm-group--grow .frm-input { height: clamp(2.2rem, 5vh, 4rem); min-height: 2.2rem; }

    .lt-s6 .frm-stats       { padding: clamp(.22rem, .55vh, .55rem) clamp(.45rem, .9vw, .9rem); }
    .lt-s6 .frm-stat-value  { font-size: clamp(.95rem, 1.9vh, 1.6rem); }
    .lt-s6 .frm-stat-icon   { font-size: clamp(.72rem, 1.3vh, 1rem); }
    .lt-s6 .frm-stat-label  { font-size: .56rem; }
    .lt-s6 .frm-stat-divider { height: clamp(1.3rem, 2.6vh, 2rem); }

    .lt-s6 .frm-submit-row { padding-top: clamp(.2rem, .5vh, .5rem); }
    .lt-s6 .frm-submit { padding: .45rem 1.6rem; font-size: .8rem; min-height: 36px; }

    .lt-s6 .s6-intro h2 { font-size: clamp(2rem, 4vw, 4.8rem); white-space: normal; text-align: center; }
    .lt-s6 .s6-intro-line:nth-child(5) h2 { font-size: clamp(2.2rem, 4.5vw, 5.2rem); }
    .lt-s6 .s6-cta { padding: .65rem 1.8rem; }
    .lt-s6 .s6-cta-wrap { margin-top: .9rem; }

    .lt-s6 .frm-ss-title { font-size: clamp(1.8rem, 3.8vh, 3rem); }
    .lt-s6 .frm-ss-icon  { width: 2.4rem; height: 2.4rem; }
    .lt-s6 .frm-ss-text  { font-size: .8rem; }

    .lt-s6 .frm-ctx-content { padding: clamp(1.2rem, 2.5vh, 2rem) clamp(1.2rem, 2vw, 2rem); gap: .4rem; }
    .lt-s6 .frm-ctx-title { font-size: clamp(1.6rem, min(3.5vh, 3vw), 3.2rem); }
    .lt-s6 .frm-ctx-bullets { gap: .38rem; }
    .lt-s6 .frm-ctx-bullets li { font-size: clamp(.62rem, .95vh, .74rem); }
    .lt-s6 .frm-ctx-stats { padding: .5rem .7rem; margin-top: .2rem; }
    .lt-s6 .frm-ctx-stat-val { font-size: clamp(.95rem, 1.6vh, 1.4rem); }
    .lt-s6 .frm-ctx-stat-lbl { font-size: .5rem; }
    .lt-s6 .frm-ctx-stat-sep { height: clamp(1.2rem, 2.4vh, 1.7rem); }
}

/* ── Sub-ajuste ≤730px (720p exacto) — oculta rule+sub, comprime más ── */
@media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) and (max-height: 730px) {

    .lt-s6 .frm-panel {
        gap: clamp(.2rem, .6vh, .6rem);
        padding: clamp(.6rem, 1.4vh, 1.4rem) clamp(1.2rem, 2.5vw, 3rem) clamp(.4rem, .8vh, .8rem);
    }

    .lt-s6 .frm-panel-title { font-size: clamp(1.4rem, 3vw, 3.5rem); }
    .lt-s6 .frm-panel-rule  { display: none; }
    .lt-s6 .frm-panel-sub   { display: none; }

    .lt-s6 .frm-fields { gap: clamp(.18rem, .5vh, .5rem); }
    .lt-s6 .frm-chip   { padding: .28rem .35rem; font-size: .63rem; min-height: 34px; }
    .lt-s6 .frm-input  { padding: .32rem .65rem; font-size: .84rem; min-height: 34px; }
    .lt-s6 textarea.frm-input { height: clamp(2rem, 4vh, 3rem); min-height: 2rem; }
    .lt-s6 .frm-group--grow .frm-input { height: clamp(2rem, 4vh, 3rem); min-height: 2rem; }

    .lt-s6 .frm-stats       { padding: clamp(.18rem, .45vh, .45rem) clamp(.35rem, .7vw, .7rem); }
    .lt-s6 .frm-stat-value  { font-size: clamp(.88rem, 1.7vh, 1.4rem); }
    .lt-s6 .frm-stat-label  { font-size: .53rem; }
    .lt-s6 .frm-stat-divider { height: clamp(1.1rem, 2.2vh, 1.8rem); }

    .lt-s6 .frm-submit { padding: .38rem 1.4rem; font-size: .78rem; min-height: 34px; }

    .lt-s6 .frm-ctx-bullets { display: none; }
    .lt-s6 .frm-ctx-title { font-size: clamp(1.5rem, min(3vh, 2.8vw), 2.8rem); }
    .lt-s6 .frm-ctx-stats { padding: .45rem .65rem; }
}

/* ════════════════════════════════════════════════════════
   6. AJUSTE LANDSCAPE MOBILE (landscape, alto ≤ 500px)
   iPhone landscape — muy bajo, sin intro, scroll libre.
   Nota: cae fuera del breakpoint desktop (min-height:500px),
   así que ya hereda el layout mobile (columna, flujo normal).
   Solo necesitamos ajustar proporciones.
════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 499px) {

    .lt-s6 .s6-intro { display: none !important; }

    .lt-s6 .frm-video { height: clamp(140px, 40vw, 220px); }

    .lt-s6 .frm-panel {
        padding: 1rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        gap: .6rem;
    }

    .lt-s6 .frm-chip   { padding: .3rem .25rem; min-height: 36px; }
    .lt-s6 .frm-input  { padding: .45rem .7rem; font-size: .9rem; }
    .lt-s6 textarea.frm-input { min-height: 3.5rem; }
    .lt-s6 .frm-submit { padding: .6rem 1.2rem; font-size: .88rem; }
}

@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

    /* Fondo sección — deja pasar el mobile-bg + respiro antes de la imagen */
    .lt-s6 .lt-section__inner {
        background: transparent;
        padding-top: clamp(1.2rem, 4svh, 2.5rem);
    }
    .lt-s6 .lt-section__inner::before { display: none; }
    .lt-s6 .frm-video-ph { background: transparent; }
    .lt-s6 .frm-video     { display: none; }
    .lt-s6 .frm-panel::before { display: none; }

    /* ── frm-context: imagen full-bleed que se funde con el fondo ── */
    .lt-s6 .frm-context {
        width: 100%;
        height: clamp(220px, 48svh, 400px);
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Sin pill — la imagen habla sola */
    .lt-s6 .frm-ctx-label { display: none; }

    /* Gradiente: fade desde el fondo arriba + tinte azul + fade a negro abajo */
    .lt-s6 .frm-ctx-overlay {
        background:
            linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,0) 22%),
            linear-gradient(150deg, rgba(2, 50, 150, .40) 0%, transparent 52%),
            linear-gradient(to bottom, transparent 22%, rgba(0, 0, 0, .97) 90%);
    }

    /* Título anclado en la zona de fade — parece flotar sobre el fondo */
    .lt-s6 .frm-ctx-content {
        padding: 0 clamp(1.2rem, 5vw, 2rem) clamp(1.2rem, 3.5vw, 2rem);
        gap: 0;
    }
    .lt-s6 .frm-ctx-title {
        font-size: clamp(3.2rem, 14vw, 5.5rem);
        text-shadow: none;
        line-height: .95;
    }

    /* ── frm-panel: diseño mobile propio, sin adaptar el desktop ── */
    .lt-s6 .frm-panel {
        background: transparent;
        border-top: none;
        padding-top: clamp(1.4rem, 4vw, 2rem);
    }

    /* Header del panel oculto — la imagen ya introduce la sección */
    .lt-s6 .frm-panel-header { display: none; }

    /* Textarea compacto en mobile */
    .lt-s6 .frm-group--grow { display: flex; flex-direction: column; gap: .28rem; }
    .lt-s6 .frm-group--grow textarea.frm-input {
        min-height: 72px;
        height: 72px;
        resize: none;
    }

    /* Chips en 2 columnas — 3 cols trunca los labels largos a 375px */
    .lt-s6 .frm-chips { grid-template-columns: repeat(2, 1fr); }
    .lt-s6 .frm-chip  { font-size: clamp(.78rem, 3.5vw, .95rem); }
}