/* =========================================================
   Grupo Arach — Design system v2
   Navy + gris del logo · acento champagne · pasteles suaves
   Titulares sans grandes (Plus Jakarta Sans) + acentos serif itálicos
   ========================================================= */
:root {
  --navy-950: #050f26;
  --navy-900: #081735;
  --navy-800: #0b1f4b;
  --navy-700: #14307a;
  --navy-500: #3a5aa8;
  --gray-700: #4a4f57;
  --gray-600: #5b6068;
  --gray-300: #c9ccd2;
  --gray-200: #e3e5e9;
  --gray-100: #eef0f3;
  --paper: #f5f6f8;
  --white: #fff;
  --gold: #b99a5b;
  --gold-soft: #d6bd8a;

  --mint: #dfeee3;
  --sky: #d5e3f5;
  --cream: #f4ebd2;
  --lilac: #e5e1f3;

  --ink: var(--navy-800);
  --text: #2a2f38;
  --muted: var(--gray-600);

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.2rem;
  --fs-h3: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
  --fs-h2: clamp(2.1rem, 1.3rem + 3.2vw, 3.9rem);
  --fs-h1: clamp(2.4rem, 1.2rem + 4.2vw, 4.9rem);

  --gutter: clamp(1.75rem, 4.5vw, 3.5rem);
  --container: 1240px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .2s;
  --t-med: .45s;

  --shadow-sm: 0 1px 2px rgba(8,23,53,.05), 0 4px 14px rgba(8,23,53,.05);
  --shadow-md: 0 2px 4px rgba(8,23,53,.05), 0 20px 48px rgba(8,23,53,.10);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 600; line-height: 1.05; color: var(--ink); letter-spacing: -.035em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--navy-800); color: #fff; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1000; background: var(--navy-800); color: #fff; padding: .75rem 1.1rem; border-radius: 10px; transition: top var(--t-fast); }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.section--dark { background: var(--navy-900); color: rgba(255,255,255,.78); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--gray-600); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--navy-800); }
.section--dark .eyebrow { color: var(--gold-soft); }
.section--dark .eyebrow::before { background: var(--gold); }
.h2 { font-size: var(--fs-h2); margin-top: 1rem; }
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: 56ch; }
.section--dark .lead { color: rgba(255,255,255,.72); }
em.accent { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; font-size: 1.08em; color: var(--navy-500); }
.section--dark em.accent, .hero em.accent { color: var(--gold-soft); }

/* ---------- Buttons ---------- */
.btn { --bg: var(--navy-800); --fg: #fff; --bd: var(--navy-800); display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: .8rem .8rem .8rem 1.6rem; background: var(--bg); color: var(--fg); border: 1px solid var(--bd); border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); transition: transform var(--t-med) var(--ease-out), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-med) var(--ease-out); touch-action: manipulation; }
.btn .ico { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; transition: transform var(--t-med) var(--ease-out); }
.btn .ico svg { width: 16px; height: 16px; }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); box-shadow: 0 12px 30px rgba(11,31,75,.28); }
.btn--white { --bg: #fff; --fg: var(--navy-800); --bd: #fff; }
.btn--white .ico { background: var(--navy-800); color: #fff; }
.btn--white:hover { box-shadow: 0 12px 34px rgba(0,0,0,.25); }
.btn--gold { --bg: var(--gold); --fg: var(--navy-950); --bd: var(--gold); }
.btn--gold .ico { background: rgba(5,15,38,.14); }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--glass { --bg: rgba(255,255,255,.18); --fg: #fff; --bd: rgba(255,255,255,.6); padding-right: 1.6rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.2); }
.btn--sm { min-height: 46px; padding: .5rem .5rem .5rem 1.3rem; }
.btn--sm .ico { width: 30px; height: 30px; }

/* ---------- Progress ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Header ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: calc(var(--header-h) + 12px); padding-top: 12px; display: flex; align-items: center; color: #fff; transition: background var(--t-med), box-shadow var(--t-med); }
.header.is-scrolled { background: rgba(8,23,53,.84); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; white-space: nowrap; }
.brand img { width: 38px; height: auto; filter: brightness(0) invert(1); }
.brand__name { font-weight: 800; font-size: .92rem; letter-spacing: .24em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.brand__name small { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: .05em; text-transform: none; font-size: .88rem; color: #fff; margin-top: .3rem; }
.nav { display: none; }
.nav a { position: relative; padding: .6rem .2rem; font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.78); transition: color var(--t-fast); min-height: 44px; display: inline-flex; align-items: center; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-med) var(--ease-out); }
.nav a:hover, .nav a.is-active { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.header__actions { display: none; align-items: center; gap: .6rem; }
/* botón de urgencias: rojo para distinguirlo, con punto que pulsa */
.btn--urgent { --bg: #d7263d; --fg: #fff; --bd: #d7263d; padding-right: 1.4rem; }
.btn--urgent:hover { background: #bf1f34; border-color: #bf1f34; box-shadow: 0 12px 30px rgba(215,38,61,.4); }
.urgent-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.urgent-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: wa-pulse 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
.drawer__btns { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.drawer__btns .btn { margin-top: 0; }
.burger { width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; position: relative; z-index: 130; }
.burger span, .burger::before, .burger::after { content: ""; position: absolute; width: 18px; height: 1.5px; background: #fff; transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast); }
.burger::before { transform: translateY(-6px); } .burger::after { transform: translateY(6px); }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { transform: rotate(45deg); }
.burger[aria-expanded="true"]::after { transform: rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 110; background: var(--navy-950); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 1rem) var(--gutter) 2rem; visibility: hidden; opacity: 0; clip-path: circle(0% at calc(100% - 44px) 38px); transition: clip-path .7s var(--ease-out), opacity .3s, visibility 0s .7s; }
.drawer.is-open { visibility: visible; opacity: 1; clip-path: circle(150% at calc(100% - 44px) 38px); transition: clip-path .8s var(--ease-out), opacity .2s; }
.drawer a.drawer__link { display: block; font-size: clamp(2rem, 8vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.1); min-height: 48px; }
.drawer a.drawer__link span { color: var(--gold); font-size: var(--fs-xs); letter-spacing: .2em; margin-right: 1rem; vertical-align: middle; }
.drawer .btn { margin-top: 2rem; align-self: flex-start; }
body.menu-open { overflow: hidden; }
/* con el menú abierto el encabezado (logo + botón X) queda por encima del panel */
body.menu-open .header { z-index: 120; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Hero (marco redondeado + foto) ---------- */
.hero { padding: 12px 12px 0; background: var(--paper); }
.hero__frame { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); color: #fff; min-height: calc(100vh - 24px); min-height: calc(100svh - 24px); display: flex; align-items: stretch; padding: calc(var(--header-h) + 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); background: linear-gradient(160deg, #6fa3de 0%, #3f78c4 60%, #2d5ea8 100%); }
.hero__bg { position: absolute; inset: -7% 0 0 0; z-index: -3; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 45%; }
.hero__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, rgba(11,31,75,.5) 0%, rgba(11,31,75,.24) 42%, rgba(11,31,75,0) 68%), linear-gradient(180deg, rgba(8,23,53,.38) 0%, rgba(8,23,53,0) 22%); }
.hero__art { position: absolute; z-index: -1; right: -22vw; top: 50%; width: min(130vw, 900px); aspect-ratio: 1; transform: translateY(-55%); pointer-events: none; opacity: .75; }
.hero__art svg { width: 100%; height: 100%; overflow: visible; }
.ring { transform-origin: 50% 50%; transform-box: fill-box; fill: none; }
.ring--a { animation: spin 70s linear infinite; } .ring--b { animation: spin 110s linear infinite reverse; } .ring--c { animation: spin 160s linear infinite; }
.is-paused .ring, .is-paused .eco__orbit-rot { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__grid { position: absolute; inset: 0; z-index: -1; opacity: .06; background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent); }
.hero__content { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.75rem, 3vw, 2.5rem); }
.hero__top { max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__rating { display: inline-flex; align-items: center; gap: .8rem; padding: .35rem 1.2rem .35rem .35rem; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.1)); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 28px rgba(8,23,53,.22); }
.hero__rating b { font-weight: 800; }
.stars { display: inline-flex; align-items: center; gap: 2px; background: #fff; padding: .4rem .75rem; border-radius: 999px; box-shadow: 0 2px 8px rgba(8,23,53,.12); }
.stars svg { width: 16px; height: 16px; fill: #f5a800; }
@media (max-width: 479px) { .hero__rating { font-size: .8rem; gap: .6rem; padding-right: .9rem; } .stars { padding: .35rem .6rem; } .stars svg { width: 14px; height: 14px; } }

/* ---------- Botón flotante de WhatsApp (pulso) ---------- */
.wa { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem)); z-index: 90; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 28px rgba(18,140,70,.4); opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), box-shadow var(--t-med), background var(--t-fast); }
.wa.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa:hover, .wa:focus-visible { background: #1fb858; box-shadow: 0 14px 34px rgba(18,140,70,.5); transform: translateY(-2px); }
.wa:active { transform: scale(.94); }
.wa svg { display: block; width: 30px; height: 30px; fill: currentColor; position: relative; z-index: 1; }
/* ondas de pulso: círculos del mismo tamaño que el botón, detrás de él */
.wa::before, .wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: 0; opacity: 0; animation: wa-pulse 2.6s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.wa::after { animation-delay: 1.3s; }
/* etiqueta: burbuja aparte a la izquierda (no cambia el tamaño del botón) */
.wa__label { position: absolute; right: calc(100% + .75rem); top: 50%; transform: translate(8px, -50%); padding: .55rem 1rem; border-radius: 999px; background: #fff; color: var(--navy-800); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
@media (hover: hover) { .wa:hover .wa__label, .wa:focus-visible .wa__label { opacity: 1; transform: translate(0, -50%); } }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .5; } 75%, 100% { transform: scale(1.7); opacity: 0; } }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 1rem + 3.4vw, 4.2rem); font-weight: 500; margin-top: 1.5rem; max-width: 14ch; line-height: 1.06; letter-spacing: -.04em; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .w > span { display: inline-block; will-change: transform; }
.hero__lead { margin-top: 1.5rem; font-size: clamp(1.05rem, .95rem + .45vw, 1.25rem); line-height: 1.6; font-weight: 500; max-width: 38ch; color: #fff; text-shadow: 0 1px 18px rgba(8,23,53,.4); }
.hero__card { background: #fff; color: var(--text); border-radius: var(--r-lg); padding: 1.5rem; width: min(100%, 360px); box-shadow: 0 24px 60px rgba(8,23,53,.25); display: grid; gap: .9rem; }
.hero__card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hero__card-head h2 { font-size: 1.4rem; letter-spacing: -.03em; }
.hero__card-head svg { width: 24px; height: 24px; color: var(--navy-800); flex: none; }
.hero__card p { color: var(--muted); font-size: var(--fs-sm); margin-top: -.5rem; }
.hero__card .btn { justify-content: space-between; width: 100%; }
.hero__card small { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 460px; }
.glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.glass strong { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.glass span { display: block; margin-top: .5rem; font-size: var(--fs-xs); color: rgba(255,255,255,.8); line-height: 1.4; }

/* ---------- Stats ---------- */
.stats-sec { padding-block: clamp(3rem, 6vw, 5.5rem); }
.stats-sec__grid { display: grid; gap: 2.5rem; align-items: center; }
.stats-sec__intro { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); color: var(--ink); font-weight: 500; letter-spacing: -.02em; max-width: 34ch; line-height: 1.4; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
.stat__n { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.stat p { margin-top: .5rem; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Photo placeholder ---------- */
.ph { position: relative; overflow: hidden; background: linear-gradient(150deg, #dfe6f3 0%, #c3d0e8 55%, #aebfdc 100%); }
.ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 70% 20%, rgba(255,255,255,.55), transparent 70%); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Nosotros ---------- */
.statement { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.2rem); font-weight: 500; line-height: 1.18; letter-spacing: -.035em; color: var(--ink); max-width: 28ch; margin-top: 1.4rem; }
.statement em.accent { font-size: 1.05em; }
.about__split { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch; }
.about__photo { border-radius: var(--r-lg); min-height: 340px; box-shadow: var(--shadow-sm); }
.about__photo .badge { position: absolute; left: 1rem; right: 1rem; width: fit-content; max-width: calc(100% - 2rem); bottom: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: .7rem; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 999px; padding: .6rem 1.1rem .6rem .6rem; font-size: var(--fs-xs); font-weight: 700; color: var(--ink); }
.about__photo .badge img { position: static; width: 30px; height: 33px; object-fit: contain; }
.about__text { display: grid; gap: 1.2rem; align-content: center; }
.about__text p { color: var(--muted); }
.about__text p strong { color: var(--ink); font-weight: 700; }
.mission { margin-top: .6rem; padding: 1.6rem; background: var(--navy-800); color: rgba(255,255,255,.85); border-radius: var(--r-lg); }
.about__text .mission p { color: rgba(255,255,255,.85); }
.mission h3 { color: #fff; font-size: 1.35rem; margin-bottom: .6rem; letter-spacing: -.02em; }
.values { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.values li { padding: .4rem .95rem; border-radius: 999px; background: rgba(255,255,255,.12); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: #fff; }

.timeline { position: relative; display: grid; gap: 1.6rem; margin-top: clamp(3rem, 6vw, 5rem); padding-left: 2.2rem; }
.timeline__line { position: absolute; left: 5px; top: .85rem; bottom: .5rem; width: 2px; background: var(--gray-200); }
.timeline__line i { display: block; height: 100%; background: linear-gradient(var(--gold), var(--navy-800)); transform-origin: 50% 0; transform: scaleY(0); }
.tl { position: relative; }
.tl::before { content: ""; position: absolute; left: -2.2rem; top: .75rem; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--navy-800); }
.tl b { display: block; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; color: var(--ink); line-height: 1.1; }
.tl h3 { font-size: 1.05rem; letter-spacing: -.01em; margin: .3rem 0 .2rem; }
.tl p { font-size: var(--fs-sm); color: var(--muted); max-width: 52ch; }

/* ---------- Servicios (pestañas) ---------- */
.svc { background: var(--gray-100); border-radius: var(--r-xl); margin-inline: 12px; }
.svc__head { text-align: center; display: grid; justify-items: center; gap: .4rem; }
.svc__head .lead { margin-top: 1rem; }
.tabs { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3.5rem); background: var(--white); border-radius: var(--r-xl); padding: clamp(.8rem, 2vw, 1.5rem); box-shadow: var(--shadow-sm); }
.tabs__media { position: relative; border-radius: var(--r-lg); width: 100%; min-width: 0; height: clamp(220px, 62vw, 340px); overflow: hidden; }
.tabs__media .ph { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out); }
.tabs__media .ph.is-active { opacity: 1; transform: none; }
.tabs__media .ph svg { position: absolute; right: 8%; bottom: 8%; width: 38%; max-width: 180px; color: #fff; opacity: 1; z-index: 1; }
.tabs__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(.5rem, 2vw, 2rem); }
.tabs__intro { color: var(--muted); font-size: var(--fs-sm); max-width: 44ch; margin-bottom: 1.5rem; }
.tablist { display: grid; grid-template-columns: minmax(0, 1fr); }
.tab { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: center; text-align: left; background: none; border: 0; border-top: 1px solid var(--gray-200); padding: 1.1rem 0; min-height: 56px; width: 100%; }
.tab[aria-selected="true"] { padding-bottom: .4rem; }
.tab[aria-selected="true"] + .tab__body { padding-bottom: 1rem; }
.tab:first-child { border-top: 0; }
.tab__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--gray-200); display: grid; place-items: center; color: #fff; transition: background var(--t-med), transform var(--t-med) var(--ease-out); }
.tab__dot svg { width: 13px; height: 13px; opacity: 0; transition: opacity var(--t-fast); }
.tab__title { font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink); }
.tab__body { margin-left: calc(28px + 1rem); display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.tab__body > div { overflow: hidden; }
.tab__body p { color: var(--muted); font-size: var(--fs-sm); padding-top: .35rem; }
.tab__body ul { display: grid; gap: .4rem; margin-top: .9rem; padding-bottom: .3rem; }
.tab__body li { display: flex; gap: .6rem; font-size: var(--fs-sm); font-weight: 500; }
.tab__body li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6rem; background: var(--gold); transform: rotate(45deg); }
.tab[aria-selected="true"] .tab__dot { background: var(--navy-800); transform: scale(1.08); }
.tab[aria-selected="true"] .tab__dot svg { opacity: 1; }
.tab[aria-selected="true"] + .tab__body { grid-template-rows: 1fr; }
.tab:hover .tab__dot { background: var(--gray-300); }
.tab[aria-selected="true"]:hover .tab__dot { background: var(--navy-800); }
.tabs__panel .btn { align-self: flex-start; margin-top: 1.6rem; }

/* ---------- Enfoque (dark) ---------- */
.eco { overflow: hidden; margin-top: 12px; border-radius: var(--r-xl); margin-inline: 12px; }
.eco__grid { display: grid; gap: 3rem; align-items: center; }
.eco__diagram { position: relative; width: min(100%, 500px); margin-inline: auto; aspect-ratio: 1; }
.eco__diagram svg { width: 100%; height: 100%; overflow: visible; }
.eco__diagram .orbit { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 7; }
.eco__diagram .link { stroke: var(--gold); stroke-width: 1.2; opacity: .55; }
.eco__diagram .node circle { fill: var(--navy-800); stroke: var(--gold); stroke-width: 1.2; }
.eco__diagram .node text { fill: #fff; font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-anchor: middle; text-transform: uppercase; }
.eco__label { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35; color: #fff; white-space: nowrap; pointer-events: none; }
.eco__label--top { transform: translate(-50%, calc(-100% - 16px)); text-align: center; }
.eco__label--bottom { transform: translate(-50%, 16px); text-align: center; }
.eco__label--right { transform: translate(16px, -50%); text-align: left; }
.eco__label--left { transform: translate(calc(-100% - 16px), -50%); text-align: right; }
@media (min-width: 640px) { .eco__label { font-size: 12px; } }
.eco__diagram .core { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.25); }
.eco__orbit-rot { transform-origin: 250px 250px; animation: spin 90s linear infinite; }
.eco__list { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.eco__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.eco__item b { font-family: var(--font-serif); font-style: italic; font-size: 1.8rem; color: var(--gold); line-height: 1; min-width: 2rem; }
.eco__item h4 { font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: .3rem; }
.eco__item p { font-size: var(--fs-sm); color: rgba(255,255,255,.66); }

/* ---------- Ecosistema ---------- */
.ecosys__head { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.pastel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.pastel { --c: var(--mint); position: relative; background: var(--c); border-radius: var(--r-md); padding: 1.1rem 1.1rem 1rem; min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.pastel:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pastel small { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: rgba(11,31,75,.55); }
.pastel h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.pastel:nth-child(4n+2) { --c: var(--sky); } .pastel:nth-child(4n+3) { --c: var(--cream); } .pastel:nth-child(4n+4) { --c: var(--lilac); }
/* ---------- Servicios con iconografía (cada tarjeta abre WhatsApp) ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.sv { --c: var(--mint); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; height: 100%; padding: 1.5rem .8rem 1.2rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med); }
.sv-grid li:nth-child(4n+2) .sv { --c: var(--sky); } .sv-grid li:nth-child(4n+3) .sv { --c: var(--cream); } .sv-grid li:nth-child(4n+4) .sv { --c: var(--lilac); }
.sv__ico { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--c); color: var(--navy-800); display: grid; place-items: center; transition: background var(--t-med), color var(--t-med), transform var(--t-med) var(--ease-out); }
.sv__ico > svg { width: 38px; height: 38px; }
.sv__badge { position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-800); color: var(--gold-soft); border: 2px solid var(--white); display: grid; place-items: center; transition: background var(--t-med), color var(--t-med); }
.sv__badge svg { width: 12px; height: 12px; }
.sv__name { font-weight: 600; font-size: 1rem; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; min-height: 2.5em; display: grid; align-items: start; }
.sv__cta { display: inline-flex; align-items: center; gap: .3rem; margin-top: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--navy-500); }
.sv__cta svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease-out); }
.sv:hover, .sv:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.sv:hover .sv__ico, .sv:focus-visible .sv__ico { background: var(--navy-800); color: var(--gold-soft); transform: scale(1.05); }
.sv:hover .sv__badge, .sv:focus-visible .sv__badge { background: var(--gold); color: var(--navy-950); }
.sv:hover .sv__cta svg, .sv:focus-visible .sv__cta svg { transform: translate(3px, -3px); }
.sv--other { background: var(--navy-800); border-color: var(--navy-800); }
.sv--other .sv__ico { background: rgba(255,255,255,.1); color: var(--gold-soft); }
.sv--other .sv__badge { display: none; }
.sv--other .sv__name { color: #fff; }
.sv--other .sv__cta { color: var(--gold-soft); }
.sv--other:hover .sv__ico, .sv--other:focus-visible .sv__ico { background: var(--gold); color: var(--navy-950); }
.sv--other:hover { border-color: var(--gold); }
@media (hover: none) { .sv:hover { transform: none; box-shadow: none; } }
@media (min-width: 640px) { .sv-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .sv-grid { grid-template-columns: repeat(6, 1fr); } }
.ecosys__sub { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; gap: .9rem; }
.ecosys__sub h3 { font-size: 1.1rem; letter-spacing: -.02em; display: flex; align-items: baseline; gap: .8rem; }
.ecosys__sub h3 small { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq__track { display: flex; gap: .7rem; width: max-content; will-change: transform; animation: marquee 50s linear infinite; padding-block: .3rem; }
.mq--rev .mq__track { animation-direction: reverse; animation-duration: 60s; }
.mq:hover .mq__track { animation-play-state: paused; }
.chip { white-space: nowrap; padding: .75rem 1.4rem; border-radius: 999px; background: var(--white); border: 1px solid var(--gray-200); font-weight: 600; font-size: var(--fs-sm); color: var(--ink); letter-spacing: -.01em; }
/* sección "Clientes emblemáticos" (marquesina a ancho completo, debajo del hero) */
.clients { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem); }
/* mismo estilo que el título "Socios comerciales" (.ecosys__sub h3) */
.clients__title { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin-bottom: .9rem; }
.clients__mq { margin-top: 0; }
.chip--logo { display: grid; place-items: center; width: 204px; height: 88px; padding: .6rem 1.2rem; border-radius: var(--r-md); }
.chip--logo img { display: block; flex: none; max-width: none; image-rendering: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Proceso ---------- */
.process__head { max-width: 760px; }
.steps { position: relative; display: grid; gap: 2.5rem; margin-top: 3.5rem; padding-left: 3.4rem; }
.steps__line { position: absolute; left: 1.1rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--gray-200); }
.steps__line i { display: block; width: 100%; height: 100%; background: linear-gradient(var(--gold), var(--navy-800)); transform-origin: 50% 0; transform: scaleY(0); }
.step { position: relative; }
.step::before { content: attr(data-n); position: absolute; left: -3.4rem; top: -.1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--navy-800); font-size: .78rem; font-weight: 800; color: var(--navy-800); }
.step h3 { font-size: 1.5rem; margin-bottom: .4rem; letter-spacing: -.03em; }
.step p { color: var(--muted); max-width: 44ch; font-size: var(--fs-sm); }
.step small { display: inline-block; margin-top: .8rem; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.aud { display: grid; gap: 1rem; margin-top: 4rem; }
.aud__card { border-radius: var(--r-lg); padding: clamp(1.8rem, 3.5vw, 2.8rem); }
.aud__card--a { background: var(--navy-800); color: rgba(255,255,255,.8); }
.aud__card--b { background: var(--white); border: 1px solid var(--gray-200); }
.aud__card h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); margin: .8rem 0 1rem; }
.aud__card--a h3 { color: #fff; }
.aud__card .tag { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.aud__card ul { margin-top: 1.4rem; display: grid; gap: .7rem; font-size: var(--fs-sm); }
.aud__card li { display: flex; gap: .7rem; }
.aud__card li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .6rem; background: var(--gold); transform: rotate(45deg); }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 2.5rem; }
.faq__list { border-top: 1px solid var(--gray-200); }
.faq details { border-bottom: 1px solid var(--gray-200); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; min-height: 56px; font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gray-300); position: relative; transition: transform var(--t-med) var(--ease-out), background var(--t-fast); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); }
.faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--t-med) var(--ease-out); }
.faq details[open] summary i { background: var(--gray-100); }
.faq details[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.faq details p { padding: 0 3rem 1.4rem 0; color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; animation: fadeIn .5s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Contacto ---------- */
.contact { margin: 12px; border-radius: var(--r-xl); background: radial-gradient(90% 100% at 0% 0%, #12306f 0%, var(--navy-900) 55%, var(--navy-950) 100%); overflow: hidden; }
.contact__grid { display: grid; gap: 3rem; }
.contact__mail { display: inline-flex; margin-top: 1.8rem; font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem); font-weight: 600; letter-spacing: -.02em; color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: .2rem; word-break: break-word; transition: border-color var(--t-fast); }
.contact__mail:hover { border-color: var(--gold); }
.branches { display: grid; gap: .8rem; margin-top: 2.2rem; }
.branch { display: grid; gap: .2rem; padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: background var(--t-fast), border-color var(--t-fast); }
.branch:hover { background: rgba(255,255,255,.1); border-color: rgba(185,154,91,.5); }
.branch small { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold-soft); }
.branch address { font-style: normal; color: #fff; font-weight: 500; }
.branch a { color: rgba(255,255,255,.8); font-size: var(--fs-sm); min-height: 32px; display: inline-flex; align-items: center; width: fit-content; }
.branch a:hover { color: #fff; }
.branch__wa { gap: .5rem; }
.branch__wa svg { flex: none; width: 18px; height: 18px; fill: #25d366; }
.form { background: var(--white); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.6rem); color: var(--text); box-shadow: 0 30px 70px rgba(0,0,0,.35); display: grid; gap: 1.1rem; align-self: start; }
.section--dark .form h3 { font-size: 1.9rem; color: var(--ink); }
.form__row { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-xs); font-weight: 700; color: var(--navy-800); }
.field label span { color: #b3261e; }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; width: 100%; min-height: 52px; padding: .8rem 1rem; color: var(--text); background: var(--paper); border: 1.5px solid var(--gray-200); border-radius: 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230b1f4b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-800); background: #fff; box-shadow: 0 0 0 4px rgba(11,31,75,.12); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; }
.field__err { font-size: var(--fs-xs); color: #b3261e; min-height: 1.1em; font-weight: 600; }
.form__hp { position: absolute; left: -9999px; }
.form__status { font-size: var(--fs-sm); font-weight: 600; padding: .9rem 1rem; border-radius: 12px; display: none; }
.form__status.is-ok { display: block; background: #e8f4ec; color: #14532d; }
.form__status.is-err { display: block; background: #fdecea; color: #8a1c14; }
.form__note { font-size: var(--fs-xs); color: var(--muted); }
.form .btn { justify-self: start; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-950); color: rgba(255,255,255,.6); padding: 4.5rem 0 0; font-size: var(--fs-sm); overflow: hidden; }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
.footer .brand img { width: 52px; }
.footer p.tagline { margin-top: 1rem; max-width: 36ch; }
.footer h4 { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1rem; font-weight: 800; }
.footer li a { display: inline-block; padding: .3rem 0; min-height: 36px; transition: color var(--t-fast); }
.footer li a:hover { color: #fff; }
.footer__word { font-size: clamp(5rem, 24vw, 22rem); font-weight: 700; letter-spacing: -.07em; line-height: .8; color: rgba(255,255,255,.07); text-align: center; text-transform: uppercase; margin-top: 1rem; white-space: nowrap; user-select: none; transform: translateY(14%); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; padding: 1.4rem 0; font-size: var(--fs-xs); border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Reveal (sólo con JS+GSAP) ---------- */
/* sólo fundido, sin desplazamiento: el contenido aparece ya en su lugar definitivo */
.js-anim [data-reveal] { opacity: 0; }
.js-anim [data-reveal="fade"] { transform: none; }
.js-anim [data-stagger] > * { opacity: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 479px) {
  .brand__name { font-size: .8rem; letter-spacing: .18em; }
}
@media (max-width: 639px) {
  .hero { padding: 8px 8px 0; }
  .hero__frame { border-radius: 26px; padding-top: calc(var(--header-h) + 1.25rem); padding-bottom: 1rem; min-height: min(calc(100svh - 16px), 760px); }
  .hero__bg img { object-position: 86% 100%; }
  .hero__shade { background: linear-gradient(180deg, rgba(11,31,75,.5) 0%, rgba(11,31,75,.18) 40%, rgba(11,31,75,0) 62%); }
  .hero h1 { font-size: clamp(2rem, 9.4vw, 2.6rem); max-width: 14ch; margin-top: .9rem; }
  .hero__lead { display: none; }
  /* móvil: titular arriba (sobre el cielo) y botón abajo, dejando visible a la pareja */
  .hero__content { justify-content: space-between; }
  .hero__actions .btn--glass { display: none; }
  .hero__actions .btn--gold { width: 100%; justify-content: space-between; }
  .stats-sec__intro { max-width: none; }
  .svc, .eco, .contact { margin-inline: 8px; }
  .svc { border-radius: 26px; }
}
@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .pastel-grid { grid-template-columns: repeat(3, 1fr); }
  .aud { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}
/* menú completo + botones sólo cuando hay lugar (antes: menú hamburguesa) */
@media (min-width: 1180px) {
  .nav { display: flex; gap: 2rem; }
  .header__actions { display: flex; }
  .burger, .drawer { display: none; }
}
/* línea de tiempo horizontal (4 hitos con textos largos): sólo desde 960px; antes, vertical */
@media (min-width: 960px) {
  .timeline { grid-template-columns: repeat(4, 1fr); padding: 2.6rem 0 0; gap: 2rem; }
  .timeline__line { left: 6px; right: 0; top: 5px; bottom: auto; width: auto; height: 2px; }
  .timeline__line i { width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0); }
  .tl::before { left: 0; top: -2.6rem; }
  .tl p { max-width: 36ch; }
}
@media (min-width: 960px) {
  :root { --header-h: 96px; }
  .stats-sec__grid { grid-template-columns: .8fr 1.2fr; gap: 4rem; }
  .about__split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .tabs { grid-template-columns: 1.05fr .95fr; gap: 2rem; }
  .tabs__media { height: auto; min-height: 520px; }
  .eco__grid { grid-template-columns: .95fr 1.05fr; gap: 6rem; }
  .ecosys__head { grid-template-columns: 1fr 1fr; align-items: end; }
  .pastel-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 4.5rem 0 0; }
  .steps__line { left: 0; right: 0; top: 1.1rem; bottom: auto; width: auto; height: 2px; }
  .steps__line i { transform-origin: 0 50%; transform: scaleX(0); }
  .step::before { left: 0; top: -4.5rem; }
  .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 5rem; }
  .contact__grid { grid-template-columns: .95fr 1.05fr; gap: 5rem; align-items: start; }
  .hero__art { right: -4vw; }
}
@media (hover: none) { .pastel:hover { transform: none; box-shadow: none; } }

@media (prefers-reduced-motion: reduce) {
  .ring, .eco__orbit-rot, .mq__track, .wa::before, .wa::after, .urgent-dot::after { animation: none !important; }
  .wa { transition: none; }
  .mq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .drawer, .btn, .pastel, .tab__body, .tabs__media .ph { transition: none; }
}