/* ====== RESET & BASE ====== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --primary:        #812332;
  --primary-dark:   #651621;
  --primary-light:  #9B3646;
  --accent:         #F51B19;
  --bg:             #FFFDF4;
  --bg-alt:         #F0EBE2;
  --bg-dark:        #1A0A0C;
  --text:           #1A0A0C;
  --text-muted:     #5C3A3F;
  --border:         #D6C7BA;
  --border-light:   #E8E0D8;
  --tag-bg:         #F5EDE8;
  --tag-color:      #812332;
  --success:        #16a34a;
  --radius:         12px;
  --radius-sm:      8px;
  --shadow:         0 2px 12px rgba(129,35,50,0.08);
  --shadow-hover:   0 8px 32px rgba(129,35,50,0.15);
  --shadow-lg:      0 8px 32px rgba(129,35,50,0.12);
  --gradient:       linear-gradient(135deg,#6A2C91 0%,#8C1D40 50%,#C4001A 100%);
}

html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text);line-height:1.6;background:var(--bg)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.container{max-width:1140px;margin:0 auto;padding:0 24px}

/* ====== BUTTONS ====== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius-sm);font-weight:600;font-size:14px;cursor:pointer;border:none;transition:all 0.2s;text-decoration:none;line-height:1}
.btn:hover{text-decoration:none}
.btn-chevron{width:16px;height:16px;flex-shrink:0;transition:transform 0.2s}
.btn:hover .btn-chevron{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.btn-chevron{transition:none}
.btn:hover .btn-chevron{transform:none}}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(129,35,50,0.3)}
.btn-nav{background:transparent;color:var(--primary);border:2px solid var(--primary);padding:8px 18px;border-radius:20px}
.btn-nav:hover{background:var(--primary);color:#fff}
.btn-hero-primary{background:#fff;color:var(--primary);padding:12px 28px;font-size:15px;border-radius:var(--radius)}
.btn-hero-primary:hover{background:var(--bg-alt);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.btn-hero-secondary{background:rgba(255,255,255,0.12);color:#fff;border:2px solid rgba(255,255,255,0.5);padding:12px 28px;font-size:15px;border-radius:var(--radius)}
.btn-hero-secondary:hover{background:rgba(255,255,255,0.22);border-color:#fff}
.btn-full{width:100%;justify-content:center;padding:14px;font-size:15px}
.btn:disabled{opacity:0.6;cursor:not-allowed}

/* ====== HEADER ====== */
.header{position:sticky;top:0;z-index:100;background:rgba(255,253,244,0.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-light);transition:box-shadow 0.2s}
.header.scrolled{box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{height:36px;width:auto;object-fit:contain}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-title{font-size:18px;font-weight:700;color:var(--primary);letter-spacing:-0.3px}
.logo-subtitle{font-size:10px;color:var(--text-muted);letter-spacing:0.3px;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--text);font-size:14px;font-weight:500;transition:color 0.15s}
.nav a:hover{color:var(--primary);text-decoration:none}
.header-actions{display:flex;align-items:center;gap:12px}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all 0.2s}

/* Language selector */
.lang-selector{position:relative}
.lang-btn{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--border);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text);font-family:inherit}
.lang-btn:hover{border-color:var(--primary);color:var(--primary)}
.lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);overflow:hidden;min-width:130px;z-index:50}
.lang-dropdown button{display:block;width:100%;padding:9px 14px;text-align:left;background:none;border:none;cursor:pointer;font-size:13px;font-family:inherit;transition:background 0.1s}
.lang-dropdown button:hover{background:var(--bg-alt)}

/* Mobile nav */
.mobile-nav{display:none;flex-direction:column;gap:2px;padding:12px 16px 16px;background:#fff;border-top:1px solid var(--border-light)}
.mobile-nav a{padding:10px 12px;border-radius:var(--radius-sm);font-size:15px;font-weight:500;color:var(--text);transition:background 0.15s}
.mobile-nav a:hover{background:var(--bg-alt);text-decoration:none;color:var(--primary)}
.mobile-nav.open{display:flex}

/* ====== HERO ====== */
.hero{background:var(--gradient);padding:84px 0 80px;color:#fff;overflow:hidden;position:relative}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;pointer-events:none}
.hero-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;letter-spacing:0.3px;margin-bottom:20px;backdrop-filter:blur(4px)}
.hero h1{font-size:42px;font-weight:700;line-height:1.15;margin-bottom:20px;letter-spacing:-0.5px}
.hero-accent{color:rgba(255,255,255,0.85)}
.hero-desc{font-size:17px;color:rgba(255,255,255,0.8);line-height:1.7;margin-bottom:32px;max-width:480px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.hero-stats{display:flex;align-items:center;gap:20px}
.hero-stat{display:flex;flex-direction:column;gap:2px}
.hero-stat-num{font-size:22px;font-weight:700;line-height:1}
.hero-stat-label{font-size:11px;color:rgba(255,255,255,0.65);letter-spacing:0.2px}
.hero-stat-div{width:1px;height:32px;background:rgba(255,255,255,0.25)}

/* Layers diagram (same pattern as NEXMO) */
.hero-visual{display:flex;align-items:center;justify-content:center}
/* El diagrama de capas del hero.
   Sin perspectiva ni rotación: la versión anterior inclinaba el bloque entero
   con rotateX/rotateY y separaba las capas con translateZ, de modo que el texto
   salía deformado y cada :hover, al escribir su propio transform, cancelaba la
   profundidad y hacía saltar la capa. Es el mismo refinamiento que la sección
   `hero` de la plataforma: escalonado plano, y un raíl de color por capa. */
/* Acotado al contenido: la línea más larga mide 208px y con el icono, el
   relleno y los 40px que el escalonado le quita a la última capa necesita 275.
   A ancho completo la columna daba 518, así que el panel era casi el doble de
   lo que su texto pedía. */
.layers-diagram{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px;margin-left:auto}
.layer{--rail:var(--accent);position:relative;display:flex;align-items:center;gap:10px;
  min-height:46px;margin-left:calc((var(--layer-index,1) - 1) * 8px);
  padding:12px 18px 12px 20px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.12);
  color:#fff;font-size:13px;font-weight:600;line-height:1.35;text-align:left;
  overflow:hidden;backdrop-filter:blur(4px);cursor:default;
  transition:background 0.2s,transform 0.2s}

/* El raíl, y un rastro del mismo tono cruzando la capa: separa las seis sin
   pintar seis rectángulos de colores distintos. */
.layer::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--rail)}
.layer::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--rail) 22%,transparent),transparent 70%)}
.layer > *{position:relative;z-index:1}
/* Blanco, no `--rail`. El raíl recorre del granate al rojo, y en su extremo
   oscuro un icono de ese tono desaparece contra el propio panel: el color por
   capa ya lo dice la barra de 3px, que se lee contra el borde. */
.layer-icon{width:17px;height:17px;flex-shrink:0;color:#fff}
.layer:hover{background:rgba(255,255,255,0.2);transform:translateX(3px)}

/* La rampa, del claro del primario al acento. Un paso por capa. */
.layer-1{--rail:var(--primary-light)}
.layer-2{--rail:color-mix(in srgb,var(--accent) 35%,var(--primary-light))}
.layer-3{--rail:color-mix(in srgb,var(--accent) 60%,var(--primary-light))}
.layer-4{--rail:var(--accent)}
.layer-5{--rail:color-mix(in srgb,var(--accent) 70%,#fff)}
.layer-6{--rail:color-mix(in srgb,var(--accent) 45%,#fff)}

@media (max-width:900px){.layer{margin-left:0}}
@media (prefers-reduced-motion:reduce){.layer{transition:none}
.layer:hover{transform:none}}

/* ====== SECTIONS ====== */
.section{padding:80px 0}
.section-alt{background:var(--bg-alt)}
.section-title{font-size:30px;font-weight:700;color:var(--primary);text-align:center;margin-bottom:14px;letter-spacing:-0.3px}
.section-intro{font-size:16px;color:var(--text-muted);text-align:center;max-width:620px;margin:0 auto 48px;line-height:1.7}

/* ====== FEATURES GRID ====== */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Las cuatro tarjetas comparten fondo y borde. Antes cada una traía el suyo
   —la primera en primario macizo con texto blanco, la segunda en el beige de
   `--bg-alt`, las otras dos en blanco— y la fila se leía como cuatro estilos
   distintos en lugar de cuatro miembros de lo mismo, con la roja rompiendo la
   escala por completo. La marca vive ahora en el azulejo del icono, no en el
   fondo de la tarjeta, y el blanco las separa del crema de la página. */
.feature-card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);transition:all 0.25s;opacity:0;transform:translateY(12px)}
.feature-card.visible{opacity:1;transform:none}
.feature-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.feature-card--wide{grid-column:1/-1;display:flex;align-items:flex-start;gap:20px}
.feature-icon{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:16px;border-radius:var(--radius-sm);
  background:var(--primary-dark);color:#fff}
.feature-card--wide .feature-icon{margin-bottom:0;flex-shrink:0}
.feature-card--wide .feature-icon .icon-svg{width:26px;height:26px}
.feature-card h3{font-size:16px;font-weight:600;margin-bottom:8px;line-height:1.3}
.feature-card p{font-size:14px;color:var(--text-muted);line-height:1.6}

/* ====== MODULES LIST ====== */
.modules-list{display:flex;flex-direction:column;gap:1px;background:var(--border-light);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.module-item{display:flex;align-items:flex-start;gap:24px;padding:28px 32px;background:#fff;transition:background 0.15s;opacity:0;transform:translateX(-8px)}
.module-item.visible{opacity:1;transform:none;transition:opacity 0.35s ease,transform 0.35s ease}
.module-item:hover{background:var(--bg-alt)}
.module-num{font-size:28px;font-weight:700;color:var(--border);line-height:1;flex-shrink:0;width:48px;padding-top:2px}
.module-item:hover .module-num{color:var(--primary)}
.module-content h3{font-size:16px;font-weight:600;color:var(--text);margin-bottom:6px}
.module-content p{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:12px}
.module-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-block;padding:3px 10px;background:var(--tag-bg);color:var(--tag-color);border-radius:20px;font-size:11px;font-weight:600;letter-spacing:0.2px;border:1px solid rgba(129,35,50,0.15)}

/* ====== USE CASES ====== */
.usecases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.usecase-card{position:relative;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);transition:all 0.25s;opacity:0;transform:translateY(10px)}
.usecase-card.visible{opacity:1;transform:none}
.usecase-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--primary)}
/* Alineado con el azulejo: arranca a la altura del relleno de la tarjeta y
   ocupa los mismos 48px, centrando su cifra dentro. Fijar un `top` calculado a
   ojo lo dejaba 18px por encima del centro del cuadrado, y volvería a
   descuadrarse al tocar el cuerpo de letra. */
.usecase-number{position:absolute;top:28px;right:22px;height:48px;display:flex;
  align-items:center;font-size:28px;font-weight:800;color:var(--border);
  line-height:1;letter-spacing:-1px}
/* El mismo azulejo que en «Qué es AI4DS»: la marca vive en un cuadrado detrás
   del icono, y las dos rejillas se leen como una sola familia. El número sigue
   absoluto arriba a la derecha, así que no se cruzan. */
.usecase-icon{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:16px;border-radius:var(--radius-sm);
  background:var(--primary-dark);color:#fff}
.usecase-card h4{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--text)}
.usecase-card p{font-size:13px;color:var(--text-muted);line-height:1.6}

/* ====== ECOSYSTEM ====== */
.ecosystem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px}
.ecosystem-card{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius);padding:28px 24px;text-align:left;box-shadow:var(--shadow);transition:all 0.25s;opacity:0;transform:translateY(10px)}
.ecosystem-card.visible{opacity:1;transform:none}
.ecosystem-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
/* El mismo azulejo que en «Qué es AI4DS» y en casos de uso. */
.ecosystem-icon{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:16px;border-radius:var(--radius-sm);
  background:var(--primary-dark);color:#fff}
.ecosystem-card h4{font-size:15px;font-weight:600;margin-bottom:8px;color:var(--text)}
.ecosystem-card p{font-size:13px;color:var(--text-muted);line-height:1.6}
.standards-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 28px;background:#fff;border:1px solid var(--border-light);border-radius:var(--radius);box-shadow:var(--shadow)}
.standards-label{font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.standards-list{display:flex;gap:8px;flex-wrap:wrap}
.standard-pill{padding:4px 12px;background:var(--tag-bg);color:var(--tag-color);border:1px solid rgba(129,35,50,0.15);border-radius:20px;font-size:12px;font-weight:600;font-family:'JetBrains Mono',monospace}

/* ====== FORM SECTION ====== */
.section-form{background:var(--gradient);padding:80px 0}
.form-wrapper{background:#fff;border-radius:16px;padding:48px;max-width:760px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.form-header{text-align:center;margin-bottom:36px}
.form-header h2{font-size:26px;font-weight:700;color:var(--primary);margin-bottom:8px}
.form-header p{font-size:15px;color:var(--text-muted)}
.onboarding-form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group--full{grid-column:1/-1}
.form-group label{font-size:13px;font-weight:600;color:var(--text)}
.required{color:var(--accent)}
.form-group input,.form-group select,.form-group textarea{padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;background:var(--bg-alt);color:var(--text);transition:border-color 0.15s,box-shadow 0.15s;width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(129,35,50,0.12)}
.form-group input.error,.form-group select.error{border-color:var(--accent)}
.form-error{font-size:12px;color:var(--accent);min-height:16px}
.form-checks{display:flex;flex-direction:column;gap:10px}
.check-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;line-height:1.5}
.check-label input[type=checkbox]{flex-shrink:0;width:16px;height:16px;margin-top:2px;accent-color:var(--primary);cursor:pointer}
.check-label a{color:var(--primary);font-weight:500}
.check-error{display:block;font-size:12px;color:var(--accent)}
.btn-submit{margin-top:8px}
.form-success{display:none;text-align:center;padding:32px}
.success-icon .icon-svg{width:28px;height:28px;stroke-width:3}
.success-icon{width:56px;height:56px;background:var(--success);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success h3{font-size:20px;font-weight:600;color:var(--text);margin-bottom:8px}
.form-success p{color:var(--text-muted);font-size:15px}

/* ====== FOOTER ====== */
.footer{background:var(--bg-dark);color:#fff;padding:56px 0 0}
.footer-inner{display:grid;grid-template-columns:1.5fr 2fr;gap:48px;margin-bottom:40px}
.footer-brand .footer-logo{height:36px;width:auto;filter:brightness(0) invert(1);margin-bottom:14px}
.footer-tagline{font-size:14px;color:rgba(255,255,255,0.55);line-height:1.6;max-width:240px}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer-col h5{font-size:12px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:14px}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,0.7);margin-bottom:8px;transition:color 0.15s}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-eu{display:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding:18px 0}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-bottom span{font-size:12px;color:rgba(255,255,255,0.4)}

/* ====== RESPONSIVE ====== */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .features-grid{grid-template-columns:1fr 1fr}
  .feature-card--wide{flex-direction:column}
  .usecases-grid{grid-template-columns:1fr 1fr}
  .ecosystem-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:700px){
  .nav{display:none}
  .header-actions .btn-primary,.header-actions .btn-nav{display:none}
  .hamburger{display:flex}
  .hero h1{font-size:30px}
  .features-grid{grid-template-columns:1fr}
  .usecases-grid{grid-template-columns:1fr}
  .ecosystem-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .form-wrapper{padding:28px 20px}
  .footer-inner{grid-template-columns:1fr}
  .footer-links{grid-template-columns:1fr 1fr}
  .footer-bottom .container{flex-direction:column;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .feature-card,.usecase-card,.ecosystem-card,.module-item{opacity:1!important;transform:none!important}
}

/* Inline lucide glyphs: the landing has no bundler, so the icons are the
   library's own paths pasted in, sized here rather than by font-size. */
.icon-svg{width:24px;height:24px;display:block}