/* ═══════════════════════════════════════════════
   U'CARE — LANDING PAGE
   Paleta: Burgundy · Gold · Cream · Deep Dark
════════════════════════════════════════════════ */

/* ─── FUENTES (pesos 300–700 únicamente) ─── */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('Fonts/GoogleSansFlex_9pt-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('Fonts/GoogleSansFlex_9pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('Fonts/GoogleSansFlex_9pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('Fonts/GoogleSansFlex_9pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('Fonts/GoogleSansFlex_9pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* ─── VARIABLES ─── */
:root {
  --burgundy:      #7B1C1C;
  --burgundy-deep: #3E0808;
  --burgundy-mid:  #5C1212;
  --gold:          #9B6200;
  --gold-light:    #F5C842;
  --gold-pale:     #FBF3E0;
  --cream:         #FAF0E0;
  --cream-soft:    #FDF6EC;
  --white:         #FFFFFF;
  --dark:          #1E0808;
  --text-dark:     #2C180F;
  --text-mid:      #5A4040;
  --text-light:    #6E5757;

  --radius-sm:   10px;
  --radius-md:   20px;
  --radius-lg:   32px;
  --radius-pill: 999px;

  --shadow-gold:    0 8px 32px rgba(196, 131, 10, 0.25);
  --shadow-card:    0 4px 24px rgba(44, 24, 15, 0.08);
  --shadow-strong:  0 16px 48px rgba(44, 24, 15, 0.16);
}

/* ─── RESPONSIVE GRID UTILITY ─── */
/*
  Uso:
    <div class="uc-grid">
      <div class="uc-col-span-2">...</div>   col span 2 en desktop
      <div class="uc-col-span-full">...</div> col span completo
      <div>...</div>
    </div>
*/
.uc-grid {
  display: grid;
  grid-template-columns: 1fr;                          /* móvil: 1 col  */
  gap: clamp(16px, 2.5vw, 32px);
  padding: clamp(20px, 4vw, 64px) clamp(20px, 5vw, 80px);
  width: 100%;
  box-sizing: border-box;
}

/* Tablet ≥ 640px → 2 columnas */
@media (min-width: 640px) {
  .uc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .uc-col-span-2   { grid-column: span 2; }
  .uc-col-span-full { grid-column: 1 / -1; }
}

/* Desktop ≥ 1024px → 4 columnas */
@media (min-width: 1024px) {
  .uc-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .uc-col-span-2   { grid-column: span 2; }
  .uc-col-span-3   { grid-column: span 3; }
  .uc-col-span-full { grid-column: 1 / -1; }
}

/* ─── RESET ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  /* Safari iOS fix: propagate fill-available to children */
  height: -webkit-fill-available;
}
body {
  min-height: -webkit-fill-available;
}
section[id], div[id] {
  scroll-margin-top: 124px;
}

body {
  font-family: 'Google Sans Flex', system-ui, sans-serif;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ─── TYPOGRAPHY UTILS ─── */
.gold    { color: var(--gold); }
.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.gold-eyebrow {
  color: rgba(245, 200, 66, 0.85);
}

/* ─── BUTTONS ─── */
.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 32px;
  background: linear-gradient(to right, #e8b800, #fcc406, #cc5b08);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 8px 28px rgba(204, 91, 8, 0.35);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(204, 91, 8, 0.45);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 28px;
  background: rgba(0, 0, 0, 0.30);
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.65);
}

/* ─── SCROLL REVEAL ─── */
/* Reveal: only animate if motion is OK; always visible as fallback */
/* Reveal animations — authoritative, always active */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1;
  transform: none;
}
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.28s; }
.reveal-d4 { transition-delay: 0.38s; }

/* ─── HERO ENTRANCE ─── */
.hero-eyebrow  { animation: heroUp 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s  both; }
.hero-line1    { opacity: 1; /* per-word fx via JS — slides from left */ }
.hero-line2 {
  opacity: 0;
  animation: heroFromRight 0.95s cubic-bezier(0.16,1,0.3,1) 1.1s both;
}
.hero-sub      { animation: heroUp 1s   cubic-bezier(0.16,1,0.3,1) 1.9s  both; }

@keyframes heroUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes heroFromRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ─── TEXT-EFFECT (blur per word, slides from left) ─── */
.text-fx-word {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  animation: textFxBlur 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--wd, 0s);
}
@keyframes textFxBlur {
  from { opacity: 0; filter: blur(10px); transform: translateX(-22px) translateY(4px); }
  to   { opacity: 1; filter: blur(0px);  transform: translateX(0)     translateY(0);   }
}

/* ─── NAVBAR ─── */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}

/* Top utility bar — opaque white */
.nav-topbar {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0 max(80px, calc((100% - 1360px) / 2 + 80px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.nav-tagline {
  font-size: 11px;
  font-weight: 400;
  color: rgba(123,25,30,0.38);
  letter-spacing: 0.04em;
  margin-left: 14px;
  margin-top: 5px;
  white-space: nowrap;
  align-self: center;
}
.nav-isotipo {
  height: 46px;
  width: auto;
  flex-shrink: 0;
}
.nav-logotipo {
  height: 70px;
  width: auto;
  flex-shrink: 0;
  margin-left: -10px;
}

.nav-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(123, 25, 30, 0.4);
  color: var(--burgundy);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.nav-action-btn:hover {
  background: rgba(123, 25, 30, 0.06);
  border-color: var(--burgundy);
}
.nav-action-primary {
  background: var(--burgundy);
  color: var(--white);
  border-color: var(--burgundy);
}
.nav-action-primary:hover {
  background: var(--burgundy-mid);
  border-color: var(--burgundy-mid);
}
.nav-action-phone {
  color: var(--text-mid);
  border-color: rgba(90, 64, 64, 0.3);
}
.nav-action-phone:hover {
  color: var(--burgundy);
  background: rgba(123, 25, 30, 0.04);
  border-color: rgba(123, 25, 30, 0.35);
}

/* Main nav bar — 80% transparent with blur */
.nav-mainbar {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.nav-inner {
  padding: 0 max(80px, calc((100% - 1360px) / 2 + 80px));
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 0;
  width: 100%;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-mid);
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--burgundy);
  background: rgba(123, 25, 30, 0.04);
}
.nav-links .nav-cta {
  background: transparent;
  color: var(--burgundy);
  font-weight: 500;
  padding: 10px 16px;
  box-shadow: none;
  border-radius: 0;
}
.nav-links .nav-cta:hover {
  color: var(--burgundy-deep);
  background: rgba(123, 25, 30, 0.04);
}

.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-dark);
}
/* SVG hamburger — animated paths */
.ham-icon path {
  transform-origin: center;
  transform-box: fill-box;
}
.ham-top { transform: translateY(-7px); transition: transform 300ms cubic-bezier(.5,.85,.25,1.1); }
.ham-mid { transform: rotate(0deg);     transition: transform 300ms cubic-bezier(.5,.85,.25,1.8); }
.ham-bot { transform: translateY(7px);  transition: transform 300ms cubic-bezier(.5,.85,.25,1.1); }

.nav-hamburger[aria-expanded="true"] .ham-top { transform: translateY(0) rotate(315deg); }
.nav-hamburger[aria-expanded="true"] .ham-mid { transform: rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .ham-bot { transform: translateY(0) rotate(135deg); }

/* ─── HERO ─── */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  will-change: transform;
  /* No transition — parallax controlled exclusively by rAF for smooth 60fps */
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}
.hero-slide.active {
  opacity: 1;
  z-index: 1;
}

/* Per-slide positioning — mobile first */
.hero-s1 { background-position: center 40%; }
.hero-s2 { background-position: center 30%; }
.hero-s3 { background-position: center 25%; }
.hero-s4 { background-position: center 25%; }

/* Tablet */
@media (min-width: 768px) {
  .hero-s1 { background-position: center 35%; }
  .hero-s2 { background-position: center 28%; }
  .hero-s3 { background-position: center 22%; }
  .hero-s4 { background-position: center 22%; }
}

/* Desktop large */
@media (min-width: 1200px) {
  .hero-s1 { background-position: center 38%; }
  .hero-s2 { background-position: center 30%; }
  .hero-s3 { background-position: center 20%; }
  .hero-s4 { background-position: center 20%; }
}

/* XL */
@media (min-width: 1600px) {
  .hero-s1 { background-position: center 42%; }
  .hero-s2 { background-position: center 32%; }
  .hero-s3 { background-position: center 22%; }
  .hero-s4 { background-position: center 22%; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    170deg,
    rgba(30, 4, 4, 0.04) 0%,
    rgba(60, 8, 8, 0.28) 45%,
    rgba(30, 4, 4, 0.72) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px max(80px, calc((100% - 1360px) / 2 + 80px)) 16vh max(80px, calc((100% - 1360px) / 2 + 80px));
  width: 100%;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  max-width: min(100%, 1440px);
}

.hero-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding-left: 14px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 16px;
  white-space: nowrap;
  opacity: 1;
}

.hero-line1 {
  font-size: clamp(40px, 5.5vw, 96px);
  font-weight: 300;
  color: #ffffff;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.18);
  line-height: 1.08;
  margin-bottom: 0;
  letter-spacing: -0.025em;
}
.hero-line2 {
  font-size: clamp(40px, 5.5vw, 96px);
  font-weight: 300;
  color: #ffffff;
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.18);
  line-height: 1.08;
  text-align: right;
  margin-top: -0.06em;
  margin-bottom: 0;
  letter-spacing: -0.025em;
}
.hero-line1 em, .hero-line2 em {
  font-style: normal;
  font-weight: 700;
  background: linear-gradient(
    -45deg,
    #ffe033,
    #ffc200,
    #ff9a00,
    #e87200,
    #ffc200,
    #ffe033,
    #fff0a0,
    #ffc200
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hero-gradient 6s ease-in-out infinite;
  animation-play-state: running;
}

@keyframes hero-gradient {
  0%   { background-position: 0%   50%; }
  25%  { background-position: 100% 0%;  }
  50%  { background-position: 100% 100%; }
  75%  { background-position: 0%   100%; }
  100% { background-position: 0%   50%; }
}

.hero-sub {
  margin-top: clamp(20px, 2.2vh, 32px);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  max-width: 520px;
  letter-spacing: 0.01em;
}


/* ─── ESCRIBENOS MORPHING POPOVER ─── */
.nav-escribenos-wrap {
  position: relative;
  flex-shrink: 0;
}
.nav-escribenos-btn {
  transition: opacity 0.18s, transform 0.18s;
}
.nav-escribenos-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}
.nav-escribenos-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  background: #fff;
  border: 1.5px solid rgba(123, 25, 30, 0.2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 300;
  transform-origin: top right;
}
.nav-escribenos-panel.open {
  display: flex;
  animation: escribenosOpen 0.42s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.nav-escribenos-panel.closing {
  animation: escribenosClose 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes escribenosOpen {
  from { opacity: 0.6; transform: scale(0, 0); }
  to   { opacity: 1;   transform: scale(1, 1); }
}
@keyframes escribenosClose {
  from { opacity: 1;   transform: scale(1, 1); }
  to   { opacity: 0;   transform: scale(0, 0); }
}
.nav-escribenos-label {
  display: block;
  padding: 12px 14px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--burgundy);
  letter-spacing: 0.01em;
}
.nav-escribenos-textarea {
  width: 100%;
  height: 88px;
  resize: none;
  border: none;
  background: transparent;
  padding: 4px 14px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  outline: none;
}
.nav-escribenos-textarea::placeholder {
  color: var(--text-light);
  font-weight: 300;
}
.nav-escribenos-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.nav-escribenos-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-mid);
  transition: background 0.15s;
}
.nav-escribenos-back:hover { background: rgba(0,0,0,0.05); }
.nav-escribenos-send {
  padding: 6px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--text-mid);
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-escribenos-send:hover {
  background: rgba(123, 25, 30, 0.06);
  color: var(--burgundy);
  border-color: rgba(123, 25, 30, 0.3);
}

/* ─── PEDIR HORA MORPHING POPOVER ─── */
.nav-pedir-wrap {
  position: relative;
  flex-shrink: 0;
}
.nav-pedir-btn {
  transition: opacity 0.18s, transform 0.18s;
}
.nav-pedir-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}
.nav-pedir-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  background: #fff;
  border: 1.5px solid rgba(123, 25, 30, 0.2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 300;
  transform-origin: top right;
}
.nav-pedir-panel.open {
  display: flex;
  animation: pedirOpen 0.42s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.nav-pedir-panel.closing {
  animation: pedirClose 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes pedirOpen {
  from { opacity: 0.6; transform: scale(0, 0); }
  to   { opacity: 1;   transform: scale(1, 1); }
}
@keyframes pedirClose {
  from { opacity: 1;   transform: scale(1, 1); }
  to   { opacity: 0;   transform: scale(0, 0); }
}
.nav-pedir-label {
  display: block;
  padding: 12px 14px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--burgundy);
  letter-spacing: 0.01em;
}
.nav-pedir-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nav-pedir-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.nav-pedir-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-light);
}
.nav-pedir-input {
  width: 100%;
  padding: 11px 0;
  font-family: inherit;
  font-size: 16px; /* ≥16px prevents iOS auto-zoom */
  font-weight: 400;
  color: var(--text-dark);
  background: transparent;
  border: none;
  outline: none;
}
.nav-pedir-input::placeholder { color: var(--text-light); font-weight: 300; }
.nav-pedir-date { cursor: pointer; color: var(--text-mid); color-scheme: light; accent-color: #7b191e; }
.nav-pedir-select {
  appearance: none;
  cursor: pointer;
  color: var(--text-mid);
  background-image: none;
  padding-right: 0;
}
.nav-pedir-select:invalid { color: var(--text-light); font-weight: 300; }
.nav-pedir-field--textarea { align-items: flex-start; }
.nav-pedir-textarea { resize: none; min-height: 68px; line-height: 1.5; padding-top: 10px; padding-bottom: 10px; }
.nav-pedir-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 2px;
}
.nav-pedir-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-mid);
  transition: background 0.15s;
}
.nav-pedir-back:hover { background: rgba(0,0,0,0.05); }
.nav-pedir-submit {
  padding: 7px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: var(--burgundy);
  color: var(--white);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-pedir-submit:hover { background: var(--burgundy-mid); }

/* ─── HERO SCROLL CTA ─── */
.hero-more {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  animation: heroUp 1s cubic-bezier(0.16,1,0.3,1) 1.8s both;
  transition: color 0.2s;
}
.hero-more:hover { color: rgba(255, 255, 255, 0.95); }
.hero-more-text {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-more-arrow {
  animation: arrowBob 2.2s ease-in-out 3.6s infinite;
}
@keyframes arrowBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ─── GOLD BAND ─── */
.gold-band {
  background: linear-gradient(135deg, #F5C842 0%, #C4830A 60%, #9A6008 100%);
  padding: 24px max(80px, calc((100% - 1360px) / 2 + 80px));
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.gold-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 140% at 50% -20%, rgba(255,255,255,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.band-headline {
  font-size: clamp(18px, 1.65vw, 23px);
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: min(46vw, 820px);
  line-height: 1.65;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.band-headline strong {
  font-weight: 600;
}




/* ─── FEATURES SECTION (#how) ─── */
.features-section {
  background: var(--white);
  padding: 96px max(80px, calc((100% - 1360px) / 2 + 80px));
  position: relative;
  overflow: hidden;
}
.features-heading {
  max-width: 1200px;
  margin: 0 auto 44px;
  padding-left: 20px;
}
.features-heading h2 {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.features-heading h2::before {
  content: "¿Qué hacemos?";
  display: none;
}
.features-heading .eyebrow-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.features-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}

/* feature tab list */
.feat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feat-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.25s;
}
.feat-item:hover { background: rgba(0,0,0,0.03); }
.feat-item.feat-active {
  background: var(--white);
  box-shadow: 0 4px 24px rgba(0,0,0,0.09);
  border: 1px solid rgba(0,0,0,0.06);
}

.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(163,22,32,0.09);
  color: var(--burgundy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s;
}
.feat-icon svg { width: 20px; height: 20px; }
.feat-item.feat-active .feat-icon {
  background: var(--burgundy);
  color: #fff;
}

.feat-body { flex: 1; min-width: 0; }
.feat-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
  transition: color 0.25s;
}
.feat-item:not(.feat-active) .feat-body h3 { color: var(--text-mid); }
.feat-item[data-feat="1"] .feat-icon { background: rgba(176,125,32,0.12); color: #b07d20; }
.feat-item[data-feat="1"].feat-active .feat-icon { background: #b07d20; color: #fff; }
.feat-item[data-feat="2"] .feat-icon { background: rgba(74,155,181,0.12); color: #4a9bb5; }
.feat-item[data-feat="2"].feat-active .feat-icon { background: #4a9bb5; color: #fff; }
.feat-body p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 14px;
}
.feat-item:not(.feat-active) .feat-body p { color: rgba(80,50,50,0.62); }

.feat-track {
  height: 2px;
  background: rgba(0,0,0,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.feat-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--burgundy), #c0242c);
  border-radius: 2px;
  transition: width 0.1s linear;
}

.feat-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--burgundy);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.feat-active .feat-more { opacity: 1; }
.feat-more:hover { text-decoration: underline; }
.feat-chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.feat-more[aria-expanded="true"] .feat-chevron { transform: rotate(180deg); }

.feat-accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.feat-accordion.open { grid-template-rows: 1fr; }
.feat-accordion-inner {
  overflow: hidden;
  min-height: 0;
}



.feat-spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 4px;
}
.feat-spec-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--burgundy);
  background: rgba(123,25,30,0.06);
  border: 1px solid rgba(123,25,30,0.12);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* right display panel */
.feat-display {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #f5f0f0;
  box-shadow: 0 8px 48px rgba(0,0,0,0.13);
  height: 100%;
  min-height: 300px;
}
.feat-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
              transform 0.45s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.feat-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feat-panel.feat-panel-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}



/* ─── QUIÉNES SOMOS ─── */
.founders-section {
  background: #fee3af;
  padding: 64px max(80px, calc((100% - 1360px) / 2 + 80px)) 80px;
  color: var(--text-dark);
  overflow: visible;
}

.founders-new-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.founders-header {
  max-width: 680px;
  margin-bottom: 40px;
}
.founders-header blockquote {
  font-size: clamp(18px, 1.8vw, 24px);
  padding-left: 20px;
}

.founders-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.founder-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(44,24,15,0.09);
  transition: transform 0.22s, box-shadow 0.22s;
}
.founder-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(44,24,15,0.14);
}
.founder-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream-soft);
}
.founder-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform 0.4s;
}
.founder-card:hover .founder-card-photo img { transform: scale(1.04); }
.founder-card-body {
  padding: 18px 20px 22px;
}
.founder-card-body strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--burgundy-deep);
  margin-bottom: 3px;
}
.founder-card-body span {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.founder-card-body p {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.65;
}

/* Per-founder photo alignment */
/* Susan: más alejada en foto — zoom + subir */
.founder-card:nth-child(1) .founder-card-photo img {
  object-position: center 22%;
  transform: scale(1.22);
  border-bottom: 3px solid #4A82BA;
}
.founder-card:hover:nth-child(1) .founder-card-photo img { transform: scale(1.26); }

/* Susana: referencia — sin cambios */
.founder-card:nth-child(2) .founder-card-photo img {
  object-position: center 14%;
  border-bottom: 3px solid #7B1C1C;
}

/* María: zoom para igualar */
.founder-card:nth-child(3) .founder-card-photo img {
  object-position: center 20%;
  transform: scale(1.28);
  border-bottom: 3px solid #9B6200;
}
.founder-card:hover:nth-child(3) .founder-card-photo img { transform: scale(1.32); }

.founders-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: end;
}

.founders-image-wrap {
  position: relative;
  align-self: end;
}
.founders-image-wrap img {
  width: 125%;
  margin-left: -12%;
  height: auto;
  display: block;
}

.founders-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.founders-section .eyebrow { color: var(--gold); }

blockquote {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  color: var(--burgundy-deep);
  line-height: 1.45;
  letter-spacing: -0.01em;
  border-left: 3px solid var(--gold);
  padding-left: 24px;
}
blockquote em {
  font-style: normal;
  color: var(--burgundy);
}

.founders-story {
  font-size: 16px;
  font-weight: 400;
  color: rgba(60, 17, 20, 0.85);
  line-height: 1.8;
  max-width: 680px;
  margin-top: 32px;
  margin-bottom: 56px;
}

.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.founder {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border: 1px solid rgba(196, 131, 10, 0.12);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.founder-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(196, 131, 10, 0.25);
}
/* Per-founder accent borders */
.founders-grid .founder:nth-child(1) .founder-avatar { border-color: #4A82BA; }
.founders-grid .founder:nth-child(2) .founder-avatar { border-color: #7B1C1C; }
.founders-grid .founder:nth-child(3) .founder-avatar { border-color: #9B6200; }
.founder-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.founder strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.founders-section .founder strong { color: var(--burgundy-deep); }
.founder span {
  font-size: 12px;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.02em;
}

/* ─── CÓMO FUNCIONA CARDS ─── */
/* ─── SERVICE CAROUSEL (#how) ─── */
.svc-carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  position: relative;
  overflow: hidden;
}
.svc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.svc-bg.active { opacity: 1; }
.svc-bg-0 { background: linear-gradient(135deg, #1a0c00 0%, #7d4200 38%, #b06010 68%, #7b191e 100%); }
.svc-bg-1 { background: linear-gradient(135deg, #0e0204 0%, #5a1015 32%, #7b191e 56%, #9e4400 80%, #c47800 100%); }
.svc-bg-2 { background: linear-gradient(135deg, #080204 0%, #220a0c 50%, #1a0c00 100%); }

/* Left panel — text */
.svc-left {
  display: flex;
  flex-direction: column;
  padding: 88px 64px 88px max(80px, calc(50vw - 640px));
  position: relative;
  z-index: 1;
}
.svc-eyebrow {
  display: block;
  color: var(--gold);
  transition: color 0.45s;
}

/* Tabs */
.svc-tabs {
  display: flex;
  margin: 28px 0 44px;
  border-bottom: 1px solid rgba(163,22,32,0.18);
  transition: border-color 0.45s;
}
.svc-tab {
  display: flex;
  align-items: center;
  padding: 10px 22px 14px 0;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  color: rgba(60,17,20,0.40);
  transition: color 0.25s;
}
.svc-tab:hover { color: rgba(60,17,20,0.72); }
.svc-tab:first-child { padding-left: 0; }
.svc-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 22px;
  height: 2px;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), background 0.45s;
}
.svc-tab.svc-tab-active { color: var(--burgundy-deep); }
.svc-tab.svc-tab-active::after { transform: scaleX(1); }
.svc-tab-name { font-size: 13px; font-weight: 500; }

/* Stage — text-only, CSS grid stacking */
.svc-stage {
  display: grid;
  grid-template-areas: "stage";
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.svc-slide {
  grid-area: stage;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
  align-self: center;
}
.svc-slide.svc-slide-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.svc-title {
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 700;
  color: var(--burgundy-deep);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 22px;
  transition: color 0.45s;
}
.svc-desc {
  font-size: 16px;
  font-weight: 300;
  color: rgba(60,17,20,0.68);
  line-height: 1.85;
  max-width: 400px;
  transition: color 0.45s;
}
.svc-desc-aside {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(60,17,20,0.32);
  margin-top: 4px;
  margin-bottom: 20px;
  transition: color 0.45s;
}
.svc-theme-0 .svc-desc-aside { color: rgba(255,255,255,0.28); }
.svc-theme-1 .svc-desc-aside { color: rgba(255,255,255,0.28); }
.svc-theme-2 .svc-desc-aside { color: rgba(255,255,255,0.25); }

/* Dots nav */
.svc-nav { margin-top: 40px; }
.svc-dots { display: flex; gap: 10px; align-items: center; }
.svc-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(163,22,32,0.25);
  cursor: pointer;
  transition: background 0.35s, transform 0.35s;
}
.svc-dot.svc-dot-active {
  background: var(--burgundy);
  transform: scale(1.45);
}

/* Right panel — full-height video */
.svc-right {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: grid;
  grid-template-areas: "v";
}
.svc-vslide {
  grid-area: v;
  position: relative;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.svc-vslide.svc-vslide-active {
  opacity: 1;
  pointer-events: auto;
}
.svc-vslide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Decorative corners on video panel */
.svc-corner {
  position: absolute;
  width: 26px; height: 26px;
  border-color: rgba(255,255,255,0.32);
  border-style: solid;
  pointer-events: none;
}
.svc-corner-tl { top: 20px; left: 20px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; }
.svc-corner-bl { bottom: 20px; left: 20px; border-width: 0 0 2px 2px; border-radius: 0 0 0 3px; }

/* ─── Theme 0 — near-black ochre (Asistencia cotidiana) ─── */
.svc-theme-0 .svc-eyebrow { color: rgba(255,255,255,0.66); }
.svc-theme-0 .svc-tabs { border-bottom-color: rgba(255,255,255,0.2); }
.svc-theme-0 .svc-tab { color: rgba(255,255,255,0.40); }
.svc-theme-0 .svc-tab:hover { color: rgba(255,255,255,0.75); }
.svc-theme-0 .svc-tab.svc-tab-active { color: #fff; }
.svc-theme-0 .svc-tab::after { background: rgba(255,255,255,0.85); }
.svc-theme-0 .svc-title { color: #fff; }
.svc-theme-0 .svc-desc { color: rgba(255,255,255,0.82); }
.svc-theme-0 .svc-dot { background: rgba(255,255,255,0.28); }
.svc-theme-0 .svc-dot.svc-dot-active { background: #fff; }

/* ─── Theme 1 — near-black burgundy (Salud y acompañamiento) ─── */
.svc-theme-1 .svc-eyebrow { color: rgba(255,255,255,0.66); }
.svc-theme-1 .svc-tabs { border-bottom-color: rgba(255,255,255,0.15); }
.svc-theme-1 .svc-tab { color: rgba(255,255,255,0.38); }
.svc-theme-1 .svc-tab:hover { color: rgba(255,255,255,0.75); }
.svc-theme-1 .svc-tab.svc-tab-active { color: #fff; }
.svc-theme-1 .svc-tab::after { background: rgba(255,255,255,0.85); }
.svc-theme-1 .svc-title { color: #fff; }
.svc-theme-1 .svc-desc { color: rgba(255,255,255,0.78); }
.svc-theme-1 .svc-dot { background: rgba(255,255,255,0.25); }
.svc-theme-1 .svc-dot.svc-dot-active { background: #fff; }

/* ─── Theme 2 — carbon (¿Necesitas algo más específico?) ─── */
.svc-theme-2 .svc-eyebrow { color: rgba(255,255,255,0.55); }
.svc-theme-2 .svc-tabs { border-bottom-color: rgba(255,255,255,0.12); }
.svc-theme-2 .svc-tab { color: rgba(255,255,255,0.35); }
.svc-theme-2 .svc-tab:hover { color: rgba(255,255,255,0.75); }
.svc-theme-2 .svc-tab.svc-tab-active { color: #fff; }
.svc-theme-2 .svc-tab::after { background: rgba(255,255,255,0.80); }
.svc-theme-2 .svc-title { color: #fff; }
.svc-theme-2 .svc-desc { color: rgba(255,255,255,0.68); }
.svc-theme-2 .svc-dot { background: rgba(255,255,255,0.22); }
.svc-theme-2 .svc-dot.svc-dot-active { background: #fff; }

/* Form panel in the right column */
.svc-vform {
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px;
}
.svc-cf {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.svc-cf-who {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.svc-cf-qlabel {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
}
.svc-cf-toggle {
  display: flex;
  gap: 8px;
}
.svc-cf-opt {
  flex: 1;
  padding: 9px 0;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.svc-cf-opt:hover { background: rgba(255,255,255,0.13); color: #fff; }
.svc-cf-opt.svc-cf-opt-active {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.svc-cf-field { display: flex; }
.svc-cf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 300;
  color: #fff;
  font-family: inherit;
  outline: none;
  resize: none;
  transition: border-color 0.2s, background 0.2s;
}
.svc-cf-input::placeholder { color: rgba(255,255,255,0.35); }
.svc-cf-input:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); }
.svc-cf-ta { line-height: 1.6; }
.svc-cf-submit {
  padding: 12px;
  background: #fff;
  color: #181818;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  margin-top: 4px;
}
.svc-cf-submit:hover { opacity: 0.9; transform: scale(1.01); }
.svc-cf-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.svc-cf-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  color: rgba(255,255,255,0.85);
}
.svc-cf-success svg { width: 48px; height: 48px; color: #fff; }
.svc-cf-success p { font-size: 16px; font-weight: 300; line-height: 1.7; }

.svc-theme-2 .svc-cta-wrap { display: none; }

/* ─── CTA FORM inside carousel ─── */
.svc-cta-wrap {
  margin-top: 28px;
}
.svc-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  background: rgba(255,255,255,0.13);
  border: 1.5px solid rgba(255,255,255,0.38);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  max-height: 50px;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s, opacity 0.3s, max-height 0.3s, padding 0.3s, margin 0.3s;
}
.svc-cta-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.6);
}
.svc-cta-wrap.open .svc-cta-btn {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  pointer-events: none;
}

/* Form panel */
.svc-cta-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
}
.svc-cta-wrap.open .svc-cta-form {
  max-height: 320px;
  opacity: 1;
}
.svc-cta-label {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.80);
  line-height: 1.6;
  margin: 0;
}
.svc-cta-ta,
.svc-cta-contact {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 44px;
  font-size: 16px; /* ≥16px prevents iOS auto-zoom */
  font-weight: 300;
  color: #fff;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.svc-cta-ta::placeholder,
.svc-cta-contact::placeholder { color: rgba(255,255,255,0.40); }
.svc-cta-ta:focus,
.svc-cta-contact:focus {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
}
.svc-cta-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.svc-cta-back {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  padding: 10px 12px;
  min-height: 44px;
  min-width: 44px;
  transition: color 0.2s;
}
.svc-cta-back:hover { color: rgba(255,255,255,0.9); }
.svc-cta-send {
  padding: 11px 20px;
  min-height: 44px;
  background: rgba(255,255,255,0.95);
  color: #1a0a0c;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.svc-cta-send:hover {
  background: #fff;
  transform: scale(1.03);
}



/* ─── CONTACTO ─── */
.contact-section {
  position: relative;
  padding: 96px max(80px, calc((100% - 1360px) / 2 + 80px));
  overflow: hidden;
}
.contact-section::before {
  content: '';
  position: absolute;
  inset: -6%;
  background: url('assets/img/buenas-manos.jpg') center/cover no-repeat;
  filter: blur(10px) brightness(0.6);
  z-index: 0;
}
.contact-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(29, 4, 4, 0.42);
  z-index: 1;
}

.contact-inner {
  position: relative;
  z-index: 2;
  overflow: visible;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 52px 48px;
  box-shadow: var(--shadow-strong);
  border: 1px solid rgba(196, 131, 10, 0.08);
  overflow: visible; /* allow animated dropdown to show */
  position: relative;
  z-index: 1;
}
.contact-form-card h2 {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.contact-lead {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 32px;
}

.form-group {
  margin-bottom: 14px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.form-row .form-group {
  margin-bottom: 0;
}

input, select, textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.18s, background 0.18s;
  appearance: none;
}
input::placeholder, textarea::placeholder {
  color: var(--text-light);
  font-weight: 300;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: var(--white);
}
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C4830A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
textarea {
  resize: vertical;
  min-height: 88px;
}

.btn-submit {
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: var(--shadow-gold);
  letter-spacing: 0.02em;
}
.btn-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(196, 131, 10, 0.45);
}
.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 48px 0;
}
.success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--white);
  font-weight: 700;
}
.form-success h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}
.form-success p {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.7;
}

/* Aside */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-whatsapp-card {
  background: var(--burgundy);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--white);
}
.wa-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
.contact-whatsapp-card h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.contact-whatsapp-card p {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.75);
  margin-bottom: 14px;
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  min-height: 44px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: transform 0.18s;
}
.btn-whatsapp:hover {
  transform: translateY(-1px);
}

.contact-pillars {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(196, 131, 10, 0.08);
}
.contact-pillar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pillar-gold-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  flex-shrink: 0;
}
.contact-pillar p {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
}

/* ─── JOBS MODAL ─── */
.jobs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,6,6,0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1);
}
.jobs-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.jobs-modal {
  background: #fff;
  border-radius: 20px;
  padding: 48px 44px 40px;
  width: 100%;
  max-width: 480px;
  position:  relative;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 32px 80px rgba(60,8,8,0.28);
  max-height: 90vh;
  overflow-y: auto;
}
.jobs-overlay.open .jobs-modal {
  transform: translateY(0) scale(1);
}
.jobs-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 34px; height: 34px;
  border: none; background: rgba(163,22,32,0.07);
  border-radius: 50%; cursor: pointer; color: var(--burgundy);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.jobs-close:hover { background: rgba(163,22,32,0.14); }
.jobs-close svg { width: 16px; height: 16px; }
.jobs-title {
  font-size: 26px; font-weight: 700;
  color: var(--burgundy-deep);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.jobs-sub {
  font-size: 14px; font-weight: 300;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 32px;
}
.jobs-form { display: flex; flex-direction: column; gap: 18px; }
.jobs-field { display: flex; flex-direction: column; gap: 6px; }
.jobs-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mid);
}
.jobs-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  border: 1.5px solid rgba(163,22,32,0.18);
  border-radius: 9px;
  font-size: 14px; font-weight: 300;
  color: var(--text-dark);
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  appearance: none; -webkit-appearance: none;
}
.jobs-input:focus { border-color: var(--burgundy); }
.jobs-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b1c1c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
/* File upload */
.jobs-file-input { display: none; }
.jobs-file-label {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border: 1.5px dashed rgba(163,22,32,0.3);
  border-radius: 9px; cursor: pointer;
  font-size: 14px; font-weight: 300;
  color: var(--text-mid);
  transition: border-color 0.2s, background 0.2s;
}
.jobs-file-label:hover { border-color: var(--burgundy); background: rgba(163,22,32,0.03); }
.jobs-file-label svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--burgundy); }
.jobs-file-label.has-file { border-style: solid; border-color: var(--burgundy); color: var(--burgundy); }
.jobs-submit {
  margin-top: 6px; padding: 13px;
  background: var(--burgundy);
  color: #fff; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  cursor: pointer; width: 100%;
  transition: background 0.2s, transform 0.15s;
}
.jobs-submit:hover { background: var(--burgundy-mid); transform: scale(1.01); }
.jobs-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
/* Success state */
.jobs-success {
  display: none;
  flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
  padding: 24px 0 8px;
}
.jobs-success svg { width: 48px; height: 48px; color: var(--burgundy); }
.jobs-success p { font-size: 15px; color: var(--text-mid); line-height: 1.7; }

/* ─── FOOTER ─── */
footer {
  background: #321614;
  color: var(--text-light);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 80px 48px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.footer-brand img {
  height: 48px;
  width: auto;
  opacity: 0.9;
  filter: brightness(100);
}
.footer-name {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: white;
  line-height: 1.1;
  margin-bottom: 6px;
}
.footer-brand p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: white;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}
.footer-nav a {
  font-size: 14px;
  font-weight: 300;
  color: #d0cac9;
  transition: color 0.15s;
}
.footer-nav a:hover {
  color: var(--white);
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 80px 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-bottom p {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255,255,255,0.35);
  text-align: center;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
  .nav-topbar,
  .nav-inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .founders-section,
  .contact-section {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hero-content {
    padding-left: 48px;
    padding-right: 64px;
  }

  .features-section {
    padding-left: 40px;
    padding-right: 40px;
  }
  .features-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feat-display {
    min-height: 280px;
  }

  .founders-inner,
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .founders-image-wrap {
    max-width: 480px;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    padding-left: 40px;
    padding-right: 40px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    padding-left: 40px;
    padding-right: 40px;
  }
  .nav-inner {
    padding: 0 40px;
  }
}

@media (max-width: 768px) {

  /* ─── GLOBAL OVERFLOW GUARD ─── */
  html { overflow-x: hidden; }

  /* ─── NAV — blanco siempre en móvil ─── */
  .nav-topbar {
    padding: 10px 20px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .nav-logo { gap: 8px; }
  .nav-tagline { display: none; }
  .nav-isotipo { height: 38px; filter: none; }
  .nav-logotipo { height: 44px; margin-left: -6px; filter: none; }
  .nav-action-primary,
  .nav-escribenos-wrap,
  .nav-action-phone { display: none; }
  .nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    gap: 5px;
    flex-direction: column;
    color: var(--burgundy);
  }
  .ham-top, .ham-mid, .ham-bot { stroke: #af0820; }
  .ham-icon { width: 22px; height: 22px; }

  /* Scrolled: ya es blanco, solo asegurar */
  #navbar.scrolled .nav-topbar {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  #navbar.scrolled .nav-isotipo { filter: none; }
  #navbar.scrolled .nav-logotipo { filter: none; }
  #navbar.scrolled .nav-hamburger { background: transparent; }
  #navbar.scrolled .nav-hamburger span { background: var(--text-dark); }

  /* ─── HERO ─── */
  #hero { height: 100vh; height: 100dvh; min-height: 580px; }
  .hero-bg {
    background-color: var(--dark);
  }
  .hero-content {
    padding: 80px 24px 160px 24px;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 3;
    margin-top: 20px;
  }
  .hero-headline {
    width: 100%;
  }
  .hero-line1, .hero-line2 {
    font-size: clamp(30px, 9vw, 42px);
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-align: center;
  }
  .hero-line2 {
    text-align: center;
    margin-top: 0;
    word-break: normal;
    hyphens: none;
  }
  .hero-sub {
    font-size: 15px;
    max-width: 100%;
    margin-top: 16px;
    text-align: center;
  }
  .hero-eyebrow {
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
    text-align: center;
  }
  .hero-more {
    bottom: 28px;
  }

  /* ─── GOLD BAND ─── */
  .gold-band {
    padding: 28px 24px;
  }
  .band-headline {
    font-size: 18px;
    line-height: 1.35;
    max-width: 100%;
  }

  /* ─── ABOUT / FEATURES ─── */
  .features-section {
    padding: 56px 24px 64px;
    overflow-x: hidden;
  }
  .features-heading {
    margin-bottom: 32px;
  }
  .feat-list {
    gap: 4px;
  }
  .feat-item {
    min-width: 0;
  }
  .feat-body {
    min-width: 0;
  }
  .feat-body p {
    font-size: 13px;
    line-height: 1.5;
  }
  .feat-display { display: none; } /* hidden on mobile — photo is inside each card */
  .feat-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  #feat-panel-0 img { object-position: center 45%; }
  #feat-panel-2 img { object-position: center 40%; }
  .feat-spec-list { gap: 8px; padding: 14px 0 6px; }
  .feat-spec-tag { font-size: 12px; padding: 6px 12px; }
  .feat-more { opacity: 1; min-height: 44px; }

  /* ─── Foto dentro del feat-item en mobile (grid para foto encima) ─── */
  .feat-item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "photo photo" "icon body";
    gap: 0 16px;
    align-items: start;
  }
  .feat-mobile-photo {
    grid-area: photo;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.16,1,0.3,1);
    margin: -16px -16px 0;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
  }
  .feat-active .feat-mobile-photo {
    grid-template-rows: 1fr;
    margin-bottom: 16px;
  }
  .feat-mobile-photo-inner { overflow: hidden; min-height: 0; }
  .feat-mobile-photo img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center 25%;
    display: block;
  }
  .feat-item[data-feat="0"] .feat-mobile-photo img { object-position: center 60%; transform: scale(1.0); }
  .feat-icon { grid-area: icon; }
  .feat-body { grid-area: body; min-width: 0; }
  /* ─── SERVICE CAROUSEL — micro-fade para layout swap ─── */
  .svc-left,
  .svc-right {
    transition: opacity 0.13s ease;
  }
  .svc-carousel.layout-fade .svc-left,
  .svc-carousel.layout-fade .svc-right {
    opacity: 0;
    pointer-events: none;
  }
  .svc-carousel {
    grid-template-columns: 1fr;
    min-height: auto;
    touch-action: pan-y;
    overflow: visible;
  }
  .svc-left {
    padding: 40px 24px 40px;
    order: 2;
    overflow: hidden;
    min-width: 0;
    width: 100%;
  }
  .svc-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin: 20px -24px 28px;
    padding: 0 24px;
    border-bottom: none;
  }
  .svc-tabs::-webkit-scrollbar { display: none; }
  .svc-tab {
    flex-shrink: 0;
    padding: 0 20px 12px 0;
  }
  .svc-tab:last-child { padding-right: 24px; }
  .svc-tab-name { font-size: 13px; }
  .svc-title {
    font-size: clamp(24px, 7.5vw, 34px);
    margin-bottom: 14px;
    word-break: break-word;
  }
  .svc-desc {
    font-size: 14px;
    line-height: 1.55;
  }
  .svc-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
    font-size: 15px;
  }
  /* Hide decorative corners on mobile */
  .svc-corner { display: none; }

  /* Media/form siempre arriba — misma altura en los 3 slides */
  .svc-right {
    display: grid;
    grid-template-areas: "v";
    order: 1;
    height: 320px;
    overflow: hidden;
  }
  .svc-vslide {
    grid-area: v;
    height: 320px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .svc-vslide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    border: none;
    outline: none;
  }
  .svc-vslide::before, .svc-vslide::after { display: none; }
  /* Formulario: ocupa el mismo slot que los vídeos */
  .svc-vform {
    grid-area: v;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 6px 24px 20px;
    gap: 10px;
    background: transparent;
    overflow: hidden;
  }
  .svc-vform.svc-vslide-active {
    pointer-events: auto;
  }
  /* Slide 2: contexto (texto) arriba → acción (formulario) abajo */
  .svc-carousel.svc-theme-2 .svc-left  { order: 1; }
  .svc-carousel.svc-theme-2 .svc-right { order: 2; }
  /* Simplify form fields on mobile */
  .svc-cf-desktop-only,
  .svc-cf-who { display: none; }
  .svc-cf-input {
    font-size: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-family: inherit;
    font-weight: 300;
    width: 100%;
  }
  .svc-cf-input::placeholder { color: rgba(255,255,255,0.45); }
  .svc-cf-ta { min-height: 80px; resize: none; }
  .svc-cf-submit {
    padding: 14px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    background: rgba(255,255,255,0.92);
    color: var(--dark);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
  }

  /* ─── FULL-WIDTH SECTIONS ─── */
  .founders-section,
  .contact-section {
    padding: 64px 24px;
  }

  /* ─── FOUNDERS ─── */
  /* Founders mobile: circular compact */
  .founders-cards { grid-template-columns: 1fr; gap: 0; }
  .founders-header { margin-bottom: 24px; }
  .founder-card {
    display: flex; flex-direction: row; align-items: center;
    gap: 16px; border-radius: 12px; padding: 16px;
    box-shadow: none; border: none; background: rgba(255,255,255,0.6);
    margin-bottom: 8px;
  }
  .founder-card:hover { transform: none; box-shadow: none; }
  .founder-card-photo { width: 68px; height: 68px; aspect-ratio: 1/1; border-radius: 50%; flex-shrink: 0; }
  .founder-card-photo img { border-radius: 50%; }
  .founder-card-body { padding: 0; }
  .founder-card-body strong { font-size: 14px; }
  .founder-card-body span { font-size: 10px; margin-bottom: 4px; }
  .founder-card-body p { font-size: 12px; line-height: 1.5; }
  .founders-text blockquote {
    font-size: clamp(16px, 4.5vw, 22px);
    line-height: 1.45;
    padding-left: 18px;
  }
  .founders-story {
    font-size: 14px;
    line-height: 1.7;
  }

  /* ─── CONTACT ─── */
  .form-row { grid-template-columns: 1fr; }
  .contact-form-card {
    padding: 32px 20px 36px;
    border-radius: 20px;
  }
  .contact-form-card h2 {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .contact-lead {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  input, select, textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  .btn-submit {
    width: 100%;
    padding: 16px;
    font-size: 15px;
  }
  .contact-whatsapp-card {
    padding: 20px;
    border-radius: 16px;
  }
  .contact-pillars {
    margin-top: 16px;
    gap: 10px;
  }

  /* ─── FOOTER ─── */
  .footer-inner {
    grid-template-columns: repeat(2, minmax(120px, auto));
    justify-content: center;
    padding: 48px 24px 32px;
    gap: 28px 48px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
  }
  .footer-brand .footer-name { margin-bottom: 2px; }
  .footer-brand img {
    height: 44px;
    flex-shrink: 0;
  }
  .footer-brand > div {
    text-align: left;
  }
  .footer-nav {
    gap: 14px;
    align-items: flex-start;
    text-align: left;
  }
  .footer-nav a {
    font-size: 14px;
    padding: 4px 0;
  }
  .footer-bottom { padding: 20px 24px 28px; text-align: center; }

  /* ─── MOBILE NAV MENU ─── */
  .nav-hamburger { display: flex; }
  .nav-mainbar {
    height: 0;
    background: transparent;
    border: none;
    overflow: visible;
    position: relative;
  }
  .nav-inner {
    height: 0;
    overflow: visible;
    padding: 0;
  }
  /* ── Dropdown móvil — animaciones estilo Framer Motion en vanilla ── */
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 0; left: 0; right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 16px 24px 24px 32px;
    border-radius: 0 0 20px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    gap: 0;
    z-index: 10;
    transform-origin: top center;
  }

  /* ABRIR: scale(0.95)+translateY(-10px) → scale(1)+translateY(0) */
  .nav-links.open {
    display: flex;
    animation: navMenuOpen 0.22s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes navMenuOpen {
    from { opacity:0; transform: scale(0.95) translateY(-10px); }
    to   { opacity:1; transform: scale(1)    translateY(0);     }
  }

  /* CERRAR: reversa antes de display:none */
  .nav-links.closing {
    display: flex;
    animation: navMenuClose 0.16s ease-in forwards;
  }
  @keyframes navMenuClose {
    from { opacity:1; transform: scale(1)    translateY(0);     }
    to   { opacity:0; transform: scale(0.95) translateY(-10px); }
  }

  /* Items: staggerChildren cada 30ms, deslizando desde X=-20 */
  .nav-links li { width:100%; opacity:0; }
  .nav-links.open li { animation: navItemIn 0.28s cubic-bezier(0.16,1,0.3,1) both; }
  .nav-links.open li:nth-child(1) { animation-delay:0.04s; }
  .nav-links.open li:nth-child(2) { animation-delay:0.07s; }
  .nav-links.open li:nth-child(3) { animation-delay:0.10s; }
  .nav-links.open li:nth-child(4) { animation-delay:0.13s; }
  .nav-links.open li:nth-child(5) { animation-delay:0.16s; }
  @keyframes navItemIn {
    from { opacity:0; transform:translateX(-20px); }
    to   { opacity:1; transform:translateX(0);     }
  }

  .nav-links li a {
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-mid);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    text-align: right;
    transition: color 0.15s;
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-links a:hover { color: var(--burgundy); }

  /* Hamburger active */

  section[id], div[id] {
    scroll-margin-top: 80px;
  }
}



/* ─── SMALL PHONES ─── */
@media (max-width: 480px) {

  /* Nav */
  .nav-isotipo { height: 38px; filter: none; }
  .nav-logotipo { height: 44px; margin-left: -6px; filter: none; }

  /* Hero */
  .hero-line1, .hero-line2 {
    font-size: clamp(24px, 9vw, 30px);
  }
  .hero-content { padding: 72px 20px 160px; }

  /* Gold band */
  .gold-band { padding: 24px 20px; }
  .band-headline { max-width: 100%; font-size: 16px; line-height: 1.55; }

  /* Features */
  .features-section { padding: 48px 20px 56px; }
  .features-heading { margin-bottom: 24px; }
  .feat-display { min-height: 220px; }
  .feat-item { padding: 16px; gap: 12px; }
  .feat-body h3 { font-size: 15px; }
  .feat-icon { width: 38px; height: 38px; }

  /* Service carousel */
  .svc-left { padding: 40px 20px 36px; }
  .svc-right { height: 270px; }
  .svc-vslide { height: 270px; }
  .svc-title { font-size: clamp(22px, 7vw, 28px); }
  .svc-tabs { margin: 16px -20px 22px; padding: 0 20px; }

  /* Founders */
  .founders-section { padding: 56px 20px; }
  .founders-inner { gap: 28px; }
  .founders-grid { grid-template-columns: 1fr; gap: 10px; }
  .founders-image-wrap { max-height: 340px; }
  .founders-image-wrap img { height: 340px; }

  /* Contact */
  .contact-section { padding: 48px 20px; }
  .contact-form-card { padding: 28px 18px 32px; }

  /* Footer */
  .footer-inner { padding: 40px 20px 28px; gap: 28px; }
  .footer-bottom { padding: 18px 20px 24px; }
}

/* ─── ELEMENTOS SOLO MÓVIL (ocultos en desktop) ─── */
@media (min-width: 769px) {
  .hero-nav-mobile,
  #hamburger-hero { display: none; }
  /* Hide mobile-only photo inside feat-items on desktop */
  .feat-mobile-photo { display: none !important; }
}

/* ─── HERO CTA MOBILE (dentro del hero) ─── */
.hero-cta-mobile { display: none; }
@media (max-width: 768px) {
  .hero-cta-mobile {
    display: inline-flex;
    align-self: center;
    align-items: center;
    margin-top: 20px;
    padding: 11px 22px;
    min-height: 44px;
    background: rgba(123,25,30,0.95);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--white);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background 0.15s;
  }
  .hero-cta-mobile:hover { background: var(--burgundy-mid); }
}

/* ─── HERO CTA ─── */
.hero-cta-btn {
  display: inline-flex;
  align-self: center;
  align-items: center;
  margin-top: clamp(24px, 3vh, 40px);
  padding: 12px 28px;
  min-height: 44px;
  background: transparent;
  color: rgba(255,255,255,0.88);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-pill);
  text-decoration: none;
  letter-spacing: 0.04em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  animation: heroUp 0.9s cubic-bezier(0.16,1,0.3,1) 1.2s both;
}
.hero-cta-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.65);
  color: #fff;
}
@media (max-width: 768px) {
  .hero-cta-btn { display: none; }
}

/* ─── ANIMATED DROPDOWN ─── */
.anim-dropdown {
  position: relative;
  width: 100%;
}

.anim-dropdown-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-light);
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s;
}
.anim-dropdown.open .anim-dropdown-trigger,
.anim-dropdown-trigger:focus {
  border-color: var(--gold);
  background: var(--white);
  color: var(--text-dark);
}
.anim-dropdown.selected .anim-dropdown-trigger {
  color: var(--text-dark);
}

.anim-dropdown-chevron {
  flex-shrink: 0;
  color: var(--gold);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-dropdown.open .anim-dropdown-chevron {
  transform: rotate(180deg);
}

.anim-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--white);
  border: 1.5px solid rgba(196,131,10,0.18);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(44,24,15,0.12);
  overflow: hidden;
  z-index: 100;
  display: none;
  flex-direction: column;
  transform-origin: top center;
}
.anim-dropdown.open .anim-dropdown-menu {
  display: flex;
  animation: ddOpen 0.22s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes ddOpen {
  from { opacity: 0; transform: scaleY(0.88) translateY(-8px); }
  to   { opacity: 1; transform: scaleY(1)    translateY(0); }
}

.anim-dd-item {
  width: 100%;
  padding: 12px 32px 12px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-mid);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(196,131,10,0.08);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateX(-10px);
  transition: background 0.12s, color 0.12s, opacity 0.22s ease, transform 0.22s ease;
}
.anim-dropdown.open .anim-dd-item {
  opacity: 1;
  transform: translateX(0);
}
.anim-dropdown.open .anim-dd-item:nth-child(1) { transition-delay: 0.03s; }
.anim-dropdown.open .anim-dd-item:nth-child(2) { transition-delay: 0.06s; }
.anim-dropdown.open .anim-dd-item:nth-child(3) { transition-delay: 0.09s; }
.anim-dropdown.open .anim-dd-item:nth-child(4) { transition-delay: 0.12s; }
.anim-dropdown.open .anim-dd-item:nth-child(5) { transition-delay: 0.15s; }
.anim-dropdown.open .anim-dd-item:nth-child(6) { transition-delay: 0.18s; }
.anim-dropdown.open .anim-dd-item:nth-child(7) { transition-delay: 0.21s; }
.anim-dropdown.open .anim-dd-item:nth-child(8) { transition-delay: 0.24s; }
.anim-dropdown.open .anim-dd-item:nth-child(9) { transition-delay: 0.27s; }
.anim-dd-item:last-child { border-bottom: none; }
.anim-dd-item:hover { background: var(--cream); color: var(--burgundy); }

/* ─── SKIP LINK ─── */
.skip-link {
  position: absolute;
  top: -120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--burgundy);
  color: #fff;
  padding: 9px 20px;
  border-radius: 0 0 10px 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  z-index: 99999;
  transition: top 0.18s ease;
  white-space: nowrap;
}
.skip-link:focus { top: 0; }


/* ═══════════════════════════════════════
   MOBILE ANIMATIONS — 3 capas
════════════════════════════════════════ */

/* Capa 1: Reveal vertical (más confiable en iOS que horizontal) */
@media (max-width: 768px) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.visible, .reveal-left.visible, .reveal-right.visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger para elementos hermanos consecutivos */
  .reveal:nth-child(2) { transition-delay: 0.06s; }
  .reveal:nth-child(3) { transition-delay: 0.12s; }
  .reveal:nth-child(4) { transition-delay: 0.18s; }
}

/* Capa 2: Cards con pop (scale) */
@media (max-width: 768px) {
  .founder-card,
  .feat-item,
  .abt-valor,
  .abt-vision-item,
  .contact-form-card {
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34,1.2,0.64,1) !important;
  }
  .founder-card { opacity: 0; transform: scale(0.96) translateY(12px); }
  .founder-card.visible-card { opacity: 1; transform: scale(1) translateY(0); }
  .founder-card:nth-child(2) { transition-delay: 0.08s !important; }
  .founder-card:nth-child(3) { transition-delay: 0.16s !important; }
}

/* Capa 3: Feat-items con entrada por izquierda en mobile */
@media (max-width: 768px) {
  .feat-item {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
  }
  .feat-item.feat-visible {
    opacity: 1;
    transform: translateX(0) !important;
  }
  .feat-item:nth-child(2) { transition-delay: 0.1s !important; }
  .feat-item:nth-child(3) { transition-delay: 0.2s !important; }
}