/* ─── TOKENS ─── */
:root{
  --green:  #1a4a2e;
  --green2: #2d6e47;
  --green3: #3a8a5a;
  --green-bright: #00a651;
  --w:      #ffffff;
  --off:    #f8f7f4;
  --cream:  #f2efe8;
  --ink:    #0d0d0b;
  --body:   #3a3a38;
  --muted:  #7a7872;
  --border: #dedad0;
  --serif:  'Fraunces', Georgia, serif;
  --sans:   'Plus Jakarta Sans', sans-serif;
  --ease:   cubic-bezier(.215,.61,.355,1);
  --ease2:  cubic-bezier(.16,1,.3,1);
  --ease3:  cubic-bezier(.34,1.56,.64,1);  /* spring */
  --tipo-articulo: #00a651;   /* verde brillante */
  --tipo-podcast:  #2563c4;   /* azul */
  --tipo-noticia:  #c4521a    /* terracota/naranja */
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);font-weight:300;background:var(--w);color:var(--green);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;object-fit:cover}
::selection{background:var(--green);color:var(--w)}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-thumb{background:var(--green2)}



/* ── NAV mejorado ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:68px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px) saturate(160%);
  display:flex;align-items:center;
  padding:0 48px 0 0;
  border-bottom:none;
  transition:background .4s,box-shadow .4s,height .4s var(--ease2)
}
#nav.scrolled{
  background:rgba(255,255,255,.98);
  height:60px
}
.nav-logo-text{
  font-family:var(--serif);font-size:14px;
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 14,'wght' 400;
  letter-spacing:.4px;white-space:nowrap;
  padding:0 36px;flex-shrink:0;
  border-right:1px solid rgba(26,74,46,.1)
}
.nav-logo-text span{color:var(--green2)}
.nav-links{
  display:flex;align-items:center;list-style:none;
  margin-left:auto;gap:0;height:68px
}
.nav-links li{position:relative}
.nav-links li a{
  display:flex;align-items:center;height:68px;
  padding:0 20px;
  font-size:12px;font-weight:300;
  color:var(--green);letter-spacing:.5px;
  transition:color .25s;white-space:nowrap;
  gap:5px;position:relative
}
/* nav: hover solo color */
.nav-links li a:hover{color:var(--green2)}
.nav-links li a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;transition:transform .3s var(--ease2)}
.nav-links li a:hover svg{transform:rotate(180deg)}
.nav-search{
  width:42px;height:42px;display:flex;align-items:center;
  justify-content:center;border:none;background:transparent;
  cursor:pointer;color:var(--green);margin-left:8px;
  transition:color .25s,background .25s;border-radius:50%
}
.nav-search:hover{color:var(--green-bright);background:rgba(0,166,81,.08)}
.nav-search svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5}
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;margin-left:16px}
.nav-ham span{width:22px;height:1.5px;background:var(--green);display:block;transition:.3s}

/* ── HERO mejorado ── */
#hero{
  padding-top:68px;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--w);
  position:relative;overflow:hidden
}
/* Imagen con parallax JS + transición de zoom más suave */
.hero-img-col{
  position:relative;overflow:hidden;
  min-height:calc(100vh - 68px)
}
.hero-img-col img{
  width:100%;height:110%;  /* extra 10% para el parallax */
  object-fit:cover;object-position:center 20%;
  filter:grayscale(100%) brightness(1.02) contrast(1.08);
  will-change:transform;
  /* Entrada: invisible + zoom → aparece cuando el loader termina de barrer */
  opacity:0;
  transform:scale(1.06) translateY(0);
  animation:heroImgIn 1.1s var(--ease2) 2.0s forwards;
  transition:filter 1.5s ease
}
@keyframes heroImgIn{
  0%  {opacity:0;transform:scale(1.06) translateY(0)}
  100%{opacity:1;transform:scale(1.0)  translateY(0)}
}
/* ── ANIMACIÓN HERO ────────────────────────────────────────────
   FASE 1 (0.2s–1.3s): barra reveladora viaja izq→der.
     La barra es un bloque de width=22px (=ancho de barra final)
     que empieza en left:-22px y viaja hasta left=100%,
     "barriendo" la imagen y terminando justo en el borde derecho.
   FASE 2 (1.3s+): en ese punto, la barra derecha nace desde ahí
     y crece hacia abajo desde la posición top donde terminó la barra.
   El efecto: parecen ser el mismo objeto continuo.
─────────────────────────────────────────────────────────────── */

  100%{ clip-path:inset(0 0% 0 100%) }
}

  100%{ left:100% }
}

/* Barra derecha — crece desde el fondo hacia arriba */
.hero-scroll-bar{
  width:22px;
  background:var(--green-bright);
  position:absolute;
  right:0;bottom:0;       /* ancla en esquina INFERIOR derecha */
  height:0;
  z-index:5;
  transform-origin:bottom center;
  animation:barGrowUp 0.7s cubic-bezier(.77,0,.18,1) 3.2s both
}
@keyframes barGrowUp{
  0%  { height:0 }
  100%{ height:clamp(110px,17vh,160px) }
}

/* Flecha: pegada al fondo, dentro de la barra */
.hero-scroll-arrow{
  position:absolute;
  right:0;bottom:0;
  z-index:8;
  width:22px;
  height:clamp(110px,17vh,160px);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:10px;
  text-decoration:none;
  cursor:pointer;
  animation:arrowAppear .4s ease 3.6s both
}
@keyframes arrowAppear{from{opacity:0}to{opacity:1}}
.hero-scroll-arrow svg{
  width:13px;height:13px;
  stroke:var(--w);fill:none;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  animation:arrowBounce 2s ease-in-out infinite 4.0s
}
@keyframes arrowBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}
/* Columna de texto */
.hero-text-col{
  padding:56px 6% 56px 5%;
  display:flex;flex-direction:column;
  justify-content:center;
  position:relative
}
.hero-eyebrow{
  font-size:10px;letter-spacing:4px;
  text-transform:uppercase;color:var(--green2);
  font-weight:400;margin-bottom:28px;
  display:flex;align-items:center;gap:14px;
  opacity:0;animation:htextIn .55s var(--ease2) 2.1s both
}
.hero-eyebrow::before{content:'';width:20px;height:1px;background:var(--green-bright)}
/* Título: cada línea se revela con clip-path individual */
.hero-title{
  font-family:var(--serif);
  font-size:clamp(44px,6.2vw,80px);
  line-height:1.03;color:var(--green);
  font-weight:400;
  font-variation-settings:'opsz' 144,'wght' 400;
  margin-bottom:28px
}
.hero-title .t-line{
  overflow:hidden;display:block;
  /* cada línea envuelta para el reveal */
}
.hero-title .t-line span{
  display:block;
  transform:translateY(105%);
  animation:lineRise .7s var(--ease2) both
}
.hero-title .t-line:nth-child(1) span{animation-delay:2.25s}
.hero-title .t-line:nth-child(2) span{animation-delay:2.4s}
.hero-title .t-line:nth-child(3) span{animation-delay:2.55s}
@keyframes lineRise{to{transform:translateY(0)}}
.hero-p{
  font-size:15px;font-weight:300;
  color:var(--body);line-height:1.88;
  max-width:460px;margin-bottom:40px;
  opacity:0;animation:htextIn .55s var(--ease2) 2.75s both
}
/* CTA mejorado: pulse en la línea izquierda */
.hero-cta{
  display:inline-flex;align-items:center;gap:14px;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--green);font-weight:400;
  border-left:3px solid var(--green-bright);
  padding-left:16px;
  transition:gap .35s var(--ease2),color .25s,border-color .25s;
  opacity:0;animation:htextIn .55s var(--ease2) 3.0s both;
  position:relative
}
.hero-cta::before{
  content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px;
  background:var(--green);transform:scaleY(0);transform-origin:bottom;
  transition:transform .4s var(--ease2)
}
.hero-cta:hover::before{transform:scaleY(1)}
.hero-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;transition:transform .35s var(--ease2)}
.hero-cta:hover{color:var(--green2);gap:20px;border-color:var(--green)}
.hero-cta:hover svg{transform:translateX(6px)}
@keyframes htextIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ══════════════════════════════════════
   RESTO DE SECCIONES — A&O style
══════════════════════════════════════ */
.section-w{max-width:1360px;margin:0 auto;padding:0 5%}

/* ── MARQUEE mejorado ── */
.marquee-bar{
  background:var(--green);overflow:hidden;
  height:72px;display:flex;align-items:center;
  border-top:1px solid rgba(255,255,255,.06)
}
.marquee-bar:hover .marquee-track{animation-play-state:paused}
.marquee-track{
  display:flex;width:max-content;
  animation:marquee 32s linear infinite;
  height:100%;align-items:center
}
.marquee-item{
  display:flex;align-items:center;gap:16px;
  padding:0 52px;border-right:1px solid rgba(255,255,255,.1);
  height:72px;white-space:nowrap;
  transition:background .3s
}
.marquee-item:hover{background:rgba(255,255,255,.04)}
.mi-val{
  font-family:var(--serif);font-size:22px;
  color:var(--green-bright);font-weight:300;
  font-variation-settings:'opsz' 36,'wght' 300;
  transition:color .3s
}
.marquee-item:hover .mi-val{color:var(--w)}
.mi-label{font-size:11px;font-weight:300;color:rgba(255,255,255,.42);max-width:175px;line-height:1.4}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── Etiquetas ── */
.lbl{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--green2);font-weight:400;display:flex;align-items:center;gap:12px;margin-bottom:20px}
.lbl::before{content:'';width:22px;height:1.5px;background:var(--green-bright)}
.lbl-w{color:rgba(255,255,255,.55)}.lbl-w::before{background:rgba(255,255,255,.5)}

/* Títulos */
.h2{font-family:var(--serif);font-size:clamp(36px,4.5vw,58px);line-height:1.05;font-weight:400;font-variation-settings:'opsz' 72,'wght' 400;color:var(--green)}
.h2 em{font-style:italic;color:var(--green2)}
.h2-w{color:var(--w)}.h2-w em{color:rgba(255,255,255,.65)}
.h3{font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);line-height:1.2;font-weight:400;color:var(--green);font-variation-settings:'opsz' 36,'wght' 400}

/* CTA links */
.cta-lnk{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:400;color:var(--green);transition:gap .3s,color .25s;border-left:3px solid var(--green-bright);padding-left:14px}
.cta-lnk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;transition:transform .3s var(--ease2)}
.cta-lnk:hover{color:var(--green2);gap:16px}.cta-lnk:hover svg{transform:translateX(4px)}
.cta-lnk-w{color:rgba(255,255,255,.75);border-left-color:rgba(255,255,255,.5)}.cta-lnk-w:hover{color:var(--w)}

/* ── REVEAL — clip-path cinematográfico ── */
.rv{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:opacity .85s var(--ease2),clip-path .85s var(--ease2),transform .85s var(--ease2)
}
.rv.on{opacity:1;clip-path:inset(0 0 0% 0)}
/* Para elementos que vienen del lateral, mantenemos translateX */
.rvl{opacity:0;transform:translateX(-32px);transition:opacity .85s var(--ease2),transform .85s var(--ease2)}
.rvl.on{opacity:1;transform:translateX(0)}
.rvr{opacity:0;transform:translateX(32px);transition:opacity .85s var(--ease2),transform .85s var(--ease2)}
.rvr.on{opacity:1;transform:translateX(0)}
/* Delays escalonados */
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.32s}.d4{transition-delay:.44s}.d5{transition-delay:.56s}

/* ── NOSOTROS — estilo A&O About Us ─────────────────────────────
   Grid: columna label izq (22%) | columna contenido derecha (78%)
   Fondo blanco limpio, sin foto, título ENORME serif
──────────────────────────────────────────────────────────────── */
#nosotros{
  background:var(--w);overflow:hidden;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative
}
.nos-outer{
  display:grid;
  grid-template-columns:22% 1fr;
  gap:0;
  padding:10vh 6% 10vh 5%;
  align-items:start;
  max-width:1440px;
  margin:0 auto;
  width:100%
}
/* Indicador discreto de siguiente sección */
.nos-scroll-hint{
  position:absolute;
  bottom:32px;left:50%;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:.35;transition:opacity .3s;text-decoration:none
}
.nos-scroll-hint:hover{opacity:.7}
.nos-scroll-hint span{
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--green);font-weight:400
}
.nos-scroll-hint-line{
  width:1px;height:40px;background:var(--green);
  position:relative;overflow:hidden
}
.nos-scroll-hint-line::after{
  content:'';position:absolute;top:-100%;left:0;
  width:100%;height:100%;background:var(--green-bright);
  animation:lineDown 2s ease-in-out infinite
}
@keyframes lineDown{
  0%{top:-100%}100%{top:100%}
}
/* Columna izquierda: solo el label */
.nos-label-col{
  padding-top:6px   /* alinea visualmente con la cap-height del título */
}
.nos-label{
  font-size:11px;letter-spacing:3px;
  text-transform:uppercase;
  color:var(--green);font-weight:400
}
/* Columna derecha: título enorme + cta */
.nos-content-col{display:flex;flex-direction:column;gap:0}
/* Título A&O: muy grande, serif, ocupa casi todo el ancho derecho */
.nos-title{
  font-family:var(--serif);
  font-size:clamp(42px,5.8vw,78px);
  line-height:1.08;
  color:var(--green);
  font-weight:400;
  font-variation-settings:'opsz' 144,'wght' 400;
  margin-bottom:48px;
  max-width:820px
}
.nos-title em{font-style:italic}
/* CTA — idéntico al de la imagen: línea vertical verde + texto + flecha */
.nos-cta{
  display:inline-flex;align-items:center;gap:16px;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--green);font-weight:400;
  border-left:3px solid var(--green-bright);
  padding-left:18px;padding-top:10px;padding-bottom:10px;
  position:relative;overflow:hidden;
  transition:gap .35s var(--ease2),color .3s
}
/* fill verde sube desde abajo */
.nos-cta::after{
  content:'';position:absolute;inset:0;
  background:var(--green);
  transform:translateY(101%);
  transition:transform .42s var(--ease2);
  z-index:0
}
.nos-cta:hover::after{transform:translateY(0)}
.nos-cta:hover{color:var(--w);gap:22px}
.nos-cta>span,.nos-cta>svg{position:relative;z-index:1}
.nos-cta svg{
  width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;
  transition:transform .35s var(--ease2)
}
.nos-cta:hover svg{transform:translateX(5px)}

/* Stats en fila debajo — separados por línea horizontal */
.nos-stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
  margin-top:72px;padding-top:0;
  grid-column:1 / -1   /* ocupa ambas columnas */
}
.ns{padding:24px 0;border-right:1px solid var(--border);transition:background .25s}
.ns:last-child{border-right:none}
.ns:hover{background:rgba(26,74,46,.02)}
.ns-n{
  font-family:var(--serif);font-size:clamp(24px,2.8vw,36px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 48,'wght' 400;line-height:1;
  transition:color .3s
}
.ns:hover .ns-n{color:var(--green-bright)}
.ns-l{font-size:11px;font-weight:300;color:var(--muted);margin-top:5px;line-height:1.5;padding-right:12px}

/* ── SERVICIOS — layout imagen A&O ──────────────────────────────
   Fondo blanco. Grid: cuadro verde sticky izq (38%) | lista der (62%)
   Lista: título serif grande + descripción + flecha, con líneas finas
──────────────────────────────────────────────────────────────── */
#servicios{background:var(--off);overflow:hidden}
.srv-outer{
  display:grid;
  grid-template-columns:38% 1fr;
  gap:0;align-items:start;
  max-width:1440px;margin:0 auto;padding:0 5%
}

/* ── Cuadro verde sticky izquierda ── */
.srv-sticky{
  position:sticky;top:calc(68px + 40px);
  padding:88px 0 88px 0;
  align-self:start
}
.srv-box{
  background:var(--green);
  padding:40px 36px;
  position:relative;overflow:hidden
}
.srv-box::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;background:var(--green-bright)
}
.srv-box-label{
  font-size:10px;letter-spacing:3.5px;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:400;margin-bottom:20px;display:block
}
.srv-box-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.2vw,42px);
  color:var(--w);font-weight:400;
  font-variation-settings:'opsz' 72,'wght' 400;
  line-height:1.15;margin-bottom:20px
}
.srv-box-desc{
  font-size:13px;font-weight:300;
  color:rgba(255,255,255,.55);line-height:1.82;
  margin-bottom:32px
}
.srv-box-cta{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--green-bright);font-weight:400;
  border-left:2px solid var(--green-bright);padding-left:12px;
  text-decoration:none;
  transition:gap .3s var(--ease2),color .25s
}
.srv-box-cta:hover{gap:18px;color:var(--w)}
.srv-box-cta svg{
  width:13px;height:13px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;
  transition:transform .3s var(--ease2)
}
.srv-box-cta:hover svg{transform:translateX(4px)}

/* ── Lista de servicios — acordeón compacto ── */
.srv-list-col{padding:88px 0 88px 56px}
.srv-items{display:flex;flex-direction:column}

/* Fila del acordeón */
.srv-i{
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden
}
.srv-i:first-child{border-top:1px solid var(--border)}

/* Header del acordeón: número + título + ícono — todo clickeable */
.srv-i-hd{
  display:grid;
  grid-template-columns:40px 1fr 32px;
  align-items:center;gap:0;
  padding:18px 0;
  cursor:pointer;
  user-select:none;
  transition:background .22s var(--ease2)
}
.srv-i-hd:hover{background:rgba(26,74,46,.03)}
.srv-i.open .srv-i-hd{background:rgba(26,74,46,.04)}

/* Número itálico pequeño — A&O style */
.srv-i-num{
  font-family:var(--serif);font-style:italic;
  font-size:11px;color:var(--muted);font-weight:300;
  font-variation-settings:'opsz' 9,'wght' 300;
  transition:color .25s
}
.srv-i.open .srv-i-num{color:var(--green-bright)}

/* Título compacto — mucho más pequeño que antes */
.srv-i-title{
  font-family:var(--serif);
  font-size:clamp(15px,1.6vw,19px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 24,'wght' 400;
  line-height:1.25;
  transition:color .25s
}
.srv-i-hd:hover .srv-i-title{color:var(--green2)}
.srv-i.open .srv-i-title{color:var(--green2)}

/* Ícono + / × */
.srv-i-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  flex-shrink:0;
  transition:background .3s var(--ease2),border-color .3s,transform .4s var(--ease3)
}
.srv-i-icon svg{
  width:10px;height:10px;stroke:var(--green);fill:none;
  stroke-width:1.8;stroke-linecap:round;
  transition:transform .4s var(--ease3),stroke .25s
}
.srv-i.open .srv-i-icon{
  background:var(--green);border-color:var(--green)
}
.srv-i.open .srv-i-icon svg{
  stroke:var(--w);
  transform:rotate(45deg)
}

/* Panel desplegable */
.srv-i-panel{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease2)
}
.srv-i.open .srv-i-panel{max-height:160px}

/* Contenido del panel */
.srv-i-body{
  display:grid;grid-template-columns:40px 1fr auto;
  gap:0;padding:0 0 20px;align-items:start
}
.srv-i-desc{
  font-size:13px;font-weight:300;
  color:var(--body);line-height:1.82;
  max-width:520px
}
/* Link "ver más" dentro del panel */
.srv-i-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--green2);font-weight:400;
  text-decoration:none;margin-top:10px;
  transition:gap .25s var(--ease2),color .22s;
  white-space:nowrap;align-self:start;padding-top:2px;
  border-left:2px solid var(--green-bright);padding-left:10px
}
.srv-i-link:hover{gap:12px;color:var(--green)}
.srv-i-link svg{
  width:10px;height:10px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;
  transition:transform .25s var(--ease2)
}
.srv-i-link:hover svg{transform:translateX(3px)}

/* ── BANDA FOTO mejorada ── */
.fw-band{position:relative;height:440px;overflow:hidden}
.fw-band img{
  width:100%;height:130%;
  object-fit:cover;object-position:center 40%;
  filter:grayscale(90%) brightness(.8) contrast(1.1);
  will-change:transform;transform:translateY(-10%)
}
.fw-band-ov{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(10,32,20,.55) 0%,rgba(10,32,20,.32) 100%)
}
.fw-band-content{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 8%;text-align:center
}
.fw-quote{
  font-family:var(--serif);
  font-size:clamp(22px,4vw,50px);
  color:var(--w);font-weight:400;
  font-variation-settings:'opsz' 72,'wght' 400;
  line-height:1.22;max-width:860px;
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease2),transform .9s var(--ease2)
}
.fw-band.on .fw-quote{opacity:1;transform:translateY(0)}
.fw-attr{
  font-size:11px;letter-spacing:3.5px;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-top:28px;font-weight:300;
  opacity:0;transition:opacity .9s var(--ease2) .3s
}
.fw-band.on .fw-attr{opacity:1}

/* ── ÁREAS DE PRÁCTICA — layout A&O "Our expertise" ────────────
   Fondo blanco.
   Bloque superior: título + línea verde + párrafo
   Foto B&W full-width
   Subtítulo 2 cols: título grande izq | descripción der
   Grid 2 cols: nombre área  →  |  nombre área  →
   Separados por líneas finas. Sin sticky, sin cards.
   Hover: fila resalta en verde muy suave, flecha se desplaza
──────────────────────────────────────────────────────────────── */
#areas{background:var(--w);overflow:hidden}
.ar-wrap{max-width:1380px;margin:0 auto;padding:0 5%}

/* Bloque superior: título + línea verde + párrafo */
.ar-top{padding:80px 0 56px}
.ar-top-title{
  font-family:var(--serif);
  font-size:clamp(38px,5vw,66px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 144,'wght' 400;
  line-height:1.04;margin-bottom:28px
}
/* Línea verde — como en la imagen: fina, full-width */
.ar-top-line{
  height:2px;background:var(--green);
  margin-bottom:28px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease2) .2s
}
.ar-top-line.on{transform:scaleX(1)}
.ar-top-desc{
  font-size:15px;font-weight:300;
  color:var(--body);line-height:1.85;
  max-width:680px
}

/* Foto B&W full-width */
.ar-photo-band{
  width:100%;aspect-ratio:16/6;overflow:hidden;
  position:relative;margin-bottom:0
}
.ar-photo-band img{
  width:100%;height:100%;object-fit:cover;object-position:center 35%;
  filter:grayscale(88%) brightness(.92) contrast(1.08);
  transition:transform 1.2s var(--ease2)
}
.ar-photo-band:hover img{transform:scale(1.02)}

/* Subtítulo 2 columnas */
.ar-subtitle-block{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;padding:64px 0 56px;align-items:start
}
.ar-subtitle-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.8vw,50px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 72,'wght' 400;
  line-height:1.12;padding-right:8%
}
.ar-subtitle-desc{
  font-size:14px;font-weight:300;
  color:var(--body);line-height:1.88;
  padding-top:8px;max-width:480px
}

/* Grid de áreas: 2 columnas puras */
.ar-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--border);
  margin-bottom:80px
}

/* Cada área: fila con nombre + flecha */
.ar-row-item{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:22px 0;
  border-bottom:1px solid var(--border);
  text-decoration:none;
  position:relative;
  overflow:hidden;
  /* Separador vertical entre las dos columnas */
  transition:background .2s var(--ease2),padding-left .25s var(--ease2)
}
/* Columna derecha: separador vertical izquierdo */
.ar-grid .ar-row-item:nth-child(even){
  padding-left:40px;
  border-left:1px solid var(--border)
}
/* Columna izquierda: padding der para separar del divisor */
.ar-grid .ar-row-item:nth-child(odd){
  padding-right:40px
}

/* Hover: fondo verde muy sutil */
.ar-row-item:hover{
  background:rgba(26,74,46,.03);
  padding-left:8px
}
.ar-grid .ar-row-item:nth-child(even):hover{
  padding-left:48px
}

/* Nombre del área — serif, tamaño A&O */
.ar-row-name{
  font-family:var(--serif);
  font-size:clamp(17px,1.9vw,22px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 36,'wght' 400;
  line-height:1.2;
  transition:color .22s
}
.ar-row-item:hover .ar-row-name{color:var(--green2)}

/* Flecha → verde */
.ar-row-arr{
  font-size:18px;color:var(--green);
  flex-shrink:0;margin-left:16px;
  transition:transform .32s var(--ease2),color .22s;
  /* La flecha es verde brillante en A&O */
  color:var(--green-bright)
}
.ar-row-item:hover .ar-row-arr{
  transform:translateX(6px)
}

/* ── EQUIPO ── */
#equipo{background:var(--w);overflow:hidden}
.eq-outer{display:grid;grid-template-columns:1fr 44%;min-height:540px}
.eq-col{padding:80px 5% 80px 6%;display:flex;flex-direction:column;justify-content:center}
.eq-quote{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.9vw,23px);color:var(--body);line-height:1.65;margin:22px 0 36px;font-weight:400;font-variation-settings:'opsz' 36,'wght' 400;padding-left:18px;border-left:3px solid var(--green-bright)}
.eq-nums{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:32px}
.eq-stat{padding:22px 24px 22px 0}

.eq-n{font-family:var(--serif);font-size:clamp(34px,4.2vw,52px);color:var(--green);font-weight:400;font-variation-settings:'opsz' 72,'wght' 400;line-height:1}
.eq-l{font-size:11px;font-weight:300;color:var(--muted);margin-top:6px;line-height:1.4}
.eq-photo{position:relative;overflow:hidden}
.eq-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(75%) brightness(1.04) contrast(1.05);transition:transform 1.2s var(--ease2)}
.eq-photo:hover img{transform:scale(1.03)}
.eq-photo-ov{position:absolute;inset:0;background:linear-gradient(to left,transparent 55%,rgba(255,255,255,.04))}

/* ── DIGITALES ── */
#digitales{background:var(--cream);padding:80px 5%}
.dig-w{max-width:1260px;margin:0 auto}
.dig-hd{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:24px;flex-wrap:wrap}
.dig-sub{font-size:14px;font-weight:300;line-height:1.88;color:var(--body);max-width:360px}
.dig-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.dig-card{background:var(--cream);padding:36px 28px;transition:background .3s}
.dig-card:hover{background:var(--w)}
.dig-card-n{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--muted);font-weight:300;font-variation-settings:'opsz' 9,'wght' 300;margin-bottom:20px;display:block}
.dig-card h3{font-family:var(--serif);font-size:clamp(18px,2vw,24px);color:var(--green);font-weight:400;font-variation-settings:'opsz' 24,'wght' 400;line-height:1.28;margin-bottom:12px}
.dig-card p{font-size:13px;font-weight:300;line-height:1.82;color:var(--body)}

/* ── BLOG — layout exacto A&O ──────────────────────────────────
   Header: título serif izq + link "ver todo" der, en misma línea
   Grid:   foto grande izq (50%) | 3 items apilados der
   Items der: foto pequeña (40% del ancho der) + texto + meta pie
   Meta pie: | TIPO en mayúsculas          fecha
──────────────────────────────────────────────────────────────── */
#blog{background:var(--w);padding:80px 5% 96px}
.blog-w{max-width:1380px;margin:0 auto}

/* Header — misma línea, sin borde inferior */
.blog-hd{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:32px;gap:24px;flex-wrap:wrap
}
.blog-hd-title{
  font-family:var(--serif);
  font-size:clamp(26px,3.2vw,42px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 72,'wght' 400;
  line-height:1.1
}

/* Grid principal — sin borde exterior, solo separadores internos */
.blog-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:none
}

/* ── Artículo destacado izquierda ── */
.blog-feat{
  display:block;overflow:hidden;
  border-right:none;
  text-decoration:none;padding-bottom:0
}
.blog-feat-img{
  overflow:hidden;position:relative;
  /* Foto que ocupa TODO el ancho izquierdo, altura proporcional */
  aspect-ratio:4/3
}
.blog-feat-img img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(85%) brightness(1.02) contrast(1.08);
  transition:transform 1.1s var(--ease2)
}
.blog-feat:hover .blog-feat-img img{transform:scale(1.03)}
.blog-feat-body{padding:18px 0 24px}
.blog-feat-cat{
  font-size:11px;font-weight:300;
  color:var(--green2);margin-bottom:10px
}
.blog-feat-title{
  font-family:var(--serif);
  font-size:clamp(18px,2.2vw,26px);
  color:var(--green);line-height:1.28;
  font-weight:400;font-variation-settings:'opsz' 48,'wght' 400;
  transition:color .25s;margin-bottom:20px
}
.blog-feat:hover .blog-feat-title{color:var(--green2)}
/* Meta pie — idéntico a la imagen */
.blog-feat-meta{
  display:flex;justify-content:space-between;align-items:center;
  border-top:none;padding-top:14px
}
.blog-meta-type{
  display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--green);font-weight:400
}
.blog-meta-type::before{
  content:'';width:3px;height:16px;
  background:var(--green-bright);flex-shrink:0
}
.blog-meta-date{font-size:11px;color:var(--muted);font-weight:300}

/* ── Columna derecha: 3 items apilados ── */
.blog-col-r{display:flex;flex-direction:column;padding-left:40px}
.blog-item-r{
  display:grid;
  /* foto izq + texto der — ratio del item */
  grid-template-columns:42% 1fr;
  gap:0;
  border-bottom:none;
  text-decoration:none;overflow:hidden;
  transition:background .22s;flex:1
}
.blog-item-r:last-child{border-bottom:none}
.blog-item-r:hover{background:rgba(26,74,46,.025)}
.blog-item-img{
  overflow:hidden;position:relative;
  aspect-ratio:4/3
}
.blog-item-img img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(85%) brightness(1.02) contrast(1.08);
  transition:transform .85s var(--ease2)
}
.blog-item-r:hover .blog-item-img img{transform:scale(1.04)}
.blog-item-body{
  padding:16px 0 16px 18px;
  display:flex;flex-direction:column;justify-content:space-between
}
.blog-item-cat{
  font-size:11px;font-weight:300;
  color:var(--green2);margin-bottom:7px
}
.blog-item-title{
  font-family:var(--serif);
  font-size:clamp(13px,1.3vw,16px);
  color:var(--green);line-height:1.38;
  font-weight:400;font-variation-settings:'opsz' 18,'wght' 400;
  transition:color .22s;flex:1
}
.blog-item-r:hover .blog-item-title{color:var(--green2)}
/* Meta — idéntico al de la imagen */
.blog-item-meta{
  display:flex;justify-content:space-between;align-items:center;
  border-top:none;
  padding-top:10px;margin-top:12px
}
.blog-item-type{
  display:flex;align-items:center;gap:8px;
  font-size:9px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--green);font-weight:400
}
.blog-item-type::before{
  content:'';width:3px;height:13px;
  background:var(--green-bright);flex-shrink:0
}
.blog-item-date{font-size:10px;color:var(--muted);font-weight:300}
/* Colores de tipo: línea pequeña a la izquierda */
.tipo-articulo::before{background:var(--tipo-articulo)!important}
.tipo-podcast::before {background:var(--tipo-podcast)!important}
.tipo-noticia::before {background:var(--tipo-noticia)!important}
/* Color del texto del tipo también */
.tipo-articulo{color:var(--tipo-articulo)!important}
.tipo-podcast {color:var(--tipo-podcast)!important}
.tipo-noticia {color:var(--tipo-noticia)!important}


/* ── CONTACTO ── */
#contacto{background:var(--green);overflow:hidden}
.ct-outer{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.ct-left{padding:80px 5% 80px 6%;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(255,255,255,.1)}
.ct-intro{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.9vw,21px);color:rgba(255,255,255,.5);line-height:1.65;margin:20px 0 36px;font-weight:400;font-variation-settings:'opsz' 36,'wght' 400}
.ct-data{display:flex;flex-direction:column;gap:16px}
.ct-row{display:grid;grid-template-columns:74px 1fr}
.ct-tag{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:400;padding-top:2px}
.ct-val{font-size:13px;font-weight:300;color:rgba(255,255,255,.55);line-height:1.65}
.ct-val a{color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:1px;transition:color .25s,border-color .25s}
.ct-val a:hover{color:var(--w);border-color:rgba(255,255,255,.5)}
.ct-hours{margin-top:28px;padding:16px 18px;border-left:3px solid var(--green-bright);background:rgba(255,255,255,.06)}
.ct-hours p{font-size:12px;font-weight:300;color:rgba(255,255,255,.38);line-height:2.1}
.ct-hours strong{color:rgba(255,255,255,.7);font-weight:300}
.ct-right{padding:80px 6% 80px 5%}
.ff{margin-bottom:18px}
.ff label{display:block;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:7px;font-weight:400}
.ff input,.ff textarea,.ff select{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-family:var(--sans);font-size:14px;font-weight:300;padding:11px 0;outline:none;transition:border-color .25s;border-radius:0;appearance:none}
.ff input::placeholder,.ff textarea::placeholder{color:rgba(255,255,255,.22)}
.ff input:focus,.ff textarea:focus,.ff select:focus{border-bottom-color:var(--green-bright)}
.ff select option{background:#1a4a2e;color:rgba(255,255,255,.85)}.ff textarea{height:86px;resize:none}
.ff2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.btn-send{width:100%;background:transparent;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.6);font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:3px;text-transform:uppercase;padding:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s;margin-top:6px}
.btn-send:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--w);gap:16px}
.btn-send svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;transition:transform .3s var(--ease2)}
.btn-send:hover svg{transform:translateX(4px)}
.f-note{font-size:11px;color:rgba(255,255,255,.22);text-align:center;margin-top:9px;font-weight:300}
.f-note a{color:rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.15);transition:color .25s}
.f-note a:hover{color:rgba(255,255,255,.7)}

/* ── FOOTER ── */
footer{background:#0d2618;padding:56px 5% 24px}
.ft-w{max-width:1360px;margin:0 auto}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:20px}
.ft-brand{font-family:var(--serif);font-size:15px;color:rgba(255,255,255,.45);margin-bottom:11px;font-weight:400;font-variation-settings:'opsz' 14,'wght' 400;letter-spacing:.5px}
.ft-brand em{font-style:normal;color:rgba(255,255,255,.7)}
.ft-desc{font-size:12px;font-weight:300;color:rgba(255,255,255,.24);line-height:1.9;max-width:250px;margin-bottom:22px}
.ft-soc-row{display:flex}
.ft-soc{width:32px;height:32px;border:1px solid rgba(255,255,255,.12);border-left:none;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);transition:all .25s}
.ft-soc:first-child{border-left:1px solid rgba(255,255,255,.12)}
.ft-soc:hover{background:var(--green-bright);border-color:var(--green-bright);color:var(--w)}
.ft-col h5{font-size:10px;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:16px;font-weight:400}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-col ul a{font-size:13px;font-weight:300;color:rgba(255,255,255,.28);transition:color .25s}
.ft-col ul a:hover{color:rgba(255,255,255,.7)}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:7px;font-size:11px;color:rgba(255,255,255,.2);font-weight:300}
.ft-bot a{color:rgba(255,255,255,.24);transition:color .25s}.ft-bot a:hover{color:rgba(255,255,255,.6)}

/* ── RESPONSIVE ── */
@media(max-width:1280px){
  #hero{grid-template-columns:1fr 1fr}
  .ar-outer{grid-template-columns:1fr}.ar-photo{display:none}
  .srv-outer{grid-template-columns:1fr}
  .srv-sticky{position:relative;top:auto;padding:48px 0 0}
  .srv-list-col{padding:32px 0 80px}
}
@media(max-width:1060px){
  .nos-outer{grid-template-columns:1fr;padding:72px 5%}
  .nos-stats-row{grid-template-columns:repeat(2,1fr)}
  .eq-outer{grid-template-columns:1fr}.eq-photo{display:none}.eq-col{padding:72px 5%}
  .blog-grid{grid-template-columns:1fr}.blog-list{border-top:1px solid var(--border)}
  .ct-outer{grid-template-columns:1fr}.ct-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}.ct-left,.ct-right{padding:64px 5%}
  .ft-top{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:768px){
  .nos-outer{grid-template-columns:1fr;padding:64px 5%}
  .nos-stats-row{grid-template-columns:repeat(2,1fr)}
  .nav-links{display:none}.nav-ham{display:flex}
  .dig-cards{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr}
  .eq-nums{grid-template-columns:1fr}.eq-stat{padding:12px 0}
  .blog-grid{grid-template-columns:1fr}
  .hero-text-col{display:none}
  .hero-img-col{min-height:calc(100vh - 64px)}
}
@media(max-width:480px){
  }

/* ── PANEL DE BÚSQUEDA ─────────────────────────────────────────
   Se despliega desde el nav hacia abajo al hacer clic en la lupa.
   Busca en: Servicios, Áreas, Blog, Equipo
──────────────────────────────────────────────────────────────── */
#search-panel{
  position:fixed;top:68px;left:0;right:0;z-index:850;
  background:var(--w);
  padding:0 5%;
  max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease2),padding .45s var(--ease2);
  box-shadow:0 8px 40px rgba(26,74,46,.08)
}
#search-panel.open{
  max-height:360px;
  padding:32px 5% 28px
}
.search-inner{max-width:1380px;margin:0 auto}
/* Campo de búsqueda */
.search-field{
  display:flex;align-items:center;gap:16px;
  border-bottom:2px solid var(--green);
  padding-bottom:12px;margin-bottom:28px
}
.search-field svg{
  width:20px;height:20px;stroke:var(--green2);fill:none;
  stroke-width:1.5;flex-shrink:0
}
.search-field input{
  flex:1;border:none;outline:none;
  font-family:var(--serif);
  font-size:clamp(22px,3vw,36px);
  font-weight:400;font-variation-settings:'opsz' 48,'wght' 400;
  color:var(--green);background:transparent;
  font-style:italic
}
.search-field input::placeholder{
  color:rgba(26,74,46,.3);font-style:italic
}
.search-close{
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:20px;font-weight:200;
  transition:color .2s;padding:4px;line-height:1;flex-shrink:0
}
.search-close:hover{color:var(--green)}
/* Etiquetas de categorías de búsqueda */
.search-cats{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px
}
.search-cat{
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--green2);font-weight:400;
  padding:5px 12px;border:1px solid var(--border);
  cursor:pointer;transition:all .2s;background:transparent
}
.search-cat:hover,.search-cat.active{
  background:var(--green);color:var(--w);border-color:var(--green)
}
/* Resultados rápidos */
#search-results{
  display:flex;flex-direction:column;gap:0;
  max-height:160px;overflow-y:auto
}
.search-result{
  display:flex;align-items:center;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--border);
  text-decoration:none;transition:background .2s;cursor:pointer
}
.search-result:last-child{border-bottom:none}
.search-result:hover{background:rgba(26,74,46,.03)}
.sr-cat{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:400;min-width:90px;flex-shrink:0
}
.sr-title{
  font-size:13px;font-weight:300;color:var(--green);flex:1;
  transition:color .2s
}
.search-result:hover .sr-title{color:var(--green2)}
.sr-arr{font-size:14px;color:var(--border);transition:color .2s,transform .2s}
.search-result:hover .sr-arr{color:var(--green2);transform:translateX(3px)}


/* ══ MEGA-MENÚ ════════════════════════════════════════════════
   Panel full-width que baja desde el nav.
   Columns: links izq | links centro | foto editorial derecha
   Animación: opacity 0→1 + translateY(-12px→0)
   Solo aparece en desktop (>1024px)
════════════════════════════════════════════════════════════ */
.mega{
  position:fixed;top:68px;left:0;right:0;z-index:800;
  background:var(--w);
  border-bottom:1px solid var(--border);
  box-shadow:0 24px 60px rgba(26,74,46,.08);
  /* oculto por defecto */
  opacity:0;visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .35s var(--ease2),transform .35s var(--ease2),visibility .35s;
  pointer-events:none
}
.mega.open{
  opacity:1;visibility:visible;
  transform:translateY(0);
  pointer-events:all
}
.mega-inner{
  max-width:1440px;margin:0 auto;
  display:grid;
  padding:0;
  gap:0
}
/* Servicios: 3 cols links + foto */
.mega-inner.mega-servicios{grid-template-columns:1fr 1fr 1fr 320px}
/* Áreas: 2 cols links + foto */
.mega-inner.mega-areas{grid-template-columns:1fr 1fr 360px}
/* Blog: 2 cols + foto */
.mega-inner.mega-blog{grid-template-columns:1fr 1fr 360px}

/* Columna de links */
.mega-col{
  padding:40px 0 40px 5%;
  border-right:1px solid var(--border)
}
.mega-col:last-of-type{border-right:none}
.mega-col-label{
  font-size:9px;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--muted);font-weight:400;
  margin-bottom:20px;display:block;
  padding-bottom:10px;border-bottom:1px solid var(--border)
}
.mega-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 24px 10px 0;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s,padding-left .25s var(--ease2);
  gap:8px
}
.mega-link:hover{
  border-bottom-color:var(--border);
  padding-left:6px
}
.mega-link-name{
  font-family:var(--serif);
  font-size:clamp(14px,1.4vw,17px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 18,'wght' 400;
  line-height:1.3;transition:color .2s
}
.mega-link:hover .mega-link-name{color:var(--green2)}
.mega-link-arr{
  font-size:14px;color:var(--green-bright);opacity:0;
  transition:opacity .2s,transform .25s var(--ease2);flex-shrink:0
}
.mega-link:hover .mega-link-arr{opacity:1;transform:translateX(3px)}

/* Columna foto editorial */
.mega-photo-col{
  position:relative;overflow:hidden;
  min-height:360px
}
.mega-photo-col img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(82%) brightness(.95) contrast(1.06);
  transition:transform 1.2s var(--ease2)
}
.mega.open .mega-photo-col img{transform:scale(1.03)}
.mega-photo-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,32,20,.7) 0%,transparent 55%)
}
.mega-photo-caption{
  position:absolute;bottom:28px;left:24px;right:24px
}
.mega-photo-caption p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(14px,1.5vw,18px);
  color:rgba(255,255,255,.75);line-height:1.45;
  font-variation-settings:'opsz' 24,'wght' 300
}
.mega-photo-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--green-bright);font-weight:400;
  text-decoration:none;margin-top:12px;
  border-left:2px solid var(--green-bright);padding-left:10px;
  transition:gap .25s var(--ease2)
}
.mega-photo-cta:hover{gap:13px}
.mega-photo-cta svg{
  width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round
}

/* Overlay oscuro detrás del mega-menú */
#mega-overlay{
  position:fixed;inset:0;top:68px;z-index:799;
  background:rgba(10,32,20,.18);
  opacity:0;visibility:hidden;
  transition:opacity .35s,visibility .35s
}
#mega-overlay.open{opacity:1;visibility:visible}

/* ── Nav links con data-mega para saber cuál panel abrir ── */
.nav-links li.has-mega>a{position:relative}
/* Indicador activo en el nav */
.nav-links li.mega-active>a{color:var(--green2)!important}

/* ══ MEJORA: WhatsApp flotante ══════════════════════════════ */
#wa-float{
  position:fixed;bottom:32px;right:32px;z-index:700;
  width:52px;height:52px;border-radius:50%;
  background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 24px rgba(37,211,102,.35);
  text-decoration:none;
  transition:transform .3s var(--ease3),box-shadow .3s;
  animation:waPulse 3s ease-in-out infinite 4s
}
#wa-float:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,.45)}
#wa-float svg{width:26px;height:26px;fill:#fff}
@keyframes waPulse{
  0%,100%{box-shadow:0 4px 24px rgba(37,211,102,.35)}
  50%{box-shadow:0 4px 32px rgba(37,211,102,.55),0 0 0 8px rgba(37,211,102,.1)}
}

/* ══ MEJORA: Scroll to top ══════════════════════════════════ */
#scroll-top{
  position:fixed;bottom:32px;right:96px;z-index:700;
  width:40px;height:40px;border-radius:50%;
  background:var(--w);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;transform:translateY(10px);
  transition:opacity .35s,transform .35s,background .25s,border-color .25s;
  pointer-events:none
}
#scroll-top.show{opacity:1;transform:translateY(0);pointer-events:all}
#scroll-top:hover{background:var(--green);border-color:var(--green)}
#scroll-top:hover svg{stroke:#fff}
#scroll-top svg{
  width:14px;height:14px;stroke:var(--green);fill:none;
  stroke-width:1.8;stroke-linecap:round
}

/* ══ MEJORA: Transición de página (page loader) ════════════ */
#page-trans{
  position:fixed;inset:0;z-index:9999;
  background:var(--green);
  transform:translateY(-100%);
  pointer-events:none
}
/* Solo activa al navegar a links internos */
#page-trans.out{
  animation:pageOut .6s var(--ease2) forwards
}
@keyframes pageOut{
  0%{transform:translateY(0)}
  100%{transform:translateY(100%)}
}

/* ══ MEJORA: active state en nav según sección visible ═════ */
.nav-links li a.nav-active{color:var(--green)!important;font-weight:400}


/* ── TESTIMONIOS ─────────────────────────────────────────────
   Fondo crema. Grid 3 columnas.
   Cada testimonio: comillas grandes + cita + autor
────────────────────────────────────────────────────────────── */
#testimonios{background:var(--off);padding:96px 5%}
.test-w{max-width:1380px;margin:0 auto}
.test-hd{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:56px;gap:16px;flex-wrap:wrap;
  padding-bottom:28px;border-bottom:1px solid var(--border)
}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.test-card{
  background:var(--off);padding:36px 32px 32px;
  transition:background .3s var(--ease2);
  position:relative;overflow:hidden
}
.test-card:hover{background:var(--w)}
/* Comilla decorativa */
.test-quote-mark{
  font-family:var(--serif);font-size:88px;
  color:rgba(26,74,46,.08);line-height:.8;
  font-weight:400;margin-bottom:8px;
  font-variation-settings:'opsz' 144,'wght' 400;
  display:block
}
.test-card:hover .test-quote-mark{color:rgba(0,166,81,.12)}
/* Cita */
.test-text{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.6vw,18px);
  color:var(--green);font-weight:400;
  font-variation-settings:'opsz' 36,'wght' 400;
  line-height:1.65;margin-bottom:28px
}
/* Separador */
.test-sep{
  width:28px;height:2px;background:var(--green-bright);
  margin-bottom:18px
}
/* Autor */
.test-author{font-size:13px;font-weight:400;color:var(--green);letter-spacing:.3px}
.test-role{font-size:11px;font-weight:300;color:var(--muted);margin-top:3px}
@media(max-width:1060px){.test-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.test-grid{grid-template-columns:1fr}}


/* ── LOADER INTRODUCTORIO ─────────────────────────────────
   Pantalla verde con nombre de la firma.
   SALIDA: barrido hacia la DERECHA con clip-path (igual que
   el loader barre y revela la foto directamente.
─────────────────────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--green);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:18px;
  clip-path:inset(0 0% 0 0);
  transition:clip-path .6s cubic-bezier(.76,0,.24,1),visibility .6s
}
#loader.out{
  clip-path:inset(0 0% 0 100%);
  visibility:hidden
}
.ld-name{
  font-family:var(--serif);
  font-size:clamp(16px,2vw,22px);
  color:var(--w);font-style:normal;font-weight:400;
  font-variation-settings:'opsz' 14,'wght' 400;
  overflow:hidden;letter-spacing:.4px
}
.ld-name span{
  display:block;transform:translateY(108%);
  animation:ldUp .9s var(--ease2) .25s forwards
}
.ld-sub{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:rgba(255,255,255,.4);overflow:hidden;font-weight:300
}
.ld-sub span{
  display:block;transform:translateY(108%);
  animation:ldUp .8s var(--ease2) .45s forwards
}
.ld-bar{
  width:140px;height:1px;
  background:rgba(255,255,255,.12);
  position:relative;overflow:hidden;margin-top:4px
}
.ld-bar::after{
  content:'';position:absolute;top:0;left:0;
  height:100%;width:0;background:var(--green-bright);
  animation:ldBar 1.4s var(--ease2) .1s forwards
}
@keyframes ldUp{to{transform:translateY(0)}}
@keyframes ldBar{to{width:100%}}@keyframes ldBar{to{width:100%}}


/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media(max-width:1280px){
  .srv-outer{grid-template-columns:1fr;padding:0 5%}
  .srv-sticky{position:relative;top:auto;padding:40px 0 0}
  .srv-list-col{padding:24px 0 64px}
  .mega-inner.mega-servicios,.mega-inner.mega-areas{grid-template-columns:1fr 1fr}
  .mega-photo-col{display:none}
}
@media(max-width:1060px){
  .nos-outer{grid-template-columns:1fr;padding:72px 5%}
  .blog-grid{grid-template-columns:1fr}
  .blog-col-r{padding-left:0;border-top:1px solid var(--border)}
  .eq-outer{grid-template-columns:1fr}.eq-photo{display:none}.eq-col{padding:64px 5%}
  .ct-outer{grid-template-columns:1fr}
  .ct-left{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .ct-left,.ct-right{padding:56px 5%}
  .ft-top{grid-template-columns:1fr 1fr;gap:24px}
  .test-grid{grid-template-columns:1fr 1fr}
  .ar-subtitle-block{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{display:none}.nav-ham{display:flex}
  .mega{display:none!important}
  #hero{display:block;position:relative;min-height:100svh;overflow:hidden}
  .hero-img-col{position:absolute;inset:0;min-height:100svh;overflow:hidden}
  .hero-img-col img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(70%) brightness(.45) contrast(1.1)}
  .hero-scroll-bar,.hero-scroll-arrow{display:none}
  .hero-text-col{display:flex!important;position:relative;z-index:2;padding:100px 6% 72px;min-height:100svh;flex-direction:column;justify-content:flex-end}
  .hero-eyebrow{color:rgba(255,255,255,.75)!important}.hero-eyebrow::before{background:rgba(255,255,255,.5)!important}
  .hero-title{color:var(--w)!important;font-size:clamp(34px,9vw,52px)!important}
  .hero-title em{color:rgba(255,255,255,.65)!important}
  .hero-p{color:rgba(255,255,255,.7)!important;font-size:14px}
  .hero-cta{background:var(--green-bright)!important;color:var(--w)!important;border-color:var(--green-bright)!important;display:inline-flex!important;opacity:1!important;animation:none!important}
  .nos-outer{grid-template-columns:1fr;padding:56px 5%}
  .nos-label-col{display:none}
  .nos-title{font-size:clamp(32px,8vw,46px)!important}
  .nos-cta{font-size:10px;letter-spacing:2px}
  .srv-sticky{display:none}
  .srv-list-col{padding:48px 5% 56px}
  .srv-list-col::before{content:'Servicios';display:block;font-family:var(--serif);font-size:clamp(26px,7vw,36px);color:var(--green);font-weight:400;font-variation-settings:'opsz' 72,'wght' 400;margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid var(--green)}
  .srv-i:first-child{border-top:1px solid var(--border)}
  .srv-i-hd{padding:16px 0;grid-template-columns:30px 1fr 30px;gap:10px}
  .srv-i-title{font-size:clamp(14px,4vw,17px)}
  .ar-photo-band{aspect-ratio:16/7;max-height:200px}
  .ar-top{padding:48px 0 28px}.ar-top-title{font-size:clamp(28px,8vw,40px)}
  .ar-grid{grid-template-columns:1fr}
  .ar-col-left,.ar-col-right{border:none}
  .ar-col-right{border-top:1px solid var(--border)}
  .ar-col-right .ar-row-item,.ar-col-right .ar-row-item:hover{padding-left:0}
  .ar-row-item{padding:14px 0}.ar-row-name{font-size:clamp(15px,4.5vw,19px)}
  .eq-col{padding:48px 5%}.eq-nums{gap:16px}
  .test-grid{grid-template-columns:1fr;gap:0;background:transparent}
  .test-card{padding:28px 5%;border-bottom:1px solid var(--border)}.test-card:last-child{border-bottom:none}
  .blog-hd{flex-direction:column;align-items:flex-start;gap:10px}
  .blog-hd-title{font-size:clamp(22px,6vw,30px)}
  .blog-grid{grid-template-columns:1fr}.blog-col-r{padding-left:0}
  .blog-item-r{grid-template-columns:110px 1fr}
  .ct-left,.ct-right{padding:48px 5%}.ff2{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr;gap:20px}.ft-bot{flex-direction:column;gap:6px}
  #wa-float{bottom:20px;right:20px;width:46px;height:46px}
  #scroll-top{bottom:20px;right:76px;width:38px;height:38px}
}
@media(max-width:480px){
  #nav{padding:0 16px 0 0}.nav-logo-text{padding:0 14px;font-size:12px;letter-spacing:.2px}
  .hero-text-col{padding:88px 5% 60px}
  .hero-title{font-size:clamp(30px,9.5vw,42px)!important}
  .nos-outer{padding:44px 5%}.nos-title{font-size:clamp(28px,9vw,38px)!important}
  .srv-list-col{padding:36px 5% 48px}.srv-i-title{font-size:14px}
  .srv-i-hd{padding:13px 0;grid-template-columns:26px 1fr 26px}
  .ar-photo-band{display:none}.ar-top{padding:36px 0 24px}
  .ar-top-title{font-size:clamp(24px,8vw,34px)}.ar-row-item{padding:13px 0}
  .eq-col{padding:40px 5%}
  .test-card{padding:24px 5%}.test-text{font-size:14px}
  .ct-left,.ct-right{padding:40px 5%}
  input,textarea,select{font-size:16px!important}
  .btn-send{padding:14px 18px;font-size:13px}
  .ft-brand{font-size:17px}.ft-col h5{font-size:9px}
}
@supports(padding:max(0px)){
  #nav{padding-left:max(0px,env(safe-area-inset-left))}
}



/* ── PÁGINAS DETALLE ── */
body.detail-page main{background:var(--w)}
.dp-hero{padding-top:68px;min-height:72vh;display:grid;grid-template-columns:1.08fr .92fr;background:var(--off);border-bottom:1px solid var(--border)}
.dp-copy{padding:72px 6% 72px 6%;display:flex;flex-direction:column;justify-content:center}
.dp-kicker{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--green2);font-weight:400;margin-bottom:22px;display:flex;align-items:center;gap:14px}
.dp-kicker::before{content:'';width:22px;height:1.5px;background:var(--green-bright)}
.dp-title{font-family:var(--serif);font-size:clamp(42px,5.8vw,76px);line-height:1.04;color:var(--green);font-weight:400;font-variation-settings:'opsz' 144,'wght' 400;margin-bottom:22px;max-width:780px}
.dp-lead{font-size:15px;line-height:1.9;color:var(--body);max-width:560px;margin-bottom:28px}
.dp-breadcrumb{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.dp-breadcrumb a{color:var(--green2)}
.dp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);max-width:680px}
.dp-stat{padding:18px 18px 0 0}.dp-stat strong{display:block;font-family:var(--serif);font-size:24px;color:var(--green);font-weight:400}.dp-stat span{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:4px}
.dp-media{position:relative;overflow:hidden;min-height:460px}.dp-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(88%) brightness(.88) contrast(1.06)}
.dp-body{max-width:1360px;margin:0 auto;padding:72px 5% 88px}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--border)}
.dp-block h2{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);color:var(--green);font-weight:400;line-height:1.18;margin-bottom:18px}.dp-block p{font-size:14px;line-height:1.9;color:var(--body)}
.dp-list{list-style:none;display:grid;gap:14px}.dp-list li{padding:16px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:1.8;color:var(--body);display:flex;gap:12px}.dp-list li::before{content:'—';color:var(--green-bright);font-weight:400}
.dp-wide{padding:60px 0;border-bottom:1px solid var(--border)}
.dp-wide-grid{display:grid;grid-template-columns:32% 1fr;gap:40px;align-items:start}
.dp-wide-grid .lbl{margin-bottom:0;padding-top:6px}
.dp-panel{background:var(--off);padding:32px;border-left:3px solid var(--green-bright)}
.dp-panel p{font-size:14px;line-height:1.88;color:var(--body)}
.dp-related{padding-top:56px}
.dp-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);margin-top:26px}
.dp-card{background:var(--w);padding:28px;text-decoration:none;transition:background .3s var(--ease2)}
.dp-card:hover{background:var(--cream)}
.dp-card small{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--green2);display:block;margin-bottom:14px}
.dp-card h3{font-family:var(--serif);font-size:22px;color:var(--green);font-weight:400;line-height:1.24;margin-bottom:12px}.dp-card p{font-size:13px;line-height:1.82;color:var(--body)}
.dp-article{max-width:860px}.dp-article section{padding:26px 0;border-bottom:1px solid var(--border)}.dp-article h2{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);color:var(--green);font-weight:400;line-height:1.2;margin-bottom:14px}.dp-article p{font-size:15px;line-height:1.95;color:var(--body)}
.dp-note{margin-top:22px;padding:18px 20px;background:var(--cream);border-left:3px solid var(--green-bright);font-size:13px;line-height:1.8;color:var(--body)}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);margin-top:28px}
.team-card{background:var(--w);padding:34px}.team-card h3{font-family:var(--serif);font-size:28px;color:var(--green);font-weight:400;line-height:1.18;margin-bottom:10px}.team-card small{display:block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--green2);margin-bottom:16px}.team-card p{font-size:14px;line-height:1.88;color:var(--body)}
.privacy-copy{max-width:880px}.privacy-copy h2{font-family:var(--serif);font-size:28px;color:var(--green);font-weight:400;line-height:1.2;margin:36px 0 14px}.privacy-copy p,.privacy-copy li{font-size:15px;line-height:1.92;color:var(--body)}.privacy-copy ul{padding-left:20px;display:grid;gap:10px}
@media(max-width:1060px){.dp-hero,.dp-grid,.dp-wide-grid{grid-template-columns:1fr}.dp-media{min-height:320px}.dp-card-grid,.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.dp-copy{padding:96px 5% 48px}.dp-title{font-size:clamp(34px,8vw,48px)}.dp-card-grid,.team-grid,.dp-stats{grid-template-columns:1fr}.dp-body{padding:52px 5% 64px}.dp-panel{padding:24px}}