@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: block; src: url("/assets/fonts/Inter-latin.woff2") format("woff2"); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { color: inherit; }
img { max-width: 100%; }
.hp, .oculto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.idiomas-sel { display: flex; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.idiomas-sel a { text-decoration: none; padding: 10px 7px; opacity: 0.6; }
.idiomas-sel a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.idiomas-sel a:hover { opacity: 1; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form .fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; align-items: end; }
@media (max-width: 520px) { .form .fila { grid-template-columns: 1fr; } }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 500; margin: 0; }
.form .lab { display: block; line-height: 1.3; white-space: nowrap; }
.form .opc { font-weight: 300; opacity: 0.85; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 2px; margin: 0; display: block; }
.form input[type=text], .form input[type=email], .form input[type=tel] { height: 46px; }
.form textarea { resize: vertical; min-height: 140px; }
.form .check { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 300; font-size: 0.9rem; padding: 0; }
.form .check input { width: 18px; height: 18px; margin: 2px 0 0 0; flex: 0 0 auto; }
.form .btn { align-self: flex-start; }
.form .nota { font-size: 0.78rem; line-height: 1.5; margin: 4px 0 0; opacity: 0.85; }
.pie { padding: 48px 24px 56px; font-size: 0.92rem; }
.pie-in { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.pie-t { margin: 0 0 10px; font-weight: 600; }
.pie-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pie-lista a { text-decoration: none; padding: 4px 0; display: inline-block; }
.pie-lista a:hover, .pie-lista a[aria-current] { text-decoration: underline; }
.pie-emp p { margin: 0 0 10px; }
.legal { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }
.legal h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0 0 24px; line-height: 1.15; }
.legal h2 { font-size: 1.2rem; margin: 36px 0 10px; }
.legal .fecha { margin-top: 40px; font-size: 0.9rem; opacity: 0.8; }
.legal .aviso-trad { font-size: 0.9rem; padding: 12px 14px; border-left: 3px solid currentColor; opacity: 0.85; }

.logo-anim { display: block; overflow: hidden; width: var(--w-icono); transition: width 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.logo-anim svg { display: block; max-width: none; }
.logo-anim svg > g path { opacity: 0; transition: opacity 0.35s ease; }
.logo:hover .logo-anim, .logo:focus-visible .logo-anim { width: var(--w-total); }
.logo:hover .logo-anim svg > g path, .logo:focus-visible .logo-anim svg > g path { opacity: 1; }
.logo:hover .logo-anim svg > g path:nth-child(1), .logo:focus-visible .logo-anim svg > g path:nth-child(1) { transition-delay: 0.04s; }
.logo:hover .logo-anim svg > g path:nth-child(2), .logo:focus-visible .logo-anim svg > g path:nth-child(2) { transition-delay: 0.08s; }
.logo:hover .logo-anim svg > g path:nth-child(3), .logo:focus-visible .logo-anim svg > g path:nth-child(3) { transition-delay: 0.12s; }
.logo:hover .logo-anim svg > g path:nth-child(4), .logo:focus-visible .logo-anim svg > g path:nth-child(4) { transition-delay: 0.16s; }
.logo:hover .logo-anim svg > g path:nth-child(5), .logo:focus-visible .logo-anim svg > g path:nth-child(5) { transition-delay: 0.20s; }
.logo:hover .logo-anim svg > g path:nth-child(6), .logo:focus-visible .logo-anim svg > g path:nth-child(6) { transition-delay: 0.24s; }
.logo:hover .logo-anim svg > g path:nth-child(7), .logo:focus-visible .logo-anim svg > g path:nth-child(7) { transition-delay: 0.28s; }
.logo:hover .logo-anim svg > g path:nth-child(8), .logo:focus-visible .logo-anim svg > g path:nth-child(8) { transition-delay: 0.32s; }
.logo:hover .logo-anim svg > g path:nth-child(9), .logo:focus-visible .logo-anim svg > g path:nth-child(9) { transition-delay: 0.36s; }
.logo:hover .logo-anim svg > g path:nth-child(10), .logo:focus-visible .logo-anim svg > g path:nth-child(10) { transition-delay: 0.40s; }
.logo:hover .logo-anim svg > g path:nth-child(11), .logo:focus-visible .logo-anim svg > g path:nth-child(11) { transition-delay: 0.44s; }
.logo:hover .logo-anim svg > g path:nth-child(12), .logo:focus-visible .logo-anim svg > g path:nth-child(12) { transition-delay: 0.48s; }
.logo:hover .logo-anim svg > g path:nth-child(13), .logo:focus-visible .logo-anim svg > g path:nth-child(13) { transition-delay: 0.52s; }

@media (hover: none) { .logo-anim { width: var(--w-total); } .logo-anim svg > g path { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .logo-anim, .logo-anim svg > g path { transition: none; } }

:root { --ink: #152731; --ink-2: #2B3F4B; --btn-ink: #2C3F4C; --knopf: #62C08E; --knopf-h: #4FB37E; --verde: #00874A; --gris: #4C5862; --linea: #CFCFCF; }
body { margin: 0; font-family: Inter, "Helvetica Neue", Arial, sans-serif; color: var(--ink-2); background: #FFFFFF linear-gradient(90deg, rgba(241, 238, 238, 0.49) 0%, rgb(219, 219, 219) 100%) fixed; line-height: 1.6; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; background: var(--knopf); color: var(--btn-ink); text-decoration: none; border: 0; cursor: pointer; font-family: inherit; font-weight: 500; }
.btn:hover { background: var(--knopf-h); }
.top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 28px; z-index: 50; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.35s ease; }
.top.con-fondo { background: rgba(236, 236, 236, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.top.oculto { transform: translateY(-115%); }
.top .der { display: flex; align-items: center; gap: 22px; }
.menu-btn { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 12px 0; }
.hamb { position: relative; display: inline-block; width: 28px; height: 10px; }
.hamb::before, .hamb::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 0.35s ease; }
.hamb::before { top: 0; } .hamb::after { bottom: 0; }
.menu-btn:hover .hamb::before { transform: translateX(6px); } .menu-btn:hover .hamb::after { transform: translateX(-6px); }
.velo { position: fixed; inset: 0; z-index: 70; background: rgba(21, 39, 49, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(480px, 92vw); background: #152731; color: #F1F1EF; display: flex; flex-direction: column; padding: 22px 40px 40px; overflow: auto; transform: translateX(100%); transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1); }
html.menu-abierto .cajon, .cajon:target { transform: none; }
html.menu-abierto .velo { opacity: 1; pointer-events: auto; }
.cajon-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; }
.logo-cajon { display: block; width: auto !important; }
.menu-cerrar { color: #F1F1EF; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 0; }
.cajon ol { list-style: none; margin: 0; padding: 0; counter-reset: m; display: flex; flex-direction: column; gap: 4px; }
.cajon li { counter-increment: m; opacity: 0; transform: translateX(40px); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.menu-abierto .cajon li, .cajon:target li { opacity: 1; transform: none; }
html.menu-abierto .cajon li:nth-child(1) { transition-delay: 0.22s; }
html.menu-abierto .cajon li:nth-child(2) { transition-delay: 0.29s; }
html.menu-abierto .cajon li:nth-child(3) { transition-delay: 0.36s; }
html.menu-abierto .cajon li:nth-child(4) { transition-delay: 0.43s; }
html.menu-abierto .cajon li:nth-child(5) { transition-delay: 0.50s; }
html.menu-abierto .cajon li:nth-child(6) { transition-delay: 0.57s; }
html.menu-abierto .cajon li:nth-child(7) { transition-delay: 0.64s; }
.cajon ol a { display: flex; align-items: baseline; gap: 18px; color: #F1F1EF; text-decoration: none; font-size: clamp(26px, 3.2vw, 38px); font-weight: 300; line-height: 1.25; padding: 6px 0; }
.cajon ol a::before { content: counter(m, decimal-leading-zero); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: #62C08E; }
.cajon ol a:hover { color: #62C08E; }
.cajon-pie { margin-top: auto; padding-top: 48px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #AEB9C0; }
.cajon-pie a { color: #F1F1EF; text-decoration: none; } .cajon-pie a:hover { color: #62C08E; }
.cajon .idiomas-sel { margin-bottom: 8px; } .cajon .idiomas-sel a { color: #F1F1EF; padding-left: 0; padding-right: 12px; }
.apertura { display: none; }
html.intro-on .apertura { display: flex; position: fixed; inset: 0; z-index: 100; background: #152731; align-items: center; justify-content: center; }
.apertura { will-change: opacity; transform: translateZ(0); contain: paint; }
.intro-logo { width: min(560px, 72vw); will-change: transform, opacity; }
.intro-logo svg { width: 100%; height: auto; display: block; overflow: visible; }
.apertura .intro-icono, .apertura svg > g path { opacity: 0; }
html.intro-on body { overflow: hidden; }
html.intro-on .top, html.intro-on .hero-in { visibility: hidden; }
html, body { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; }
.ia-pin { padding: 24px 24px 96px; }
.ia-in { max-width: 1040px; margin: 0 auto; }
.ia-etiqueta { margin: 34px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde); }
.ia-titulo { margin: 0 0 26px; font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); }
.ia-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
.ia-fila .intro { margin: 0; font-size: 1.1rem; font-weight: 300; }
.ia-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ia-vid video { width: 100%; height: auto; aspect-ratio: 1600 / 520; object-fit: cover; display: block; background: #E8E2D6; border-top-left-radius: 120px 80px; border-bottom-right-radius: 120px 80px; }
@media (min-width: 901px) { .ia-vid video { max-height: 32vh; } }
.top .logo { display: block; }
.top .idiomas-sel { color: var(--btn-ink); }
.hero { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 112px 24px 96px; }
.hero-in { display: flex; align-items: flex-start; }
.video { flex: 0 0 199px; width: 199px; height: 404px; object-fit: cover; display: block; margin-top: 7px; background: #D9D9D9; border-top-left-radius: 42% 24%; border-bottom-right-radius: 45% 32%; }
.divisor { flex: 0 0 1px; width: 1px; height: 404px; margin: 7px 54px 0 33px; background: var(--ink); }
.copy { flex: 0 0 auto; }
.copy p { margin: 0; font-size: 42px; line-height: 55.5px; white-space: nowrap; }
.b { font-weight: 700; color: var(--ink); }
.l { font-weight: 300; color: var(--ink-2); }
.pausa { height: 55.5px; }
.copy .btn { min-width: 199px; padding: 0 28px; height: 49px; margin-top: 82px; margin-left: 8px; font-size: 22px; }
.sec { padding: 96px 24px; }
.sec-in { max-width: 1040px; margin: 0 auto; }
.sec h2 { margin: 0 0 14px; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.15; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.sec .intro { margin: 0 0 48px; max-width: 44rem; font-size: 1.15rem; font-weight: 300; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.item { border-top: 2px solid var(--verde); padding-top: 22px; }
.item h3 { margin: 0 0 10px; font-size: 1.3rem; color: var(--ink); }
.item p { margin: 0; color: var(--gris); }
.areas ul { margin: 0; padding-left: 1.1em; color: var(--gris); display: flex; flex-direction: column; gap: 6px; }
.areas li::marker { color: var(--verde); }
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px 64px; align-items: start; }
.dos p { margin: 0 0 14px; font-size: 1.1rem; font-weight: 300; }
.idiomas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 0; list-style: none; }
.idiomas li { border: 1px solid var(--ink-2); border-radius: 100px; padding: 6px 16px; font-size: 0.95rem; }
.banda { margin: 0 auto; max-width: 1040px; padding: 0 24px; }
.banda img { width: 100%; height: auto; display: block; border-top-left-radius: 120px 80px; border-bottom-right-radius: 120px 80px; }
.foto { width: 100%; height: auto; display: block; border-top-left-radius: 90px 70px; border-bottom-right-radius: 90px 70px; }
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: p; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.pasos li { counter-increment: p; display: flex; flex-direction: column; gap: 8px; }
.pasos li::before { content: counter(p, decimal-leading-zero); font-weight: 700; color: var(--verde); letter-spacing: 0.08em; }
.pasos strong { font-size: 1.15rem; color: var(--ink); }
.pasos span { color: var(--gris); }
.datos { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 1.05rem; }
.datos a { color: var(--verde); text-decoration: none; font-weight: 500; }
.datos a:hover { text-decoration: underline; }
.form label { color: #267850; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { border: 1px solid #A9B0B5; background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.form .check input { accent-color: var(--verde); }
.form .check a, .form .nota a { color: var(--verde); }
.form .btn { min-width: 160px; height: 46px; font-size: 1rem; padding: 0 24px; }
.form .nota { color: var(--gris); }
.pie { border-top: 1px solid var(--linea); color: var(--gris); }
.pie-in { max-width: 1040px; }
.pie-t { color: var(--ink); }
.legal { padding-top: 150px; }
.legal h1, .legal h2 { color: var(--ink); }
.legal a { color: var(--verde); }
.legal .btn { padding: 12px 26px; }
@media (max-width: 900px) {
  .top { padding: 12px 18px; }
  .top .idiomas-sel { display: none; }
  .ia-fila, .ia-lista { grid-template-columns: 1fr; gap: 24px; }
  .ia-vid video { aspect-ratio: 16 / 9; border-top-left-radius: 70px 50px; border-bottom-right-radius: 70px 50px; }
  .ia-pin { padding: 24px 20px 64px; }
  .hero { min-height: 0; align-items: flex-start; padding: 96px 20px 64px; }
  .hero-in { flex-direction: column; gap: 32px; }
  .divisor { display: none; }
  .video { width: min(199px, 50vw); height: auto; aspect-ratio: 199 / 404; }
  .copy p { font-size: clamp(26px, 6.4vw, 42px); line-height: 1.32; white-space: normal; }
  .copy p br { display: none; }
  .pausa { height: 1.2em; }
  .copy .btn { margin-top: 40px; margin-left: 0; }
  .sec { padding: 64px 20px; }
  .legal { padding-top: 110px; }
}
