/*
 * cot-landing.css
 * CSS compartido entre landing EN (/supertitans.com) y ES (/es)
 * Se enlaza desde landing-home.php y landing-es.php
 * ─────────────────────────────────────────────────────────────
 */

/* ── 0. FUENTES ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── 1. VARIABLES ───────────────────────────────────────────── */
:root {
    --g:    #C9A84C;
    --gl:   #E8CC7A;
    --gd:   #7A6128;
    --gf:   rgba(201,168,76,.07);
    --k:    #070707;
    --d1:   #0E0E0E;
    --d2:   #161616;
    --d3:   #1F1F1F;
    --d4:   #282828;
    --gr:   #6A6A6A;
    --grl:  #A6A6A6;
    --w:    #EDE9E0;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans:  'DM Sans', sans-serif;
    --ease:  cubic-bezier(.25,.46,.45,.94);
    --nav-h: 70px;
}

/* ── 2. RESET ───────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  { background:var(--k); color:var(--w); font-family:var(--sans); overflow-x:hidden; line-height:1.6; }
img   { display:block; max-width:100%; }
::-webkit-scrollbar       { width:3px; }
::-webkit-scrollbar-track { background:var(--k); }
::-webkit-scrollbar-thumb { background:var(--gd); }

/* ── 3. NAV DESKTOP ─────────────────────────────────────────── */
#cot-nav {
    position:         fixed;
    top:0; left:0; right:0;
    z-index:          200;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          0 60px;
    height:           var(--nav-h);
    background:       rgba(7,7,7,.93);
    backdrop-filter:  blur(18px);
    border-bottom:    1px solid rgba(201,168,76,.1);
    transition:       height .3s var(--ease);
}
#cot-nav.scrolled { height:58px; }

.nav-logo img,
.nav-logo svg  { height:44px; display:block; }

.nav-links     { display:flex; gap:38px; list-style:none; }
.nav-links a   {
    color:var(--grl); font-size:11px; font-weight:500;
    letter-spacing:.17em; text-transform:uppercase;
    text-decoration:none; transition:color .25s; position:relative;
}
.nav-links a::after {
    content:''; position:absolute; bottom:-3px; left:0; right:0;
    height:1px; background:var(--g);
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active         { color:var(--g); }
.nav-links a:hover::after,
.nav-links a.active::after  { transform:scaleX(1); }

/* Acciones agrupadas (lang switch + CTA + hamburger) */
.nav-actions {
    display:     flex;
    align-items: center;
    gap:         18px;
}

/* Switch de idioma */
.nav-lang {
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--gr);
    text-decoration: none;
    transition:     color .25s;
    border:         1px solid rgba(201,168,76,.2);
    padding:        5px 10px;
}
.nav-lang:hover { color:var(--g); border-color:var(--g); }

/* Botón CTA del nav */
.nav-btn {
    border:1px solid var(--g); color:var(--g);
    padding:9px 26px; font-family:var(--sans);
    font-size:11px; font-weight:600; letter-spacing:.2em;
    text-transform:uppercase; text-decoration:none;
    transition:all .25s; background:transparent;
    white-space: nowrap;
}
.nav-btn:hover { background:var(--g); color:var(--k); }

/* ── 4. NAV HAMBURGER ───────────────────────────────────────── */
.nav-hamburger {
    display:        none; /* oculto en desktop */
    flex-direction: column;
    justify-content: center;
    gap:            5px;
    width:          40px;
    height:         40px;
    background:     transparent;
    border:         1px solid rgba(201,168,76,.25);
    cursor:         pointer;
    padding:        8px 9px;
    transition:     border-color .25s;
}
.nav-hamburger:hover { border-color:var(--g); }

.nav-hamburger span {
    display:          block;
    width:            100%;
    height:           1.5px;
    background:       var(--g);
    transition:       transform .3s var(--ease), opacity .2s;
    transform-origin: center;
}

/* Estado abierto: convierte en X */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── 5. NAV MOBILE PANEL ────────────────────────────────────── */
.nav-mobile-panel {
    position:   fixed;
    top:        var(--nav-h);
    left:0; right:0;
    z-index:    199;
    background: rgba(7,7,7,.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(201,168,76,.1);
    transform:  translateY(-110%);
    transition: transform .35s var(--ease);
    pointer-events: none;
}
.nav-mobile-panel.open {
    transform:      translateY(0);
    pointer-events: auto;
}

.nav-mobile-links {
    list-style: none;
    padding:    20px 0 28px;
}

.nav-mobile-links li {
    border-bottom: 1px solid rgba(255,255,255,.04);
}

.nav-mobile-link {
    display:        block;
    padding:        16px 30px;
    font-size:      12px;
    font-weight:    500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color:          var(--grl);
    text-decoration: none;
    transition:     color .2s, background .2s;
}
.nav-mobile-link:hover { color:var(--g); background:rgba(201,168,76,.04); }

.nav-mobile-cta-wrap,
.nav-mobile-lang-wrap {
    border-bottom: none;
    padding:       20px 30px 8px;
}

.nav-mobile-cta  { width:100%; text-align:center; }
.nav-mobile-lang {
    display:        block;
    text-align:     center;
    margin-top:     8px;
    font-size:      10px;
    letter-spacing: .2em;
    color:          var(--gr);
    padding:        6px;
}

/* ── 6. HERO ────────────────────────────────────────────────── */
.hero {
    min-height:           100vh;
    display:              grid;
    grid-template-columns:1fr 500px;
    align-items:          center;
    padding:              90px 0 0 60px;
    position:             relative;
    overflow:             hidden;
}
.hero::before {
    content:''; position:absolute; top:-15%; left:-8%;
    width:700px; height:700px;
    background:radial-gradient(circle,rgba(201,168,76,.055) 0%,transparent 65%);
    pointer-events:none; animation:glow 6s ease-in-out infinite alternate;
}
@keyframes glow { from{opacity:.6;} to{opacity:1;} }

.hero-text       { padding-right:56px; padding-bottom:60px; }
.hero-eyebrow    {
    display:flex; align-items:center; gap:12px; font-size:11px;
    font-weight:500; letter-spacing:.3em; text-transform:uppercase;
    color:var(--g); margin-bottom:28px;
    opacity:0; animation:fadeUp .8s var(--ease) .1s both;
}
.hero-eyebrow span { display:block; width:28px; height:1px; background:var(--gd); }
.hero h1 {
    font-family:var(--serif); font-size:clamp(50px,5.2vw,82px);
    font-weight:300; line-height:1.03; letter-spacing:-.02em;
    margin-bottom:22px; opacity:0; animation:fadeUp .9s var(--ease) .22s both;
}
.hero h1 em    { font-style:italic; color:var(--g); display:block; }
.hero-myth     {
    font-family:var(--serif); font-size:16px; font-style:italic;
    color:var(--g); margin-bottom:10px; letter-spacing:.01em; line-height:1.5;
    opacity:0; animation:fadeUp .9s var(--ease) .32s both;
}
.hero-sub      {
    font-size:17px; font-weight:300; color:var(--grl); line-height:1.8;
    max-width:510px; margin-bottom:38px;
    opacity:0; animation:fadeUp .9s var(--ease) .38s both;
}

.hero-sub span em {
    color: var(--gold);
    font-style: normal;
    font-weight: 600;
}

.hero-ctas     { display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:fadeUp .9s var(--ease) .52s both; }
.hero-stats    {
    display:flex; gap:0; margin-top:52px;
    border-top:1px solid rgba(201,168,76,.14);
    opacity:0; animation:fadeUp .9s var(--ease) .66s both;
}
.hstat         { padding:22px 28px 18px 0; margin-right:28px; border-right:1px solid rgba(201,168,76,.1); }
.hstat:last-child { border-right:none; margin-right:0; }
.hstat-n       { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--g); line-height:1; margin-bottom:5px; }
.hstat-d       { font-size:14px; color:var(--gr); line-height:1.4; max-width:250px; }
.hero-img      { height:100vh; position:relative; opacity:0; animation:fadeIn 1.2s var(--ease) .28s both; }
.hero-img img  { width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-img::before {
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to right,var(--k) 0%,rgba(7,7,7,.3) 45%,transparent 70%),
               linear-gradient(to top,var(--k) 0%,transparent 28%);
}

/* ── 7. BOTONES ─────────────────────────────────────────────── */
.btn {
    background:var(--g); color:var(--k); padding:14px 36px;
    font-family:var(--sans); font-size:11px; font-weight:700;
    letter-spacing:.22em; text-transform:uppercase;
    text-decoration:none; transition:all .25s var(--ease);
    display:inline-block; cursor:pointer; border:none;
}
.btn:hover { background:var(--gl); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.2); }
.btn-outline {
    border:1px solid rgba(201,168,76,.35); color:var(--grl); padding:14px 36px;
    font-family:var(--sans); font-size:11px; font-weight:500;
    letter-spacing:.22em; text-transform:uppercase;
    text-decoration:none; transition:all .25s var(--ease); display:inline-block;
}
.btn-outline:hover { border-color:var(--g); color:var(--g); }

/* ── 8. SECCIONES ───────────────────────────────────────────── */
.sec        { padding:96px 60px; max-width:1220px; margin:0 auto; }
.sec-full   { padding:96px 0; }
.sec-inner  { max-width:1220px; margin:0 auto; padding:0 60px; }
.hr         { height:1px; background:rgba(201,168,76,.08); margin:0 60px; }
.lbl {
    font-size:10px; font-weight:600; letter-spacing:.35em;
    text-transform:uppercase; color:var(--g); margin-bottom:14px;
    display:flex; align-items:center; gap:10px;
}
.lbl::before { content:''; display:block; width:22px; height:1px; background:var(--gd); }
h2  { font-family:var(--serif); font-size:clamp(34px,3.8vw,56px); font-weight:300; line-height:1.08; letter-spacing:-.015em; margin-bottom:18px; }
h2 em { font-style:italic; color:var(--g); }
.lead { font-size:18px; font-weight:300; color:var(--grl); line-height:1.8; max-width:680px; }

/* ── 9. PROBLEM ─────────────────────────────────────────────── */
.prob-bg   { background:var(--d1); }
.prob-wrap { max-width:1220px; margin:0 auto; padding:96px 60px; }
.prob-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; margin-top:52px; align-items:start; }
.prob-q    { font-family:var(--serif); font-size:20px; font-style:italic; color:var(--grl); padding:16px 0; border-bottom:1px solid rgba(255,255,255,.05); transition:color .25s var(--ease); }
.prob-q:hover { color:var(--g); }
.prob-ans p { font-size:17px; color:var(--grl); line-height:1.85; margin-bottom:16px; }
.prob-ans strong { color:var(--w); }
.accent { font-family:var(--serif); font-size:22px; font-style:italic; color:var(--g); margin:22px 0 28px; line-height:1.4; }

/* ── 10. CARDS ──────────────────────────────────────────────── */
.three    { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,168,76,.1); margin-top:52px; }
.card     { background:var(--d2); padding:38px 34px; transition:background .25s; }
.card:hover { background:var(--d3); }
.card-icon { font-family:var(--serif); font-size:38px; color:var(--gd); margin-bottom:14px; line-height:1; }
.card h3  { font-family:var(--serif); font-size:21px; font-weight:600; color:var(--g); margin-bottom:10px; }
.card p   { font-size:15px; color:var(--grl); line-height:1.7; }
.body-text { margin-top:52px; max-width:800px; }
.body-text p { font-size:17px; color:var(--grl); line-height:1.9; margin-bottom:16px; }
.body-text em { font-style:italic; color:var(--w); }

/* ── 11. ECOSYSTEM ──────────────────────────────────────────── */
.eco-bg   { background:var(--d1); }
.levels   { display:flex; flex-direction:column; gap:1px; background:rgba(201,168,76,.1); }
.level    {
    display:grid; grid-template-columns:240px 1fr 150px;
    align-items:center; gap:44px; background:var(--d2); padding:34px 60px;
    transition:all .25s var(--ease); text-decoration:none; color:inherit;
    border-left:2px solid transparent;
}
.level:hover          { background:var(--d3); border-left-color:var(--g); }
.lv-name              { font-family:var(--serif); font-size:19px; font-weight:600; color:var(--g); line-height:1.2; }
.lv-tag               { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gr); margin-top:5px; }
.lv-badge             { display:inline-block; font-size:9px; letter-spacing:.14em; text-transform:uppercase; background:var(--g); color:var(--k); padding:2px 8px; margin-bottom:5px; font-weight:700; }
.lv-desc              { font-size:14px; color:var(--grl); line-height:1.65; }
.lv-cta               { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gd); font-weight:600; text-align:right; transition:color .25s; }
.level:hover .lv-cta  { color:var(--g); }
.level-hl             { background:rgba(201,168,76,.04); }
.level-hl .lv-name    { font-size:21px; }

/* ── 12. PROOF ──────────────────────────────────────────────── */
.proof              { position:relative; height:500px; overflow:hidden; }
.proof img          { width:100%; height:100%; object-fit:cover; object-position:center 32%; transition:transform 8s var(--ease); }
.proof:hover img    { transform:scale(1.04); }
.proof-overlay      { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,7,7,.88) 0%,rgba(7,7,7,.55) 50%,rgba(7,7,7,.15) 100%); display:flex; align-items:center; padding:0 90px; }
.proof-text h2      { color:var(--w); max-width:500px; margin-bottom:12px; }
.proof-text > p     { font-size:17px; color:var(--grl); max-width:460px; line-height:1.7; margin-bottom:28px; }
.proof-stats        { display:flex; gap:40px; }
.proof-stat         { display:flex; flex-direction:column; }
.pn                 { font-family:var(--serif); font-size:42px; font-weight:300; color:var(--g); line-height:1; }
.pd                 { font-size:12px; color:var(--grl); margin-top:4px; max-width:140px; line-height:1.4; }

/* ── 13. WHY ────────────────────────────────────────────────── */
.two       { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(201,168,76,.1); margin-top:52px; }
.why-card  { background:var(--d2); padding:34px 38px; transition:background .25s; }
.why-card:hover { background:var(--d3); }
.why-card h3 { font-family:var(--serif); font-size:19px; font-weight:600; color:var(--w); margin-bottom:10px; }
.why-card p  { font-size:14px; color:var(--gr); line-height:1.7; }
.stmt { font-family:var(--serif); font-size:clamp(20px,2.2vw,28px); font-style:italic; color:var(--g); margin-top:40px; line-height:1.4; padding-left:22px; border-left:2px solid var(--gd); }

/* ── 14. RESULTS ────────────────────────────────────────────── */
.res-bg       { background:var(--d1); }
.res-grid     { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(201,168,76,.1); margin-top:52px; }
.res-card     { background:var(--d2); padding:42px; transition:background .25s; }
.res-card:hover { background:var(--d3); }
.res-n        { font-family:var(--serif); font-size:50px; font-weight:300; color:var(--g); line-height:1; margin-bottom:10px; }
.res-n small  { font-size:22px; }
.res-card h3  { font-size:12px; font-weight:700; color:var(--w); margin-bottom:10px; letter-spacing:.1em; }
.res-card p   { font-size:14px; color:var(--gr); line-height:1.7; }
.res-src      { font-size:10px; color:var(--gd); letter-spacing:.18em; text-transform:uppercase; margin-top:14px; display:flex; align-items:center; gap:8px; }
.res-src::before { content:''; display:block; width:14px; height:1px; background:var(--gd); }

/* ── 15. TESTIMONIALS ───────────────────────────────────────── */
.test-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,168,76,.1); margin-top:52px; }
.test-card  { background:var(--d2); padding:38px 34px; display:flex; flex-direction:column; transition:background .25s; }
.test-card:hover { background:var(--d3); }
.test-mark  { font-family:var(--serif); font-size:60px; color:var(--gd); line-height:.6; margin-bottom:14px; }
.test-q     { font-family:var(--serif); font-size:18px; font-style:italic; color:var(--w); line-height:1.65; flex:1; }
.test-sep   { width:28px; height:1px; background:var(--gd); margin:18px 0; }
.test-name  { font-size:13px; font-weight:600; color:var(--g); }
.test-role  { font-size:12px; color:var(--gr); margin-top:3px; }

/* ── 16. CORPORATE ──────────────────────────────────────────── */
.corp       { display:flex; flex-direction:column; gap:1px; background:rgba(201,168,76,.1); margin-top:52px; }
.corp-row   { display:grid; grid-template-columns:1fr 2fr; gap:44px; background:var(--d2); padding:34px 48px; transition:all .25s var(--ease); border-left:2px solid transparent; }
.corp-row:hover { background:var(--d3); border-left-color:var(--g); }
.corp-name  { font-family:var(--serif); font-size:18px; font-weight:600; color:var(--g); }
.corp-mod   { font-size:10px; color:var(--gd); letter-spacing:.12em; text-transform:uppercase; margin-top:5px; line-height:1.7; }
.corp-desc  { font-size:14px; color:var(--grl); line-height:1.7; padding-top:2px; }

/* ── 17. TEAM ───────────────────────────────────────────────── */
.team-bg    { background:var(--d1); }
.team-grid  { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(201,168,76,.1); margin-top:52px; }
.team-card  { background:var(--d2); padding:50px 15px; }
.t-name     { font-family:var(--serif); font-size:32px; font-weight:600; color:var(--w); margin-bottom:4px; }
.t-title    { font-size:10px; color:var(--g); letter-spacing:.2em; text-transform:uppercase; margin-bottom:30px; }
.t-title   a{ font-size:10px; color:var(--g); letter-spacing:.2em; text-transform:uppercase; margin-bottom:30px; }
.t-stats    { display:flex; gap:28px; flex-wrap:wrap; margin-bottom:34px; padding-bottom:30px; border-bottom:1px solid rgba(201,168,76,.1); }
.ts-n       { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--g); line-height:1; }
.ts-l       { font-size:11px; color:var(--gr); margin-top:4px; line-height:1.35; max-width:105px; }
.team-card p { font-size:15px; color:var(--grl); line-height:1.85; margin-bottom:14px; }
.team-card strong { color:var(--w); }
.t-close    { font-family:var(--serif); font-size:20px; font-style:italic; color:var(--g); margin-top:22px; padding-top:22px; border-top:1px solid rgba(201,168,76,.1); line-height:1.4; }

/* ── 18. FORMULARIOS ────────────────────────────────────────── */
.forms-bg   { background:var(--k); }
.forms-wrap { max-width:1220px; margin:0 auto; padding:96px 60px; }
.form-wrap  { margin-top:48px; }
.form-tabs  { display:flex; gap:1px; background:rgba(201,168,76,.1); }
.ftab       { flex:1; padding:17px 20px; text-align:center; font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:600; cursor:pointer; background:var(--d2); color:var(--gr); border-bottom:2px solid transparent; transition:all .25s var(--ease); }
.ftab:hover { color:var(--grl); }
.ftab.active { background:var(--d3); color:var(--g); border-bottom-color:var(--g); }
.fpanel     { display:none; background:var(--d2); padding:50px; gap:22px; }
.fpanel.active { display:grid; }
.fpanel-single { display:none; background:var(--d2); padding:50px; }
.fpanel-single.active { display:block; }
.fsubmit    { grid-column:1/-1; margin-top:10px; }

.fg         { display:flex; flex-direction:column; gap:7px; }
.fg.full    { grid-column:1/-1; }
.fg label   { font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--gd); }
.fg input,.fg select,.fg textarea { background:rgba(255,255,255,.025); border:1px solid rgba(201,168,76,.16); color:var(--w); font-family:var(--sans); font-size:15px; padding:13px 16px; outline:none; transition:border .25s var(--ease); -webkit-appearance:none; }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--g); }
.fg input::placeholder,.fg textarea::placeholder { color:var(--gr); }
.fg select option { background:var(--d3); color:var(--w); }
.fg textarea { resize:vertical; min-height:92px; }
.fsubmit    { grid-column:1/-1; margin-top:10px; }
.form-note  { font-size:12px; color:var(--gr); margin-top:12px; line-height:1.5; }

/* ── 19. MANIFESTO ──────────────────────────────────────────── */
.man-bg  { background:linear-gradient(180deg,var(--k) 0%,var(--d1) 50%,var(--k) 100%); text-align:center; padding:116px 60px; }
.man-in  { max-width:680px; margin:0 auto; }    
.man-in h2 { margin-bottom:44px; }
.mp      { font-family:var(--serif); font-size:20px; font-weight:300; color:var(--grl); line-height:1.9; margin-bottom:20px; }
.mp strong { color:var(--w); }
.mrule   { width:44px; height:1px; background:var(--gd); margin:32px auto; }
.mquote  { font-family:var(--serif); font-size:clamp(19px,2.3vw,25px); font-style:italic; color:var(--g); line-height:1.55; margin-top:44px; }
.mattr   { font-size:12px; color:var(--gr); letter-spacing:.1em; margin-top:12px; }

/* ── 20. CTA ────────────────────────────────────────────────── */
.cta-bg      { background:var(--d2); text-align:center; padding:116px 60px; }
.cta-bg h2   { max-width:660px; margin:0 auto 16px; }
.cta-bg > p  { color:var(--grl); max-width:500px; margin:0 auto 44px; font-size:17px; line-height:1.7; }
.cta-note    { font-size:13px; color:var(--gr); margin-top:16px; }

/* ── 21. FOOTER ─────────────────────────────────────────────── */
footer   { background:var(--d1); border-top:1px solid rgba(201,168,76,.09); padding:56px 60px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px; }
.fl img,.fl svg { height:34px; margin-bottom:14px; display:block; }
.ftag    { font-size:13px; color:var(--gr); line-height:1.7; }
.fc h4   { font-size:15px; letter-spacing:.28em; text-transform:uppercase; color:var(--gd); margin-bottom:14px; }
.fc a    { display:block; font-size:14px; color:var(--gr); text-decoration:none; margin-bottom:8px; transition:color .25s; }
.fc a:hover { color:var(--g); }
.fbot    { background:var(--k); padding:16px 60px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.04); }
.fbot p  { font-size:11px; color:var(--gr); }

/* ── 22. ANIMACIONES ────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.r     { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.r.vis { opacity:1; transform:translateY(0); }

/* ── 23. RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:1020px) {
    /* Nav: mostrar hamburger, ocultar links y CTA desktop */
    #cot-nav { padding:0 20px; }
    .nav-links { display:none; }
    .nav-btn   { display:none; }
    .nav-hamburger { display:flex; }

    /* Hero */
    .hero { grid-template-columns:1fr; padding:90px 20px 60px; }
    .hero-img { display:none; }

    /* Secciones */
    .sec,.sec-inner,.prob-wrap,.forms-wrap { padding:64px 20px; }
    .hr { margin:0 20px; }

    /* Grids → 1 columna */
    .prob-grid,.three,.two,.res-grid,.team-grid,.test-grid { grid-template-columns:1fr; }
    .prob-grid { gap:36px; }

    /* Ecosystem */
    .level       { grid-template-columns:1fr; gap:10px; padding:26px 20px; border-left:none; }
    .level:hover { border-left:none; }
    .lv-cta      { display:none; }

    /* Corporate */
    .corp-row { grid-template-columns:1fr; padding:26px 20px; }

    /* Proof */
    .proof         { height:380px; }
    .proof-overlay { padding:0 28px; }
    .proof-stats   { flex-direction:column; gap:16px; }

    /* Formularios */
    .fpanel.active        { grid-template-columns:1fr; padding:28px 20px; }
    .fpanel-single.active { padding:28px 20px; }
    .form-tabs { flex-direction:column; }
    .ftab { text-align:left; padding:14px 20px; }

    /* Manifesto / CTA */
    .man-bg,.cta-bg { padding:72px 20px; }

    /* Footer */
    footer { grid-template-columns:1fr; padding:40px 20px; }
    .fbot  { flex-direction:column; gap:6px; padding:14px 20px; text-align:center; }
}

@media (max-width:480px) {
    .hero h1       { font-size:clamp(38px,9vw,52px); }
    .hero-stats    { flex-wrap:wrap; }
    .proof-text h2 { font-size:clamp(24px,6vw,36px); }
    .test-grid     { gap:16px; background:transparent; }
    .test-card     { border:1px solid rgba(201,168,76,.1); }
}

/* ── TEAM PHOTOS ────────────────────────────────────────────── */
.t-photo {
    width:         100%;
    height:        540px;
    overflow:      hidden;
    margin-bottom: 32px;
    position:      relative;
}

.t-photo img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
    filter:          grayscale(18%) contrast(1.05);
    transition:      filter .4s var(--ease), transform .6s var(--ease);
}

.team-card:hover .t-photo img {
    filter:    grayscale(0%) contrast(1.08);
    transform: scale(1.03);
}

/* Gradiente inferior que fusiona la foto con el fondo oscuro */
.t-photo::after {
    content:    '';
    position:   absolute;
    bottom:     0; left: 0; right: 0;
    height:     45%;
    background: linear-gradient(to top, var(--d2) 0%, transparent 100%);
    pointer-events: none;
}

/* Línea dorada superior — marca de identidad del sistema */
.t-photo::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     2px;
    background: linear-gradient(to right, transparent, var(--g), transparent);
    z-index:    1;
}


#ast-scroll-top {
 display: none;
}

/* Estilo para el enlace dentro del contenedor */
.lv-cta a {
  color: inherit;           /* hereda el color del contenedor */
  font: inherit;            /* hereda tipografía */
  text-decoration: none;    /* quita subrayado */
  display: inline-block;    /* asegura que se comporte como bloque dentro */
}



.wpcf7 .hidden-fields-container {
  display: none !important;
}

/* GRID */

.wpcf7 {
  max-width: 900px;
  margin: 0 auto;
}

/* GRID */
.wpcf7 .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.wpcf7 .row.single {
  grid-template-columns: 1fr;
}

/* FIELD */
.wpcf7 .field {
  display: flex;
  flex-direction: column;
}

/* LABELS */
.wpcf7 label {
  font-size: 11px;
  letter-spacing: 2px;  
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* INPUTS CF7 FIX */
.wpcf7 .wpcf7-form-control {
  width: 100%;
  padding: 14px 16px;
  background: var(--input-bg);
  border: 1px solid rgba(201,168,76,0.5);
  color: var(--text);
  font-size: 14px;
  border-radius: 2px;
}


/* SELECT BASE */
.wpcf7 select {
  width: 90%;
  padding: 14px 16px;
  height: 48px;
  background: #111;
  color: #fff;
  border: 1px solid rgba(201,168,76,0.5);
  appearance: none;
}

/* OPCIONES */
.wpcf7 select option {
  background: #111;
  color: #fff;
}

/* HOVER EN OPCIONES (algunos navegadores lo respetan) */
.wpcf7 select option:hover {
  background: #c9a84c;
  color: #000;
}

/* FOCUS */
.wpcf7 .wpcf7-form-control:focus {
  outline: none;
  border-color: var(--gold-light);
}

/* PLACEHOLDER */
.wpcf7 ::placeholder {
  color: rgba(255,255,255,0.4);
}

/* BOTÓN */
.wpcf7 .wpcf7-submit {
  width: 100%;
  background: var(--g);
  color: #000;
  border: none;
  padding: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
  transition: 0.3s;
}

.wpcf7 .wpcf7-submit:hover {
  background: var(--gold-light);
}

/* MENSAJES */
.wpcf7 .wpcf7-response-output {
  margin-top: 20px;
  border: 1px solid var(--g);
  color: white;
}

.wpcf7 input{
    color: #fff !important;
}

/* ERRORES */
.wpcf7 .wpcf7-not-valid {
  border-color: red;
}

.wpcf7 .wpcf7-not-valid-tip {
  font-size: 12px;
}

/* ELIMINAR ESPACIOS EXTRA CF7 */
.wpcf7 p {
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .wpcf7 .row {
    grid-template-columns: 1fr;
  }

  .wpcf7 .wpcf7-form-control {
    font-size: 16px; /* evita zoom iOS */
  }
}