/* ==========================================================
   Versión 2 · Identidad Salesianos del Perú (Manual de Identidad v6)
   Se carga DESPUÉS de style.css y sobrescribe paleta, tipografía y formas.
   Paleta pantalla: celeste #0099d9 · azul #005f99 · blanco · beige #FDE6C1 · rojo de acento #D6182C
   Tipografía: Merriweather (títulos) + Titillium Web (interfaz y texto, ≥16 px)
   ========================================================== */
:root{
  --celeste:#0099d9; --azul:#005f99; --azul-d:#004a78; --azul-xd:#00345a; --beige:#FDE6C1; --beige-l:#FFF6E6; --rojo:#D6182C;
  --navy:#00345a; --navy2:#004a78; --blue:#005f99; --blue2:#004a78;
  --sky:#0099d9; --sky2:#9fd9f3; --yellow:#FDE6C1; --orange:#D6182C;
  --gray:#F3F8FB; --ink:#16324a; --muted:#4a6176;
  --wa:#25D366;
  --r:10px; --r-lg:16px;
  --sh-s:0 2px 10px rgba(0,52,90,.10); --sh-m:0 8px 24px rgba(0,52,90,.16); --sh-l:0 18px 44px rgba(0,52,90,.22);
  --ff-h:'Titillium Web',Arial,system-ui,sans-serif; --ff-b:'Titillium Web',Arial,system-ui,sans-serif;
  --ff-serif:'Merriweather',Georgia,'Times New Roman',serif; --ff-hand:'Merriweather',Georgia,serif;
  --hdr:80px;
}
body{font-size:18px;line-height:1.7;color:var(--ink)}
h1,h2,h3,.year,.sp-num,.stat b,.wpanel h3,.pillar h4,.vow h4{font-family:var(--ff-serif)}
h4,h5{font-family:var(--ff-h);font-weight:700}
a{color:var(--azul)}
:focus-visible{outline-color:var(--celeste)}

/* Progreso y botones */
.progress{background:linear-gradient(90deg,var(--celeste),var(--azul))}
.btn{border-radius:10px;font-weight:700;font-size:1rem;letter-spacing:.01em}
.btn-sm{font-size:.95rem}
.btn-yellow{background:var(--beige);color:var(--azul-d)}
.btn-yellow:hover{background:#fff;color:var(--azul)}
.btn-blue{background:var(--azul);color:#fff}
.btn-blue:hover{background:var(--azul-d)}
.btn-wa{background:var(--celeste);color:#fff;border-color:rgba(255,255,255,.55)}
.btn-wa:hover{background:var(--azul);color:#fff}
.fab-wa{background:var(--azul);border-color:rgba(255,255,255,.8)}
.fab-wa:hover{background:var(--celeste);color:#fff}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:var(--sh-s),0 0 0 0 rgba(0,153,217,.55)}50%{transform:scale(1.045);box-shadow:var(--sh-m),0 0 0 14px rgba(0,153,217,0)}}
@keyframes breathe-fab{0%,100%{transform:scale(1);box-shadow:0 10px 30px rgba(0,52,90,.35),0 0 0 0 rgba(0,153,217,.55)}50%{transform:scale(1.09);box-shadow:0 14px 34px rgba(0,52,90,.4),0 0 0 14px rgba(0,153,217,0)}}
.btn-ghost-d{color:var(--azul);border-color:var(--azul)}
.btn-ghost-d:hover{background:var(--azul);color:#fff}
.sec-light .btn-yellow,.sec-gray .btn-yellow{background:var(--azul);color:#fff}
.sec-light .btn-yellow:hover,.sec-gray .btn-yellow:hover{background:var(--azul-d);color:#fff}

/* Cabecera: blanca, con imagotipo y banda decorativa */
.site-header,.site-header.is-solid{background:#fff;box-shadow:0 2px 14px rgba(0,52,90,.12);--hdr:80px;height:80px;backdrop-filter:none}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--celeste) 0,var(--azul) 70%,var(--beige) 70%,var(--beige) 90%,var(--rojo) 90%)}
.brand{color:var(--azul);gap:14px}
.brand .brand-logo{height:44px;width:auto;max-width:none;filter:none;transition:transform .3s}
.brand:hover .brand-logo{transform:scale(1.03)}
.brand:hover img{transform:none}
.brand-sep{width:2px;height:38px;background:var(--celeste);border-radius:2px}
.brand-area{font-family:var(--ff-h);font-style:italic;font-weight:600;font-size:1.15rem;line-height:1.1;color:var(--azul);text-transform:none;letter-spacing:0}
.nav a:not(.btn){color:var(--azul);font-size:1rem;font-weight:600;border-radius:8px}
.nav a:not(.btn):hover,.nav a.is-active{background:#e6f4fb;color:var(--azul-d)}
.nav .btn-yellow{background:var(--azul);color:#fff}
.nav .btn-yellow:hover{background:var(--azul-d)}
.burger span{background:var(--azul)}

/* Hero */
.hero{background:var(--azul-d)}
.hero-shade{background:
  radial-gradient(800px 460px at 85% 45%,rgba(255,255,255,.14),transparent 62%),
  linear-gradient(100deg,rgba(0,52,90,.94) 0%,rgba(0,95,153,.82) 55%,rgba(0,153,217,.42) 100%)}
.kicker{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);font-size:.9rem;letter-spacing:.02em;border-radius:8px;text-transform:none;font-family:var(--ff-h);font-style:italic;font-weight:600;font-size:1.05rem}
.kicker i{color:var(--beige)}
.hero h1{font-weight:700;font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:1.18;letter-spacing:-.005em}
.hl{color:var(--beige);transform:none;font-style:italic}
.hl::after{background:var(--rojo);height:.09em;bottom:-.04em}
.hero-lead{font-style:italic;font-weight:400;font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--beige);line-height:1.3}
.hero-txt{font-size:1.2rem}
.halo{background:radial-gradient(circle,rgba(255,255,255,.28),rgba(253,230,193,.10) 55%,transparent 70%)}
.hero-emblem img{width:min(400px,82%);filter:drop-shadow(0 18px 30px rgba(0,30,60,.45));animation:none}
.scroll-hint:hover{background:var(--beige);color:var(--azul-d);border-color:var(--beige)}

/* Banda decorativa (cinta) */
.ribbon{background:var(--beige);color:var(--azul-d);transform:none;padding:14px 0;box-shadow:none;border-top:5px solid var(--rojo)}
.ribbon-track{font-family:var(--ff-h);font-weight:700;letter-spacing:.14em;font-size:1rem}
.ribbon-track i{display:none}
.ribbon-track span::after{content:"✦";color:var(--celeste);margin-left:28px;font-size:.9em;letter-spacing:0}

/* Secciones y títulos */
.sec-blue{background:linear-gradient(165deg,var(--azul),var(--azul-d))}
.sec-navy{background:var(--azul-d)}
.sec-blue::before,.sec-navy::before,.sec-contact::before{content:"";position:absolute;right:-60px;bottom:-40px;width:min(460px,60vw);aspect-ratio:417/329;background:url(../img/simbolo-blanco.png) center/contain no-repeat;opacity:.06;pointer-events:none}
.sec-blue,.sec-navy,.sec-contact{overflow:hidden}
.sec-blue>.container,.sec-navy>.container,.sec-contact>.container{position:relative}
.eyebrow{font-family:var(--ff-h);font-size:.95rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--celeste);margin-bottom:.6em;padding-bottom:.55em;position:relative}
.eyebrow::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:42px;height:3px;border-radius:3px;background:var(--rojo)}
.sec-blue .eyebrow,.sec-navy .eyebrow,.sec-contact .eyebrow,.sec-prayer .eyebrow{color:var(--beige)}
.sec-head h2{font-weight:700;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.25;letter-spacing:0}
.sec-sub,.block-lead{font-size:1.15rem}
.block-title{font-weight:700;font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.3}
.num{background:var(--azul);color:#fff;transform:none;border-radius:12px;font-family:var(--ff-serif);font-size:1.1rem}
.sub-title{font-size:1.45rem;font-family:var(--ff-serif);font-weight:700}
.sub-title::after{background:var(--celeste);height:4px}

.split-img::before{background:var(--beige);inset:16px -16px -16px 16px;border-radius:var(--r-lg)}
.split-rev .split-img::before{background:#cfeaf8;inset:16px 16px -16px -16px}
.split-img img{box-shadow:var(--sh-m)}
.split-img figcaption{font-family:var(--ff-serif);font-style:italic;font-size:.98rem;color:var(--azul)}
.quote{border-left-color:var(--rojo);background:var(--beige-l);font-family:var(--ff-serif);font-weight:400;font-style:italic;font-size:1.1rem;color:var(--azul-d)}
.banner-quote{background:linear-gradient(120deg,var(--azul),var(--celeste));border-radius:var(--r-lg)}
.banner-quote::after{background:rgba(255,255,255,.08)}
.banner-quote i{color:var(--beige)}
.banner-quote p{font-style:italic;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.3}

/* Timeline y tarjetas */
.timeline::before{background:linear-gradient(90deg,var(--celeste),var(--azul));height:4px}
.timeline li::before{border-color:var(--azul)}
.timeline li:hover::before{border-color:var(--rojo)}
.year{color:var(--azul);font-size:1.3rem;font-weight:700}
.timeline h4{font-size:1.05rem}
.timeline p{font-size:1rem}
.pillar{border-color:#d9e8f1}
.pillar-ico{background:var(--azul);transform:none;border-radius:16px;box-shadow:0 8px 20px rgba(0,95,153,.3)}
.pillar:hover{transform:translateY(-6px)}
.pillar h4{font-size:1.3rem}
.card:hover,.mini:hover,.dream li:hover,.s4:hover,.testi:hover{transform:translateY(-6px)}
.card-ico{background:var(--beige);color:var(--azul)}
.card-body p,.mini p,.dream p,.s4 p,.pillar p{font-size:1rem}
.mini{border-color:#d9e8f1}
.mini:hover,.testi:hover{border-color:var(--celeste)}
.mini-ico{background:var(--beige);color:var(--azul)}
.chip{background:#e3f3fb;color:var(--azul);font-size:.8rem;letter-spacing:.05em}
.chip-y{background:var(--beige);color:var(--azul-d)}
.vow{background:linear-gradient(165deg,var(--azul),var(--azul-d))}
.vow:hover{transform:translateY(-6px)}
.vow i{color:var(--beige)}
.vow h4{font-size:1.35rem}

/* Dios te llama */
.wtab.is-on{background:var(--beige);color:var(--azul-d)}
.wpanel h3{font-size:1.45rem;font-weight:700}
.wpanel p{font-size:1.1rem}
.compare thead th{background:var(--beige);color:var(--azul-d)}
.compare tbody th{color:var(--azul)}
.compare tr:last-child td,.compare tr:last-child th{background:#eef7fc}
.big-quote{font-family:var(--ff-serif);font-style:italic;font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.5;color:var(--beige)}

/* Dios te envía */
.dream li{border-color:#d9e8f1}
.dream li:hover{background:var(--beige-l);transform:translateY(-6px)}
.dream-n{background:var(--azul)}
.dream li>i{color:var(--celeste)}
.s4{background:linear-gradient(165deg,#eef7fc,#fff);border-color:#d3e8f4}
.s4>span{color:rgba(0,95,153,.12)}
.s4>i{color:var(--azul)}
.calendar{background:var(--azul-d)}
.cal-date{color:var(--beige)}
.cal-date small{color:var(--sky2)}
.cal-info p{font-size:1rem}
.cal-list li:hover{transform:translateX(4px)}
.calendar .btn-yellow,.cal-empty .btn-yellow{background:var(--beige);color:var(--azul-d)}
.calendar .btn-blue{background:var(--celeste);color:#fff}
.calendar .btn-blue:hover{background:#fff;color:var(--azul)}
.rbtn{border-color:var(--azul);color:var(--azul);border-radius:10px}
.rbtn.is-on{background:var(--azul);color:#fff}
.formacion{background:linear-gradient(165deg,var(--azul-d),var(--azul-xd))}
.stage.is-done::after{background:var(--beige)}
.stage.is-done .stage-dot{border-color:var(--beige);color:var(--beige)}
.stage.is-on .stage-dot{background:var(--beige);color:var(--azul-d);border-color:var(--beige);box-shadow:0 0 0 8px rgba(253,230,193,.22)}
.stage-n{font-size:.78rem}
.stage-t{font-size:.95rem}
.sp-num{color:var(--beige);text-shadow:none;font-weight:700}
.sp-body h4{font-family:var(--ff-serif);font-size:1.5rem}
.sp-body p{font-size:1.1rem}
.sp-nav .btn-blue{background:var(--celeste)}
.sp-nav .btn-blue:hover{background:#fff;color:var(--azul)}
.note i{color:var(--celeste)}

/* Oración */
.sec-prayer{background:linear-gradient(rgba(0,52,90,.90),rgba(0,95,153,.92)),url(../img/av01.webp) center/cover fixed}
.prayer{font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.8;font-weight:300;border-radius:var(--r-lg)}

/* En el Perú */
.stat{border-radius:var(--r-lg)}
.stat b{color:var(--beige);font-weight:700}
.stat span{font-size:1.05rem}
.regions li{background:var(--celeste);font-size:1rem;border-radius:8px}
.regions li:hover{background:#fff;color:var(--azul)}
.regions i{color:#fff}
.gal-title{font-family:var(--ff-serif);font-style:italic;font-weight:400;font-size:1.8rem;color:var(--beige)}
.g-item{border-radius:12px}
.g-item::after{background:rgba(0,95,153,.55)}

/* Testimonios, FAQ, contacto */
.testi i.fa-quote-left{color:var(--celeste)}
.testi-empty{background:linear-gradient(165deg,#eef7fc,#fff);border-color:var(--celeste)}
.testi-empty>i{color:var(--azul)}
.faq details{border-color:#d9e8f1}
.faq details[open]{border-color:var(--celeste)}
.faq summary{font-size:1.08rem}
.faq summary i{background:var(--beige);color:var(--azul)}
.sec-contact{background:linear-gradient(165deg,var(--azul),var(--azul-d))}
.avatar{background:#fff;box-shadow:var(--sh-m)}
.avatar img{width:62px}
.contact-card .btn-ghost{color:var(--azul);border-color:var(--azul)}
.contact-card .btn-ghost:hover{background:var(--azul);color:#fff}
.form label{font-size:1rem;color:var(--azul-d)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=number],.form textarea{border-color:#cfe0eb;background:#f8fbfd;border-radius:10px;font-size:1.05rem}
.form input:focus,.form textarea:focus{border-color:var(--celeste);box-shadow:0 0 0 4px rgba(0,153,217,.18)}
.form .check{font-size:.95rem}
.check input{accent-color:var(--azul)}
.form .btn-yellow{background:var(--azul);color:#fff}
.form .btn-yellow:hover{background:var(--azul-d)}
.form-msg.err{color:var(--rojo)}

/* Pie: estándar de las obras salesianas, en azul del Manual con franja inferior beige */
.site-footer{background:linear-gradient(180deg,var(--azul),var(--azul-d));color:#e3eef6;position:relative;border-top:0}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--celeste) 0,var(--celeste) 72%,var(--beige) 72%,var(--beige) 90%,var(--rojo) 90%)}
.sf-logo img{width:150px}
.sf-name{font-size:1.15rem}
.sf-name span,.sf-contact,.sf-links a,.sf-contact a{font-size:1rem;color:#e3eef6}
.sf-title{border-bottom-color:var(--beige)}
.sf-links a:hover,.sf-contact a:hover{color:var(--beige)}
.sf-contact i,.sf-divider{color:var(--beige)}
.sf-divider{background:var(--beige)}
.sf-bottom{background:var(--beige);color:var(--azul-d);border-top:3px solid var(--celeste);padding:14px 0;font-size:.98rem;font-weight:600}
.sf-bottom a{color:var(--azul-d)}
.sf-bottom a:hover{color:var(--rojo)}
.to-top{background:var(--beige);color:var(--azul-d)}
.lightbox button:hover{background:var(--beige);color:var(--azul-d)}
.legal{background:var(--gray)}
.legal h1{font-family:var(--ff-serif);font-weight:700;font-size:2.1rem}
.legal h2{font-family:var(--ff-serif);font-size:1.15rem}

@media (max-width:1020px){
  .nav{background:#fff;box-shadow:0 20px 40px rgba(0,52,90,.25)}
  .nav .btn-yellow{color:#fff}
}
@media (max-width:640px){
  body{font-size:17px}
  .brand .brand-logo{height:32px}
  .brand-sep{height:30px}
  .brand-area{font-size:.92rem}
  .sf-logo img{width:120px}
}

.sf-name{font-style:italic}
.sf-name span{font-style:normal}

/* Pie estándar de las obras salesianas: títulos y opciones de menú en mayúsculas, como en Piura */
.sf-title{text-transform:uppercase;letter-spacing:.12em;font-size:1rem;color:var(--beige)}
.sf-links a{text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.98rem}