/* ============================================================
   LANDING — CAPA EDITORIAL "carácter" (ojos + coral + papel)
   Se carga DESPUÉS de landing.css y reescribe la identidad
   visual sin tocar la estructura ni el JS del demo interactivo.
   ============================================================ */

/* ---- tokens: se re-aliasan los nombres viejos a la paleta nueva ---- */
:root{
  --paper:#FBF4E9; --cream:#FFFBF3; --ink:#241f1b; --ink2:#5b5249;
  --coral:#FF5A3C; --coral-d:#E23E22; --butter:#FFC24B; --tint:#FFE3D6;
  --line:#eaddc9; --green-e:#3f9d6b; --sky-e:#5aa9d6;

  /* alias sobre los nombres que ya usa landing.css */
  --brand:#FF5A3C; --brand-sky:#FF7A56; --brand-light:#FF7A56; --brand-dark:#E23E22;
  --brand-deeper:#E23E22; --brand-aqua:#FFC24B;
  --purple:#E23E22; --purple-light:#FF7A56; --purple-dark:#241f1b;
  --accent:#E23E22;
  --gradient-brand:linear-gradient(135deg,#FF7A56 0%,#FF5A3C 55%,#E23E22 100%);
  --green:#3f9d6b; --orange:#E8A020; --teal:#5aa9d6; --pink:#E23E22;

  --gray-50:#FBF4E9; --gray-100:#FFFBF3; --gray-200:#eaddc9; --gray-400:#a99a83;
  --gray-500:#7a6f61; --gray-600:#5b5249; --gray-700:#3a332c; --gray-800:#241f1b; --gray-900:#1a1613;

  --radius:16px; --radius-lg:22px;
  --shadow-sm:0 2px 0 rgba(36,31,27,.06);
  --shadow-md:0 14px 30px -20px rgba(60,40,20,.5);
  --shadow-lg:0 26px 60px -32px rgba(60,40,20,.55);

  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --font-display:"Newsreader",Georgia,serif;
  --font-round:"Fredoka",system-ui,sans-serif;
  --font-hand:"Caveat",cursive;
}

/* ---- base ---- */
.landing-body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  background-image:radial-gradient(rgba(180,140,90,.05) 1px,transparent 1px);
  background-size:22px 22px;
}
.landing-body h1,.landing-body h2,.landing-body h3,.landing-body h4{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.005em;color:var(--ink);
}
.landing-body .section-sub,.landing-body p{color:var(--ink2)}

/* acento de titulares: de degradado IA -> coral sólido (evita la barra vacía del typing) */
.gradient-text{
  background:none !important;-webkit-text-fill-color:var(--coral-d) !important;
  color:var(--coral-d) !important;-webkit-background-clip:initial !important;background-clip:initial !important;
}
.landing-headline-em{color:var(--coral-d);font-style:italic}

/* quita la decoración "IA": mallas, orbes, olas, glows */
.hero-mesh,.hero-orbs,.orb,.hero-wave,.demo-bg-pattern,.cta-orbs,.hero-card-glow{display:none !important}

/* ============ LOGO OJOS (inline en la landing) ============ */
.eyes-logo{display:inline-flex;align-items:center;font-family:var(--font-round);font-weight:700;font-size:30px;color:var(--ink);letter-spacing:-.02em;line-height:1;text-decoration:none}
.eyes{display:inline-flex;gap:.03em;align-items:center;margin-left:.1em}
.eyes .o{width:.64em;height:.64em;background:var(--coral);border-radius:50%;position:relative;transform-origin:center;animation:eblink 4.4s infinite;flex:none}
.eyes .o::before{content:"";position:absolute;left:50%;top:50%;width:.43em;height:.43em;border-radius:50%;background:#FFFBF3;transform:translate(-50%,-50%)}
.eyes .o .p{position:absolute;width:.2em;height:.2em;border-radius:50%;background:#241f1b;left:50%;top:50%;transform:translate(-50%,-50%);animation:elook 4.4s infinite;z-index:1}
.eyes-logo--white{color:var(--cream)}
/* logo dentro del hero (reemplaza al del navbar en la landing) — en su propia línea */
.ed-hero-logo{display:flex;width:max-content;font-size:40px;margin-bottom:22px}
@media (max-width:640px){.ed-hero-logo{font-size:34px;margin-bottom:16px}}
@keyframes eblink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.09)}}
@keyframes elook{0%,15%{transform:translate(-50%,-50%)}21%,35%{transform:translate(-88%,-45%)}41%,55%{transform:translate(-12%,-45%)}61%,74%{transform:translate(-50%,-84%)}80%,100%{transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){.eyes .o,.eyes .o .p{animation:none}}

/* ============ NAV ============ */
.landing-nav{background:rgba(251,244,233,.82) !important;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--line);box-shadow:none}
.landing-nav.scrolled{background:rgba(251,244,233,.94) !important;box-shadow:0 1px 0 var(--line)}
.nav-link{font-family:var(--font-body);font-weight:600;color:var(--ink2);position:relative}
.nav-link:hover{color:var(--coral-d);background:var(--tint)}
/* Sección activa (scroll-spy): subrayado coral bajo el enlace del menú. */
.nav-link.active{color:var(--coral-d);background:transparent;font-weight:700}
.nav-link.active::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2.5px;border-radius:2px;background:var(--coral)}
.nav-btn{font-family:var(--font-round);font-weight:600;border-radius:12px}
.nav-btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.nav-btn.ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.nav-btn.primary{background:var(--coral);color:#fff;box-shadow:0 4px 0 0 var(--coral-d);border:none}
.nav-btn.primary:hover{transform:translateY(-1px);box-shadow:0 5px 0 0 var(--coral-d)}
.nav-mobile-toggle{color:var(--ink)}

/* ============ botones editoriales (global) ============ */
.hero-main-btn,.cta-btn-main,.pricing-btn.primary,.pricing-btn.pro-btn,.demo-score-btn.primary{
  font-family:var(--font-round);font-weight:600;background:var(--coral);color:#fff;border:none;
  border-radius:14px;box-shadow:0 5px 0 0 var(--coral-d);transition:transform .14s,box-shadow .14s;
}
.hero-main-btn:hover,.cta-btn-main:hover,.pricing-btn.primary:hover,.pricing-btn.pro-btn:hover,.demo-score-btn.primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 0 var(--coral-d)}
.hero-sec-btn,.pricing-btn.outline,.demo-score-btn.secondary,.demo-back-btn,.demo-back-link{
  font-family:var(--font-round);font-weight:600;background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:12px
}
.hero-sec-btn:hover,.pricing-btn.outline:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ============ HERO ============ */
.hero{background:transparent}
.hero-badge{font-family:var(--font-hand);font-weight:700;font-size:22px;color:var(--coral-d);background:none;border:none;padding:0;transform:rotate(-2deg)}
.hero-badge span{color:var(--coral-d)}
.hero-title{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.hero-desc{color:var(--ink2)}
.hero-desc strong{color:var(--ink);font-weight:700}
.hero-stats .stat-num{font-family:var(--font-round);color:var(--ink)}
.hero-stats .stat-label{color:var(--ink2)}
.stat-plus-accent{color:var(--coral)}
.hero-card{background:var(--cream);border:2.5px solid var(--ink);border-radius:22px;box-shadow:10px 12px 0 rgba(36,31,27,.9);transform:rotate(-1.6deg)}
.hero-card-icon{background:var(--tint);color:var(--coral-d)}
.hero-card-title{font-family:var(--font-display)}
.hero-trust-text{color:var(--ink2)}

/* ============ SECTION shell ============ */
.section-alt{background:var(--cream)}
.section-badge{font-family:var(--font-round);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-d);background:var(--tint);border-radius:20px;padding:6px 14px}
.section-header h2{font-family:var(--font-display)}
.section-sub{color:var(--ink2)}

/* ============ HOW IT WORKS ============ */
.step-card{background:var(--cream);border:1.5px solid var(--line);border-radius:18px;box-shadow:none}
.step-num-circle{background:var(--coral);color:#fff;font-family:var(--font-round);font-weight:700;box-shadow:0 3px 0 0 var(--coral-d)}
/* cada paso con su color: subir (coral), IA (morado), grupo (verde) */
.ed-step:nth-of-type(2) .ed-num{color:#A855F7;-webkit-text-stroke:2px #7E22CE}
.ed-step:nth-of-type(2) .ed-em{color:#7E22CE}
.ed-step:nth-of-type(3) .ed-num{color:#22C55E;-webkit-text-stroke:2px #15803D}
.ed-step:nth-of-type(3) .ed-em{color:#15803D}
.step-icon{border-radius:14px}
.step-icon.blue{background:#DBEAFE;color:#2563EB}
.step-icon.purple{background:#F3E8FF;color:#9333EA}
.step-icon.orange{background:#fdeccd;color:#c98a12}
.step-icon.green{background:#DCFCE7;color:#16A34A}
.step-line{background:var(--line)}
.step-card h3{font-family:var(--font-display)}
.ten-plus__num,.ten-plus__plus{color:var(--coral-d);font-family:var(--font-round)}

/* ============ DEMO ============ */
.demo-step-dot{background:var(--cream);border:2.5px solid var(--line);color:var(--ink2);font-family:var(--font-round);box-shadow:none}
.demo-step-dot.active{background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 4px 0 0 var(--coral-d)}
.demo-step-dot.done{background:var(--green-e);border-color:var(--green-e);color:#fff;box-shadow:0 3px 0 0 #2f7d54}
/* conector: línea punteada a mano (igual que el wizard de la app), sin relleno azul */
.demo-step-line{width:60px !important;background:repeating-linear-gradient(90deg,var(--butter) 0 6px,transparent 6px 11px) !important;border-radius:0 !important;overflow:visible !important}
.demo-step-line-fill{display:none !important}
.demo-step-label{color:var(--ink2);font-family:var(--font-round)}
.demo-step-label.active{color:var(--coral-d)}
.demo-container{background:var(--cream);border:2px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center}
.demo-panel{width:100%}
.demo-resource-card{background:var(--paper);border:2px solid var(--line);border-radius:16px}
.demo-resource-card:hover{border-color:var(--coral);transform:translateY(-3px)}
.demo-resource-preview{background:var(--tint);color:var(--coral-d)}
.demo-resource-preview.ppt{background:#fdeccd;color:#c98a12}
/* Word: azul de marca (no verde) */
.demo-resource-preview.word{background:#e4edf7;color:#2b579a}
.demo-resource-label{font-family:var(--font-round);color:var(--ink)}
.demo-act-card{background:var(--paper);border:2px solid var(--line);border-radius:14px;font-family:var(--font-round)}
.demo-act-card:hover{border-color:var(--type-color,var(--coral));transform:translateY(-2px)}
.demo-grid-title{font-family:var(--font-display)}
.demo-ai-brain i{color:var(--coral)}
.demo-ai-ring{border-top-color:var(--coral) !important;border-right-color:var(--coral) !important}
.demo-ai-ring-2{border-bottom-color:var(--butter) !important;border-left-color:var(--butter) !important}
.demo-ai-progress-fill{background:var(--coral) !important}
.demo-ai-status h3{font-family:var(--font-display)}
.demo-play-title{font-family:var(--font-round);color:var(--ink)}

/* opciones genéricas que generan los renderers del demo */
.demo-play-area .opt,.demo-play-area button:not(.demo-back-btn){font-family:var(--font-round)}

/* score overlay */
.demo-score-value{font-family:var(--font-round);color:var(--ink)}
.demo-score-card h3{font-family:var(--font-display)}
.demo-score-card{background:var(--cream);border:2px solid var(--line);border-radius:22px}

/* ============ FEATURES ============ */
.highlight-card{background:var(--cream);border:1.5px solid var(--line);border-radius:22px;box-shadow:var(--shadow-md)}
.highlight-visual{background:var(--paper)}
.highlight-badge{font-family:var(--font-round);font-weight:600;background:var(--tint);color:var(--coral-d);border-radius:20px}
.highlight-badge.purple{background:#F3E8FF;color:#7E22CE}
.highlight-badge.green{background:#DCFCE7;color:#15803D}
/* los tres bloques grandes: IA coral, lecciones índigo, resultados verde, reportes morado */
.highlight-card:nth-child(2) .hl-tag{background:#E0E7FF;color:#4338CA}
.highlight-card:nth-child(2) .hl-lesson-title i{color:#4F46E5}
.highlight-card:nth-child(2) .highlight-badge{background:#E0E7FF;color:#4338CA}
.highlight-info h3{font-family:var(--font-display)}
.hl-mock,.hl-mock-item,.hl-lesson-title,.hl-lesson-section{border-color:var(--line)}
.hl-tag{background:var(--tint);color:var(--coral-d)}
/* Tarjetas pequeñas con el mismo gesto que las de "Para tus alumnos":
   carpeta con lengüeta de color arriba a la izquierda, sin velo al pasar el
   mouse; el icono gira igual que el de aquellas. */
.features-grid{gap:clamp(16px,2.2vw,24px)}
.features-grid .feature-card{
  position:relative;overflow:visible;background:var(--cream);border:1.5px solid var(--line);
  border-radius:4px 20px 20px 20px;padding:26px 24px 24px;box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease;
}
.features-grid .feature-card::after{display:none}
.features-grid .feature-card::before{
  content:"";position:absolute;left:-1.5px;top:-1.5px;
  width:68px;height:5px;background:var(--fx,var(--coral));border-radius:4px 4px 0 0;
}
.features-grid .feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line)}
.feature-card h3{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.005em;color:var(--ink);margin:0 0 7px}
.feature-card p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:0}
.feature-icon{width:44px;height:44px;border-radius:12px;margin:2px 0 16px;font-size:19px;transform-origin:60% 70%;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.features-grid .feature-card:hover .feature-icon{transform:rotate(-6deg) scale(1.06)}
.features-grid .feature-card:nth-child(1){--fx:#2563EB}
.features-grid .feature-card:nth-child(2){--fx:#9333EA}
.features-grid .feature-card:nth-child(3){--fx:#16A34A}
.features-grid .feature-card:nth-child(4){--fx:#D97706}
.features-grid .feature-card:nth-child(5){--fx:#DB2777}
.features-grid .feature-card:nth-child(6){--fx:#0D9488}
.feature-icon.blue{background:#DBEAFE;color:#2563EB}
.feature-icon.purple{background:#F3E8FF;color:#9333EA}
.feature-icon.green{background:#DCFCE7;color:#16A34A}
.feature-icon.orange{background:#FEF3C7;color:#D97706}
.feature-icon.pink{background:#FCE7F3;color:#DB2777}
.feature-icon.cyan{background:#CCFBF1;color:#0D9488}
@media(prefers-reduced-motion:reduce){
  .features-grid .feature-card,.feature-icon{transition:none}
  .features-grid .feature-card:hover{transform:none}
  .features-grid .feature-card:hover .feature-icon{transform:none}
}

/* ============ ACTIVITIES — muro cálido claro (mismo diseño, sin fondo oscuro) ============ */
#activities{background:linear-gradient(160deg,#FFF1E8 0%,#FFF8F0 60%,#FFEFE2 100%);border:1.5px solid var(--line);border-radius:34px;margin:0 clamp(12px,3vw,40px)}
#activities .section-badge{background:var(--tint);color:var(--coral-d)}
#activities .section-header h2{color:var(--ink)}
#activities .section-sub{color:var(--ink2)}
#activities .ten-plus__num,#activities .ten-plus__plus,#activities .landing-headline-em{color:var(--coral-d)}
.act-card{background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:14px;font-family:var(--font-round);font-weight:600;box-shadow:3px 3px 0 rgba(36,31,27,.22)}
.act-card i{color:var(--coral-d)}
/* cada tipo con su color (misma paleta que la app) */
.act-card .fa-check-double{color:#16A34A}
.act-card .fa-pen-to-square{color:#D97706}
.act-card .fa-link{color:#9333EA}
.act-card .fa-arrow-down-1-9{color:#0EA5E9}
.act-card .fa-timeline{color:#2563EB}
.act-card .fa-clone{color:#CA8A04}
.act-card .fa-hand-pointer{color:#0D9488}
.act-card .fa-highlighter{color:#65A30D}
.act-card .fa-hashtag{color:#1E3A8A}
.act-card .fa-book-open-reader{color:#DB2777}
.act-card .fa-pen-nib{color:#78716C}

/* ============ STUDENT EXPERIENCE ============ */
/* Tarjetas con filo de tinta y sombra dura (mismo gesto que .act-card y las
   fichas del hero). Los iconos son SVG propios: contorno de tinta, relleno
   butter y un solo acento coral — nada de chips pastel de seis colores. */
.student-exp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,24px);
}
/* pestaña coral y esquina recortada arriba a la izquierda: la tarjeta se lee
   como una carpeta con lengüeta, sin necesidad de encajonarla */
.student-exp-card{
  position:relative;background:var(--cream);border:1.5px solid var(--line);
  border-radius:4px 20px 20px 20px;padding:26px 24px 24px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.student-exp-card::before{
  content:"";position:absolute;left:-1.5px;top:-1.5px;
  width:68px;height:5px;background:var(--coral);border-radius:4px 4px 0 0;
}
.student-exp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.student-exp-card h3{
  font-family:var(--font-display);font-weight:600;font-size:19px;
  letter-spacing:-.005em;color:var(--ink);margin:0 0 7px;
}
.student-exp-card p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin:0}

.sx-ico{
  display:block;width:42px;height:42px;margin:2px 0 16px;
  overflow:visible;transform-origin:60% 70%;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.student-exp-card:hover .sx-ico{transform:rotate(-6deg) scale(1.06)}
/* cada tarjeta con su propia lengüeta e icono de color */
.student-exp-card{--sx:var(--coral)}
.student-exp-card:nth-child(2){--sx:#2563EB}
.student-exp-card:nth-child(3){--sx:#16A34A}
.student-exp-card:nth-child(4){--sx:#9333EA}
.student-exp-card:nth-child(5){--sx:#D97706}
.student-exp-card:nth-child(6){--sx:#0D9488}
.student-exp-card::before{background:var(--sx)}
.student-exp-card .sx-ico{color:var(--sx)}
.student-exp-card .sx-ico [stroke="#FF5A3C"],.student-exp-card .sx-ico [stroke="#ff5a3c"]{stroke:var(--sx)}
.student-exp-card .sx-ico [fill="#FF5A3C"],.student-exp-card .sx-ico [fill="#ff5a3c"]{fill:var(--sx)}
@media(prefers-reduced-motion:reduce){
  .student-exp-card,.sx-ico{transition:none}
  .student-exp-card:hover{transform:none}
  .student-exp-card:hover .sx-ico{transform:none}
}

@media(max-width:1024px){.student-exp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .student-exp-grid{grid-template-columns:1fr}
  .student-exp-card{padding:22px 20px 20px}
}

/* ============ PRICING ============ */
.pricing-toggle{background:var(--cream);border:2px solid var(--line);border-radius:30px}
.pricing-toggle-label{font-family:var(--font-round);color:var(--ink2)}
.pricing-toggle-label.active{color:var(--coral-d)}
.pricing-toggle-switch{background:var(--line)}
.pricing-toggle-switch[aria-checked="true"]{background:var(--coral)}
.pricing-save-badge{font-family:var(--font-round);background:var(--butter);color:var(--ink);border-radius:20px}
.pricing-card{background:var(--cream);border:2px solid var(--line);border-radius:22px;box-shadow:none}
.pricing-card.popular{border-color:var(--ink);box-shadow:8px 10px 0 rgba(36,31,27,.9)}
.popular-tag,.pro-tag{font-family:var(--font-round);font-weight:700;background:var(--butter);color:var(--ink);border:2px solid var(--ink);border-radius:12px;transform:rotate(-3deg)}
.pricing-card h3{font-family:var(--font-display)}
.price-amount,.price-currency{font-family:var(--font-round);color:var(--ink)}
.price-period{color:var(--ink2)}
.pricing-features li{color:var(--ink)}
.pricing-features li i.fa-check{color:var(--green-e)}
.pricing-feature-disabled{color:var(--gray-400)}
.pricing-note{color:var(--ink2)}

/* ============ FAQ ============ */
.faq-item{background:var(--cream);border:1.5px solid var(--line);border-radius:14px}
.faq-item summary{font-family:var(--font-round);font-weight:600;color:var(--ink)}
.faq-icon{color:var(--coral)}
.faq-answer p{color:var(--ink2)}

/* ============ CTA ============ */
.cta-section{background:var(--ink);border-radius:34px;margin:0 clamp(12px,3vw,40px) clamp(30px,5vw,60px)}
.cta-content h2{color:var(--cream);font-family:var(--font-display)}
.cta-content p{color:#cbbfab}

/* ============ FOOTER ============ */
.landing-footer{background:var(--ink);color:#cbbfab}
.landing-footer h4{color:var(--cream);font-family:var(--font-round)}
.landing-footer a{color:#cbbfab}
.landing-footer a:hover{color:var(--butter)}
.footer-bottom{border-top-color:rgba(255,255,255,.1)}

/* ============ arreglos de "azul IA" que sobreviven por text-fill/underline ============ */
.hero-desc .hero-desc-num,.stat-plus-accent,.ten-plus__num,.ten-plus__plus{
  background:none !important;-webkit-text-fill-color:var(--coral-d) !important;color:var(--coral-d) !important;
  -webkit-background-clip:initial !important;background-clip:initial !important;filter:none !important;
}
#activities .ten-plus__num,#activities .ten-plus__plus{-webkit-text-fill-color:var(--coral-d) !important;color:var(--coral-d) !important}
.section-header h2 .landing-headline-em{text-decoration-color:var(--coral);color:var(--coral-d)}

/* ============ detalles a mano ============ */
.hand-note{font-family:var(--font-hand);font-weight:700;color:var(--coral-d);font-size:20px;display:inline-block;transform:rotate(-1.5deg)}

/* ============================================================
   COMPONENTES EDITORIALES NUEVOS (hero "Tu material…", 3 pasos, CTA)
   ============================================================ */
.ed-btn{font-family:var(--font-round);font-weight:600;font-size:15px;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:9px;transition:transform .14s,box-shadow .14s;text-decoration:none}
.ed-btn.coral{background:var(--coral);color:#fff;padding:14px 24px;border-radius:14px;box-shadow:0 5px 0 0 var(--coral-d)}
.ed-btn.coral:hover{transform:translateY(-2px);box-shadow:0 7px 0 0 var(--coral-d)}
.ed-hand{font-family:var(--font-hand);font-weight:700}

/* ---- HERO editorial ---- */
.hero.ed-hero{min-height:0;display:block;position:relative;padding:clamp(92px,9vw,116px) 0 clamp(30px,5vw,60px);background:transparent}
.ed-hero-grid{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,40px);display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,64px);align-items:center}
.ed-kick{font-family:var(--font-hand);font-weight:700;font-size:26px;color:var(--coral-d);transform:rotate(-3deg);display:inline-block;margin-bottom:8px}
.ed-h1{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,6.4vw,74px);line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0}
.ed-h1 .u{position:relative;white-space:nowrap;color:var(--coral-d)}
.ed-h1 .u svg{position:absolute;left:-2%;right:-2%;bottom:-.2em;width:104%;height:.32em;overflow:visible}
.ed-h1 .u svg path{fill:none;stroke:var(--coral);stroke-width:7;stroke-linecap:round}
.ed-lead{font-size:clamp(16px,1.9vw,19px);color:var(--ink2);line-height:1.55;margin:22px 0 26px;max-width:44ch}
.ed-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ed-free{font-family:var(--font-hand);font-weight:700;font-size:21px;color:var(--ink2)}
.ed-peek{position:relative;justify-self:center;width:100%;max-width:400px}
.ed-blob{position:absolute;inset:-8% -6% -10% -6%;background:var(--butter);border-radius:47% 53% 60% 40%/55% 45% 55% 45%;opacity:.5;z-index:0}
.ed-card{position:relative;z-index:2;background:var(--cream);border:2.5px solid var(--ink);border-radius:22px;padding:22px 22px 20px;box-shadow:10px 12px 0 rgba(36,31,27,.9);transform:rotate(-2.2deg)}
.ed-card .tp{display:flex;align-items:center;gap:9px;font-family:var(--font-round);font-weight:600;font-size:14px;color:var(--ink2);margin-bottom:14px}
.ed-card .tp .dot{width:11px;height:11px;border-radius:50%;background:var(--coral);flex:none}
.ed-card .q{font-family:var(--font-round);font-weight:600;font-size:19px;margin-bottom:16px;line-height:1.2;color:var(--ink)}
.ed-opt{border:2px solid var(--line);border-radius:12px;padding:11px 14px;font-family:var(--font-round);font-weight:600;font-size:14.5px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.ed-opt.ok{border-color:var(--coral);background:var(--tint);color:var(--coral-d)}
.ed-opt.ok .ck{width:22px;height:22px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:12px}
.ed-sticker{position:absolute;z-index:3;top:-20px;right:-12px;background:var(--butter);color:var(--ink);border:2.5px solid var(--ink);border-radius:14px;font-family:var(--font-round);font-weight:700;font-size:14px;padding:7px 13px;transform:rotate(7deg);box-shadow:3px 3px 0 var(--ink)}
.ed-arrow{position:absolute;z-index:3;left:-60px;bottom:34px;width:70px;height:60px;overflow:visible}
.ed-arrow path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.ed-arrow-note{position:absolute;left:-124px;bottom:108px;transform:rotate(-8deg);font-size:22px;line-height:1.15;text-align:center;color:var(--coral-d)}
@media(max-width:900px){.hero.ed-hero{padding-top:132px}.ed-hero-grid{grid-template-columns:1fr}.ed-peek{order:-1;max-width:330px;margin:6px auto 12px}.ed-arrow,.ed-arrow-note{display:none}}

/* ---- 3 PASOS editorial ---- */
.ed-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,34px);position:relative;max-width:1000px;margin:0 auto}
.ed-step{position:relative;text-align:left}
.ed-step .ed-num{font-family:var(--font-round);font-weight:700;font-size:64px;color:var(--coral);line-height:1;-webkit-text-stroke:2px var(--coral-d)}
.ed-step h3{font-family:var(--font-display);font-size:22px;margin:8px 0 8px;color:var(--ink)}
.ed-step p{color:var(--ink2);font-size:15px;line-height:1.5;margin:0}
.ed-step .ed-em{font-family:var(--font-hand);font-weight:700;color:var(--coral-d);font-size:19px;display:inline-block;margin-top:8px}
.ed-dash{position:absolute;top:34px;left:8%;right:8%;height:20px;z-index:-1;overflow:visible}
.ed-dash path{fill:none;stroke:var(--butter);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round}
@media(max-width:760px){.ed-steps{grid-template-columns:1fr;gap:26px}.ed-dash{display:none}}

/* ---- CTA editorial (ojos grandes + nota) ---- */
.cta-content .ed-eyes-big{font-size:56px;display:inline-flex;justify-content:center;margin-bottom:6px}
.cta-content .ed-eyes-big .eyes{margin:0}
.cta-note{margin-top:16px}
.cta-note .ed-hand{font-size:22px;color:var(--coral-d)}

/* ============ TODO EN CLARO: CTA final + footer (antes oscuros) ============ */
.cta-section{background:linear-gradient(135deg,var(--tint) 0%,#ffe9c9 55%,var(--butter) 100%) !important}
.cta-content h2{color:var(--ink) !important}
.cta-content p{color:var(--ink2) !important}
.landing-footer{background:var(--cream) !important;color:var(--ink2) !important;border-top:1.5px solid var(--line)}
.landing-footer .brand-name,.landing-footer .footer-col h4{color:var(--ink) !important}
.landing-footer .footer-col a,.landing-footer .footer-brand p,.landing-footer .footer-brand .brand-info p{color:var(--ink2) !important}
.landing-footer .footer-bottom p{color:var(--ink3) !important}
.landing-footer .footer-container{border-bottom-color:var(--line) !important}
.landing-footer .eyes-logo--white{color:var(--ink) !important}
.landing-footer .eyes-logo--white .o .p{background:var(--ink) !important}