/* =========================================================
   Abuelos en su Casa — Rediseño 2026
   Tokens de marca extraídos del banner físico oficial
   (Cartel Banner/Final) — no de la paleta del draft v1.
   ========================================================= */

:root{
  /* ---- Verde menta de marca (logo + acentos) ---- */
  --mint:        #8dbdab;   /* fill claro: badges, tintes, íconos grandes */
  --mint-mid:    #4f9877;   /* trazos de ícono, enlaces sobre blanco */
  --mint-deep:   #2f7057;   /* botones primarios, texto mint sobre blanco */
  --mint-pale:   #eef5f1;   /* fondos de sección muy sutiles */

  /* ---- Tinta y superficies oscuras ---- */
  --ink:         #24261f;   /* texto principal */
  --ink-soft:    #4d5049;   /* texto secundario */
  --bar-dark:    #1c3327;   /* footer / barra de contacto, del banner */

  --white:       #ffffff;
  --paper:       #fbfaf8;

  --whatsapp:    #25d366;

  /* ---- Tipografía ----
     Poppins: titulares bold/geométricos (carácter del banner)
     Inter: texto de uso, UI, formularios
     Lora: isotipo/wordmark "Abuelos en su Casa" (serif del logo real) */
  --f-display: 'Poppins', 'Segoe UI', sans-serif;
  --f-body:    'Inter', 'Segoe UI', sans-serif;
  --f-mark:    'Lora', Georgia, serif;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;

  /* Sistema plano, sin drop shadow (ref. verity-template): la profundidad
     se resuelve con borde + fondo, nunca con sombra. */
  --line:      rgba(36,38,31,.12);
  --line-soft: rgba(36,38,31,.08);

  /* Ritmo vertical único para todas las secciones de contenido (Nosotros,
     Servicios, Cierre, Equipo, Testimonios, franja oscura, Mapa) — antes
     estaba desalineado (88px doble en Nosotros, 0 arriba en Cierre, 24px
     en el mapa). Un solo valor, más generoso en desktop. */
  --section-py: 100px;
  --section-py-mobile: 60px;

  /* Overlay de marca para los módulos CTA con foto de fondo (hero, cierre,
     franja oscura) — reemplaza el fade monocromo por una diagonal real de
     la rampa de marca (verde profundo → verde medio → menta), más premium
     que un overlay sólido/gris. */
  --cta-overlay: linear-gradient(45deg, rgba(30,62,52,.96) 0%, rgba(46,110,85,.92) 50%, rgba(60,130,102,.85) 100%);

  --ease: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; overflow-x:hidden; max-width:100vw;
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
h1,h2,h3{ font-family:var(--f-display); margin:0; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--mint-deep); color:var(--white); }
input, textarea{ caret-color:var(--mint-deep); }

:focus-visible{
  outline:2.5px solid var(--mint-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* Reveal on scroll — un solo momento autorizado, no por sección repetido */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
html:not(.js) .reveal{ opacity:1; transform:none; }

/* Cascada: grupos de items que entran uno después del otro, no todos juntos */
.stagger > .reveal:nth-child(1){ transition-delay:0s; }
.stagger > .reveal:nth-child(2){ transition-delay:.09s; }
.stagger > .reveal:nth-child(3){ transition-delay:.18s; }
.stagger > .reveal:nth-child(4){ transition-delay:.27s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee__track{ animation-play-state:paused !important; }
  *{ scroll-behavior:auto !important; }
}

.container{ max-width:1400px; margin-inline:auto; padding-inline:24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-weight:700;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint-deep);
}
.eyebrow::before{
  content:''; width:26px; height:2px; background:var(--mint-deep); flex:none;
}
.h1{ font-size:clamp(2.5rem, 4.6vw, 4.1rem); font-weight:800; line-height:1.04; color:var(--ink); }
.h2{ font-size:clamp(1.9rem, 3.2vw, 2.65rem); font-weight:800; line-height:1.1; color:var(--ink); }
.lead{ font-size:17.5px; line-height:1.65; color:var(--ink-soft); max-width:56ch; }

/* ===================== HEADER ===================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(28,51,39,.08);
}
.site-header__inner{
  max-width:1400px; margin-inline:auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand__mark{ width:38px; height:38px; flex:none; }
.brand__text{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.brand__name{
  /* wordmark real (vector, extraído de Logo.svg) — no es texto con fuente */
  display:block; height:20px; width:auto; color:var(--ink); flex:none;
}
.brand__tag{
  display:block; font-family:var(--f-body); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mint-mid);
  white-space:nowrap; line-height:1;
}
.nav{ display:flex; align-items:center; gap:30px; }
.nav__link{
  font-weight:600; font-size:14.5px; color:var(--ink-soft);
  position:relative; padding:4px 0; transition:color .2s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--mint-deep); transition:right .25s var(--ease);
}
.nav__link:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:10px; }
.hamburger{
  display:none; position:relative; background:none; border:0; padding:8px; cursor:pointer;
  width:38px; height:38px; align-items:center; justify-content:center;
}
.hamburger__icon{
  position:absolute; transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.hamburger__icon--close{ opacity:0; transform:rotate(-45deg) scale(.6); }
body.menu-open .hamburger__icon--open{ opacity:0; transform:rotate(45deg) scale(.6); }
body.menu-open .hamburger__icon--close{ opacity:1; transform:rotate(0deg) scale(1); }

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.btn:hover{ transform:translateY(-1.5px); }
.btn:active{ transform:translateY(0); }
/* Color de marca (#8dbdab) como solid de botón: texto siempre en --ink,
   nunca blanco — es el mismo piso de contraste que La Regla del Menta-Texto. */
.btn--primary{ background:var(--mint); color:var(--ink); }
.btn--primary:hover{ background:#7ba495; }
.btn--wa{ background:var(--whatsapp); color:var(--white); }
.btn--wa:hover{ background:#1fb857; }
.btn--ghost{ background:var(--white); color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--mint-deep); color:var(--mint-deep); }
.btn--call{ background:var(--paper); color:var(--ink); border-color:var(--line-soft); padding:10px 18px; }
.btn--call:hover{ border-color:var(--mint-deep); color:var(--mint-deep); }
.btn--lg{ padding:15px 30px; font-size:15.5px; }
.btn--block{ width:100%; }

/* ---- Shine: barrido de luz en hover, reutilizable en botones/cards/tiles ---- */
.shine, .btn, .staffer, .testi-card{ position:relative; overflow:hidden; }
.shine::after, .btn::after, .staffer::after, .testi-card::after{
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(141,189,171,.55), transparent);
  transform:skewX(-18deg); pointer-events:none;
  transition:left .75s var(--ease);
}
.btn--wa::after, .btn--primary::after,
.hero-bar__submit::after, .quote-grid__submit::after{ background:linear-gradient(115deg, transparent, rgba(255,255,255,.5), transparent); }
.shine:hover::after, .btn:hover::after, .staffer:hover::after, .testi-card.is-center:hover::after,
.shine:focus-visible::after{ left:130%; }
@media (prefers-reduced-motion: reduce){
  .shine::after, .btn::after, .staffer::after, .testi-card::after{ transition:none; display:none; }
}

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

.mobile-menu{
  display:none; flex-direction:column; gap:2px;
  background:var(--white); border-top:1px solid rgba(28,51,39,.08);
  padding:10px 24px 22px;
}
.mobile-menu a{ padding:13px 4px; font-weight:600; border-bottom:1px solid rgba(28,51,39,.06); }
.mobile-menu .btn{ margin-top:14px; }

body.menu-open .mobile-menu{ display:flex; }

@media (max-width:900px){
  .nav, .header-actions .btn--call{ display:none; }
  .hamburger{ display:flex; }
}
@media (max-width:600px){
  /* la barra flotante ya resuelve el WhatsApp persistente en mobile */
  .header-actions .btn--wa{ display:none; }
  .brand__tag{ display:none; }
  .brand__name{ height:17px; }
  .brand__mark{ width:32px; height:32px; }
}

/* ===================== FORM ===================== */
.form-card{
  background:var(--white); border-radius:var(--radius-l);
  padding:30px; border:1.5px solid var(--line);
}
.form-card__title{ font-family:var(--f-display); font-weight:800; font-size:21px; color:var(--ink); }
.form-card__hint{ font-size:14px; color:var(--ink-soft); margin-top:6px; }
.form{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.field{ display:flex; flex-direction:column; gap:6px; }
fieldset.field{ border:0; margin:0; padding:0; min-width:0; }
.field__label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); letter-spacing:.02em; }
.field__input, .field__select{
  font-family:var(--f-body); font-size:15px; color:var(--ink);
  padding:12px 14px; border-radius:var(--radius-s); border:1.5px solid rgba(28,51,39,.14);
  background:var(--paper); transition:border-color .18s var(--ease), background .18s var(--ease);
}
.field__input:focus, .field__select:focus{
  border-color:var(--mint-deep); background:var(--white); outline:none;
}
.field__input::placeholder{ color:#8a8d84; }
.seg{ display:flex; gap:8px; flex-wrap:wrap; }
.seg__opt{
  position:relative; flex:1 1 auto;
}
.seg__opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.seg__opt span{
  display:block; text-align:center; font-size:13.5px; font-weight:600;
  padding:11.5px 12px; border-radius:var(--radius-s);
  background:var(--paper); color:var(--ink-soft); transition:all .18s var(--ease);
}
.seg__opt input:checked + span{
  background:var(--mint-pale); color:var(--mint-deep);
}
.seg__opt input:focus-visible + span{ outline:2.5px solid var(--mint-deep); outline-offset:2px; }
.form-note{ font-size:12px; color:var(--ink-soft); margin-top:2px; }

/* honeypot */
input[name="_honey"]{ position:absolute; left:-9999px; }

/* ===================== FAB — contacto flotante sticky ===================== */
.fab{
  position:fixed; right:24px; bottom:24px; z-index:70;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  padding-bottom:env(safe-area-inset-bottom);
}
.fab__toggle{
  width:58px; height:58px; flex:none; border-radius:999px; border:0; cursor:pointer;
  background:var(--mint); color:var(--ink); position:relative;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.fab__toggle:hover{ background:#7ba495; transform:scale(1.06); }
.fab__icon{
  width:26px; height:26px; position:absolute;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.fab__icon--close{ opacity:0; transform:rotate(-45deg) scale(.6); }
.fab.is-open .fab__icon--open{ opacity:0; transform:rotate(45deg) scale(.6); }
.fab.is-open .fab__icon--close{ opacity:1; transform:rotate(0deg) scale(1); }

.fab__menu{
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.fab.is-open .fab__menu{ opacity:1; transform:translateY(0); pointer-events:auto; }

.fab__item{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--white); border:1.5px solid var(--line); border-radius:999px;
  padding:6px 18px 6px 6px; font-size:14px; font-weight:600; color:var(--ink);
  transition:border-color .2s var(--ease), transform .18s var(--ease);
}
.fab__item:hover{ border-color:var(--mint); transform:translateX(-3px); }
.fab__item--wa{ background:var(--whatsapp); color:var(--white); border-color:transparent; }
.fab__item-icon{
  width:34px; height:34px; flex:none; border-radius:999px;
  background:var(--mint-pale); color:var(--mint-deep);
  display:flex; align-items:center; justify-content:center;
}
.fab__item--wa .fab__item-icon{ background:rgba(255,255,255,.22); color:var(--white); }
.fab__item-icon svg{ width:17px; height:17px; }

@media (max-width:600px){
  .fab{ right:16px; bottom:16px; }
  .fab__toggle{ width:52px; height:52px; }
  .fab__item{ font-size:13.5px; }
}

/* ===================== FOOTER ===================== */
.footer{
  background-color:var(--bar-dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='.7' fill='%238dbdab' fill-opacity='.18'/%3E%3C/svg%3E");
  background-repeat:repeat;
  color:rgba(255,255,255,.82);
}
.footer__grid{
  max-width:1400px; margin-inline:auto; padding:56px 24px 32px;
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;
}
.footer__logo{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer__logo img{ width:32px; height:32px; }
.footer__name{ display:block; height:19px; width:auto; color:var(--white); }
.footer__desc{ font-size:14px; line-height:1.6; max-width:34ch; }
.footer__social{ display:flex; gap:10px; margin-top:18px; }
.footer__social a{
  width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); transition:background .18s var(--ease);
}
.footer__social a:hover{ background:var(--mint-deep); }
.footer__title{ font-family:var(--f-display); font-weight:700; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mint); margin-bottom:14px; }
.footer__list{ display:flex; flex-direction:column; gap:9px; font-size:14px; }
.footer__list a:hover{ color:var(--white); }
.footer__phone{ font-weight:700; color:var(--white); font-size:15px; }
.footer__copy{
  position:relative; padding:18px 24px; text-align:center;
  font-size:12.5px; color:rgba(255,255,255,.55);
}
.footer__copy::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:64px; height:2px; background:var(--mint); border-radius:2px; opacity:.6;
}
@media (max-width:760px){
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
}