/* Viaje por las Letras — colorful editorial system */
.viaje-page{background:#fff;color:var(--fcct-ink);overflow:hidden}
.viaje-section{position:relative;padding:82px 0}
.viaje-kicker{display:inline-flex;align-items:center;gap:9px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#fff;font-weight:500;margin-bottom:18px}.viaje-kicker:before{content:"";width:8px;height:8px;border-radius:2px;background:#fff;box-shadow:11px 0 0 rgba(255,255,255,.72),22px 0 0 rgba(255,255,255,.38);margin-right:24px}

/* HERO */
.viaje-hero{padding:176px 0 76px;background:linear-gradient(128deg,#7c3d89 0%,#8c4998 54%,#a45aa7 100%);position:relative;overflow:hidden;color:#fff}.viaje-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 84% 22%,rgba(255,255,255,.12) 0 13%,transparent 13.5%),radial-gradient(circle at 78% 78%,rgba(0,177,209,.2) 0 18%,transparent 18.5%),linear-gradient(32deg,transparent 0 58%,rgba(255,255,255,.04) 58% 68%,transparent 68%)}.viaje-hero:after{content:"";position:absolute;left:-90px;bottom:-110px;width:290px;height:290px;border:34px solid rgba(255,255,255,.06);border-radius:64px;transform:rotate(18deg)}
.viaje-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.03fr .97fr;gap:58px;align-items:center}.viaje-hero h1{font-size:clamp(40px,4.3vw,60px);line-height:1.03;letter-spacing:-.043em;font-weight:400;max-width:700px}.viaje-lead{font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.84);font-weight:300;max-width:560px;margin-top:20px}.video-chip{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:9px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#fff;font-size:11px;font-weight:500;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);transition:.2s}.video-chip:before{content:"▶︎";font-size:9px}.video-chip:hover{background:#fff;color:var(--fcct-p);transform:translateY(-2px)}
.viaje-hero-grid>div:last-child{min-height:370px;position:relative;border-radius:26px;background:linear-gradient(160deg,#fff 0%,#f7f2f8 100%);box-shadow:0 22px 58px rgba(45,20,55,.17);overflow:hidden;transform:rotate(1.2deg)}.viaje-hero-grid>div:last-child:before{content:"A B C";position:absolute;left:32px;top:32px;font-size:clamp(50px,5.6vw,82px);line-height:.9;letter-spacing:-.09em;font-weight:500;color:#864490}.viaje-hero-grid>div:last-child:after{content:"Leer · escribir · avanzar";position:absolute;left:32px;right:32px;bottom:32px;padding:14px 17px;border-radius:15px;background:var(--fcct-c);color:#fff;font-size:12.5px;font-weight:500;box-shadow:0 13px 28px rgba(0,177,209,.2)}

/* METRICS */
.viaje-metrics{padding:0 0 80px;background:#fff}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:-24px;position:relative;z-index:4}.metric-card{padding:21px 21px;min-height:152px;border:0;border-radius:17px;box-shadow:0 12px 26px rgba(28,32,38,.06);display:flex;flex-direction:column;justify-content:space-between}.metric-card:nth-child(1){background:#fde5d3}.metric-card:nth-child(2){background:#e7f3d4}.metric-card:nth-child(3){background:#dff4f8}.metric-card:nth-child(4){background:#f3e6f4}.metric-card strong{display:block;font-size:35px;font-weight:400;letter-spacing:-.045em;color:#25262a;margin-bottom:12px}.metric-card p{font-size:12px;line-height:1.5;color:#51565c;font-weight:300}.metric-card:hover{transform:translateY(-3px);transition:.22s ease}

/* SHARED HEADINGS */
.section-head{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:start;margin-bottom:32px}.section-head h2,.implement-copy h2,.method-intro h2{font-size:clamp(32px,3.3vw,46px);font-weight:400;letter-spacing:-.038em;line-height:1.08;max-width:560px}.section-head p,.implement-copy>p{font-size:13.5px;line-height:1.66;color:#616970;font-weight:300;max-width:520px}

/* AUDIENCE */
.viaje-section.soft{background:#eef9fb}.viaje-section.soft:before{content:"";position:absolute;right:-120px;top:-100px;width:300px;height:300px;border:35px solid rgba(0,177,209,.08);border-radius:70px;transform:rotate(18deg)}.audience-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:0}.audience-item{padding:21px;min-height:170px;border:0;border-radius:18px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 9px 22px rgba(25,64,72,.045)}.audience-item:nth-child(1){background:#fff}.audience-item:nth-child(2){background:#f5eef6}.audience-item:nth-child(3){background:#fff4e8}.audience-item span{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:600}.audience-item:nth-child(1) span{background:var(--fcct-c)}.audience-item:nth-child(2) span{background:var(--fcct-p)}.audience-item:nth-child(3) span{background:var(--fcct-o)}.audience-item p{font-size:13.2px;line-height:1.52;max-width:290px}.audience-item:hover{transform:translateY(-3px);transition:.22s ease}

/* IMPLEMENTATION */
.implement-grid{display:grid;grid-template-columns:1fr .88fr;gap:48px;align-items:stretch}.implement-copy{padding:4px 0}.implement-copy>p{margin-top:18px;font-size:13.5px}.coordinator{margin-top:22px;border:0;border-radius:15px;background:#f6f1f7;overflow:hidden}.coordinator summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:12px;font-weight:500;color:var(--fcct-p);display:flex;justify-content:space-between;gap:20px}.coordinator summary::-webkit-details-marker{display:none}.coordinator summary:after{content:"+";font-size:19px;font-weight:300}.coordinator[open] summary:after{content:"−"}.coordinator p{padding:0 18px 18px;font-size:12px;line-height:1.62;color:#697078;font-weight:300}.implement-note{position:relative;background:linear-gradient(145deg,var(--fcct-p),#a457aa);color:#fff;padding:28px;border-radius:22px;min-height:235px;display:flex;align-items:flex-end;overflow:hidden}.implement-note:before{content:"ABC";position:absolute;right:-8px;top:10px;font-size:78px;line-height:1;font-weight:600;letter-spacing:-.1em;color:rgba(255,255,255,.08)}.implement-note:after{content:"";position:absolute;width:130px;height:130px;border:18px solid rgba(255,255,255,.08);border-radius:32px;left:-50px;top:-42px;transform:rotate(22deg)}.implement-note strong{position:relative;z-index:2;font-size:22px;font-weight:400;line-height:1.2;letter-spacing:-.025em;max-width:360px}

/* METHOD */
.viaje-section.cream{background:#fff5e9}.viaje-section.cream .viaje-kicker{color:var(--fcct-p)}.viaje-section.cream .viaje-kicker:before{background:var(--fcct-c);box-shadow:11px 0 0 var(--fcct-p),22px 0 0 var(--fcct-o)}.method-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin-bottom:30px}.method-intro p{max-width:430px;font-size:13px;line-height:1.62;color:#626970}.steps-wrap{position:relative;padding:21px;border-radius:22px;background:#fff;box-shadow:0 14px 30px rgba(99,69,33,.055)}.steps-days{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.day-label{border:0;border-radius:10px;padding:9px 11px;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.day-label:first-child{background:#eaf8fb;color:#0089a2}.day-label:last-child{background:#f4eaf5;color:var(--fcct-p)}.six-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end}.step-card{position:relative;border-radius:16px;padding:14px 13px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;border:0;overflow:hidden}.step-card:before{content:"";position:absolute;right:-26px;top:-26px;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.35)}.step-card:nth-child(1){background:#fde1cf;min-height:245px}.step-card:nth-child(2){background:#e8f3d1;min-height:232px}.step-card:nth-child(3){background:#fff0c9;min-height:220px}.step-card:nth-child(4){background:#f7d2ca;min-height:208px}.step-card:nth-child(5){background:#ccecf8;min-height:196px}.step-card:nth-child(6){background:#dcebd5;min-height:184px}.step-card small{position:relative;z-index:2;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.step-card div{position:relative;z-index:2}.step-card strong{display:block;font-size:13px;line-height:1.22;font-weight:500}.step-card em{display:block;font-style:normal;font-size:11px;color:#596067;margin-top:5px}.threshold{margin-top:18px;padding:16px 18px;border-radius:13px;background:#eff9fb;border-left:4px solid var(--fcct-c);font-size:12px;line-height:1.6;color:#586168}

/* MATERIALS */
.viaje-section:not(.soft):not(.cream) .materials-grid{margin-top:4px}.materials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.material-card{position:relative;padding:21px;min-height:162px;border:0;border-radius:17px;background:#f7f7f8;overflow:hidden;transition:.22s ease}.material-card:nth-child(3n+1){background:#f3eef5}.material-card:nth-child(3n+2){background:#eef9fb}.material-card:nth-child(3n){background:#fff3e6}.material-card:after{content:"";position:absolute;width:68px;height:68px;border:11px solid rgba(255,255,255,.46);border-radius:18px;right:-22px;bottom:-24px;transform:rotate(18deg)}.material-card strong{position:relative;z-index:2;display:block;font-size:15px;font-weight:500;line-height:1.28;margin-bottom:9px}.material-card p{position:relative;z-index:2;font-size:12px;line-height:1.56;color:#60686f;font-weight:300;max-width:310px}.material-card.app{background:linear-gradient(145deg,#00b1d1,#08a4c1);color:#fff}.material-card.app p{color:rgba(255,255,255,.86)}.material-card.app a{position:relative;z-index:2;display:inline-flex;margin-top:13px;padding:8px 11px;border-radius:999px;background:#fff;color:var(--fcct-p);font-size:11px;font-weight:500;transition:transform .2s ease,box-shadow .2s ease}.material-card.app a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,74,87,.17)}.material-card:hover{transform:translateY(-3px)}

/* FINAL CTA */
.viaje-page .join{padding:0!important}.viaje-page .join-card{min-height:0;padding:54px max(40px,calc((100vw - 1320px)/2));}.viaje-page .join-card h2{font-size:clamp(32px,3.5vw,46px);max-width:840px;line-height:1.08}.viaje-page .join-card p{max-width:660px;font-size:13px;line-height:1.6}.viaje-page .join-card a{display:inline-flex;margin-top:22px;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.viaje-page .join-card a:hover{transform:translateY(-2px);background:#f8f4f9;box-shadow:0 8px 22px rgba(36,20,41,.16)}

@media(max-width:900px){.viaje-hero-grid,.section-head,.implement-grid{grid-template-columns:1fr}.viaje-hero-grid>div:last-child{min-height:300px;transform:none}.metric-grid{grid-template-columns:1fr 1fr}.audience-list{grid-template-columns:1fr}.method-intro{display:block}.method-intro p{margin-top:16px}.six-steps{grid-template-columns:repeat(3,1fr);align-items:stretch}.step-card{min-height:185px!important}.steps-days{display:none}.materials-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.viaje-hero{padding:132px 0 58px}.viaje-hero h1{font-size:38px}.viaje-lead{font-size:13px;line-height:1.58}.viaje-hero-grid{gap:28px}.viaje-hero-grid>div:last-child{min-height:220px;border-radius:20px}.viaje-hero-grid>div:last-child:before{left:20px;top:22px;font-size:54px}.viaje-hero-grid>div:last-child:after{left:20px;right:20px;bottom:20px;font-size:11px}.viaje-section{padding:62px 0}.metric-grid{grid-template-columns:1fr;gap:9px;margin-top:-18px}.metric-card{min-height:138px}.audience-item{min-height:155px}.implement-note{min-height:195px;padding:22px}.implement-note strong{font-size:20px}.steps-wrap{padding:14px;border-radius:17px}.six-steps{grid-template-columns:1fr 1fr}.step-card{min-height:155px!important}.materials-grid{grid-template-columns:1fr}.section-head{gap:14px}.section-head h2,.implement-copy h2,.method-intro h2{font-size:34px}.viaje-page .join-card{padding:42px 16px}.viaje-page .join-card h2{font-size:34px}}

/* Más ancho útil y menos borde exterior en las secciones de Viaje por las Letras */
.viaje-page .container{width:min(1320px,calc(100% - 80px))!important}
@media(max-width:900px){.viaje-page .container{width:calc(100% - 48px)!important}}
@media(max-width:560px){.viaje-page .container{width:calc(100% - 32px)!important}}

/* El CTA final debe ocupar todo el ancho de la ventana; evita que la foto se vea cortada por la regla global del container */
.viaje-page .join>.container{width:100%!important;max-width:none!important}

html[lang="en"] .viaje-hero-grid>div:last-child:after{content:"Read · write · move forward"}
