/* AquaVista — editorial design system (draft) */
:root{
  --navy:#0d2b45;
  --navy-deep:#081c2e;
  --ivory:#f4efe6;
  --ivory-soft:#faf7f0;
  --seafoam:#9fd8cb;
  --seafoam-deep:#286c5c;
  --ink:#1c2733;
  --muted:#5c6b7a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1080px;
  --pad:clamp(1.25rem,4vw,4rem);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory-soft);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:var(--serif);color:var(--navy);line-height:1.15}
h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:1rem}
h3{font-size:1.25rem;margin-bottom:.5rem}
p{max-width:62ch}
a{color:var(--seafoam-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--seafoam);outline-offset:3px;border-radius:4px}
.skip-link{position:fixed;top:.6rem;left:1rem;z-index:100;background:var(--navy);color:var(--ivory);padding:.7rem 1rem;transform:translateY(-200%)}
.skip-link:focus{transform:none}
main{scroll-margin-top:80px}
section[id]{scroll-margin-top:80px}
.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;font-weight:600;color:var(--seafoam-deep);margin-bottom:.9rem;
}
.lede{font-size:1.15rem;color:var(--muted);max-width:56ch}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,230,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(13,43,69,.12);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.15rem;color:var(--navy);text-decoration:none;font-weight:600}
.brand svg{width:28px;height:28px;flex:none}
.lang-toggle{
  font:600 .8rem var(--sans);letter-spacing:.08em;
  color:var(--navy);background:var(--ivory);
  border:1.5px solid var(--navy);border-radius:999px;
  padding:.45rem 1.05rem;cursor:pointer;transition:background .2s,color .2s;
}
.lang-toggle:hover{background:var(--navy);color:var(--ivory)}
.main-nav ul{display:flex;gap:1.6rem;list-style:none}
.main-nav a{color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
.main-nav a:hover{color:var(--seafoam-deep)}
@media (max-width:640px){
  .site-header .wrap{flex-wrap:wrap;padding-top:.65rem;padding-bottom:.65rem;gap:.5rem 1rem}
  .main-nav{order:3;width:100%}
  .main-nav ul{justify-content:space-between;gap:.6rem}
  .main-nav a{display:block;padding:.35rem 0}
  section[id],main{scroll-margin-top:115px}
}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:var(--ivory);position:relative;overflow:hidden;padding:0}
.hero .wrap{position:relative;padding-top:clamp(4rem,9vw,7.5rem);padding-bottom:clamp(4rem,9vw,7rem)}
.hero h1{color:var(--ivory)}
.hero .eyebrow{color:var(--seafoam)}
.hero .lede{color:rgba(244,239,230,.78);font-size:1.2rem}
.hero-art{margin-top:2.5rem;width:100%;height:auto;display:block}
.hero-cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}
.btn{display:inline-block;font:600 .95rem var(--sans);padding:.85rem 1.7rem;border-radius:999px;text-decoration:none;transition:transform .15s,background .2s}
.btn-primary{background:var(--seafoam);color:var(--navy-deep)}
.btn-primary:hover{background:var(--ivory);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--seafoam);color:var(--seafoam)}
.btn-ghost:hover{background:rgba(159,216,203,.12)}

/* ---------- approach ---------- */
.approach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.2rem;margin-top:2.5rem}
.approach-item{border-top:2px solid var(--seafoam);padding-top:1.2rem}
.approach-item .num{font-family:var(--serif);font-size:2rem;color:var(--seafoam-deep);display:block;margin-bottom:.4rem}
.approach-item p{color:var(--muted);font-size:.97rem}

/* ---------- regions ---------- */
.regions{background:var(--ivory)}
.region-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:2.5rem}
@media (min-width:760px){.region-grid{grid-template-columns:1fr 1fr}}
.region-card{
  background:var(--ivory-soft);border:1px solid rgba(13,43,69,.14);
  border-radius:var(--r);overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.region-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,43,69,.14)}
.region-card figure{margin:0}
.region-card svg{display:block;width:100%;height:auto;background:var(--navy-deep)}
.region-body{padding:1.6rem 1.6rem 1.9rem}
.region-body .tag{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--seafoam-deep);margin-bottom:.6rem}
.region-body p{color:var(--muted);font-size:.95rem}

/* ---------- campus (future project) ---------- */
.campus{background:var(--navy);color:var(--ivory)}
.campus h2,.campus h3{color:var(--ivory)}
.campus .eyebrow{color:var(--seafoam)}
.campus .lede{color:rgba(244,239,230,.78)}
.campus .wrap>*+*{margin-top:1.4rem}
.campus-figure{margin-top:2rem}
.campus-figure img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid rgba(159,216,203,.25)}
.campus-figure figcaption{font-size:.82rem;color:rgba(244,239,230,.65);margin-top:.6rem}
.campus-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2rem}
@media (min-width:760px){.campus-grid{grid-template-columns:1fr 1fr}}
.campus-panel{
  background:var(--navy-deep);
  border:1px solid rgba(159,216,203,.22);
  border-top:3px solid #d9a441;
  border-radius:var(--r);
  padding:1.4rem 1.5rem 1.6rem;
}
.campus-panel h3{font-size:1.05rem;margin-bottom:.6rem}
.campus-list{list-style:none;display:grid;gap:.55rem}
.campus-list li{font-size:.93rem;color:rgba(244,239,230,.85);padding-left:1.05rem;position:relative}
.campus-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--seafoam)}
.campus-note{font-size:.83rem;color:rgba(244,239,230,.62);margin-top:.9rem;border-top:1px solid rgba(217,164,65,.4);padding-top:.7rem;max-width:none}
.campus-block{margin-top:2rem;border-top:1px solid rgba(217,164,65,.4);padding-top:1.3rem}
.campus-block h3{margin-bottom:.6rem}
.country-tags{display:inline-flex;flex-wrap:wrap;gap:.4rem;font-weight:600;color:var(--seafoam);letter-spacing:.02em}
.campus-cta{margin-top:2.2rem}
.campus .btn-primary:hover{background:var(--ivory)}

/* ---------- contact ---------- */
.contact{background:var(--navy-deep);color:var(--ivory)}
.contact h2{color:var(--ivory)}
.contact .eyebrow{color:var(--seafoam)}
.contact p{color:rgba(244,239,230,.78)}
.contact p{margin-left:auto;margin-right:auto}
.contact .btn-primary{margin-top:1.8rem}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:rgba(244,239,230,.6);padding:2rem 0;border-top:1px solid rgba(159,216,203,.18)}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.82rem}
.site-footer a{color:var(--seafoam);text-decoration:none;overflow-wrap:anywhere}
.site-footer a:hover{text-decoration:underline}

/* ---------- language visibility ---------- */
html[lang="es"] [data-lang="en"],html[lang="en"] [data-lang="es"]{display:none}

/* ---------- reveal ---------- */
.reveal{opacity:1;transform:none}
.reveal.pending{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal.pending{opacity:1;transform:none}}

/* styles-addon.css — new responsive rules only; base input/site/styles.css preserved */

/* Details/summary disclosure cards */
.region-body details{margin-top:.8rem;font-size:.9rem;color:var(--muted)}
.region-body summary{cursor:pointer;font-weight:600;color:var(--seafoam-deep);font-size:.85rem}
.region-body details p{margin-top:.5rem}

/* Bilingual spans inside SVG text handled inline; keep art fluid at all widths */
.hero-art,section svg{max-width:100%}

/* 320px: nav with up to 5 links stays usable */
@media (max-width:360px){
  .main-nav ul{flex-wrap:wrap;gap:.35rem .8rem}
  .main-nav a{font-size:.85rem}
}

/* Contact: mailto wraps cleanly on narrow screens */
#contacto .btn{overflow-wrap:anywhere}

/* Campus figures: preserve aspect, no horizontal overflow */
.campus-figure img{max-width:100%}

/* Five-link responsive navigation and source text wrapping */
.main-nav ul{gap:1rem;flex-wrap:wrap}.main-nav a{font-size:.85rem}.main-nav li{min-width:0}details a{overflow-wrap:anywhere}svg{max-width:100%}
@media(max-width:640px){.main-nav ul{justify-content:flex-start;gap:.15rem .9rem}.main-nav a{font-size:.78rem}.main-nav li{flex:0 0 auto}section[id],main{scroll-margin-top:160px}}

/* Controller polish: readable diagrams, contact cards and source disclosures */
.hero-title{margin-bottom:1.4rem}
.hero-art{max-width:720px;margin-left:auto;margin-right:auto}
#fase-uno{background:var(--ivory)}
#campus-conectividad .campus-list li{color:var(--ink)}
#campus-conectividad .campus-list li::before{background:var(--seafoam-deep)}
#campus-conectividad> .wrap>details{padding:1rem 0;border-top:1px solid rgba(13,43,69,.2)}
details>summary{cursor:pointer;color:var(--seafoam-deep);font-weight:600}
details[open]>summary{margin-bottom:.65rem}
#contacto h3,#contacto h3 a{color:var(--ivory)}
#contacto h3 a{text-underline-offset:.25em}
#contacto p{margin-left:0;margin-right:0}
#contacto .approach-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
#contacto .btn{max-width:100%;font-size:clamp(.78rem,3vw,.95rem);padding:.85rem 1.1rem}
.mobile-diagram{display:none}
@media(max-width:760px){#contacto .approach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 #fase-uno svg,#campus-conectividad svg{display:none!important}
 .hero-art text{display:none}
 .mobile-diagram{display:grid;gap:.8rem;margin-top:1.5rem}
 .mobile-diagram>div{border:1px solid var(--seafoam-deep);border-radius:10px;padding:1rem;background:rgba(159,216,203,.12)}
 .mobile-diagram p{font-size:.92rem}
 .diagram-arrow{text-align:center;color:var(--seafoam-deep);font-size:1.4rem!important}
 .mobile-diagram .future-node{border-style:dashed}
 .diagram-caption{color:var(--muted)}
}
@media(max-width:360px){#contacto .approach-grid{grid-template-columns:1fr}}

/* TAM-1 emphasis component — append-only to styles.css; all rules namespaced .tam1-* inside .tam1-feature */

.tam1-feature{
  margin-top:2.2rem;
  background:var(--navy);
  border:1px solid rgba(159,216,203,.25);
  border-top:3px solid #d9a441;
  border-radius:var(--r);
  padding:clamp(1.2rem,3vw,2rem);
  color:var(--ivory);
}
.tam1-headline{
  font-family:var(--serif);
  font-size:clamp(1.3rem,3.2vw,1.9rem);
  line-height:1.25;
  color:var(--ivory);
  max-width:58ch;
  margin-bottom:1.4rem;
}
.tam1-figure{margin:0}
.tam1-svg{display:block;width:100%;max-width:720px;height:auto;margin:0 auto}
.tam1-caption{
  font-size:.82rem;
  color:rgba(244,239,230,.65);
  max-width:62ch;
  margin:.8rem auto 0;
  text-align:center;
}
.tam1-proximity{
  font-size:.97rem;
  color:rgba(244,239,230,.85);
  max-width:62ch;
  margin:1.4rem auto 0;
}
.tam1-benefits{
  list-style:none;
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem;
  margin-top:1.4rem;
  padding:0;
}
@media (min-width:620px){
  .tam1-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
}
.tam1-benefit{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.9rem;
  font-weight:600;
  color:var(--ivory);
  border:1px solid rgba(159,216,203,.28);
  border-radius:10px;
  padding:.7rem .9rem;
  min-width:0;
}
.tam1-benefit svg{flex:none}
.tam1-benefit span{overflow-wrap:anywhere}
.tam1-cta{margin-top:1.4rem}

/* ---- Mobile <=640px: dedicated DOM stack instead of the scaled 720px SVG ---- */
.tam1-mobile{display:none}
@media (max-width:640px){
  #fase-uno .tam1-feature .tam1-svg{display:none!important}       /* hide only the desktop schematic */
  .tam1-desktop{display:none}
  .tam1-mobile{display:block}
  .tam1-hero-node{
    border:3px solid #d9a441;
    border-radius:12px;
    background:rgba(217,164,65,.16);
    padding:1rem .8rem;
    text-align:center;
  }
  .tam1-hero-title{
    font-family:var(--serif);
    font-size:3rem;
    font-weight:700;
    line-height:1.05;
    color:#f4efe6;
    margin:.2rem 0 .3rem;
  }
  .tam1-hero-sub{font-size:.95rem;color:var(--seafoam);margin:0}
  .tam1-zone{font-size:.8rem;font-weight:700;color:#d9a441;margin:.5rem 0 0;text-transform:uppercase}
  .tam1-link-svg{display:block;margin:.6rem auto .2rem;width:24px;height:34px}
  .tam1-link-label{font-size:.8rem;color:var(--seafoam);text-align:center;margin:0 0 .6rem}
  .tam1-planned-node{
    border:2px dashed var(--seafoam);
    border-radius:12px;
    padding:.8rem;
    text-align:center;
  }
  .tam1-node-title{font-size:1rem;font-weight:700;color:var(--ivory);margin:0}
}

/* Scoped overrides: existing global rules hide section SVGs ≤640px and force max-width on SVGs */
@media (max-width:640px){
  #fase-uno .tam1-feature svg{display:block!important}
}
.tam1-feature svg{max-width:100%}

/* design.css — append-only addendum to styles.css; all rules scoped under .edge-design */

.edge-design{margin-top:2.2rem}
.edge-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:600;color:var(--seafoam-deep);margin-bottom:.9rem}
.edge-cards{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:760px){.edge-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.edge-card{background:var(--ivory);border:1px solid rgba(13,43,69,.14);border-top:3px solid var(--seafoam-deep);border-radius:var(--r);padding:1.2rem 1.3rem 1.4rem}
.edge-card .edge-card-num{font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--navy);line-height:1.1;margin-bottom:.35rem}
.edge-card h3{font-size:1rem;margin-bottom:.35rem}
.edge-card p{color:var(--muted);font-size:.92rem;max-width:none}

.edge-tier{background:var(--navy);border:1px solid rgba(159,216,203,.25);border-top:3px solid #d9a441;border-radius:var(--r);padding:1.4rem 1.5rem 1.6rem;margin-top:1.6rem;color:var(--ivory)}
.edge-tier-head{font-family:var(--serif);font-size:clamp(1.15rem,3vw,1.5rem);color:var(--ivory);display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.9rem}
.edge-badge{display:inline-block;font:600 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;background:#d9a441;color:var(--navy-deep);border-radius:999px;padding:.3rem .8rem}
.edge-list{list-style:none;display:grid;gap:.6rem;padding:0}
.edge-list li{font-size:.95rem;color:rgba(244,239,230,.88);padding-left:1.05rem;position:relative;max-width:70ch}
.edge-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--seafoam)}

.edge-sub{font-size:1.1rem;margin:1.8rem 0 .8rem}
.edge-principles{list-style:none;display:grid;grid-template-columns:1fr;gap:.9rem;padding:0}
@media (min-width:760px){.edge-principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.edge-principles li{font-size:.95rem;color:var(--muted);border-left:3px solid var(--seafoam);padding:.2rem 0 .2rem .9rem}

.edge-stack{display:grid;gap:.5rem;margin-top:.4rem}
.edge-level{display:flex;align-items:center;gap:.8rem;border:1px solid rgba(13,43,69,.16);border-radius:10px;padding:.7rem .9rem;background:var(--ivory-soft)}
.edge-level p{font-size:.95rem;max-width:none}
.edge-level-tag{font-family:var(--serif);font-weight:700;color:var(--seafoam-deep);flex:none;width:1.4rem;text-align:center}
.edge-level-base{border:2px dashed var(--seafoam-deep);background:rgba(159,216,203,.12)}
.edge-note{font-size:.85rem;color:var(--muted);margin-top:.7rem;max-width:70ch}
.edge-tier .edge-note{color:rgba(244,239,230,.78);border-top:1px solid rgba(217,164,65,.4);padding-top:.7rem}

/* Parcel-relative TAM-1 / Edge schematic — scoped replacement styles.
   Append-only to styles.css; all rules namespaced .tam1-* (or scoped under .tam1-feature).
   Supplements the existing .tam1-feature block; no root rules modified. */

/* ---- Desktop SVG: parcel perimeter + building blocks ---- */
.tam1-feature .tam1-svg{display:block;width:100%;max-width:720px;height:auto;margin:0 auto}

/* ---- Mobile <=640: native DOM stack inside ONE parcel border, cable above/outside ---- */
@media (max-width:640px){
  /* Existing global rule hides section SVGs <=640; the small decorative mobile
     SVGs must render, so force them visible with specific overrides. */
  #fase-uno .tam1-feature .tam1-cable svg,
  #fase-uno .tam1-feature .tam1-link-svg{display:block!important}

  .tam1-feature .tam1-cable{text-align:center;margin:0 0 .5rem}
  .tam1-feature .tam1-cable svg{margin:0 auto;display:block}
  .tam1-feature .tam1-cable-label{
    font-size:.8rem;font-weight:700;color:#d9a441;
    text-align:center;margin:.3rem 0 .5rem;
  }

  /* One unmistakable common parcel border enclosing BOTH building cards */
  .tam1-feature .tam1-parcel{
    border:2px solid var(--seafoam);
    border-radius:14px;
    padding:.9rem .8rem 1rem;
    background:rgba(159,216,203,.06);
  }
  .tam1-feature .tam1-parcel-label{
    font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--seafoam);text-align:center;margin:0 0 .7rem;
  }

  .tam1-feature .tam1-hero-node{
    border:3px solid #d9a441;
    border-radius:12px;
    background:rgba(217,164,65,.16);
    padding:1rem .8rem;
    text-align:center;
  }
  .tam1-feature .tam1-hero-title{
    font-family:var(--serif);
    font-size:clamp(2.2rem,9vw,3rem);   /* reflows at 320px without clipping */
    font-weight:700;line-height:1.05;color:#f4efe6;margin:.2rem 0 .3rem;
  }
  .tam1-feature .tam1-hero-sub{font-size:.95rem;color:var(--seafoam);margin:0}

  .tam1-feature .tam1-link-svg{display:block;margin:.6rem auto .2rem;width:24px;height:34px}
  .tam1-feature .tam1-link-label{font-size:.8rem;color:var(--seafoam);text-align:center;margin:0 0 .6rem}

  .tam1-feature .tam1-planned-node{
    border:2px dashed var(--seafoam);
    border-radius:12px;
    padding:.8rem;
    text-align:center;
  }
  .tam1-feature .tam1-node-title{
    font-size:clamp(.9rem,4vw,1rem);font-weight:700;color:var(--ivory);margin:0;
    overflow-wrap:anywhere;
  }
}