/* ==========================================================================
   Venta Casas Mérida — hoja de estilos única
   Paleta original: teal #175151 · dorado #FACA51 · texto #252525 / #777777
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --teal:#175151;
  --teal-900:#0e3838;
  --teal-700:#123f3f;
  --teal-300:#2c7272;
  --teal-tint:rgba(23,81,81,.06);
  --gold:#FACA51;
  --gold-600:#e8b435;
  --gold-tint:rgba(250,202,81,.14);
  --ink:#252525;
  --ink-soft:#4d5555;
  --muted:#777777;
  --line:#E8EEEE;
  --white:#ffffff;
  --bg-soft:#F4F8F7;

  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  --maxw:1140px;
  --gutter:24px;
  --measure:68ch;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:120px;

  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:40px; --r-pill:999px;

  --shadow-xs:0 1px 2px rgba(14,56,56,.05);
  --shadow-sm:0 2px 4px rgba(14,56,56,.04), 0 6px 16px rgba(14,56,56,.05);
  --shadow-md:0 8px 20px rgba(14,56,56,.08), 0 2px 6px rgba(14,56,56,.05);
  --shadow-lg:0 24px 48px rgba(14,56,56,.16);
  --shadow-gold:0 10px 24px rgba(250,202,81,.38);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:600;line-height:1.18;letter-spacing:-.022em}
p{margin:0 0 1.05em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
b,strong{font-weight:600;color:var(--ink)}
::selection{background:var(--gold);color:var(--teal)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:110px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:var(--teal);padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.section{position:relative;padding-block:var(--s-10)}
.section--tight{padding-block:var(--s-9)}
.section--soft{background:var(--bg-soft)}

/* bloque oscuro flotante, con esquinas redondeadas */
.section--teal{
  background:
    radial-gradient(120% 140% at 12% 0%, #1c6060 0%, transparent 55%),
    linear-gradient(150deg, var(--teal) 0%, var(--teal-900) 100%);
  color:rgba(255,255,255,.84);
  border-radius:var(--r-xl);
  margin-inline:var(--gutter);
  overflow:hidden;
}
.section--teal::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:22px 22px;
}
.section--teal > *{position:relative}
.section--teal h1,.section--teal h2,.section--teal h3,.section--teal b{color:var(--white)}

/* la primera sección tras el hero “monta” sobre él con una curva */
.hero + .section{
  background:var(--white);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin-top:calc(var(--r-xl) * -1);
  z-index:2;
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}

/* ---------- 4. Tipografía de sección ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px 6px 10px;border-radius:var(--r-pill);
  background:var(--gold-tint);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#8a6a10;margin-bottom:var(--s-4);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-600)}
.section--teal .eyebrow{background:rgba(250,202,81,.16);color:var(--gold)}

h1,.h1{font-size:clamp(2.1rem,1.3rem + 3.1vw,3.25rem)}
h2,.h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.25rem)}
h3,.h3{font-size:1.0625rem;letter-spacing:-.01em}

.section-head{max-width:680px;margin-bottom:var(--s-8)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center p{margin-inline:auto}
.section-head p{margin-top:var(--s-5);color:var(--muted)}
.section--teal .section-head p{color:rgba(255,255,255,.78)}

.title-rule{position:relative;padding-bottom:var(--s-5)}
.title-rule::after{
  content:"";position:absolute;left:0;bottom:0;
  width:64px;height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--gold) 0%, rgba(250,202,81,.25) 100%);
}
.section-head--center .title-rule::after{left:50%;transform:translateX(-50%)}

.lead{font-size:1.09rem;line-height:1.78}

/* ---------- 5. Botones ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 28px;border:0;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FCD46E 0%, var(--gold) 100%);
  color:var(--teal);
  font-weight:700;font-size:.9375rem;line-height:1;letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(23,81,81,.22);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.btn::after{ /* brillo diagonal al pasar el cursor */
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .55s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold);filter:saturate(1.05)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;flex:none;fill:currentColor;position:relative}
.btn span{position:relative}
.btn--lg{padding:18px 34px;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)}

/* ---------- 6. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--teal);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck{
  background:rgba(18,63,63,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  backdrop-filter:saturate(1.4) blur(10px);
  box-shadow:0 1px 0 rgba(250,202,81,.28), 0 14px 34px rgba(0,0,0,.24);
}
.site-header__inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:88px;
  transition:min-height .3s var(--ease);
}
.site-header.is-stuck .site-header__inner{min-height:68px}
.brand img{width:clamp(190px,22vw,258px);transition:width .3s var(--ease)}
.site-header.is-stuck .brand img{width:clamp(170px,19vw,220px)}

.nav{display:flex;align-items:center;gap:2px}
.nav .btn{display:none} /* el CTA del menú sólo aparece en el panel móvil */
.nav a{
  position:relative;display:block;padding:10px 16px;border-radius:var(--r-pill);
  color:rgba(255,255,255,.82);font-size:.9375rem;font-weight:500;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:2px;width:0;height:2px;
  background:var(--gold);border-radius:2px;
  transform:translateX(-50%);transition:width .28s var(--ease);
}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:var(--white)}
.nav a:hover::after{width:18px}
.nav a[aria-current="page"]::after{width:22px}

.nav-toggle{
  display:none;width:46px;height:46px;padding:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-sm);color:var(--white);
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;position:relative;width:20px;height:2px;background:currentColor;border-radius:2px;transition:background-color .2s}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .25s var(--ease), top .25s var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  color:rgba(255,255,255,.85);
  background:
    radial-gradient(90% 120% at 78% 18%, rgba(250,202,81,.16) 0%, transparent 58%),
    radial-gradient(120% 130% at 8% 0%, #1c6262 0%, transparent 60%),
    linear-gradient(155deg, var(--teal) 0%, var(--teal-900) 100%);
  padding-bottom:var(--r-xl);
}
.hero::before{ /* trama de puntos */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 85%);
  mask-image:linear-gradient(180deg,#000 0%, transparent 85%);
}
.hero__inner{
  position:relative;
  display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s-8);align-items:center;
  padding-block:var(--s-10);
}
.hero h1,.hero h2,.hero b,.hero strong{color:var(--white)}
.hero h1{max-width:14ch;text-wrap:balance}
.hero h1::after{
  content:"";display:block;width:72px;height:5px;border-radius:5px;
  margin-top:var(--s-5);
  background:linear-gradient(90deg,var(--gold) 0%, rgba(250,202,81,.2) 100%);
}
.hero p{margin-top:var(--s-5);color:rgba(255,255,255,.82);max-width:56ch}
.hero .btn{margin-top:var(--s-7)}
.hero__media{position:relative}
.hero__media img{width:100%}
.hero__media img[src$=".webp"]{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}

/* ---------- 8. Tarjetas ---------- */
.card-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}
.card{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-8) var(--s-7);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before{ /* filo dorado superior que crece al pasar el cursor */
  content:"";position:absolute;top:0;left:0;height:4px;width:64px;
  background:var(--gold);border-radius:0 0 4px 0;
  transition:width .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#d9e6e4}
.card:hover::before{width:100%}
.card h2{margin-bottom:var(--s-4)}
.card p{color:var(--muted)}

/* ---------- 9. Catálogo ---------- */
.catalog__media{position:relative}
.catalog__media img{margin-inline:auto;position:relative}
.catalog__media img[src$=".webp"]{border-radius:var(--r-lg);box-shadow:var(--shadow-md);width:100%}
.catalog__media::before{ /* halo suave detrás de la imagen recortada */
  content:"";position:absolute;inset:12% 8%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(23,81,81,.10), transparent 70%);
}

/* ---------- 10. Acordeón ---------- */
.accordion{display:grid;gap:var(--s-2)}
.acc-item{
  border:1px solid transparent;border-radius:var(--r-md);
  background:transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.acc-item + .acc-item{box-shadow:inset 0 1px 0 var(--line)}
.acc-item.is-open{
  background:var(--white);border-color:var(--line);box-shadow:var(--shadow-sm);
}
.acc-item.is-open + .acc-item,.acc-item.is-open{box-shadow:var(--shadow-sm)}
.acc-item__btn{
  display:flex;align-items:flex-start;gap:var(--s-4);width:100%;
  padding:var(--s-5) var(--s-5);background:transparent;border:0;text-align:left;
  color:var(--ink);font-family:inherit;font-size:1rem;font-weight:600;line-height:1.5;
  transition:color .2s var(--ease);
}
.acc-item__btn:hover{color:var(--teal)}
.acc-item__icon{
  flex:none;width:26px;height:26px;margin-top:1px;border-radius:50%;
  background:var(--gold-tint);color:var(--gold-600);
  display:grid;place-items:center;
  transition:transform .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.acc-item__icon svg{width:11px;height:11px;fill:currentColor}
.acc-item__btn:hover .acc-item__icon{background:var(--gold);color:var(--teal)}
.acc-item.is-open .acc-item__icon{transform:rotate(180deg);background:var(--gold);color:var(--teal)}
.acc-item__panel{overflow:hidden;height:0;transition:height .34s var(--ease)}
.acc-item__panel-inner{padding:0 var(--s-5) var(--s-5) calc(var(--s-5) + 26px + var(--s-4));color:var(--muted)}

.section--teal .acc-item + .acc-item{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.section--teal .acc-item.is-open{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:none}
.section--teal .acc-item__btn{color:var(--white)}
.section--teal .acc-item__btn:hover{color:var(--gold)}
.section--teal .acc-item__icon{background:rgba(250,202,81,.18);color:var(--gold)}
.section--teal .acc-item__panel-inner{color:rgba(255,255,255,.78)}

/* ---------- 11. Servicios ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.service{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-7) var(--s-6) var(--s-6);box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.service::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(250,202,81,.2));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.service:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#d9e6e4}
.service:hover::before{transform:scaleX(1)}
/* los iconos ya traen su propio fondo dorado redondeado en el PNG */
.service__icon{position:relative;width:64px;margin-bottom:var(--s-5)}
.service__icon::after{
  content:"";position:absolute;inset:-10px;border-radius:var(--r-lg);
  background:var(--gold-tint);opacity:0;transition:opacity .3s var(--ease);
}
.service:hover .service__icon::after{opacity:1}
.service__icon img{
  position:relative;z-index:1;
  width:64px;height:64px;object-fit:contain;border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
}
.service h3{margin-bottom:var(--s-3)}
.service p{font-size:.9375rem;color:var(--muted)}

/* ---------- 12. Pasos legales ---------- */
.steps-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.steps{display:grid;gap:var(--s-5);counter-reset:step}
.step{
  position:relative;overflow:hidden;counter-increment:step;
  display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.step::after{ /* numeral fantasma 01 · 02 · 03 */
  content:counter(step,decimal-leading-zero);
  position:absolute;right:var(--s-5);top:6px;
  font-size:3.25rem;font-weight:700;line-height:1;letter-spacing:-.04em;
  color:rgba(23,81,81,.06);pointer-events:none;
  transition:color .3s var(--ease);
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#d9e6e4}
.step:hover::after{color:var(--gold-tint)}
.step__icon img{
  width:56px;height:56px;object-fit:contain;border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
}
.step h3{margin-bottom:var(--s-2);padding-right:56px}
.step p{font-size:.9375rem;color:var(--muted)}
.steps__media{display:flex;justify-content:center;position:relative}
.steps__media img{width:100%;max-width:430px;position:relative}
.steps__media::before{
  content:"";position:absolute;inset:14% 6%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(23,81,81,.09), transparent 70%);
}

/* ---------- 13. Métodos de pago ---------- */
.payments{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-7)}
.payment{
  position:relative;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);padding:var(--s-6) var(--s-6) var(--s-6) calc(var(--s-6) + 18px);
  color:rgba(255,255,255,.84);
  transition:background-color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.payment::before{
  content:"";position:absolute;left:0;top:var(--s-6);bottom:var(--s-6);width:4px;
  border-radius:0 4px 4px 0;background:var(--gold);
}
.payment:hover{background:rgba(255,255,255,.11);border-color:rgba(250,202,81,.4);transform:translateY(-4px)}
.payment p{max-width:none}

/* ---------- 14. FAQ ---------- */
.faq{max-width:860px;margin-inline:auto}
.faq .accordion{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-3);box-shadow:var(--shadow-sm);gap:0;
}
.faq .acc-item.is-open{box-shadow:none;background:var(--bg-soft);border-color:transparent}

/* ---------- 14b. Contacto ---------- */
.hero__inner--narrow{grid-template-columns:1fr;max-width:760px}

.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.contact-card{
  display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--shadow-xs);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.contact-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d9e6e4}
.contact-card__icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--gold-tint);color:var(--teal);margin-bottom:var(--s-5);
}
.contact-card__icon svg{width:22px;height:22px;fill:currentColor}
.contact-card__icon--wa{background:rgba(37,211,102,.14);color:#128C4B}
.contact-card h2{font-size:1.0625rem;margin-bottom:var(--s-2)}
.contact-card p{font-size:.9375rem;color:var(--muted);margin-bottom:var(--s-4)}
.contact-card__value{
  display:inline-block;font-weight:600;font-size:.9375rem;color:var(--teal);
  border-bottom:2px solid var(--gold);padding-bottom:2px;
}
.contact-card--static .contact-card__value{border-bottom-color:var(--line)}

.contact-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s-8);align-items:start}
.contact-aside{position:sticky;top:110px}
.contact-map{aspect-ratio:4/3;max-width:none;border-color:var(--line);box-shadow:var(--shadow-sm)}

/* ---------- 14c. Formulario ---------- */
.form{margin-top:var(--s-6)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.field{margin-bottom:var(--s-4)}
.field label{
  display:block;margin-bottom:6px;
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);
}
.field label span{color:var(--gold-600)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;
  font:inherit;font-size:.9375rem;color:var(--ink);
  background:var(--white);border:1px solid #dde7e6;border-radius:var(--r-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:140px}
.field input::placeholder,.field textarea::placeholder{color:#a3afae}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(250,202,81,.3);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#c0392b}
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__note{margin-top:var(--s-4);font-size:.8125rem;color:var(--muted)}

.form-status{
  margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border-radius:var(--r-md);
  font-size:.9375rem;font-weight:500;
}
.form-status--ok{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.4);color:#0f6b39}
.form-status--error{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.35);color:#a33227}

/* ---------- 14d. Zonas (Propiedades) ---------- */
.zones{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.zone{
  position:relative;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-7) var(--s-6);box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.zone::before{
  content:"";position:absolute;top:0;left:var(--s-6);width:40px;height:4px;
  border-radius:0 0 4px 4px;background:var(--gold);
  transition:width .4s var(--ease);
}
.zone:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#d9e6e4}
.zone:hover::before{width:80px}
.zone h3{margin-bottom:var(--s-3)}
.zone p{font-size:.9375rem;color:var(--muted);flex:1}
.zone__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-5);
  font-size:.9375rem;font-weight:600;color:var(--teal);
  transition:gap .2s var(--ease), color .2s var(--ease);
}
.zone__cta::after{content:"→";font-weight:400}
.zone__cta:hover{gap:14px;color:var(--gold-600)}

/* ---------- 15. Footer ---------- */
.site-footer{
  position:relative;
  background:linear-gradient(160deg, var(--teal) 0%, var(--teal-900) 100%);
  color:rgba(255,255,255,.78);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  margin-top:calc(var(--r-xl) * -1);
  overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:24px 24px;
}
.site-footer > *{position:relative}
.site-footer h2{color:var(--white)}

.footer-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-5);padding-block:var(--s-8);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-top h2{font-size:1.35rem;max-width:22ch}
.newsletter{
  display:flex;width:min(470px,100%);
  border-radius:var(--r-pill);background:var(--white);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:box-shadow .25s var(--ease);
}
.newsletter:focus-within{box-shadow:0 0 0 3px rgba(250,202,81,.55), 0 10px 26px rgba(0,0,0,.18)}
.newsletter input{
  flex:1;min-width:0;padding:16px 24px;border:0;background:transparent;
  border-radius:var(--r-pill) 0 0 var(--r-pill);
  font:inherit;font-size:.9375rem;color:var(--ink);
}
.newsletter input::placeholder{color:#9aa8a8}
.newsletter input:focus{outline:0}
.newsletter button{
  padding:16px 32px;border:0;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FCD46E 0%, var(--gold) 100%);
  color:var(--teal);font-weight:700;
  transition:filter .2s var(--ease)
}
.newsletter button:hover{filter:brightness(1.05)}
.newsletter__msg{margin:var(--s-3) 0 0;font-size:.875rem;color:var(--gold);min-height:1.2em}

.footer-cols{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s-8);
  padding-block:var(--s-8);
}
.footer-cols h2{
  font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s-5);
}
.footer-brand img{width:236px;margin-bottom:var(--s-4)}
.footer-brand p{font-size:.9375rem;margin-bottom:var(--s-5);max-width:38ch}
.footer-map{
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-md);
  aspect-ratio:16/8;max-width:400px;
}
.footer-map iframe{width:100%;height:100%;border:0;display:block}
.footer-links li + li{margin-top:var(--s-3)}
.footer-links a{
  position:relative;display:inline-block;padding-left:16px;
  font-size:.9375rem;color:rgba(255,255,255,.78);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.footer-links a::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;
  background:rgba(250,202,81,.5);transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.footer-links a:hover{color:var(--white);transform:translateX(3px)}
.footer-links a:hover::before{background:var(--gold);transform:scale(1.25)}

.footer-bottom{background:var(--gold)}
.footer-bottom p{
  margin:0;padding-block:var(--s-4);max-width:none;
  font-size:.875rem;color:var(--teal);font-weight:500;
}

/* ---------- 16. WhatsApp flotante ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 12px 28px rgba(0,0,0,.26);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float::before{ /* anillo pulsante */
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:wa-pulse 2.6s var(--ease) infinite;
}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 16px 34px rgba(0,0,0,.32)}
.wa-float svg{width:28px;height:28px;fill:currentColor;position:relative}

/* ---------- 17. Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- 18. Responsive ---------- */
@media (max-width:1024px){
  :root{--s-10:88px;--s-9:68px;--s-8:52px}
  .services{grid-template-columns:repeat(2,1fr)}
  .steps-layout{gap:var(--s-6)}
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-header__cta{display:none}
  .nav{
    position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--teal-700);
    padding:0 var(--gutter);
    box-shadow:0 20px 34px rgba(0,0,0,.3);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s var(--ease), padding .3s var(--ease), visibility .3s;
  }
  .nav.is-open{max-height:420px;visibility:visible;padding:var(--s-3) var(--gutter) var(--s-5)}
  .nav a{padding:15px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a::after{display:none}
  .nav a:hover{background:transparent}
  .nav .btn{display:inline-flex;margin-top:var(--s-5);justify-content:center;border-bottom:0}
}

@media (max-width:1024px){
  .contact-layout{grid-template-columns:1fr;gap:var(--s-7)}
  .contact-aside{position:static}
  .contact-map{aspect-ratio:16/9}
}

@media (max-width:820px){
  .contact-cards,.zones{grid-template-columns:1fr}
  .hero__inner{grid-template-columns:1fr;gap:var(--s-7);padding-block:var(--s-9)}
  .hero__media{order:-1}
  .hero h1{max-width:none}
  .grid-2,.card-pair,.payments,.steps-layout{grid-template-columns:1fr}
  .steps__media{order:-1}
  .steps__media img{max-width:340px}
  .footer-cols{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  .footer-top{flex-direction:column;align-items:flex-start}
  .footer-top h2{max-width:none}
  .newsletter{width:100%}
}

@media (max-width:600px){
  :root{--gutter:18px;--s-10:64px;--s-9:52px;--s-8:40px;--s-7:32px;--r-xl:26px}
  body{font-size:15.5px}
  .services{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr;gap:0}
  .card{padding:var(--s-6) var(--s-5)}
  .step{grid-template-columns:1fr;gap:var(--s-4)}
  .step:hover{transform:none}
  .step::after{font-size:2.5rem;right:var(--s-4)}
  .step h3{padding-right:44px}
  .section--teal{margin-inline:12px}
  .footer-cols{grid-template-columns:1fr;gap:var(--s-6)}
  .footer-map{max-width:none}
  .acc-item__btn{padding:var(--s-4) var(--s-4)}
  .acc-item__panel-inner{padding:0 var(--s-4) var(--s-4) var(--s-4)}
  .wa-float{right:16px;bottom:16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}