:root{--green:#59B2A6;--green-dark:#00806E;--green-hover:#007464;--bg:#F5F1ED;--text:#0D1B0F;--text-muted:#33452F;--border:rgba(89,178,166,0.18);--title:'Fraunces',serif;--body:'Plus Jakarta Sans',sans-serif;--ease-out-strong:cubic-bezier(0.23, 1, 0.32, 1)}*,::after,::before{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body,html{overflow-x:hidden}body{font-family:var(--body);background:#fff;color:var(--text);line-height:1.6}#flower-canvas{display:none}#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}#parallax-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background-size:cover;background-position:center 60%;background-repeat:no-repeat;will-change:background-position}.parallax-bg-layer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background-size:cover;background-repeat:no-repeat;will-change:transform}nav:not(.miga){position:fixed;top:0;left:0;right:0;z-index:100;background:0 0}nav:not(.miga)::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.48);-webkit-backdrop-filter:blur(36px) saturate(180%);backdrop-filter:blur(36px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.35)}.nav-inner{width:100%;padding:12.6px 2rem;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;position:relative}.nav-logo{flex:0 0 auto;display:flex;align-items:center;position:relative;z-index:1;margin-left:clamp(0px,3.75vw,60px)}.nav-logo img{height:clamp(30px,2.7vw,46px);width:auto;display:block}.nav-links{flex:1 1 auto;min-width:0;max-width:1100px;margin:0 auto;padding:0 clamp(.75rem,2.2vw,2rem);display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.5vw,37px)}.nav-links a{position:relative;font-size:clamp(.82rem, 1.05vw, 1rem);font-weight:500;color:var(--text);text-decoration:none;transition:color .2s;white-space:nowrap;pointer-events:auto}.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out-strong)}
@media (min-width:601px){
.nav-links a:hover{color:var(--green)}
}
.nav-links a.active{color:var(--green-dark);font-weight:700}
@media (min-width:601px){
.nav-links a.active::after,.nav-links a:hover::after{transform:scaleX(1)}
}
.nav-links a:active{opacity:.65}.nav-actions{flex:0 0 auto;display:flex;align-items:center;gap:.65rem;position:relative;z-index:1}.nav-cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--green-dark);color:#fff;font-size:clamp(.7rem,.78vw,.9rem);font-weight:600;line-height:1;padding:.8rem clamp(.8rem,1.25vw,1.6rem);height:clamp(34px,3.05vw,44px);box-sizing:border-box;border:1.5px solid transparent;border-radius:100px;text-decoration:none;transition:background .2s,transform .15s var(--ease-out-strong),box-shadow .2s;white-space:nowrap}
@media (min-width:601px){
.nav-cta:hover{background:var(--green-hover)}
}
.nav-cta:active{transform:scale(.97)}.nav-cta-sec{display:inline-flex;align-items:center;gap:.4rem;background:0 0;color:var(--green-dark);border:1.5px solid var(--green-dark);font-size:clamp(.7rem,.78vw,.9rem);font-weight:600;line-height:1;padding:.8rem clamp(.8rem,1.25vw,1.6rem);height:clamp(34px,3.05vw,44px);box-sizing:border-box;border-radius:100px;text-decoration:none;transition:background .2s,color .2s,transform .15s var(--ease-out-strong);white-space:nowrap}
@media (min-width:601px){
.nav-cta-sec:hover{background:var(--green-dark);color:#fff}
}
.nav-cta-sec:active{transform:scale(.97)}.nav-cta svg,.nav-cta-sec svg{display:none}@media (hover:hover) and (pointer:fine) and (min-width:601px){.nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,128,110,.3)}}.nav-sub-actions .nav-cta-sec{background:rgba(255,255,255,.48);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.nav-sub-actions .nav-cta{background:var(--green-dark);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}section{position:relative;z-index:2}.container{max-width:1100px;margin:0 auto;padding:0 2rem}.section-tag{display:block;font-size:.783rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--green-dark);margin-bottom:.85rem}.reveal{opacity:1;transition:opacity .85s cubic-bezier(.165,.84,.44,1),transform .85s cubic-bezier(.165,.84,.44,1)}.reveal.reveal-pending{opacity:0;transform:translateY(32px)}#hero{position:relative;z-index:2;height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:40px;padding-bottom:2.5rem;box-sizing:border-box}#hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(34px) saturate(200%);backdrop-filter:blur(34px) saturate(200%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,black 72%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,black 72%)}.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:1100px;padding:0 2rem}.hero-tag{font-size:.783rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--green-dark);background:rgba(255,255,255,0.45);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.18);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);padding:.4rem 1rem;border-radius:100px;display:inline-block;margin-bottom:3.5rem}#hero h1{font-family:var(--title);font-size:clamp(2.8rem,4.8vw,5.2rem);font-weight:300;line-height:1.08;color:var(--text);margin-bottom:1.75rem}#hero h1 em{font-style:normal;color:inherit}.hero-sub{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text-muted);max-width:600px;line-height:1.75;margin-bottom:2.5rem}.hero-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--green-dark);color:#fff;font-weight:600;line-height:1;font-size:1rem;padding:1rem 2rem;height:52px;box-sizing:border-box;border:1.5px solid transparent;border-radius:100px;text-decoration:none;transition:background .2s,transform .15s var(--ease-out-strong)}
@media (min-width:601px){
.hero-cta:hover{background:var(--green-hover)}
}
.hero-cta:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine) and (min-width:601px){.hero-cta:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,128,110,.3)}}.scroll-hint{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark)}.scroll-hint span{opacity:.55}.scroll-hint-line{width:1px;height:38px;background:linear-gradient(to bottom,var(--green-dark),transparent);animation:2s infinite pulse}@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}.section-warm{padding:7.5rem 0;background:rgba(248,245,241,.42);-webkit-backdrop-filter:blur(22px) saturate(200%);backdrop-filter:blur(22px) saturate(200%);border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.1)}.section-light{padding:7.5rem 0;background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(22px) saturate(200%);backdrop-filter:blur(22px) saturate(200%);border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.12)}.section-compact{padding:7.5rem 0}h2.section-title{font-family:var(--title);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;color:var(--text);line-height:1.15;margin-bottom:1.25rem}h2.section-title em{color:var(--green-dark)}.section-header{text-align:center;margin-bottom:3.5rem}.body-text{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text-muted);line-height:1.8;margin-bottom:1.25rem}.body-text em{color:var(--green-dark)}.body-lead{font-family:var(--title);font-size:clamp(1.2rem,2vw,1.65rem);font-weight:300;line-height:1.65;color:var(--text);max-width:720px;margin:0 auto}.body-lead em{color:var(--green-dark)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem}.card{background:rgba(255,255,255,0.5);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);border-radius:1.5rem;padding:2rem;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}.card:active{transform:scale(.98)}@media (hover:hover) and (pointer:fine) and (min-width:601px){.card:hover{transform:scale(1.01) translateY(-6px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 16px 24px rgba(0,128,110,.09),0 40px 60px rgba(0,128,110,.12)}}.card-icon{width:48px;height:48px;border-radius:12px;background:rgba(89,178,166,.1);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.card-icon svg{width:24px;height:24px;color:var(--green-dark)}.card h3{font-family:var(--title);font-size:1.25rem;font-weight:400;color:var(--text);margin-bottom:.75rem}.card p{font-size:1rem;color:var(--text-muted);line-height:1.75;margin-bottom:1.25rem}.card a:not(.btn-primary):not(.btn-outline):not(.btn-white){font-size:.875rem;font-weight:600;color:var(--green-dark);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:gap .2s}
@media (min-width:601px){
.card a:hover{gap:14px}
}

@media (min-width:601px){
.card a.btn-primary,.card a.btn-primary:hover{color:#fff}
}
.content-list{list-style:none;margin:1.75rem 0}.content-list li{display:flex;align-items:flex-start;gap:.85rem;font-size:1rem;color:var(--text-muted);padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.66)}.content-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:.55rem;flex-shrink:0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.two-col.centered{align-items:center}.stat-block{text-align:center;padding:2rem}.stat-num{font-family:var(--title);font-size:clamp(2.6rem,4.4vw,4rem);font-weight:300;color:var(--green-dark);line-height:1;display:block}.stat-label{font-size:.875rem;color:var(--text-muted);margin-top:.5rem;display:block}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:3rem}.cta-link{display:inline-flex;align-items:center;gap:8px;color:var(--green-dark);font-weight:600;font-size:1rem;text-decoration:none;margin-top:1.75rem;transition:gap .2s}
@media (min-width:601px){
.cta-link:hover{gap:14px}
}
.cta-link:active{opacity:.7}.tag{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:rgba(89,178,166,.1);padding:.3rem .75rem;border-radius:100px;display:inline-block;margin-bottom:.75rem}.tca-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.tca-card{background:rgba(255,255,255,0.5);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);border-radius:1.5rem;padding:1.75rem;text-decoration:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s cubic-bezier(.16,1,.3,1);display:block;color:inherit}.tca-card:active{transform:scale(.98)}@media (hover:hover) and (pointer:fine) and (min-width:601px){.tca-card:hover{transform:scale(1.01) translateY(-6px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 16px 24px rgba(0,128,110,.09),0 40px 60px rgba(0,128,110,.12)}}.tca-card h3{font-family:var(--title);font-size:1.25rem;font-weight:400;color:var(--text);margin-bottom:.5rem}.tca-card p{font-size:1rem;color:var(--text-muted);line-height:1.75}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}.form-group label{font-size:.82rem;font-weight:600;color:var(--text-muted);letter-spacing:.05em}.form-group input,.form-group select,.form-group textarea{background:rgba(255,255,255,0.5);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);border-radius:1rem;padding:.85rem 1rem;font-family:var(--body);font-size:1rem;color:var(--text);outline:0;transition:border-color .2s,box-shadow .2s}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-muted);opacity:.75}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--green);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 0 0 1.5px var(--green)}.form-group textarea{min-height:140px;resize:vertical}.field-error-msg{color:#b3261e;font-size:.8rem;line-height:1.4;margin:.3rem 0 0}.form-group.has-error input,.form-group.has-error select,.form-group.has-error textarea{border-color:#b3261e!important;box-shadow:0 0 0 1.5px #b3261e inset!important}.form-check.has-error{outline:#b3261e solid 1.5px;outline-offset:.4rem;border-radius:.4rem}.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--green-dark);color:#fff;font-weight:600;line-height:1;font-size:1rem;padding:1rem 2rem;height:52px;box-sizing:border-box;border-radius:100px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background .2s,transform .15s var(--ease-out-strong),box-shadow .2s}
@media (min-width:601px){
.btn-primary:hover{background:var(--green-hover)}
}
.btn-primary:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine) and (min-width:601px){.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,128,110,.32)}}#cta-socio{padding:7.5rem 0;background:rgba(248,245,241,.44);-webkit-backdrop-filter:blur(22px) saturate(200%);backdrop-filter:blur(22px) saturate(200%);border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:2}.cta-socio-inner{max-width:680px;margin:0 auto;text-align:center}#cta-socio blockquote{font-family:var(--title);font-size:clamp(1.2rem,2.5vw,1.7rem);font-weight:300;color:var(--green-dark);line-height:1.65;margin-bottom:1.75rem}.cta-socio-text{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text-muted);line-height:1.75;margin-bottom:2.5rem}.cta-btns{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}.btn-white{display:inline-flex;align-items:center;gap:.4rem;background:var(--green-dark);color:#fff;font-weight:600;line-height:1;font-size:1rem;padding:1rem 2rem;height:52px;box-sizing:border-box;border:1.5px solid transparent;border-radius:100px;text-decoration:none;transition:background .2s,transform .15s var(--ease-out-strong),box-shadow .2s}
@media (min-width:601px){
.btn-white:hover{background:var(--green-hover)}
}
.btn-white:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine) and (min-width:601px){.btn-white:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,128,110,.3)}}.btn-outline{display:inline-flex;align-items:center;gap:.4rem;background:0 0;border:1.5px solid var(--green-dark);color:var(--green-dark);font-weight:600;line-height:1;font-size:.9rem;padding:1rem 2rem;height:52px;box-sizing:border-box;border-radius:100px;text-decoration:none;transition:background .2s,color .2s,transform .15s var(--ease-out-strong)}
@media (min-width:601px){
.btn-outline:hover{background:var(--green-dark);color:#fff}
}
.btn-outline:active{transform:scale(.97)}.mini-gallery{overflow:hidden;border-radius:1.25rem}.mini-gallery-track{display:flex;gap:1.25rem;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}.mini-gallery-track img{width:calc(50% - .625rem);flex-shrink:0;height:440px;object-fit:cover;border-radius:1.25rem}.mini-gallery-nav{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}.mini-gallery-arrow{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--green-dark);background:rgba(255,255,255,0.5);backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .2s,opacity .2s}
@media (min-width:601px){
.mini-gallery-arrow:hover{transform:scale(1.08)}
}
.mini-gallery-arrow.disabled{opacity:.35;pointer-events:none}.mini-gallery-arrow svg{width:20px;height:20px}@media (max-width:768px){.mini-gallery-track img{width:100%}}.img-ph{width:100%;background:linear-gradient(135deg,rgba(89,178,166,.09) 0,rgba(0,128,110,.05) 100%);border-radius:1.25rem;border:1.5px dashed rgba(89,178,166,.2);display:flex;align-items:center;justify-content:center}.img-ph::before{content:'Imagen';font-size:.75rem;color:rgba(89,178,166,.4);font-weight:600;letter-spacing:.1em;text-transform:uppercase}.whatsapp-float{position:fixed;bottom:1.75rem;right:1.75rem;z-index:999;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}
@media (min-width:601px){
.whatsapp-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.32)}
}
@media (max-width:600px){.whatsapp-float{width:50px;height:50px;bottom:calc(50px + env(safe-area-inset-bottom,0px));right:1.1rem}}.faq-list{display:flex;flex-direction:column;gap:.65rem;margin-top:2.5rem}.faq-item,.faq-item[open]{background:rgba(255,255,255,0.5);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);border-radius:1rem;transition:box-shadow .2s}.faq-item summary{padding:1.25rem 1.75rem;cursor:pointer;font-weight:500;font-size:1rem;color:var(--text);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.75rem}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary::after{content:'+';font-size:1.3rem;font-weight:300;color:var(--green);flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1);line-height:1}.faq-item[open] summary::after{transform:rotate(45deg)}.faq-body{padding:0 1.75rem 1.35rem;font-size:1rem;color:var(--text-muted);line-height:1.78}@media(max-width:600px){.faq-item summary{font-size:.93rem;padding:1rem 1.25rem}.faq-body{font-size:.93rem;padding:0 1.25rem 1.1rem}}.colab-logos{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:1.75rem}.colab-placeholder{font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);opacity:.35}.colab-ticker{overflow:hidden;width:90vw;margin:0 auto;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%)}.colab-track{display:flex;align-items:center;width:max-content;gap:4rem;animation:38s linear infinite colab-scroll;will-change:transform}
@media (min-width:601px){
.colab-ticker:hover .colab-track{animation-play-state:paused}
}
.colab-track img{height:88px;width:auto;flex-shrink:0;object-fit:contain;filter:grayscale(35%);opacity:.85;transition:filter .25s,opacity .25s}
@media (min-width:601px){
.colab-track img:hover{filter:grayscale(0%);opacity:1}
}
@keyframes colab-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}footer{background:#0d1b0f;color:rgba(255,255,255,.6);padding:5rem 0 2rem;position:relative;z-index:2}.footer-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;padding:0 2rem 4rem;border-bottom:1px solid rgba(255,255,255,.07)}.footer-addr{font-size:.875rem;line-height:1.85;color:rgba(255,255,255,.45)}.footer-addr a{color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
@media (min-width:601px){
.footer-addr a:hover{color:var(--green)}
}
.footer-social{display:flex;gap:.75rem;margin-top:1.75rem}.footer-social a{width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);text-decoration:none;transition:border-color .2s,color .2s}
@media (min-width:601px){
.footer-social a:hover{border-color:var(--green);color:var(--green)}
}
.footer-col h4{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:1.25rem}.footer-col ul{list-style:none}.footer-col li{margin-bottom:.6rem}.footer-col a{position:relative;font-size:.875rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}.footer-col a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out-strong)}
@media (min-width:601px){
.footer-col a:hover{color:var(--green)}
}

@media (min-width:601px){
.footer-col a:hover::after{transform:scaleX(1)}
}
.footer-col a:active{opacity:.6}.footer-bottom{max-width:1100px;margin:2rem auto 0;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:rgba(255,255,255,.25);flex-wrap:wrap;gap:1rem}.footer-bottom a{position:relative;color:rgba(255,255,255,.25);text-decoration:none;transition:color .2s}.footer-bottom a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out-strong)}
@media (min-width:601px){
.footer-bottom a:hover{color:rgba(255,255,255,.5)}
}

@media (min-width:601px){
.footer-bottom a:hover::after{transform:scaleX(1)}
}
.footer-bottom a:active{opacity:.6}.footer-legal{display:flex;gap:1.75rem}/* Portatiles: el bloque de la hero baja 64px y el logo se acerca al borde. */
@media(min-width:901px) and (max-width:1440px){#content > section:not(#hero):not(.vista-fondo):not(.cat-section){padding-top:3.75rem!important;padding-bottom:3.75rem!important}#content > section:not(#hero):not(.vista-fondo):not(.cat-section):last-of-type{padding-bottom:calc(3.75rem + 64px)!important}#content .news-grid,#content .art-more{padding-bottom:calc(3.75rem + 64px)}.hero-tag{margin-bottom:1.75rem}#hero h1{margin-bottom:.875rem}.nav-logo{margin-left:clamp(.5rem,1.6vw,24px)}.container,.hero-inner{max-width:75vw}.hero-cta,#hero .btn-primary,#hero .btn-outline,#hero .btn-white{font-size:clamp(.85rem,1.1vw,1rem);padding:.8rem clamp(1.2rem,2.2vw,2rem);height:clamp(42px,4vw,52px)}.hero-inner .hero-cta,#hero .hero-inner > .btn-primary,#hero .hero-inner > .btn-outline,.hero-botones,.hero-boton{margin-top:clamp(.6rem,1.4vw,1.25rem)}.hero-sub{margin-bottom:clamp(.6rem,1.4vw,1.25rem)}.hero-boton{margin-top:clamp(.9rem,2.1vw,30px)}.scroll-hint{font-size:.75rem}.scroll-hint-line{height:30px}#content .section-title,#content h2.section-title,#content .validacion-titulo,#content .validacion-title{font-size:clamp(1.5rem,2.9vw,2.4rem)}#content .validacion-lema{font-size:clamp(1.35rem,2.65vw,2rem)}#content .validacion-img,#content .foto-ancha{height:440px!important}#content .btn-primary,#content .btn-outline,#content .btn-white,#content .cta-link,#content .hero-cta{white-space:nowrap}#content .btn-primary,#content .btn-white{font-size:clamp(.85rem,1.1vw,1rem);padding:.8rem clamp(1.2rem,2.2vw,2rem);height:clamp(42px,4vw,52px)}#content .btn-outline{font-size:clamp(.78rem,1vw,.9rem);padding:.8rem clamp(1.1rem,2vw,1.8rem);height:clamp(40px,3.8vw,48px)}#content .cta-link{font-size:clamp(.85rem,1.1vw,1rem)}#content .card p{font-size:clamp(.9rem,1.27vw,1rem)}#content .validacion-text{font-size:clamp(1.05rem,1.75vw,1.475rem)}#content .body-lead{font-size:clamp(1.05rem,1.75vw,1.65rem)}#content .body-text,#content .hero-sub{font-size:clamp(.9rem,1.22vw,1.05rem)}#content .card h3,#content .tca-card h3,#content .pub-body h3{font-size:clamp(1rem,1.06vw,1.15rem)}#content .content-list li,#content .faq-item summary,#content .faq-body{font-size:clamp(.85rem,.85vw,.95rem)}#content .tag{font-size:clamp(.75rem,.6vw,.85rem)}#content .section-tag,.hero-tag{font-size:clamp(.75rem,.62vw,.85rem)}#content .cards-grid,#content .pub-grid{column-gap:.875rem}#content .tca-grid{column-gap:.625rem}#content .impact-grid,#content .puertas-grid,#content .prev-grid,#content .treatment-grid,#content .opciones-grid,#content .act-grid,#content .noticias-grid,#content .news-grid{column-gap:.75rem}#content .mitos-grid,#content .cierre-grid,#content .art-more-grid{column-gap:.625rem}#content .related-tca,#content .valores-grid{column-gap:.5rem}#content .senales-grid{column-gap:2.125rem}#content .iconos-grid{column-gap:1rem}#content .socios-cols{column-gap:1.75rem}#content .bloque-icon{width:clamp(58px,5.9vw,84px);height:clamp(58px,5.9vw,84px)}#content .bloque-icon svg{width:clamp(29px,2.95vw,42px);height:clamp(29px,2.95vw,42px)}#content .card-icon{width:clamp(34px,3.4vw,48px);height:clamp(34px,3.4vw,48px)}#content .card-icon svg{width:clamp(17px,1.7vw,24px);height:clamp(17px,1.7vw,24px)}#content .icono-item img{max-width:clamp(210px,23vw,331px)}nav.miga{border-radius:100px}}
@media(max-width:1100px){.nav-actions>a,.nav-links{display:none}.hero-inner{padding:0 1.75rem}}@media(max-width:900px){.nav-inner{padding:11px 1.75rem}.hero-inner h1{font-size:clamp(2rem,7vw,3.2rem)}.hero-sub{font-size:1rem}#cta-socio,.section-light,.section-warm{padding:3.875rem 0}.section-title{font-size:clamp(1.75rem,4.5vw,2.2rem)}.cards-grid{grid-template-columns:1fr}.two-col{grid-template-columns:1fr;gap:2.5rem}.tca-grid{grid-template-columns:1fr 1fr}.footer-grid,.stats-row{grid-template-columns:1fr 1fr;gap:2rem}.img-ph{border-radius:.75rem}}@media(max-width:600px){.nav-inner{padding:6px 1.75rem;gap:.75rem}.nav-logo img{height:36px}.nav-cta,.nav-cta-sec{font-size:.8rem;padding:.65rem 1.3rem;height:44px}.hero-inner{padding:0 1.75rem}.hero-inner h1{font-size:clamp(1.1rem,4.8vw,1.56rem)}.hero-sub{font-size:1rem}.hero-cta{font-size:.95rem;padding:.85rem 1.7rem;height:46px}#cta-socio,.section-light,.section-warm{padding:2.375rem 0}.section-title{font-size:clamp(1.35rem,5.5vw,1.8rem)}.body-lead{font-size:1rem}.container{padding:0 1.75rem}.tca-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr;gap:1.75rem}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:.75rem}.footer-legal{flex-wrap:wrap;gap:.75rem}.cta-socio-inner{padding:0 1.75rem}.cta-btns{flex-direction:column;align-items:stretch;max-width:320px;margin-left:auto;margin-right:auto}.cta-btns a{text-align:center;justify-content:center;padding:.75rem 1.5rem}.stat-num{font-size:clamp(2.2rem,6.2vw,3.5rem)}}.nav-mobile-left{display:none}@media(max-width:1100px){.nav-mobile-left{display:flex;align-items:center}.nav-logo{position:absolute;left:50%;transform:translateX(-50%);z-index:1;margin-left:0}.nav-actions a{display:none}.nav-mobile-left a{background:0 0!important;color:var(--green-dark)!important;border:1.5px solid var(--green-dark)!important}}.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:0 0;border:none;cursor:pointer;padding:4px;flex-shrink:0}.nav-burger span{display:block;width:22px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s;transform-origin:center}.nav-burger.open span:first-child{transform:translateY(6.5px) rotate(45deg)}.nav-burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}@media(max-width:1100px){.nav-burger{display:flex}}.nav-mobile-menu{position:fixed;top:4.5rem;left:1rem;right:1rem;bottom:auto;z-index:98;background:rgba(255,255,255,.47);-webkit-backdrop-filter:blur(28px) saturate(200%);backdrop-filter:blur(28px) saturate(200%);border:1px solid rgba(255,255,255,.55);border-radius:1.5rem;box-shadow:0 8px 40px rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .3s,transform .3s}.nav-mobile-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}.nav-mobile-links{display:flex;flex-direction:column;align-items:center;gap:.25rem;margin-bottom:2.5rem}.nav-mobile-links a{font-family:var(--title);font-size:clamp(1.2rem, 4.5vw, 1.75rem);font-weight:300;color:var(--text);text-decoration:none;padding:.55rem 0;transition:color .2s;text-align:center;display:block}
@media (min-width:601px){
.nav-mobile-links a.active,.nav-mobile-links a:hover{color:var(--green-dark)}
}
.nav-mobile-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.nav-mobile-actions a{background:var(--green-dark)!important;color:#fff!important;border:1.5px solid var(--green-dark)!important;font-size:.8rem;padding:.45rem .95rem;border-radius:100px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center}@media(max-width:600px){.vista-fondo{height:36vh!important}}@media (prefers-reduced-motion:reduce){.colab-track{animation:none}.btn-primary:hover,.btn-white:hover,.card:hover,.hero-cta:hover,.nav-cta:hover,.nav-mobile-menu,.tca-card:hover{transform:none}.scroll-hint-line{animation:none;opacity:.6}.faq-item summary::after,.footer-bottom a::after,.footer-col a::after,.nav-links a::after{transition:none}}
/* Submenu de la nav: dropdown anclado a cada enlace madre, del ancho de la madre */
.nav-item{position:relative;display:inline-flex;align-items:center;pointer-events:auto}
.nav-dropdown{position:absolute;top:100%;left:50%;padding-top:14px;min-width:max(100%,11.5rem);width:max-content;max-width:16rem;opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .22s var(--ease-out-strong),transform .22s var(--ease-out-strong),visibility .22s}
@media (min-width:601px){
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translate(-50%,0)}
}

.nav-dropdown-inner{display:flex;flex-direction:column;gap:.15rem;padding:1rem;border-radius:0 0 1rem 1rem;background:rgba(255,255,255,0.765);-webkit-backdrop-filter:blur(60px) saturate(200%);backdrop-filter:blur(60px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 -1px 0 rgba(255,255,255,.6),inset -1px 0 0 rgba(255,255,255,.6)}
.nav-links a.has-sub{display:inline-flex;align-items:center;gap:.3rem}
.nav-sub-arrow{width:11px;height:11px;flex-shrink:0;opacity:.55;transition:transform .25s var(--ease-out-strong),opacity .2s}
@media (min-width:601px){
.nav-item:hover .nav-sub-arrow,.nav-item:focus-within .nav-sub-arrow{transform:rotate(180deg);opacity:1}
}

.nav-dropdown a{display:block;padding:.5rem .75rem;border-radius:.6rem;font-size:.945rem;font-weight:500;line-height:1.35;color:var(--text);text-decoration:none;transition:background .2s,color .2s}
.nav-dropdown a::after{display:none}
@media (min-width:601px){
.nav-dropdown a:hover{background:rgba(89,178,166,.12);color:var(--green-dark)}
}

.nav-dropdown a.active,.nav-mobile-sub a.active{background:rgba(89,178,166,.12);color:var(--green-dark);font-weight:700}
.nav-mobile-sub{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin:-.15rem 0 .6rem}
.nav-mobile-sub a{font-family:var(--body);font-size:.85rem;font-weight:500;color:var(--text-muted);text-decoration:none;padding:.25rem 0}
@media (min-width:601px){
.nav-mobile-sub a:hover{color:var(--green-dark)}
}

@media (prefers-reduced-motion:reduce){.nav-dropdown{transition:none}}

/* Bloque de contenido relacionado al pie de las paginas de detalle del CMS (noticia / actividad) */
/* La imagen va en una capa aparte para poder igualar la opacidad del fondo de pagina sin
   rebajar tambien las tarjetas. --bg-opacity la publica flower.js leyendola del propio
   #parallax-bg, asi que sigue a ADANER_BG_OPACITY sin repetir el valor en ningun sitio.
   El .8 de reserva es solo para el instante previo a que flower.js se ejecute. */
.art-more{position:relative;padding:4rem 0 13.5rem}
.art-more::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--bg-opacity,.8);background-image:url('assets/noticias/nubes-fondo.webp');background-size:cover;background-position:center;background-repeat:no-repeat}
.art-more>*{position:relative;z-index:1}
.art-more h3{font-family:var(--title);font-size:1.5rem;font-weight:400;color:var(--text);margin-bottom:2rem}
.art-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.art-more-card{border-radius:1rem;border:1px solid var(--border);background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(22px) saturate(200%);backdrop-filter:blur(22px) saturate(200%);overflow:hidden;text-decoration:none;display:block;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
@media (min-width:601px){
.art-more-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,128,110,.1)}
}

.art-more-img{height:140px;background:linear-gradient(135deg,rgba(89,178,166,.08),rgba(0,128,110,.05));display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:rgba(89,178,166,.2)}
.art-more-body{padding:1.1rem}
.art-more-cat{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:.4rem}
.art-more-title{font-family:var(--title);font-size:.95rem;font-weight:400;color:var(--text);line-height:1.4}
@media(max-width:1000px){.art-more-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.art-more-grid{grid-template-columns:1fr}}

/* Paginas de listado del CMS (noticias y actividades): mismo armazon y misma tarjeta.
   Estaba duplicado en cada pagina y se habia desincronizado, asi que vive aqui una sola vez. */
.cms-surface{position:relative;z-index:2;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);min-height:100vh}
.cms-page-header{padding:7.5rem 0;border-bottom:1px solid rgba(255,255,255,.66)}
.cms-breadcrumb{font-size:.75rem;color:var(--text-muted);margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}
.cms-breadcrumb a{color:var(--green-dark);text-decoration:none}
@media (min-width:601px){
.cms-breadcrumb a:hover{text-decoration:underline}
}

.cms-page-title{font-family:var(--title);font-size:clamp(2.4rem,5vw,4rem);font-weight:300;color:var(--text);line-height:1.1;margin-bottom:.75rem}
.cms-page-sub{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text-muted);max-width:520px;line-height:1.75}
.cms-filters{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:2rem 0;border-bottom:1px solid rgba(255,255,255,.66)}
.cms-filter{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.45rem 1rem;border-radius:100px;border:1.5px solid var(--border);background:0 0;color:var(--text-muted);cursor:pointer;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
@media (min-width:601px){
.cms-filter.active,.cms-filter:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
}

.cms-loadmore{text-align:center;padding-bottom:5rem}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:3rem 0 13.5rem}
.news-card{position:relative;display:flex;flex-direction:column;gap:1rem;padding:1rem 1rem 2rem;border-radius:1.5rem;background:rgba(255,255,255,0.5);-webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px rgba(0,0,0,.05),0 10px 15px rgba(0,0,0,.06),0 30px 45px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);text-decoration:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.news-card:active{transform:scale(.98)}
@media (min-width:601px){
@media (hover:hover) and (pointer:fine) and (min-width:601px){.news-card:hover{transform:scale(1.01) translateY(-6px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 16px 24px rgba(0,128,110,.09),0 40px 60px rgba(0,128,110,.12)}}
}

.news-card-img{height:200px;flex-shrink:0;background:linear-gradient(135deg,rgba(89,178,166,.22),rgba(0,128,110,.15));display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:rgba(255,255,255,.5);border-radius:1.25rem;border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.85);overflow:hidden}
.news-card-body{flex:1;display:flex;flex-direction:column;padding:0 .5rem .5rem}
.news-card-cat{align-self:flex-start;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green);background:rgba(89,178,166,.1);padding:.375rem .75rem;border-radius:100px;display:inline-block;margin-bottom:1.5rem}
.news-card-title{font-family:var(--title);font-size:1.25rem;font-weight:400;color:var(--text);line-height:1.45;margin-bottom:.75rem}
.news-card-excerpt{font-size:1rem;color:var(--text-muted);line-height:1.65;margin-bottom:1rem}
/* En filas, no en columnas: con dos o tres datos (fecha larga, modalidad, precio) el
   reparto horizontal los amontonaba y partía las palabras. */
.news-card-meta{font-size:.8rem;color:var(--green-dark);display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;border-top:1px solid rgba(255,255,255,.5);padding-top:.85rem;margin-top:auto}
@media(max-width:900px){.news-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.news-grid{grid-template-columns:1fr}.cms-page-header{padding:6.375rem 0 1.875rem}}

/* Cabecera del ticker de colaboradores: la comparten la home y la pagina de colaboradores. */
.colab-header{text-align:center;margin-bottom:6rem}
.colab-header h2{font-family:var(--title);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;color:var(--text)}

/* Migas de pan: sustituyen al enlace fijo de "volver". Se generan en flower.js a partir
   del SITEMAP, asi que siempre dicen donde esta la pagina dentro del sitio. */
/* La ultima seccion de cada pagina cierra con 120px extra sobre el footer. */
#content > section:last-of-type{padding-bottom:calc(7.5rem + 120px)}
/* Abertura al fondo con la que cierran las paginas hijas, antes del footer. */
/* Escritorio: mismo aire en todas las secciones, sin excepciones por pagina. */
@media(min-width:1441px){#content > section:not(#hero):not(.vista-fondo){padding-top:100px!important;padding-bottom:100px!important}}
@media(min-width:1441px){#content .section-tag{font-size:14px!important}#content .hero-tag{font-size:calc(.6rem + 2px)}}
@media(min-width:1441px){#content .btn-outline{font-size:clamp(.85rem,1.1vw,1rem);padding:.8rem clamp(1.2rem,2.2vw,2rem);height:clamp(42px,4vw,52px)}}
@media(min-width:1441px){#content .cta-link,#content .q-cta,#content .noticias-footer a{font-size:clamp(1rem,1.4vw,1.15rem)}}
@media(min-width:1441px){#content .content-list li,#content .obj-list li,#content .check-list li,#content .tca-detail-list li,#content .q-list li,#content .act-checklist li,#content .lista-metodologia li{font-size:clamp(1rem,1.4vw,1.15rem)}}
@media(min-width:1441px){.nav-links{max-width:1100px;padding:0 1rem;justify-content:space-between;gap:clamp(.75rem,1.6vw,2.25rem)}}
#content > section.abertura-final{min-height:600px;height:600px;background:transparent;position:relative;z-index:2}
#content > section.abertura-hija{min-height:676px;height:676px}
@media(min-width:901px) and (max-width:1440px){#content > section.abertura-final{min-height:540px;height:540px}}
@media(min-width:901px) and (max-width:1440px){#content > section.abertura-hija{min-height:616px;height:616px}}
.miga{position:fixed;top:5.5rem;left:2rem;z-index:999;display:flex;width:max-content;align-items:center;gap:.4rem;font-size:.8rem;font-weight:500;color:var(--text-muted);padding:.35rem 0;max-width:calc(100vw - 4rem)}
.miga a{color:var(--green-dark);font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(0,128,110,.4);transition:text-decoration-color .2s}
@media (min-width:601px){
.miga a:hover{text-decoration-color:var(--green-dark)}
}

.miga span[aria-current]{color:var(--text-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miga .miga-sep{color:var(--text-muted);opacity:.5}
/* La miga flotante se oculta en movil, no hace falta recolocarla. */

#content{position:relative}#hero.sin-cristal::after{display:none}.cristal-tramo{position:absolute;left:0;right:0;z-index:1;pointer-events:none;-webkit-backdrop-filter:blur(34px) saturate(200%);backdrop-filter:blur(34px) saturate(200%);background:repeating-linear-gradient(180deg,rgba(255,255,255,.58) 0,rgba(248,245,241,.50) 900px,rgba(255,255,255,.58) 1800px)}

/* Título de las secciones de validación emocional (mismo formato que el de la portada). */
.foto-ancha{height:540px}
.validacion-titulo{font-family:var(--title);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;color:var(--text);line-height:1.15;text-align:center;max-width:680px;margin:0 auto 2.5rem}

/* Recuadro destacado (nota, aclaración o cita dentro del texto). Un único estilo
   para todos: fondo verde suave, línea verde a la izquierda y reflejo arriba. */
.tca-note,.callout,.deduccion-box,.art-body blockquote{background:rgba(89,178,166,.12);border-left:3px solid var(--green);border-radius:0 .75rem .75rem 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 14px rgba(0,0,0,.04);padding:1.25rem 1.5rem;margin:3rem 0 1.5rem}
.tca-note p,.deduccion-box p,.callout,.art-body blockquote{font-size:1rem;color:var(--text-muted);line-height:1.7;margin:0}
@media(min-width:901px) and (max-width:1440px){.art-more h3{font-size:clamp(1.15rem,1.7vw,1.5rem)}}
@media(min-width:901px) and (max-width:1440px){nav:not(.miga) .nav-cta-sec svg{display:none}}
/* Portatil y las dos tablets: un unico tamano de lectura. Todo el texto corrido
   (descripciones de seccion, introducciones, listas y cuerpos de tarjeta) va a
   16px; quedan fuera los destacados y citas, que son piezas de display, no
   lectura. Los rotulos (eyebrown, tags, etiquetas de cifras) tampoco: son
   spans y no entran aqui, pero se igualan aparte en la misma regla.
   Ampliada de 901-1440 a 601-1440 (antes tablet pequeña se quedaba fuera y el
   cuerpo de texto, la lectura de listas y el eyebrow crecian otra vez al
   estrechar por debajo de 900). */
@media(min-width:601px) and (max-width:1440px){
  #content p:not(.body-lead):not(.validacion-text):not(.validacion-lema):not(.hoy-quote),
  #content li,
  #content .content-list li, #content .obj-list li, #content .check-list li,
  #content .tca-detail-list li, #content .q-list li, #content .act-checklist li,
  #content .lista-metodologia li, #content .factores-cols li, #content .senales-grid li,
  #content dd { font-size:16px; }
  #content .faq-item summary, #content .faq-body { font-size:15px; }
  /* Los eyebrown de cabecera se leian demasiado pequenos: 2px mas. */
  #content .section-tag, .hero-tag { font-size:calc(clamp(.6rem,.62vw,.68rem) + 2px); }
}
@media(min-width:901px) and (max-width:1440px){/* Paginas de trastorno, seccion "En detalle": el bloque de las dos listas baja 24px para despegarse del titulo. */#content > section:has(.col-titulo) > .container > .two-col{padding-top:24px}}
@media(min-width:901px) and (max-width:1440px){/* "Otros trastornos" al pie de cada pagina de trastorno: mismo formato que las tarjetas de tratamiento de la pagina madre, y 16px mas de hueco entre ellas. */#content .related-tca{column-gap:24px;row-gap:32px}#content .related-tca .tca-card h3{font-size:18px !important}#content .related-tca .tca-card p{font-size:15px !important}}
@media(min-width:901px) and (max-width:1440px){/* Footer 80px mas bajo en portatil: 40 de la cabecera y 40 del hueco antes de la linea. */footer{padding-top:2.5rem}.footer-grid{padding-bottom:1.5rem}}
@media(min-width:901px) and (max-width:1440px){/* Un solo tamano para los titulos de tarjeta en toda la web. Las paginas que fijan otro valor a proposito (tipos de TCA) llevan mas especificidad y ganan. */#content [class*="card"] h3{font-size:18px}}


}

/* Tipografia movil de titulares.

   Habia reglas para <=900 y <=600 sobre el H1 y los H2, pero escritas con selectores
   de clase (.hero-inner h1, .section-title) que perdian por especificidad contra las
   reglas base (#hero h1 lleva un id; h2.section-title, elemento + clase). Se cumplian
   las media queries pero no ganaban la cascada: eran codigo muerto, el H1 se quedaba
   en 44,8px en un movil de 390px.

   Se reescriben igualando la especificidad de la regla base. Van al final del archivo
   a proposito: mismo peso, gana la ultima. */
@media(max-width:900px){
  #hero h1{font-size:40px}
  h2.section-title{font-size:26px}
}
@media(max-width:600px){
  #hero h1{font-size:32px}
  h2.section-title{font-size:24px}
}

/* Nav movil con el logo centrado.

   El logo va position:absolute centrado, asi que no participa en el flujo y nada
   impide que el pill de Contacto se le eche encima: a 320px se solapaban 40px y a
   390px, 5px. El hueco de la derecha sobraba (la hamburguesa mide 34px y el pill
   104), pero al estar el logo centrado geometricamente esa holgura no se aprovecha.

   Se recorta el presupuesto de ancho en dos escalones, apretando primero margenes y
   pill —que es donde sobra— y el logo al final, que es lo que menos conviene tocar. */
@media(max-width:430px){
  .nav-inner{padding-left:16px;padding-right:16px}
  .nav-cta,.nav-cta-sec{font-size:.72rem;padding:.6rem .85rem;height:44px}
  .nav-logo img{height:30px}
}
@media(max-width:360px){
  .nav-inner{padding-left:12px;padding-right:12px}
  .nav-cta,.nav-cta-sec{font-size:.68rem;padding:.55rem .7rem;height:44px}
  .nav-logo img{height:26px}
}

/* Rotulos alternativos de boton para movil.

   Algunos rotulos largos parten en dos lineas por debajo de ~430px. Se resuelven con
   dos <span> y CSS, no con JS: asi no hay parpadeo al cargar ni dependencia de que el
   script llegue. display:none saca el sobrante tambien del arbol de accesibilidad, de
   modo que un lector de pantalla anuncia uno solo, no los dos. */
.rotulo-movil{display:none}
@media(max-width:430px){
  .rotulo-movil{display:inline}
  .rotulo-amplio{display:none}
}

/* Rotulos pequenos en movil: tags de hero y de seccion, y el "Desplazate" del hero.

   Van todos en mayusculas y con letter-spacing, asi que ocupan bastante mas de lo que
   sugiere su tamano. Se igualan a 11px: los tags bajaban de 12,5 y el "Desplazate", de
   12,8, la misma proporcion.

   Va en shared.css y no en la home porque son componentes de todo el sitio. */
@media(max-width:600px){
  .hero-tag, .section-tag{ font-size:12px; }
  .scroll-hint{ font-size:12px; }
}

/* Movil: un solo tamano e interlineado para TODOS los titulos de seccion.

   Convivian cuatro medidas distintas: los h2.section-title a 24px/1,15; los h2 sin
   clase de las cabeceras (.puertas-header, .actividades-header, .colab-header,
   .noticias-head) a 28,8px/1,60; .validacion-titulo a 28,8px/1,15; y algun
   .section-title suelto a 25,6px. Se unifican en la medida de la validacion
   emocional, que es la referencia: 24px / 1,15.

   Se ataca por "#content h2" para alcanzar tambien a los que no llevan clase, y se
   repite con h2.section-title para ganar a las reglas de pagina que usan
   "#content .section-title" (mayor especificidad que "#content h2" a secas). */
@media(max-width:600px){
  #content h2,
  #content h2.section-title,
  #content h2.validacion-title,
  #content h2.validacion-titulo,
  #content h2.actividades-sub-title{
    /* !important a proposito y solo aqui dentro. Dos titulos se resistian por vias
       distintas: "#quienes h2" en el <style> de la home (misma especificidad que
       "#content h2" pero posterior en el documento) y un font-size en linea sobre el
       titulo de practicums, que gana a cualquier hoja. Quitar ese estilo en linea
       cambiaria el escritorio, que ahora mismo no se toca. Al vivir dentro de la
       media query, esto no puede afectar a ningun tamano por encima de 600px. */
    font-size:24px !important;
    line-height:1.15 !important;
  }
}

/* Movil: todas las aberturas al fondo, a la misma altura.

   Habia tres medidas: 850px (nueve, con la altura en un style="" en el HTML), y las
   .abertura-final / .abertura-hija a 600 y 676px desde esta misma hoja. Se igualan a
   425px, la mitad de los 850 originales.

   Hace falta !important porque nueve de ellas llevan la altura en linea y eso gana a
   cualquier hoja de estilos; quitar esos estilos cambiaria el escritorio, que ahora no
   se toca. Al vivir dentro de la media query no puede afectar por encima de 600px.
   Se fija tambien height porque .abertura-final la declara ademas de min-height. */
@media(max-width:600px){
  .vista-fondo{
    min-height:425px !important;
    height:425px !important;
  }
}

/* Movil: padding vertical de secciones.

   Inventario real antes de tocar: 45 secciones ya estaban en 38px (tenian regla movil),
   4 seguian en 120px, 7 cerraban con 240px abajo y una con 160px arriba. O sea que "la
   mitad" solo tiene sentido sobre las que nunca recibieron medida movil.

   Las que ya estaban en 38px se dejan: bajarlas a 19px las dejaria sin aire. */
@media(max-width:600px){
  #content > section:not(#hero):not(.vista-fondo){
    padding-top:60px;
    padding-bottom:60px;
  }
  /* Mismo peso que la de arriba y posterior, para ganarle: ojo, cada :not() con un id
     suma un id a la especificidad, asi que la regla base es 2-1-1, no 1-0-1. */
  #content > section.section-warm:not(#hero),
  #content > section.section-light:not(#hero){
    padding-top:38px;
    padding-bottom:38px;
  }
  /* El cierre de pagina, de 240 a 120. Su regla original lleva !important. */
  #content > section:not(#hero):not(.vista-fondo):last-of-type{
    padding-bottom:120px !important;
  }
}



/* Movil: los botones primarios al mismo cuerpo que los secundarios (14,4px).

   Estaban en 16px los rellenos (.btn-primary y familia) y en 15,2 el del hero, contra
   los 14,4 de .btn-outline. Tres medidas para lo que visualmente es el mismo
   componente. Solo cambia la letra: la altura de 46-52px no se toca, asi que el area
   tactil sigue por encima de los 44px recomendados. */
@media(max-width:600px){
  /* Los tres ultimos llevan #content porque sus reglas viven en el <style> de cada
     pagina, que carga despues de esta hoja y empata en especificidad. */
  .btn-primary,
  .btn-white,
  .hero-cta,
  #content .puerta-btn,
  #content .act-card a,
  #content .form-submit-area button{
    font-size:14.4px;
  }
}

/* Menu movil plegable.

   Cada seccion con hijas es una fila con dos zonas de pulsacion: el texto navega a la
   pagina madre y el boton de la derecha abre o cierra su submenu. El boton se posiciona
   en absoluto para no descentrar el titulo, y se estira hacia la izquierda para tener
   area tactil suficiente sin desplazar la flecha, que queda a 16px del borde. */
/* .nav-mobile-menu es flex, asi que la lista encogia a su contenido (165px) en vez de
   ocupar el ancho del panel, y la flecha quedaba flotando en mitad de la fila. */
.nav-mobile-links{ width:100%; }
.nav-mobile-grupo{ width:100%; }
/* El padding lateral reserva sitio al boton: sin el, el titulo centrado se metia por
   debajo y una pulsacion en su parte derecha abria el submenu en vez de navegar. */
.nav-mobile-fila{ position:relative; display:flex; align-items:center; justify-content:center; padding:0 52px; }
.nav-mobile-toggle{
  position:absolute; top:50%; right:16px; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:flex-end;
  height:44px; padding-left:26px;      /* area de pulsacion, sin mover la flecha */
  background:none; border:0; cursor:pointer; color:var(--green-dark);
}
.nav-mobile-flecha{
  width:18px; height:18px; flex-shrink:0;
  transition:transform .25s var(--ease-out-strong);
}
.nav-mobile-grupo.abierto .nav-mobile-flecha{ transform:rotate(180deg); }
/* Plegado por defecto; .nav-mobile-sub ya trae su display:flex mas arriba. */
.nav-mobile-sub{ display:none; }
.nav-mobile-grupo.abierto .nav-mobile-sub{ display:flex; }

/* Movil: mismo ritmo vertical en las cabeceras de seccion de la home.

   El hueco eyebrow -> titulo ya estaba uniforme en 14px. El de titulo -> cuerpo iba en
   20, 24, 28, 32 y 76px segun la seccion. Se iguala en 20.

   El de 76 era la seccion de contacto, donde ese hueco no lo marca un margen sino el
   row-gap de su rejilla; se baja a 20 y se recomponen con margenes los otros dos huecos
   de esa columna, que ya estaban ajustados (texto->boton 32, boton->mariposa 40). */
@media(max-width:600px){
  /* "#content > section h2" y no "#content h2": #quienes h2 vive en el <style> de la
     pagina, empata en especificidad y carga despues. Un elemento mas lo desempata. */
  #content > section h2{ margin-bottom:20px; }
  /* .section-header lleva 56px de margen inferior y colapsa con el del h2, asi que
     manda el suyo: el hueco titulo -> texto salia en 56 en vez de 20. Esos 56 estan
     bien cuando debajo hay tarjetas, por eso solo se reduce si lo que sigue es un
     parrafo. */
  #content .section-header:has(+ p){ margin-bottom:20px; }
  /* Familias no usa .section-header sino .bf-cabecera, con su cuerpo en .bf-cuerpo.
     Mismo criterio: si debajo hay texto, 20px. */
  #content .bf-cabecera:has(+ .bf-cuerpo){ margin-bottom:20px; }
  /* Estas dos rejillas traen 60px de margen superior propio que, al colapsar con los
     56 de la cabecera, dejaban el hueco en 60 en vez de 56. */
  /* !important: .mision-grid trae su margen en un style="" del HTML. */
  #content .mision-grid,
  #content .valores-grid{ margin-top:0 !important; }
  #content .noticias-sub{ margin-top:0; }
  /* .colab-header lleva el margen en un style="" en el HTML, de ahi el !important. */
  #content .colab-header{ margin-bottom:20px !important; }
  /* En contacto el titulo y el texto van en filas distintas de la rejilla: el hueco lo
     pone el row-gap, asi que los margenes propios de ambos deben quedar a cero. */
  #content .contacto-home-cabecera h2{ margin-bottom:0; }
  #content .contacto-home-text{ margin-top:0; }

  #content .contacto-home-grid{ row-gap:20px; }
  #content .contacto-home-btn{ margin-top:12px; }
  #content .contacto-home-img{ margin-top:20px; }
}

/* Movil: colaboradores y cierre de contacto. */
@media(max-width:600px){
  /* El hueco hasta el ticker pasa de 40 a 80px. El margen viene de un style="" en el
     HTML, por eso el !important. */
  #content .colab-ticker{ margin-top:80px !important; }
  /* Logos un 30% mas pequenos: 88 -> 61,6px. */
  #content .colab-track img{ height:61.6px; }
  /* Boton -> mariposa: de 40 a 80px. Son 20 de row-gap mas este margen. */
  #content .contacto-home-img{ margin-top:60px; }
}

/* Movil: se llevan al resto del sitio los criterios fijados en la home.

   Estos ajustes vivian en el <style> de index.html y por eso solo se aplicaban alli:
   el cuerpo de las tarjetas, el texto de introduccion y la imagen que cierra seccion.
   Aqui pasan a ser globales. */
@media(max-width:600px){
  /* Tarjetas: titulo y cuerpo, un punto menos que el tamano de escritorio. */
  /* "#content > section" y no "#content" a secas: Quienes somos define
     "#mision .card h3", que empata en especificidad y carga despues. */
  #content > section .card h3,
  #content .tca-card h3,
  #content .act-card h3,
  #content .puerta h3,
  #content .treatment-card h3,
  #content .opcion-card h3{ font-size:19.8px; }

  #content > section .card p,
  #content .tca-card p,
  #content .act-card p,
  #content .puerta p,
  #content .treatment-card p,
  #content .opcion-card p,
  #content .prev-card p{ font-size:15px; }

  /* Texto de introduccion de seccion: iba en 23,6 / 18 / 16 segun la pagina. */
  /* !important porque en Personas afectadas el tamano va en un style="" en el HTML. */
  #content .validacion-text,
  #content .body-lead{ font-size:18px !important; line-height:1.6; }

  /* Imagen que cierra seccion, a sangre. El !important es por los style="" en linea
     que varias de estas imagenes llevan en el HTML (width, margin, border-radius). */
  #content .validacion-img,
  #content .foto-ancha{
    width:calc(100% + 56px) !important;
    max-width:none !important;
    margin-left:-28px !important;
    margin-right:-28px !important;
    border-radius:0 !important;
    border-left:none !important;
    border-right:none !important;
  }
  /* Misma altura para las dos clases de imagen de cierre de seccion: .validacion-img
     (home) y .foto-ancha (familias, sociedad, personas afectadas) son el mismo
     elemento con distinto nombre. */
  #content .validacion-img,
  #content .foto-ancha{ height:340px !important; }

  /* Si la seccion cierra con una de esas imagenes y justo despues viene una abertura al
     fondo, se le quita el padding inferior: si no queda una franja del fondo glass entre
     la foto y la abertura. Los :not() son para superar en especificidad a la regla
     general de padding de secciones, que lleva dos ids en sus :not(). */
  #content > section:not(#hero):has(+ .vista-fondo):has(.foto-ancha),
  #content > section:not(#hero):has(+ .vista-fondo):has(.validacion-img){
    padding-bottom:0;
  }
}

/* Movil: galerias mini (campamentos y talleres).

   Bajan 200px de alto y la siguiente foto asoma un 10% para que se vea que hay mas.
   El ancho sale de despejar: si el asomo debe ser 0,10*W con 20px de hueco, entonces
   W = (100% - 20px) / 1,1. Asi se cumple a cualquier ancho de pantalla.

   El paso del carrusel se corrige en flower.js: avanzaba el ancho del contenedor, que
   ya no coincide con el de la imagen y dejaria el recorrido desalineado. */
@media(max-width:600px){
  /* Izquierda a 16px del borde; por la derecha sale a sangre hasta el borde de la
     pantalla, para que la imagen recortada acabe en el filo y no quede flotando.
     Se quita ademas el redondeo del carril: recortaba el trozo visible de la siguiente
     imagen por los dos lados y le daba forma de pildora. */
  #content .mini-gallery{ margin-left:-12px; margin-right:-28px; border-radius:0; }
  #content .mini-gallery-track{ gap:16px; }
  #content .mini-gallery-track img{
    height:240px;
    width:calc((100% - 16px) / 1.1);
  }
  /* El boton que cierra el bloque sube 24px y se separa otros 24 del titulo de abajo.
     Es el hermano siguiente de la fila de flechas y no tiene clase propia. */
  #content .mini-gallery-nav + div{
    margin-top:64px !important;   /* eran 88, y venian en un style="" del HTML */
    margin-bottom:24px;
  }
}

/* Movil: el indicador de desplazamiento.

   Baja 20px acercandose al borde inferior (se recorta el padding del hero, no se
   mueve el elemento: asi el hueco de 40px con el bloque de contenido se conserva sin
   tocarlo). Y pasa a blanco al 80%.

   La transparencia va en el color, no en la opacidad del elemento: flower.js usa esa
   opacidad para desvanecer el indicador al hacer scroll, y si la fijaramos aqui se
   pelearia con el. Asi el 80% es el punto de partida y el desvanecido sigue funcionando. */
@media(max-width:600px){
  #hero{ padding-bottom:20px; }
  /* El hueco hasta "Desplazate" lo pone el gap de 40px del hero, pero si el ultimo
     elemento del bloque arrastra margen inferior, ese margen se suma por dentro y el
     hueco visible pasa a 80. Ocurria en las paginas sin boton, que cierran con
     p.hero-sub (40px de margen). Se anula el margen del ultimo hijo, sea cual sea. */
  .hero-inner > :last-child{ margin-bottom:0; }
  .scroll-hint{ color:rgba(255,255,255,.8); }
  .scroll-hint span{ opacity:1; }
  .scroll-hint-line{
    background:linear-gradient(to bottom, rgba(255,255,255,.8), transparent);
    /* La linea llevaba la animacion "pulse", que la hace oscilar entre 0,3 y 1 de
       opacidad: con ella nunca se queda en el 80% pedido. Se detiene para que el valor
       del degradado sea el que manda. */
    animation:none;
    opacity:1;
  }
}

/* Movil: componentes que aparecen en mas de una pagina y estaban descompensados.

   Los .stats-row de Informacion TCA y Quienes somos diferian en todo -- separacion
   12 contra 28, margen 34 contra 48, cifra 40 contra 35,2 -- pese a ser el mismo
   bloque. Se unifican con los valores ya ajustados en Informacion TCA.

   Las citas destacadas se alinean con sus equivalentes: .pull-quote al tamano del lema
   de la home (22px) y .hoy-quote al del texto de introduccion (18px). Antes la cita
   sobrepasaba a los titulos de seccion, que estan en 24. */
@media(max-width:600px){
  /* !important en el margen: en Quienes somos viene en un style="" del HTML. */
  #content .stats-row{ gap:12px; margin-top:34px !important; }
  #content .stat-num{ font-size:40px; }
  #content .stat-label{ font-size:13.6px; }

  #content .pull-quote{ font-size:22px; }
  #content .hoy-quote{ font-size:18px; }

  /* Titulo de cada hito de la cronologia: es un titulo de bloque, como los de tarjeta. */
  #content .milestone-body h3{ font-size:19.8px; }
}

/* Foto de la flor que cierra cada pagina de trastorno. A 180px el encuadre se comia
   casi toda la amapola. El height llega en un style= del HTML, de ahi el !important. */
@media(max-width:600px){
  #content img[src*="-tratamiento.webp"]{ height:280px !important; }
}

/* Aviso sobre fondo verde de las paginas de cada trastorno. En Anorexia el texto va
   suelto dentro del bloque y en las otras cinco dentro de un <p>, de ahi los dos
   selectores. Solo .tca-note: .callout y las citas comparten el mismo estilo verde
   pero viven en otras paginas. */
@media(max-width:600px){
  .tca-note, .tca-note p{ font-size:15px; }
}

/* Paginas del CMS: mismos tamanos que las tarjetas y titulares del resto de la web.
   Viven fuera de #content, asi que no las alcanzaba ninguna regla global. */
@media(max-width:600px){
  .cms-page-title{ font-size:32px; }          /* como el h1 de las heros */
  /* Es un <h2> dentro de #content, asi que le llegaba la regla de titulos de seccion
     a 24px !important. No es un titulo de seccion sino de tarjeta. */
  .news-card-title,
  #content .news-card-title{ font-size:19.8px !important; line-height:1.45 !important; }
  .news-card-excerpt{ font-size:15px; }       /* como el resto de cuerpos de tarjeta */
  .news-card-cat{ font-size:11px; }           /* como los tags */
  .art-title, .act-title{ font-size:32px; }   /* titulares de noticia y actividad */
}

/* Elementos de navegacion que sobran en movil. */
@media(max-width:600px){
  /* La flecha del boton de contacto ocupa ancho en una barra ya justa y no dice nada
     que no diga el propio rotulo. */
  .nav-cta svg, .nav-cta-sec svg{ display:none; }

  /* Area tactil de 44x44 en la hamburguesa, el minimo de las pautas de accesibilidad.
     Crece solo la caja, no el icono, y los 10px extra de ancho salen del hueco que
     sobra con el logo. */
  .nav-burger{ width:44px; height:44px; }

  /* Migas de pan. Solo existen en las cuatro paginas del CMS: noticias, noticia,
     actividades y actividad. Las dos de detalle las declaran con display:flex en su
     propio <style>, que se carga despues de esta hoja y gana por orden a igual
     especificidad; de ahi el !important. */
  .cms-breadcrumb, .art-breadcrumb, .act-breadcrumb{ display:none !important; }
}

/* --- Nav en tablet (601-1100px) --------------------------------------------
   Logo centrado en la pantalla, los dos botones juntos a la izquierda y la
   hamburguesa a la derecha. Logo y botones al tamano de la barra de movil, y
   el desplegable ocupando solo la mitad derecha de la pantalla. */
@media(min-width:601px) and (max-width:1100px){
  /* Botones a la izquierda (order:-1, van antes que el logo en el DOM) y
     hamburguesa fija a la derecha (absoluta). */
  /* z-index:3 en .nav-actions (item flex -> el z-index cuenta aunque sea static):
     sin esto, el <a> del logo (con z-index:1) se pinta ENCIMA de la hamburguesa
     y los clics caen en el enlace a Inicio. */
  .nav-actions{ flex:0 0 auto; order:-1; position:static; z-index:3; }
  .nav-actions .nav-burger{ position:absolute; right:1.5rem; top:50%; transform:translateY(-50%); margin:0; z-index:2; }
  nav .nav-actions a{ display:inline-flex; }        /* los dos CTA vuelven a la barra */
  /* Logo centrado en la pantalla de verdad (no solo a igual distancia de
     botones y hamburguesa), siempre, en toda la franja 601-1100: absoluto y
     centrado respecto a .nav-inner (position:relative), igual que ya hace la
     version movil. Sale del flujo flex, asi que .nav-actions queda como unico
     item en flujo y se queda sola a la izquierda sin necesitar mas ajustes.
     pointer-events:none dejaba pasar los clics a lo que hay debajo cuando el
     logo ocupaba toda la franja central; ya no hace falta (el cuadro ahora
     solo mide lo que mide la imagen) pero se deja por si acaso a anchos muy
     ajustados. */
  .nav-logo{ position:absolute; left:50%; transform:translateX(-50%); flex:0 0 auto; min-width:0; z-index:1; pointer-events:none; }
  .nav-logo img{ pointer-events:auto; }
  .nav-mobile-left{ display:none; }
  .nav-mobile-actions{ display:none; }

  /* logo y botones al tamano de la barra de movil */
  .nav-logo img{ height:36px; }
  .nav-cta, .nav-cta-sec{ font-size:.8rem; padding:.65rem 1.3rem; height:44px; }

  /* desplegable: media pantalla, pegado a la derecha bajo la hamburguesa,
     dejando la mitad izquierda libre para ver el fondo */
  .nav-mobile-menu{
    left:auto; right:1rem; width:50vw; max-width:none;
    max-height:calc(100vh - 6rem); overflow-y:auto;
  }
  .nav-mobile-links{ margin-bottom:.5rem; }
}

/* --- Jerarquia de los links del desplegable (igual en movil y en tablet) ---
   El padre manda: +2px de tamano y mas peso. El hijo se aligera y queda claramente
   por debajo. */
@media(max-width:1100px){
  .nav-mobile-links a{ font-size:1.175rem; font-weight:400; padding:.45rem 0; }
  .nav-mobile-sub a{ font-size:.9rem; font-weight:400; }
}

/* --- Boton del desplegable en movil, al mismo tamano que el CTA de la barra --- */
@media(max-width:600px){
  .nav-mobile-actions a{ font-size:.8rem; font-weight:600; padding:.65rem 1.3rem; height:44px; box-sizing:border-box; }
}

/* --- Migas de pan (.miga, flotante) ---------------------------------------------
   Antes la pildora frosted solo salia entre 901 y 1440px. Ahora:
   - >=601px: pildora en todos los anchos, con aspecto mas ligero (sin sombra, mas
     transparente) y el doble de padding lateral.
   - <=600px: en vez de la miga completa, un circulo glass con una flecha de "volver"
     que lleva a la seccion madre. */
@media(min-width:601px){
  nav.miga{
    background:rgba(255,255,255,.32);
    -webkit-backdrop-filter:blur(30px) saturate(200%);
    backdrop-filter:blur(30px) saturate(200%);
    border:.5px solid rgba(255,255,255,.5);
    box-shadow:none;
    padding:.4rem 2rem;          /* padding lateral duplicado (antes 1rem) */
    border-radius:100px;
  }
}

@media(max-width:600px){
  nav.miga{
    width:44px; height:44px; padding:0; gap:0;
    justify-content:center;
    border-radius:50%;
    top:4.75rem; left:1.5rem;
    z-index:90;                  /* por debajo de la nav y del menu desplegable */
    background:rgba(255,255,255,.32);
    -webkit-backdrop-filter:blur(30px) saturate(200%);
    backdrop-filter:blur(30px) saturate(200%);
    border:.5px solid rgba(255,255,255,.5);
    box-shadow:none;
  }
  /* solo se ve el enlace a la seccion madre, convertido en flecha */
  .miga > *{ display:none; }
  .miga a:last-of-type{
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    font-size:0; text-decoration:none;
  }
  .miga a:last-of-type::before{
    content:""; width:9px; height:9px;
    border-left:2px solid var(--green-dark);
    border-bottom:2px solid var(--green-dark);
    transform:rotate(45deg);
    margin-left:3px;             /* centra opticamente la punta de la flecha */
  }
}

/* --- Hero + miga en tablet (601-1100px) --------------------------------------
   Pagina hazte-socio (y el resto de heros): miga mas pequena, tag como en movil,
   h1 -2px, el bloque de contenido mas abajo y "Desplazate" a 24px del borde con
   un hueco limpio de 40px sobre el. */
@media(min-width:601px) and (max-width:1100px){
  /* Miga: todo el componente un poco mas pequeno (letra + pildora) */
  .miga{ font-size:.74rem; gap:.3rem; }
  nav.miga{ padding:.32rem 1.6rem; }

  /* Tag de la hero al mismo tamano que en movil */
  .hero-tag{ font-size:11px; }

  /* Bloque de la hero mas abajo + "Desplazate" a 24px del borde inferior, con
     exactamente 40px entre el contenido y el "Desplazate" (se anula el margen
     inferior del ultimo hijo de .hero-inner, que sumaba hasta 40px de mas). */
  #hero{ padding-bottom:24px; }
  .hero-inner > :last-child{ margin-bottom:0; }
}
/* Una sola regla para toda la franja tablet (601-1100): antes habia un corte en
   900px que hacia saltar el h1 y el parrafo de la hero. Ahora es continuo. */
@media(min-width:601px) and (max-width:1100px){
  #hero h1{ font-size:calc(clamp(2.8rem,4.8vw,5.2rem) - 2px); }
  #content .hero-sub, .hero-sub{ font-size:clamp(.95rem,1.3vw,1.1rem); }
}

/* --- Botones al mismo tamano en tablet y movil (<=1100px) -------------------
   Muchos botones de contenido se quedaban en el tamano de escritorio (52px) en
   tactil porque no habia regla para <=900px; otros si se reducian. Aqui todos
   pasan a 44px, el tamano tactil estandar, para que casen entre tablet y movil.
   El prefijo #content sube la especificidad por encima del <style> de la pagina. */
@media(max-width:1100px){
  #content .btn-primary, #content .btn-outline, #content .btn-white,
  #content .hero-cta, .hero-cta,
  #content .form-submit-area button,
  #hero .btn-primary, #hero .btn-outline, #hero .btn-white{
    font-size:.875rem;
    padding:.7rem 1.5rem;
    height:44px;
  }
  /* la barra de nav ya iba a 44px; se reafirma para que todo el conjunto case */
  .nav-cta, .nav-cta-sec, .nav-mobile-actions a{ height:44px; }
}

/* --- Rejillas de cards en tablet (601-1100) --------------------------------
   Maximo 2 por fila en toda la franja tablet (grande y pequena igual). Si el
   numero de cards es impar, la ultima baja sola a una fila nueva, centrada y
   con el mismo ancho que una columna (no ocupa el ancho completo). */
@media(min-width:601px) and (max-width:1100px){
  #content :is(.cards-grid,.pub-grid,.tca-grid,.news-grid,.art-more-grid,.impact-grid,.puertas-grid,.prev-grid,.treatment-grid,.act-grid,.noticias-grid,.mitos-grid,.cierre-grid,.related-tca,.opciones-grid,.valores-grid){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:1.5rem !important;
  }
  #content :is(.cards-grid,.pub-grid,.tca-grid,.news-grid,.art-more-grid,.impact-grid,.puertas-grid,.prev-grid,.treatment-grid,.act-grid,.noticias-grid,.mitos-grid,.cierre-grid,.related-tca,.opciones-grid,.valores-grid) > :last-child:nth-child(odd):not(:first-child){
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - .75rem);   /* = ancho de una columna con gap 1.5rem */
  }
}

/* Tablet pequena (601-900): misma distribucion, pero menos padding lateral y
   menos gap para que las 2 columnas no queden asfixiadas. */
@media(min-width:601px) and (max-width:900px){
  #content .container{ padding-left:40px; padding-right:40px; }
  /* La hero no usa .container sino .hero-inner, con su propio padding
     (1.75rem=28px desde la regla de <=1100px): se iguala tambien a 40px. */
  .hero-inner{ padding-left:40px; padding-right:40px; }

  /* Titulo de tarjeta generico, en toda la web: la misma regla que ya vale
     para 901-1440 (mas abajo en esta hoja: "#content [class*="card"]
     h3{font-size:18px}"), replicada aqui porque esa franja no llegaba hasta
     601. Sin esto el titulo de cualquier tarjeta (.premio-card, .impact-card,
     .tca-card, .card suelto...) volvia a su tamano de escritorio en tablet
     pequeña, mas grande que en tablet grande. Se anade .pub-body a mano
     porque su titulo no vive dentro de una clase que contenga "card". Las
     paginas que fijan su propio tamano de card mayor a proposito (p.ej.
     .tca-grid .tca-card h3 a 20px) tienen mas especificidad y siguen ganando. */
  #content [class*="card"] h3, #content .pub-body h3{ font-size:18px; }
  /* "Otros trastornos" al pie de cada pagina de trastorno: su cuerpo baja a
     15px en tablet grande (el general de lectura de arriba lo deja en 16).
     Mismo criterio aqui. */
  #content .related-tca .tca-card p{ font-size:15px !important; }
  /* Paginas de trastorno, seccion "En detalle": el titulo interno de cada
     columna (.col-titulo, no es una tarjeta pero tenia el mismo problema)
     volvia a su tamano de escritorio (24px) por debajo de 901px. Mismo
     clamp que ya usan las 6 subpaginas de trastorno en tablet grande. */
  #content .col-titulo{ font-size:clamp(1.15rem,1.7vw,1.5rem); }
}

/* Paginas de trastorno, seccion "Otros trastornos": son 3 tarjetas y en las
   dos tablets (2 columnas) la tercera caia sola en una segunda fila. En vez
   de centrarla como el resto de rejillas impares de la web, aqui se pidio
   quitarla directamente: se queda solo la primera fila (2 tarjetas), en las
   dos tablets. En movil (1 columna) y en escritorio (3 columnas) no cambia
   nada. Vale para las 6 subpaginas de trastorno por igual. */
@media(min-width:601px) and (max-width:1100px){
  #content .related-tca .tca-card:nth-child(3){ display:none; }
}

/* "Como acompanamos": las etiquetas bajo cada icono llevaban el pildorazo de
   fondo verdoso + cristal + borde que hereda .icono-tag de .hero-tag. En
   movil (<=600) ya se habia quitado, dejando solo el texto en verde; se
   iguala en las dos tablets. */
@media(min-width:601px) and (max-width:1100px){
  #content .icono-item .icono-tag{
    background:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border:none;
    box-shadow:none;
    padding:0;
  }
}

@media(min-width:601px) and (max-width:900px){
  /* .hero-sub iba a 15,2px (clamp con minimo .95rem, mas abajo en esta misma
     hoja): el resto del texto de lectura en esta franja va a 16px, se iguala. */
  #content .hero-sub{ font-size:16px; }
  /* "Desplazate" y su linea vertical, al mismo tamano que ya usan en tablet
     grande (regla de 901-1440): 12px (.75rem, subido desde 9,984px por
     legibilidad tras la auditoria de accesibilidad) y 30px de alto de linea. */
  #content .scroll-hint{ font-size:.75rem; }
  #content .scroll-hint-line{ height:30px; }
  /* "Como acompanamos": los iconos no tenian tope propio en esta franja (solo
     lo tiene tablet grande) y con la rejilla de 2 columnas de esta anchura
     salian mas grandes que en la propia tablet grande, mas anchos ademas que
     en movil. Primero se probo el mismo tope que tablet grande (157px), mas
     resultaba demasiado pequeño aqui: se sube un 50% (157px x 1.5 = 236px). */
  #content .icono-item img{ max-width:236px !important; }
  #content :is(.cards-grid,.pub-grid,.tca-grid,.news-grid,.art-more-grid,.impact-grid,.puertas-grid,.prev-grid,.treatment-grid,.act-grid,.noticias-grid,.mitos-grid,.cierre-grid,.related-tca,.opciones-grid,.valores-grid){
    gap:1rem !important;
  }
  #content :is(.cards-grid,.pub-grid,.tca-grid,.news-grid,.art-more-grid,.impact-grid,.puertas-grid,.prev-grid,.treatment-grid,.act-grid,.noticias-grid,.mitos-grid,.cierre-grid,.related-tca,.opciones-grid,.valores-grid) > :last-child:nth-child(odd):not(:first-child){
    width:calc(50% - .5rem);   /* recalculado para el gap de 1rem */
  }

  /* #puertas y #noticias (home) son las dos unicas secciones sin padding
     vertical propio: #validacion, #quienes, #actividades, #colaboradores y
     #hazte-socio lo llevan en su propio "#id{padding:7.5rem 0}" en el <style>
     de la home, pero #puertas y #noticias no tienen ese base y solo reciben
     padding por un lado (top o bottom, no los dos) desde la regla de 901-1440
     y desde el ajuste de movil (<=600): en esta franja (601-900) se quedaban
     a 0 arriba y abajo. Se igualan al resto: 7.5rem, como todas sus vecinas. */
  #content > section#puertas,
  #content > section#noticias{
    padding-top:7.5rem;
    padding-bottom:7.5rem;
  }
}

/* --- Tablet grande (901-1100): mismo padding lateral en todas las secciones,
       igualado al de la hero de la home (1.75rem, no 2rem). El ticker de
       colaboradores tambien se recoge al ancho del contenedor para que la
       seccion no se vea mas ancha que el resto. */
@media(min-width:901px) and (max-width:1100px){
  #content > section .container{
    padding-left:1.75rem;
    padding-right:1.75rem;
  }

  /* El ticker iba a 90vw y sobresalia ~68px por cada lado del contenedor. Se
     iguala a 75vw, el mismo ancho que .container / .hero-inner en esta franja. */
  #content .colab-ticker{ width:75vw; }

  /* Varias rejillas de cards se salian a lo ancho (width:114-123% + translateX)
     para meter 3-4 tarjetas por fila. Como ahora van a 2 columnas ya no hace
     falta: se recogen dentro del contenedor, alineadas como el resto. */
  #content :is(.noticias-grid,.noticias-footer-abajo,.prev-grid,.valores-grid,.cierre-grid,.difusion-grid){
    width:auto !important;
    max-width:100% !important;
    position:static !important;
    left:auto !important;
    transform:none !important;
  }
  /* La rejilla de noticias traia -20px de margen superior para compensar el
     desbordamiento de ancho que ya no existe: sin neutralizarlo, el hueco bajo
     su cabecera quedaria mas corto que el del resto (ver regla de mas abajo). */
  #content .noticias-grid{ margin-top:0 !important; }
  /* Mision y valores (quienes-somos.html) traen 3.75rem de margen superior en
     un style="" del HTML: al colapsar con el margen inferior de la cabecera
     ganaba el mayor (60px en vez de 56). Mismo criterio que ya se aplicaba en
     movil para estas dos rejillas. */
  #content .mision-grid,
  #content .valores-grid{ margin-top:0 !important; }

  /* Un solo tamano para tag + titulo en todas las secciones, igualado al de
     "Como acompanamos" (#actividades): el tag ya venia a 11,6px desde arriba y
     el titulo se lleva a clamp(1.8rem,3.5vw,2.8rem). La regla de 901-1440 los
     encogia a clamp(1.5rem,2.9vw,2.4rem) y varias paginas fijan su propia
     medida en el <style> (#cta-socio en colabora y hazte-socio, #colaboradores
     h2 en colabora, .cat-header h2 en galeria): de ahi el !important, acotado a
     esta media query. El gap tag->titulo lo da el margin-bottom del tag. */
  #content .section-tag{ margin-bottom:.85rem; }
  #content .section-title,
  #content h2.section-title,
  #content h2.validacion-title,
  #content .validacion-title,
  #content .validacion-titulo,
  #content .colab-header h2,
  #content #colaboradores h2,
  #content .noticias-head h2,
  #content #cta-socio .section-title,
  #content .cat-header h2{
    font-size:clamp(1.8rem,3.5vw,2.8rem) !important;
  }

  /* Un solo hueco entre la cabecera de seccion (tag+titulo) y el contenido
     que sigue, en toda la web: 3.5rem (56px), el valor por defecto de
     .section-header sin tocar (el que ya traian hazte-socio, FAQ y sociedad).
     Segun pagina y seccion habia de todo: 0, 20, 24, 28, 32, 40 y 64px.
     !important porque varias paginas fijan su propio margin-bottom en el
     <style> (informacion-tca, colabora, hazte-socio, quienes-somos,
     publicaciones, cursos-voluntariado) y colaboradores lo trae en un
     style="" del HTML: hay que ganarles a todos por igual.
     .quienes-cabecera y .contacto-home-cabecera (home) no usan margin-bottom
     sino el row-gap/margin de su propia rejilla: se ajustan en el <style> de
     index.html para no duplicar el criterio aqui. Fuera de esta lista quedan
     algunas cabeceras muy locales de una sola pagina (.cierre en quienes-somos,
     .cg-cabecera, .cuando-cabecera, .objetivos-cabecera, .act-header,
     .art-header, .doc-header): si tambien hace falta igualarlas, se añaden. */
  #content .section-header,
  #content .puertas-header,
  #content .actividades-header,
  #content .colab-header,
  #content .noticias-head,
  #content .cat-header,
  #content .bf-cabecera{
    margin-bottom:3.5rem !important;
  }
}

/* --- Aberturas hacia el fondo (.vista-fondo) en las dos tablets: -300px de
   alto en total, sitio por sitio segun de donde partia cada una (primero se
   bajaron 200px; esta segunda pasada resta otros 100px mas).
   "Tipo A" (home, colabora, familias, informacion-tca, personas-afectadas,
   quienes-somos, sociedad): sin clase abertura-*, min-height:850px fijo en el
   style="" del HTML y sin ajuste propio en tablet todavia. 850 -> 550px en
   toda la franja 601-1100.
   "Tipo B" (el resto de subpaginas, .vista-fondo.abertura-final.abertura-hija):
   ya tenia su propia altura por tablet (676px en 601-900 desde la base, 616px
   en 901-1440 desde una regla existente): se les restan 300px a cada una, sin
   tocar por encima de 1100 (esa regla de 616px sigue viva ahi). */
@media(min-width:601px) and (max-width:900px){
  #content .vista-fondo:not(.abertura-final){ min-height:550px !important; height:550px !important; }
  #content > section.abertura-hija{ min-height:376px !important; height:376px !important; }
}
@media(min-width:901px) and (max-width:1100px){
  #content .vista-fondo:not(.abertura-final){ min-height:550px !important; height:550px !important; }
  #content > section.abertura-hija{ min-height:316px !important; height:316px !important; }
}

/* --- Icono de la hamburguesa: del gris oscuro por defecto al verde de marca,
   igual que los botones (nav-cta / nav-cta-sec). Vale para las tres franjas
   en las que aparece (movil y las dos tablets). */
.nav-burger span{ background:var(--green-dark); }

/* --- H1 de todas las heros: cuando el titulo rompe en 2 lineas, que las dos
   pesen mas o menos igual en vez de dejar una linea larga y otra corta con
   la palabra suelta que sobre. text-wrap:balance reparte las palabras entre
   las lineas que hagan falta para minimizar esa diferencia; no fuerza el
   numero de lineas, solo iguala el reparto cuando el titulo ya rompe.
   Sin scope de ancho a proposito: vale igual en movil, las dos tablets y
   escritorio, se recalcula solo si el titulo pasa de 1 a 2 lineas o viceversa. */
#hero h1{ text-wrap:balance; }