/* Colores de marca desde core/tokens.css (compartidos con Portal y Login);
     papel, tinta y líneas son la personalidad propia de las landings. */
  :root{
    --magenta:var(--brand-magenta-600); --magenta-dark:var(--brand-magenta-800);
    --orange:var(--brand-orange-500); --orange-dark:var(--brand-orange-700);
    --ink:#1A1A1A; --paper:#FBF8F6; --paper-2:#F1E6E0;
    --line:#E4D6DA; --text:#2B2226; --text-soft:#6E5C62; /* antes #7C6A70: 4.2:1 sobre --paper-2, no llegaba a AA */
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; font-family:'Work Sans', sans-serif; color:var(--text); background:var(--paper); }
  h1,h2,h3{ font-family:'Oswald', sans-serif; font-weight:600; margin:0; }
  p{ margin:0; }
  a{ text-decoration:none; color:inherit; }
  .container{ max-width:1180px; margin:0 auto; padding:0 28px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }
  a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

  /* ---------------- Nav ---------------- */
  .navbar{ position:sticky; top:0; z-index:60; background:rgba(251,248,246,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); padding:16px 0; }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  /* Botón de menú (solo en pantallas angostas, ver @media 760px) */
  .menu-toggle{
    display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
    flex:0 0 auto; width:40px; height:40px; margin-left:auto; padding:0; cursor:pointer;
    background:none; border:1px solid var(--line); border-radius:50%;
  }
  .menu-toggle span{ display:block; width:16px; height:2px; border-radius:2px; background:var(--ink); transition:transform .18s ease, opacity .18s ease; }
  .navbar.is-open .menu-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .navbar.is-open .menu-toggle span:nth-child(2){ opacity:0; }
  .navbar.is-open .menu-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .why-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
  .why-kicker{ color:var(--magenta-dark); }
  .role-intro-titulo{ font-size:1.25rem; }
  .brand{ display:flex; align-items:center; gap:9px; font-size:1rem; color:var(--ink); }
  .brand img{ height:28px; width:auto; display:block; }
  .brand img.brand-logo-full{ height:42px; } /* sin !important: así la regla de ≤380px puede achicarlo */
  nav.links{ display:flex; align-items:center; gap:30px; }
  nav.links a{ font-size:.88rem; }
  nav.links a:hover{ color:var(--magenta-dark); }
  .btn-pill{ font-family:'Oswald',sans-serif; font-size:.85rem; padding:10px 22px; border-radius:30px; border:1.5px solid transparent; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
  .btn-pill-dark{ background:var(--ink); color:#fff; }
  .btn-pill-dark:hover{ background:var(--magenta-dark); }
  .btn-pill-white{ background:#fff; color:var(--ink); }
  .btn-pill-white:hover{ background:var(--paper-2); }
  .btn-pill-outline{ border-color:rgba(255,255,255,.6); color:#fff; }
  .btn-pill-outline:hover{ border-color:#fff; }
  .menu-toggle{ display:none; }

  /* ---------------- Hero ---------------- */
  .hero{
    position:relative; margin:20px 28px 0; border-radius:18px; overflow:hidden;
    min-height:520px; display:flex; align-items:flex-end;
    background:
      linear-gradient(200deg, rgba(26,26,26,.15), rgba(110,23,71,.55)),
      linear-gradient(135deg, var(--magenta) 0%, var(--orange) 100%);
  }
  .hero-watermark{ position:absolute; inset:0; opacity:.14; }
  .hero-watermark svg{ width:100%; height:100%; }
  .hero-content{ position:relative; z-index:2; padding:64px 48px 56px; color:#fff; width:100%; }
  .hero-kicker{ font-size:.85rem; color:#FFE1D2; letter-spacing:.3px; }
  .hero-giant{
    font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
    font-size:clamp(3.2rem, 11vw, 8.5rem); line-height:.85; letter-spacing:-1px;
    display:flex; align-items:flex-end; gap:14px; margin-top:6px;
  }
  .hero-giant small{ font-size:1.1rem; font-weight:500; text-transform:none; color:#FDD9C8; margin-bottom:.6rem; }
  .hero-desc{ max-width:52ch; margin-top:18px; font-size:1rem; color:#FCE7EE; }
  .hero-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

  @media (max-width: 760px){
    .hero{ margin:12px 12px 0; min-height:460px; }
    .hero-content{ padding:36px 24px 40px; }
    nav.links{ display:none; }
    .menu-toggle{ display:inline-flex; }
    /* Menú desplegado (ver web/js/nav.js) */
    .navbar.is-open nav.links{
      display:flex; flex-direction:column; align-items:stretch; gap:0;
      position:absolute; top:100%; left:0; right:0;
      background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 18px 30px -20px rgba(0,0,0,.35);
      padding:8px 16px 16px;
    }
    .navbar.is-open nav.links a{ padding:12px 8px; border-radius:10px; font-size:1rem; }
    .navbar.is-open nav.links a:hover{ background:var(--paper-2); }
    .why-grid{ grid-template-columns:1fr; gap:32px; }
  }

  /* ---------------- Por qué / stats ---------------- */
  .why{ padding:90px 0; }
  .why-copy h2{ font-size:clamp(1.5rem,2.6vw,2rem); max-width:14ch; }
  .why-copy p{ color:var(--text-soft); margin-top:16px; max-width:48ch; }
  .stat-row{ display:flex; gap:38px; margin-top:36px; flex-wrap:wrap; }
  .stat-item{ display:flex; align-items:center; gap:12px; }
  .stat-icon{ width:44px; height:44px; border-radius:50%; background:var(--paper-2); display:flex; align-items:center; justify-content:center; color:var(--magenta); flex:none; }
  .stat-item strong{ display:block; font-family:'Oswald',sans-serif; font-size:1.1rem; }
  .stat-item span{ font-size:.78rem; color:var(--text-soft); }

  .feature-panel{ background:var(--paper-2); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:14px; }
  .feature-card{ background:#fff; border-radius:12px; padding:20px; display:flex; gap:14px; align-items:flex-start; }
  .feature-card .icon{ width:44px; height:44px; border-radius:10px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
  .feature-card h3{ font-size:.95rem; margin-bottom:4px; }
  .feature-card p{ font-size:.82rem; color:var(--text-soft); }

  /* ---------------- Módulos (tipo destinos) ---------------- */
  .modules{ background:var(--paper-2); border-radius:24px; margin:0 28px 90px; padding:56px 44px; }
  .modules-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
  .modules-head h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
  .modules-head p{ color:var(--text-soft); font-size:.92rem; max-width:38ch; }

  .module-carousel{ overflow:hidden; }
  .module-track{ display:flex; gap:20px; transition:transform .45s cubic-bezier(.22,1,.36,1); will-change:transform; }
  .module-card{
    flex:0 0 calc((100% - 40px)/3); background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 10px 26px -18px rgba(0,0,0,.4); transition:transform .18s ease;
  }
  .module-card:hover{ transform:translateY(-4px); }
  @media (max-width: 980px){ .module-card{ flex:0 0 calc((100% - 20px)/2); } }
  @media (max-width: 620px){ .module-card{ flex:0 0 100%; } }
  .module-visual{ height:130px; position:relative; display:flex; align-items:center; justify-content:center; }
  .module-visual svg{ width:34px; height:34px; }
  .module-visual i{ font-size:34px; color:#fff; }
  .module-visual-activo{ background:linear-gradient(135deg,var(--magenta),var(--magenta-dark)); }
  .module-visual-desarrollo{ background:linear-gradient(135deg,var(--orange),var(--orange-dark)); }
  .module-visual-futuro{ background:linear-gradient(135deg,#9c8f95,#7C6A70); }
  .module-price-badge{ position:absolute; top:10px; left:10px; background:rgba(255,255,255,.92); font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:20px; }
  .module-body{ padding:16px 18px 20px; }
  .module-body h3{ font-size:1rem; margin-bottom:4px; }
  .module-body .meta{ font-size:.78rem; color:var(--text-soft); }
  .module-body .loc{ font-size:.76rem; color:var(--text-soft); margin-top:8px; display:flex; align-items:center; gap:5px; }

  .modules-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:30px; }
  .carousel-arrows{ display:flex; gap:8px; }
  .carousel-arrows button{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, opacity .15s ease; }
  .carousel-arrows button:hover{ border-color:var(--magenta); color:var(--magenta); }
  .carousel-arrows button[disabled]{ opacity:.35; cursor:not-allowed; }
  .carousel-dots{ display:flex; gap:8px; align-items:center; }
  .carousel-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:var(--line); padding:0; cursor:pointer; transition:background .15s ease, width .15s ease; }
  .carousel-dots button.is-active{ background:var(--magenta); width:22px; border-radius:5px; }

  /* ---------------- Para tu rol (tipo paquetes) ---------------- */
  .roles{ padding:0 0 90px; }
  .roles-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:20px; }
  .role-intro{ background:var(--magenta); color:#fff; border-radius:14px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; }
  .role-intro p{ font-size:.85rem; color:#F3D3E1; margin-top:10px; }
  .role-intro .btn-pill{ margin-top:20px; align-self:flex-start; }
  .role-card{ position:relative; border-radius:14px; overflow:hidden; min-height:230px; display:flex; align-items:flex-end; padding:20px; color:#fff; }
  .role-card::before{ content:''; position:absolute; inset:0; z-index:0; }
  .role-card-magenta{ background:linear-gradient(160deg,rgba(26,26,26,.15),rgba(158,31,99,.75)),linear-gradient(135deg,var(--magenta),#6E1747); }
  .role-card-orange{ background:linear-gradient(160deg,rgba(26,26,26,.15),rgba(241,90,41,.75)),linear-gradient(135deg,var(--orange),var(--orange-dark)); }
  .role-card-dark{ background:linear-gradient(160deg,rgba(26,26,26,.2),rgba(26,26,26,.85)),linear-gradient(135deg,#3A2A32,#1A1A1A); }
  .role-card > *{ position:relative; z-index:1; }
  .role-card h3{ font-size:1.05rem; }
  .role-card p{ font-size:.8rem; color:rgba(255,255,255,.85); margin-top:6px; }
  .role-badge{ position:absolute; top:14px; left:14px; z-index:1; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; }

  @media (max-width: 980px){ .roles-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width: 620px){ .roles-grid{ grid-template-columns:1fr; } }

  /* ---------------- Pasos ---------------- */
  .steps{ padding-bottom:90px; }
  .steps h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:40px; }
  .steps-row{ display:flex; gap:36px; flex-wrap:wrap; }
  .step{ flex:1; min-width:200px; text-align:left; }
  .step-circle{
    width:56px; height:56px; border-radius:50%; border:1.5px dashed var(--magenta);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--magenta);
  }
  .step h3{ font-size:.98rem; margin-bottom:6px; }
  .step p{ font-size:.85rem; color:var(--text-soft); }

  /* ---------------- Acceso ---------------- */

  /* Variantes de hero para las páginas internas (antes estilos en línea). */
  .hero--compacto{ min-height:360px; }
  .hero--mini{ min-height:220px; }
  .hero-giant--sm{ font-size:clamp(2.2rem,7vw,4.2rem); }
  .texto-suave{ color:var(--text-soft); }
  .espaciador-pie{ height:70px; }

  /* Teléfonos muy angostos (≤380px): logo + menú + "Iniciar sesión" no
     caben con el tamaño normal. */
  @media (max-width: 380px){
    .brand img.brand-logo-full{ height:28px; width:auto; }
    .navbar .btn-pill{ padding:8px 14px; font-size:.8rem; }
    .nav-row{ gap:8px; }
  }

  /* ---------------- Pie común (Landing/_pie.php) ---------------- */
  .site-footer{ margin-top:72px; padding:40px 0 28px; border-top:1px solid var(--line); background:var(--paper); }
  .site-footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px 48px; }
  .site-footer-marca{ max-width:420px; }
  .site-footer-logo{ height:34px; width:auto; display:block; margin-bottom:14px; }
  .site-footer-marca p{ color:var(--text-soft); font-size:.92rem; line-height:1.6; }
  .site-footer-nav{ display:flex; flex-wrap:wrap; gap:10px 24px; align-content:flex-start; }
  .site-footer-nav a{ font-size:.92rem; font-weight:500; color:var(--text); border-radius:4px; }
  .site-footer-nav a:hover{ color:var(--magenta); }
  .site-footer-legal{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem; color:var(--text-soft); }
  @media (max-width:640px){ .site-footer{ margin-top:48px; } .site-footer-nav{ flex-direction:column; gap:12px; } }

  /* ---------------- Accesibilidad y semántica (revisión 2026-10) ---------------- */
  /* Saltar al contenido: visible solo al enfocarlo con teclado. */
  .skip-link{
    position:fixed; top:8px; left:8px; z-index:100; padding:10px 14px; border-radius:10px;
    background:var(--ink); color:#fff; font-weight:600; transform:translateY(-160%); transition:transform .18s ease;
  }
  .skip-link:focus{ transform:none; }
  main:focus{ outline:none; }
  /* El título del hero ahora es un <h1> (antes un <div>): sin margen propio. */
  h1.hero-giant{ margin:0; }
  .role-intro-titulo{ font-size:1.25rem; }
  .loc .bi{ color:var(--magenta); }
  /* Puntos del carrusel: el punto se ve de 8px, pero el área táctil es de
     24px (WCAG 2.5.8) gracias a un borde transparente con background-clip. */
  .carousel-dots{ gap:0; }
  .carousel-dots button{
    box-sizing:content-box; border:8px solid transparent; background-clip:padding-box;
  }
  .carousel-arrows button .bi{ font-size:1rem; }
  .site-footer-nav a{ display:inline-block; padding:4px 0; }