/* ===========================================================================
   EcoEsperanza — Website UI kit styles
   Self-contained recreation styles. Mirrors the DS primitives (pill buttons,
   soft cards, forest/sun palette) using the shipped design tokens so the kit
   renders standalone. In production, compose the bundled DS components instead.
   =========================================================================== */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--color-bg); color:var(--text-primary);
  font-family:var(--font-sans); font-size:var(--text-base); line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold-300); color:var(--green-950); }

.container{ width:100%; max-width:var(--container-max); margin-inline:auto;
  padding-inline:var(--gutter); }
.section{ padding-block:clamp(3.5rem,7vw,6rem); }
.eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--text-sm);
  font-weight:var(--fw-bold); letter-spacing:var(--tracking-wider); text-transform:uppercase;
  color:var(--brand-leaf); }
.eyebrow svg{ width:1.15em; height:1.15em; }
.eyebrow--sun{ color:var(--gold-600); }
.eyebrow--invert{ color:var(--gold-400); }
.h2{ font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--text-display-sm); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); margin:.5rem 0 0; text-wrap:balance; }
.lead{ font-size:var(--text-lg); line-height:var(--leading-relaxed); color:var(--text-secondary);
  text-wrap:pretty; }

/* ---- Buttons (mirror DS Button) ------------------------------------------ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--text-base);
  letter-spacing:var(--tracking-snug); line-height:1; border:2px solid transparent;
  border-radius:var(--radius-pill); padding:.78rem 1.5rem; cursor:pointer; white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.btn svg{ width:1.15em; height:1.15em; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--action-bg); color:#fff; }
.btn--primary:hover{ background:var(--action-bg-hover); }
.btn--accent{ background:var(--accent-bg); color:var(--accent-fg); }
.btn--accent:hover{ background:var(--accent-bg-hover); box-shadow:var(--shadow-glow-sun); }
.btn--secondary{ background:transparent; color:var(--brand-primary); border-color:var(--border-brand); }
.btn--secondary:hover{ background:var(--green-50); }
.btn--ondark{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.5);
  backdrop-filter:blur(4px); }
.btn--ondark:hover{ background:rgba(255,255,255,.2); }
.btn--lg{ font-size:var(--text-md); padding:.95rem 1.9rem; }
.btn--sm{ font-size:var(--text-sm); padding:.5rem 1.05rem; }

/* ---- Badges & tags ------------------------------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:.4em; font-size:var(--text-xs);
  font-weight:var(--fw-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  padding:.3em .7em; border-radius:var(--radius-pill); line-height:1; }
.badge--success{ background:var(--success-bg); color:var(--green-800); }
.badge--data{ background:var(--sky-100); color:var(--sky-800); }
.badge--sun{ background:var(--gold-100); color:var(--gold-700); }
.badge__dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; }

/* ---- Header -------------------------------------------------------------- */
.hdr{ position:sticky; top:0; z-index:50; height:var(--header-height);
  display:flex; align-items:center; background:color-mix(in srgb, var(--sand-50) 88%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid transparent;
  transition:border-color var(--duration-base), box-shadow var(--duration-base); }
.hdr--scrolled{ border-color:var(--border-subtle); box-shadow:var(--shadow-sm); }
.hdr__row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; }
.hdr__logo{ display:flex; align-items:center; gap:.6rem; }
.hdr__logo img{ height:40px; width:auto; }
.hdr__nav{ display:flex; align-items:center; gap:.4rem; }
.hdr__link{ font-weight:var(--fw-semibold); font-size:var(--text-base); color:var(--text-secondary);
  padding:.5rem .9rem; border-radius:var(--radius-pill); cursor:pointer;
  transition:color var(--duration-fast), background var(--duration-fast); }
.hdr__link:hover{ color:var(--brand-primary); background:var(--green-50); }
.hdr__link--active{ color:var(--brand-primary); background:var(--green-100); }
.hdr__cta{ display:flex; align-items:center; gap:.75rem; }
.hdr__burger{ display:none; align-items:center; justify-content:center; width:2.7rem; height:2.7rem;
  border:none; background:var(--green-50); color:var(--brand-primary); border-radius:var(--radius-md);
  cursor:pointer; }
.hdr__burger svg{ width:1.4rem; height:1.4rem; }

/* Mobile drawer */
.drawer{ position:fixed; inset:0; z-index:200; background:rgba(8,37,15,.55);
  opacity:0; pointer-events:none; transition:opacity var(--duration-base) var(--ease-out); }
.drawer--open{ opacity:1; pointer-events:auto; }
.drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(82vw,340px);
  background:var(--white); box-shadow:var(--shadow-xl); display:flex; flex-direction:column;
  gap:.3rem; padding:calc(var(--header-height) + 1rem) 1.4rem 1.6rem; transform:translateX(100%);
  transition:transform var(--duration-base) var(--ease-out); overflow-y:auto; }
.drawer--open .drawer__panel{ transform:none; }
.drawer__link{ display:flex; align-items:center; justify-content:space-between; background:none; border:none;
  font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-lg); color:var(--text-primary);
  text-align:left; padding:.85rem .6rem; border-radius:var(--radius-md); cursor:pointer;
  border-bottom:1px solid var(--ink-100); transition:background var(--duration-fast), color var(--duration-fast); }
.drawer__link svg{ width:1.1rem; height:1.1rem; color:var(--ink-400); }
.drawer__link:hover{ background:var(--green-50); color:var(--brand-primary); }
.drawer__link--active{ color:var(--brand-primary); }
.drawer__link--active svg{ color:var(--brand-primary); }
.drawer__wa{ display:inline-flex; align-items:center; gap:.55rem; margin-top:.8rem; color:#25D366;
  font-weight:var(--fw-semibold); font-size:var(--text-sm); cursor:pointer; }

/* ---- Hero ---------------------------------------------------------------- */
.hero{ position:relative; min-height:clamp(520px,86vh,820px); display:flex; align-items:center;
  color:#fff; overflow:clip; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
/* Subtle life: slow Ken Burns drift on the photo + a soft mist that breathes. */
.hero__bg--motion img{ animation:heroKen 13s var(--ease-in-out) infinite alternate; transform-origin:60% 40%; }
@keyframes heroKen{ 0%{ transform:scale(1.04) translate3d(0,0,0);} 100%{ transform:scale(1.14) translate3d(-2.5%,-2%,0);} }
.hero__mist{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 70% at 20% 100%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(90% 60% at 80% 90%, rgba(190,233,203,.12), transparent 60%);
  mix-blend-mode:screen; animation:heroMist 9s var(--ease-in-out) infinite alternate; }
@keyframes heroMist{ 0%{ opacity:.5; transform:translate3d(-2%,0,0);} 100%{ opacity:.9; transform:translate3d(3%,-1.5%,0);} }
@media (prefers-reduced-motion: reduce){
  .hero__bg--motion img, .hero__mist{ animation:none; }
  .hero__bg--motion img{ transform:scale(1.04); }
}
.hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,37,15,.92) 0%, rgba(14,61,28,.78) 42%, rgba(14,61,28,.35) 100%); }
.hero__sun{ position:absolute; z-index:1; right:-4%; top:18%; width:min(26vw,300px); aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle at 50% 50%, var(--gold-400), var(--gold-600) 58%, transparent 70%);
  opacity:.55; filter:blur(2px); pointer-events:none; }
.hero__inner{ position:relative; z-index:2; max-width:680px; }
.hero h1{ font-family:var(--font-display); font-weight:var(--fw-extrabold);
  font-size:var(--text-display); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);
  margin:1rem 0 1.1rem; text-wrap:balance; }
.hero__lead{ font-size:var(--text-xl); line-height:var(--leading-snug); color:rgba(255,255,255,.9);
  max-width:38rem; margin:0 0 2rem; }
.hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; }
.hero__scroll{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.7); }

/* ---- Stat strip ---------------------------------------------------------- */
.stats{ position:relative; z-index:5; margin-top:-3.5rem; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.stat{ background:var(--color-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:1.4rem 1.5rem; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; gap:.4rem; }
.stat__top{ display:flex; align-items:center; justify-content:space-between; }
.stat__ico{ display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem;
  border-radius:var(--radius-md); background:var(--green-50); color:var(--brand-leaf); }
.stat__ico svg{ width:1.2rem; height:1.2rem; }
.stat__val{ font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--text-3xl);
  line-height:1; letter-spacing:var(--tracking-tight); }
.stat__val .u{ font-family:var(--font-sans); font-size:var(--text-md); color:var(--text-muted); }
.stat__lbl{ font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-secondary); }

/* ---- Split (text + image) ------------------------------------------------ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev .split__media{ order:-1; }
.split__body{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; }
.split__body p{ margin:0; color:var(--text-secondary); }
.collage{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:1rem; }
.collage img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.collage img:first-child{ grid-row:span 2; aspect-ratio:3/4; }
.collage img:nth-child(2){ aspect-ratio:4/3; }
.collage img:nth-child(3){ aspect-ratio:4/3; }

/* ---- Mission / vision panel (forest green) ------------------------------- */
.panel-green{ position:relative; background:linear-gradient(135deg,var(--green-800),var(--green-950));
  color:#fff; border-radius:var(--radius-2xl); overflow:clip; padding:clamp(2.2rem,5vw,4rem); }
.panel-green__sun{ position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-400),var(--gold-600) 60%,transparent 72%); opacity:.5; }
.mv-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); }
.mv h3{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--fw-bold);
  margin:.6rem 0 .7rem; }
.mv p{ margin:0; color:rgba(255,255,255,.85); line-height:var(--leading-relaxed); }

/* ---- Cards (mirror DS Card) --------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card{ display:flex; flex-direction:column; background:var(--color-surface);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:clip;
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card__img{ position:relative; aspect-ratio:16/10; overflow:clip; background:var(--sand-100); }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out); }
.card:hover .card__img img{ transform:scale(1.05); }
.card__badge{ position:absolute; top:.85rem; left:.85rem; }
.card__body{ display:flex; flex-direction:column; gap:.55rem; padding:1.4rem 1.5rem 1.6rem; flex:1; }
.card__eyebrow{ font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--brand-leaf); }
.card__title{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-xl);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-snug); margin:0; text-wrap:balance; }
.card__text{ font-size:var(--text-base); color:var(--text-secondary); margin:0; text-wrap:pretty; }
.card__foot{ display:flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:.3rem;
  font-weight:var(--fw-semibold); font-size:var(--text-sm); color:var(--brand-primary); }
.card__foot svg{ width:1.05em; height:1.05em; transition:transform var(--duration-fast) var(--ease-out); }
.card:hover .card__foot svg{ transform:translateX(3px); }

/* ---- Area cards (icon tiles) -------------------------------------------- */
.areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.area{ background:var(--color-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:1.8rem; display:flex; flex-direction:column; gap:.85rem;
  box-shadow:var(--shadow-xs); transition:border-color var(--duration-base), box-shadow var(--duration-base); }
.area:hover{ border-color:var(--border-brand); box-shadow:var(--shadow-md); }
.area__ico{ display:inline-flex; align-items:center; justify-content:center; width:3.2rem; height:3.2rem;
  border-radius:var(--radius-md); background:var(--green-100); color:var(--brand-primary); }
.area__ico svg{ width:1.6rem; height:1.6rem; }
.area h3{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--fw-bold); margin:0; }
.area p{ margin:0; color:var(--text-secondary); font-size:var(--text-base); }

/* ---- Gallery ------------------------------------------------------------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.gallery a{ position:relative; aspect-ratio:1; border-radius:var(--radius-md); overflow:clip;
  background:var(--sand-100); }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform var(--duration-slow) var(--ease-out); }
.gallery a:hover img{ transform:scale(1.08); }

/* ---- Accordion (FAQ) ----------------------------------------------------- */
.faq{ display:flex; flex-direction:column; gap:.75rem; max-width:var(--container-text); margin-inline:auto; }
.acc{ background:var(--color-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); overflow:clip; transition:border-color var(--duration-fast); }
.acc--open{ border-color:var(--border-brand); box-shadow:var(--shadow-sm); }
.acc__q{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  text-align:left; background:none; border:none; cursor:pointer; padding:1.1rem 1.3rem;
  font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-md);
  color:var(--text-primary); }
.acc__ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:1.8rem; height:1.8rem; border-radius:50%; background:var(--green-50); color:var(--brand-leaf);
  transition:transform var(--duration-base) var(--ease-out), background var(--duration-fast); }
.acc__ico svg{ width:1.05rem; height:1.05rem; }
.acc--open .acc__ico{ transform:rotate(45deg); background:var(--brand-primary); color:#fff; }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--duration-base) var(--ease-out); }
.acc--open .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__a{ padding:0 1.3rem 1.2rem; margin:0; color:var(--text-secondary); line-height:var(--leading-relaxed); }

/* ---- Page hero (sub-pages) ---------------------------------------------- */
.pagehero{ position:relative; color:#fff; padding-block:clamp(3rem,7vw,5.5rem); overflow:clip; }
.pagehero__bg{ position:absolute; inset:0; }
.pagehero__bg img{ width:100%; height:100%; object-fit:cover; }
.pagehero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,37,15,.82), rgba(14,61,28,.74)); }
.pagehero__inner{ position:relative; max-width:48rem; }
.pagehero h1{ font-family:var(--font-display); font-weight:var(--fw-extrabold);
  font-size:var(--text-display-sm); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);
  margin:.7rem 0 .6rem; }
.pagehero p{ font-size:var(--text-lg); color:rgba(255,255,255,.88); margin:0; }
.crumb{ font-size:var(--text-sm); color:rgba(255,255,255,.7); display:flex; gap:.4rem; align-items:center; }

/* ---- Project detail rows ------------------------------------------------- */
.proj{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.proj--rev .proj__media{ order:-1; }
.proj__media{ border-radius:var(--radius-xl); overflow:clip; box-shadow:var(--shadow-md); aspect-ratio:4/3; }
.proj__media img{ width:100%; height:100%; object-fit:cover; }
.proj__body{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.proj__body h3{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--fw-bold); margin:0; }
.proj__body p{ margin:0; color:var(--text-secondary); }
.bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; width:100%; }
.bullets li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--text-secondary); }
.bullets svg{ width:1.2rem; height:1.2rem; color:var(--brand-leaf); flex:0 0 auto; margin-top:.15rem; }
.locs{ display:flex; gap:.6rem; flex-wrap:wrap; }
.loc{ display:inline-flex; align-items:center; gap:.45em; font-size:var(--text-sm); font-weight:var(--fw-medium);
  color:var(--text-secondary); background:var(--color-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill); padding:.4rem .85rem; }
.loc svg{ width:1.05em; height:1.05em; color:var(--brand-data); }

/* ---- Contact ------------------------------------------------------------- */
.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:var(--text-sm); font-weight:var(--fw-semibold); }
.field label .req{ color:var(--brand-leaf); }
.input{ font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-primary);
  background:var(--color-surface); border:2px solid var(--border-default); border-radius:var(--radius-md);
  padding:.7rem .9rem; width:100%; transition:border-color var(--duration-fast), box-shadow var(--duration-fast); }
.input:focus{ outline:none; border-color:var(--brand-leaf); box-shadow:0 0 0 3px var(--green-100); }
textarea.input{ min-height:8rem; resize:vertical; }
.contact__info{ background:var(--color-surface-sunken); border-radius:var(--radius-xl); padding:1.8rem;
  display:flex; flex-direction:column; gap:1.1rem; }
.cinfo{ display:flex; align-items:center; gap:.9rem; color:inherit; border-radius:var(--radius-md);
  transition:transform var(--duration-fast) var(--ease-out); }
a.cinfo{ cursor:pointer; }
a.cinfo:hover{ transform:translateX(3px); }
a.cinfo:hover .cinfo__ico{ background:var(--brand-primary); color:#fff; }
.cinfo__ico{ display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
  border-radius:var(--radius-md); background:var(--green-100); color:var(--brand-primary); flex:0 0 auto;
  transition:background var(--duration-fast), color var(--duration-fast); }
.cinfo__ico--wa{ background:#25D366; color:#fff; }
a.cinfo:hover .cinfo__ico--wa{ background:#1da851; color:#fff; }
.cinfo__ico svg{ width:1.25rem; height:1.25rem; }
.cinfo b{ display:block; font-size:var(--text-xs); font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:var(--tracking-wide); color:var(--text-muted); }
.cinfo span{ font-family:var(--font-mono); font-size:var(--text-base); color:var(--text-primary); }
.toast{ display:flex; align-items:center; gap:.7rem; background:var(--success-bg); color:var(--green-800);
  border-radius:var(--radius-md); padding:.9rem 1.1rem; font-weight:var(--fw-semibold); }
.toast svg{ width:1.25rem; height:1.25rem; }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band{ position:relative; background:linear-gradient(120deg,var(--green-700),var(--green-900));
  color:#fff; border-radius:var(--radius-2xl); overflow:clip; padding:clamp(2.5rem,5vw,3.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band__sun{ position:absolute; left:-40px; bottom:-80px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-400),var(--gold-600) 60%,transparent 72%); opacity:.4; }
.cta-band h2{ position:relative; font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--text-3xl); line-height:1.1; margin:0; max-width:34rem; }

/* ---- Footer -------------------------------------------------------------- */
.ftr{ background:var(--green-950); color:rgba(255,255,255,.7); padding-block:3.5rem 2rem; }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.12); }
.ftr__about{ display:flex; flex-direction:column; gap:1.1rem; max-width:28rem; }
.ftr__word{ font-family:var(--font-display); font-weight:var(--fw-extrabold); font-size:var(--text-2xl);
  color:#fff; letter-spacing:var(--tracking-tight); }
.ftr__word b{ color:var(--gold-400); font-weight:inherit; }
.ftr h4{ color:#fff; font-size:var(--text-sm); text-transform:uppercase; letter-spacing:var(--tracking-wide);
  margin:0 0 1rem; }
.ftr__links{ display:flex; flex-direction:column; gap:.7rem; }
.ftr__links a{ display:inline-flex; align-items:center; gap:.55rem; color:rgba(255,255,255,.7);
  font-size:var(--text-base); cursor:pointer; transition:color var(--duration-fast); }
.ftr__links a:hover{ color:var(--gold-400); }
.ftr__links a svg{ width:1.05rem; height:1.05rem; flex:0 0 auto; opacity:.85; }
.ftr__bottom{ display:flex; justify-content:space-between; gap:1rem; padding-top:1.5rem; font-size:var(--text-sm);
  flex-wrap:wrap; }

/* ---- Reveal-on-scroll ---------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
@media print{ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 940px){
  .hdr__nav{ display:none; }
  .hdr__burger{ display:inline-flex; }
  .hdr__cta .btn{ display:none; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .split, .mv-grid, .proj, .contact{ grid-template-columns:1fr; }
  .split--rev .split__media, .proj--rev .proj__media{ order:0; }
  .cards, .areas{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .ftr__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .datos{ grid-template-columns:1fr; }
}

/* ---- Floating WhatsApp button (all pages) -------------------------------- */
.wa-fab{ position:fixed; right:clamp(1rem,3vw,1.8rem); bottom:clamp(1rem,3vw,1.8rem); z-index:120;
  display:inline-flex; align-items:center; justify-content:center; width:3.6rem; height:3.6rem;
  border-radius:50%; background:#25D366; color:#fff; box-shadow:0 10px 26px rgba(37,211,102,.45);
  cursor:pointer; transition:transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast);
  animation:waIn .5s var(--ease-spring) .6s both; }
.wa-fab:hover{ transform:scale(1.08); box-shadow:0 14px 32px rgba(37,211,102,.55); }
.wa-fab:active{ transform:scale(.96); }
.wa-fab svg{ position:relative; z-index:1; }
.wa-fab__pulse{ position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:0;
  animation:waPulse 2.6s var(--ease-out) infinite; }
@keyframes waIn{ from{ opacity:0; transform:scale(.4) translateY(12px);} to{ opacity:1; transform:scale(1) translateY(0);} }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.55;} 70%,100%{ transform:scale(1.9); opacity:0;} }
@media (prefers-reduced-motion: reduce){
  .wa-fab{ animation:none; } .wa-fab__pulse{ animation:none; display:none; }
}

/* ---- Datos (live data page) ---------------------------------------------- */
.live{ display:inline-flex; align-items:center; gap:.45em; font-size:var(--text-xs); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--green-700);
  background:var(--green-100); border-radius:var(--radius-pill); padding:.35rem .7rem; white-space:nowrap; }
.live__dot{ width:.5em; height:.5em; border-radius:50%; background:var(--success); animation:livePulse 2s var(--ease-in-out) infinite; }
@keyframes livePulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(1.4);} }
@media (prefers-reduced-motion: reduce){ .live__dot{ animation:none; } }

.datos{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
.panel-card{ background:var(--color-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:clip; }
.datos__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.5rem; border-bottom:1px solid var(--border-subtle); }
.datos__head h2{ margin:.3rem 0 0; }
.datos__stations{ display:flex; flex-direction:column; }
.dst{ display:flex; align-items:center; gap:.9rem; padding:1rem 1.5rem; border-bottom:1px solid var(--ink-100); }
.dst:last-child{ border-bottom:none; }
.dst__dot{ width:.65rem; height:.65rem; border-radius:50%; flex:0 0 auto; }
.dst__main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.dst__name{ font-weight:var(--fw-semibold); font-size:var(--text-base); }
.dst__city{ font-size:var(--text-xs); color:var(--text-muted); font-family:var(--font-mono); }
.dst__temp{ font-family:var(--font-mono); font-size:var(--text-base); color:var(--text-secondary); }
.dst__pm{ font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--text-lg); min-width:5.5rem; text-align:right; }
.dst__pm .u{ font-family:var(--font-sans); font-size:var(--text-xs); color:var(--text-muted); }
.aqi{ display:inline-flex; align-items:center; gap:.4em; font-size:var(--text-xs); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.04em; padding:.3em .7em; border-radius:var(--radius-pill); white-space:nowrap; }

.datos__cta{ position:relative; background:linear-gradient(135deg,var(--green-800),var(--green-950)); color:#fff;
  border-radius:var(--radius-lg); padding:1.8rem; display:flex; flex-direction:column; gap:.9rem;
  align-items:flex-start; overflow:clip; }
.datos__cta-sun{ position:absolute; right:-50px; top:-50px; width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-400),var(--gold-600) 60%,transparent 72%); opacity:.4; }
.datos__cta > svg{ width:2.2rem; height:2.2rem; color:var(--gold-400); position:relative; }
.datos__cta h3{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--fw-bold); margin:0; position:relative; }
.datos__cta p{ margin:0; color:rgba(255,255,255,.82); line-height:var(--leading-relaxed); position:relative; }
.datos__cta .btn{ position:relative; }
.datos__link{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold-400); font-weight:var(--fw-semibold);
  font-size:var(--text-sm); cursor:pointer; position:relative; }
.datos__link svg{ width:1.05em; height:1.05em; }
.datos__link:hover{ color:#fff; }
.datos__refresh{ display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem;
  border:1px solid var(--border-subtle); background:var(--color-surface); color:var(--brand-primary);
  border-radius:var(--radius-md); cursor:pointer; transition:background var(--duration-fast), border-color var(--duration-fast); }
.datos__refresh:hover{ background:var(--green-50); border-color:var(--border-brand); }
.datos__refresh:disabled{ opacity:.6; cursor:default; }
.datos__refresh svg{ width:1.1rem; height:1.1rem; }
.datos__refresh svg.spin{ animation:dataSpin .8s linear infinite; }
@keyframes dataSpin{ to{ transform:rotate(360deg); } }
.datos__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.95rem 1.5rem; border-top:1px solid var(--border-subtle); background:var(--color-surface-sunken);
  font-size:var(--text-sm); color:var(--text-muted); }
.datos__foot span{ display:inline-flex; align-items:center; gap:.45rem; }
.datos__foot svg{ width:1.05em; height:1.05em; }
.datos__attr{ font-size:var(--text-xs); color:rgba(255,255,255,.6); position:relative; margin-top:.2rem; }

/* ---- OpenSenseMap embedded map ------------------------------------------- */
.osm-map{ border:1px solid var(--border-subtle); border-radius:var(--radius-lg); overflow:clip;
  box-shadow:var(--shadow-sm); background:var(--color-surface); }
.osm-map__frame{ width:100%; height:clamp(380px,56vh,560px); border:0; display:block; background:var(--ink-100); }
.osm-map .leaflet-container{ font-family:var(--font-sans); }
.osm-map .leaflet-popup-content{ margin:.7rem .9rem; line-height:1.5; }
.osm-map__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1.3rem; border-top:1px solid var(--border-subtle); background:var(--color-surface-sunken);
  font-size:var(--text-sm); color:var(--text-muted); }
.osm-map__bar span{ display:inline-flex; align-items:center; gap:.45rem; }
.osm-map__bar svg{ width:1.05em; height:1.05em; }
.osm-map__bar a{ display:inline-flex; align-items:center; gap:.4rem; color:var(--brand-primary);
  font-weight:var(--fw-semibold); cursor:pointer; }
.osm-map__bar a:hover{ color:var(--brand-primary-strong); }
.osm-map__bar a svg{ width:1.05em; height:1.05em; }