/* =========================================================================
   PRONTO SERVICES — Stylesheet
   Design tokens are pulled directly from the Pronto Services Brand Kit.
   Structure: Tokens → Reset → Base type → Layout → Components → Sections →
   Utilities → Responsive → Motion/Accessibility
   ========================================================================= */

/* ---------------------------------------------------------------------
   0. TIPOGRAFÍAS — alojadas en este mismo servidor
   Los archivos están en assets/fonts/. El sitio no pide nada a Google
   ni a ningún otro servidor externo: cero terceros, cero cookies.
   Licencia SIL Open Font License 1.1 (uso comercial permitido).
   --------------------------------------------------------------------- */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-display:swap; font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-display:swap; font-weight:200 800;
  src:url(../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal; font-display:swap; font-weight:100 900;
  src:url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal; font-display:swap; font-weight:100 900;
  src:url(../fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic; font-display:swap; font-weight:200 800;
  src:url(../fonts/newsreader-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:italic; font-display:swap; font-weight:200 800;
  src:url(../fonts/newsreader-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   Edit colors/fonts here and they update everywhere on the site.
   --------------------------------------------------------------------- */
:root{
  /* Brand colors — "Vibrant heritage palette" from the brand kit */
  --ink:      #241C15; /* Carbón — text */
  --cream:    #FAF2E4; /* Cal — backgrounds */
  --paper:    #FFFFFF;
  --verde:    #0E5B54; /* primary — trust, stability */
  --verde-dark:#0A3F3A;
  --marigold: #F3A52C; /* warmth, energy — buttons/accents on dark, never as text-on-light */
  --barro:    #C24E32; /* terracotta — accents, borders, icons */
  --barro-text:#A93F29; /* AA-safe text variant of barro on cream (4.5:1+) */
  --buga:     #B5325E; /* pop — use sparingly */
  --sand:     #EFE3CC;
  --line:     rgba(36,28,21,0.13);
  --line-dark:rgba(250,242,228,0.18);

  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-accent: 'Newsreader', Georgia, serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  /* Layout */
  --content-max: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --header-h: 76px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  margin: 0;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
label{ display: block; }
fieldset{ border: 0; margin: 0; padding: 0; }

/* Focus states — visible everywhere, never suppressed */
:focus-visible{
  outline: 3px solid var(--barro);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible{
  outline-offset: 4px;
}

/* Selection */
::selection{ background: var(--marigold); color: var(--ink); }

/* ---------------------------------------------------------------------
   3. UTILITIES
   --------------------------------------------------------------------- */
.wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link{
  position: absolute;
  left: 12px; top: -60px;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
  font-weight: 600;
}
.skip-link:focus{ top: 12px; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--barro-text);
}
.eyebrow.on-dark{ color: var(--marigold); }

.lede{
  max-width: 640px;
  font-size: 1.08rem;
  color: rgba(36,28,21,0.72);
}

.accent-line{
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--barro-text);
  /* Reparte el texto entre las líneas para que no quede una palabra
     suelta al final. Los navegadores que no lo soportan lo ignoran. */
  text-wrap: balance;
}

.section-head{
  max-width: 680px;
  margin: 0 0 var(--space-6);
}
.section-head h2{
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  margin-top: 10px;
}
.section-head p{
  margin-top: var(--space-3);
}

section{ padding: var(--space-8) 0; }
@media (max-width: 640px){
  section{ padding: var(--space-7) 0; }
}

/* Cinta de marca — el mismo acento de colores de la portada del brand
   kit y del menú de servicios. Va sobre fondo oscuro, que es donde los
   seis tonos se leen bien. Es decorativa: aria-hidden en el HTML. */
.brand-stripe{ display: flex; height: 6px; }
.brand-stripe span{ flex: 1; }
.brand-stripe span:nth-child(1){ background: var(--marigold); }
.brand-stripe span:nth-child(2){ background: var(--barro); }
.brand-stripe span:nth-child(3){ background: var(--buga); }
.brand-stripe span:nth-child(4){ background: var(--verde-dark); }
.brand-stripe span:nth-child(5){ background: var(--marigold); }
.brand-stripe span:nth-child(6){ background: var(--cream); }
/* En el pie el fondo ya es verde oscuro: ese tramo se cambia por tinta
   para que no desaparezca. */
.site-footer .brand-stripe span:nth-child(4){ background: var(--ink); }
@media (max-width: 560px){
  .brand-stripe{ height: 5px; }
}

/* ---------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1;
  min-height: 48px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
  .btn:hover{ transform: none; }
}

.btn-primary{
  background: var(--marigold);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(36,28,21,0.08);
}
.btn-primary:hover{ background: #ffb545; box-shadow: 0 8px 20px -6px rgba(243,165,44,0.55); }

.btn-outline{
  background: transparent;
  border: 1.5px solid var(--line-dark);
  color: var(--cream);
}
.btn-outline:hover{ background: rgba(250,242,228,0.1); }

.btn-outline-ink{
  background: transparent;
  border: 1.5px solid rgba(36,28,21,0.25);
  color: var(--ink);
}
.btn-outline-ink:hover{ background: rgba(36,28,21,0.05); }

.btn-block{ width: 100%; }
.btn-sm{ padding: 10px 20px; min-height: 40px; font-size: 0.88rem; }

/* ---------------------------------------------------------------------
   5. HEADER / NAV
   --------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,242,228,0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--header-h);
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  flex-shrink: 0;
}
.brand img{ width: 42px; height: 42px; }
.brand-word{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.05;
}
.brand-word small{
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--barro-text);
}

.main-nav{ display: flex; }
.main-nav ul{ display: flex; align-items: center; gap: var(--space-5); }
/* The nav's own lang-switch/CTA are for the mobile slide-out panel only —
   above 900px the copies in .header-actions are shown instead. */
.main-nav .lang-switch,
.main-nav .header-cta{ display: none; }
.main-nav a{
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  padding: 8px 2px;
  position: relative;
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--barro);
  transition: right var(--dur-med) var(--ease);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{ right: 0; }

.lang-switch{
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 0.86rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.lang-switch a{
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: rgba(36,28,21,0.55);
}
.lang-switch a[aria-current="true"]{
  background: var(--verde);
  color: var(--cream);
}
.lang-switch a:hover:not([aria-current="true"]){ color: var(--ink); }

.header-cta{ flex-shrink: 0; }
.header-actions{ display: flex; align-items: center; gap: var(--space-3); }

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.nav-toggle:hover{ background: rgba(36,28,21,0.06); }
.nav-toggle svg{ width: 24px; height: 24px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display: block; }

/* Mobile nav */
@media (max-width: 900px){
  .main-nav{
    /* NOTE: .site-header uses backdrop-filter, which makes it the
       containing block for fixed-position descendants — so height
       must be computed via viewport units (100vh), not top+bottom
       stretch, or it collapses against the header's own box. */
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    background: var(--cream);
    padding: var(--space-5) 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
    overflow-y: auto;
  }
  .main-nav.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .main-nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .main-nav li{ border-bottom: 1px solid var(--line); }
  .main-nav a{
    display: block;
    padding: 18px 4px;
    font-size: 1.1rem;
  }
  .main-nav .lang-switch{ margin: var(--space-4) 0; align-self: flex-start; display: flex; }
  .main-nav .header-cta{ margin-top: var(--space-2); display: block; }
  .main-nav .header-cta .btn{ width: 100%; }
  .header-actions .lang-switch,
  .header-actions .header-cta{ display: none; }
  .nav-toggle{ display: inline-flex; }
}
@media (prefers-reduced-motion: reduce){
  .main-nav{ transition: none; }
}

/* ---------------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------------- */
.hero{
  background: var(--verde);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  /* El espaciado lo controla .hero .wrap; sin esto se suma también el
     padding general de <section> y queda un hueco enorme arriba. */
  padding: 0;
}
.hero .wrap{
  position: relative;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}
.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(250,242,228,0.1);
  border: 1px solid rgba(250,242,228,0.25);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-4);
}
.hero h1{
  font-size: clamp(2.4rem, 1.7rem + 3vw, 4rem);
  font-weight: 800;
  color: var(--cream);
}
.hero .accent-line{
  color: var(--marigold);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  margin-top: var(--space-2);
}
.hero-desc{
  margin-top: var(--space-4);
  max-width: 480px;
  font-size: 1.05rem;
  color: rgba(250,242,228,0.88);
}
.hero-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero-benefits{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(250,242,228,0.85);
}
.hero-benefits li{ display: flex; align-items: center; gap: 6px; }
.hero-benefits svg{ width: 16px; height: 16px; color: var(--marigold); flex-shrink: 0; }

.hero-visual{
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--verde-dark);
  border: 1px solid rgba(250,242,228,0.14);
  padding: var(--space-6) var(--space-5) var(--space-5);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-illustration{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.hero-illustration svg{
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.35));
}
.hero-caption{
  position: relative;
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: rgba(250,242,228,0.75);
  font-weight: 600;
  text-align: center;
}

/* En una sola columna, el titular va PRIMERO: el mensaje debe verse
   al abrir la página, sin tener que desplazarse. La ilustración pasa
   debajo y se achica para no acaparar la pantalla. */
@media (max-width: 980px){
  .hero .wrap{
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .hero-visual{
    min-height: 0;
    padding: var(--space-5) var(--space-4) var(--space-4);
  }
  .hero-illustration svg{ max-width: 250px; }
}
@media (max-width: 560px){
  .hero .wrap{ padding-top: var(--space-5); }
  .hero-illustration svg{ max-width: 200px; }
  .hero-caption{ margin-top: var(--space-3); font-size: 0.8rem; }
}
@media (max-width: 560px){
  .hero-ctas .btn{ width: 100%; }
  .hero-ctas{ flex-direction: column; }
}

/* ---------------------------------------------------------------------
   7. TRUST STRIP
   --------------------------------------------------------------------- */
/* A compact ribbon under the hero. The items scroll continuously —
   it reads as a live banner rather than a static empty band.
   The animation stops for anyone who prefers reduced motion, and
   pauses on hover/focus so it can be read at rest. */
.trust-strip{
  background: var(--verde-dark);
  color: var(--cream);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.trust-strip::before,
.trust-strip::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
/* rgba con alfa 0 del MISMO verde: usar `transparent` interpola hacia
   negro y ensucia el degradado a la mitad. */
.trust-strip::before{ left: 0;  background: linear-gradient(to right, #0A3F3A, rgba(10,63,58,0)); }
.trust-strip::after { right: 0; background: linear-gradient(to left,  #0A3F3A, rgba(10,63,58,0)); }

.marquee{
  display: flex;
  width: 100%;
  overflow: hidden;
  user-select: none;
}
.marquee-track{
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 15px var(--space-6) 15px 0;
  flex-shrink: 0;
  min-width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{ animation-play-state: paused; }

@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}

.marquee-track li{
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--cream);
}
.marquee-track li::after{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--marigold);
  opacity: 0.65;
  margin-left: var(--space-6);
}
.marquee-track svg{ width: 17px; height: 17px; color: var(--marigold); flex-shrink: 0; }

/* No motion: fall back to a static, evenly spaced row. */
@media (prefers-reduced-motion: reduce){
  .trust-strip{ padding: 0 24px; }
  .marquee{ justify-content: center; overflow: visible; }
  .marquee-track{
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-5);
    padding: 14px 0;
    min-width: 0;
    flex-shrink: 1;
    max-width: var(--content-max);
  }
  .marquee-track[aria-hidden="true"]{ display: none; }
  .marquee-track li::after{ display: none; }
  .trust-strip::before, .trust-strip::after{ display: none; }
}

/* ---------------------------------------------------------------------
   8. SERVICES
   --------------------------------------------------------------------- */
.services{ background: var(--paper); }
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.service-card{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.service-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px rgba(36,28,21,0.25);
  border-color: rgba(36,28,21,0.22);
}
@media (prefers-reduced-motion: reduce){
  .service-card{ transition: none; }
  .service-card:hover{ transform: none; }
}
.service-icon{
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--verde);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.service-icon svg{ width: 24px; height: 24px; }
.service-card:nth-child(2n) .service-icon{ background: var(--barro-text); }
.service-card:nth-child(3n) .service-icon{ background: var(--buga); }
.service-card h3{ font-size: 1.15rem; margin-bottom: 8px; }
.service-card p{
  font-size: 0.92rem;
  color: rgba(36,28,21,0.68);
  margin: 0;
}

@media (max-width: 980px){
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .service-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   9. HOW IT WORKS
   --------------------------------------------------------------------- */
.process{ background: var(--sand); }
.process-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  counter-reset: step;
  position: relative;
}
.process-grid::before{
  content: "";
  position: absolute;
  top: 24px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: repeating-linear-gradient(to right, var(--barro-text) 0 8px, transparent 8px 16px);
  opacity: 0.5;
}
.process-step{ position: relative; }
.step-num{
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}
.process-step h3{ font-size: 1.15rem; margin-bottom: 8px; }
.process-step p{ font-size: 0.94rem; color: rgba(36,28,21,0.68); margin: 0; }

@media (max-width: 760px){
  .process-grid{ grid-template-columns: 1fr; gap: var(--space-6); }
  .process-grid::before{ display: none; }
}

/* ---------------------------------------------------------------------
   10. ABOUT / TEAM
   --------------------------------------------------------------------- */
.about{ background: var(--paper); }
.about-intro{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
  margin-bottom: var(--space-7);
}
.about-copy p{
  font-size: 1.02rem;
  color: rgba(36,28,21,0.78);
}
.about-copy p:last-of-type{
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.team-card{ text-align: left; }
.team-photo{
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  margin-bottom: var(--space-3);
  background: var(--sand);
}
.team-photo img{ width: 100%; height: 100%; object-fit: cover; }
.team-card h3{ font-size: 1.15rem; }
.team-card .role{
  color: var(--barro-text);
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 2px;
}

@media (max-width: 900px){
  .about-intro{ grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 640px){
  .team-grid{ grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------
   11. TESTIMONIAL
   --------------------------------------------------------------------- */
.testimonial{
  background: var(--verde-dark);
  color: var(--cream);
}
.testimonial .wrap{ max-width: 820px; text-align: center; }
.testimonial .eyebrow{ justify-content: center; width: 100%; }
.testimonial h2{ color: var(--cream); text-align: center; }
/* El título de la sección es el propio eyebrow: se ve pequeño, pero sigue
   siendo un <h2> para los lectores de pantalla y para Google. */
.testimonial h2.eyebrow{
  color: var(--marigold);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  line-height: 1.4;
  margin-bottom: 14px;
}
.testimonial-quote{
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.5;
  margin: var(--space-5) 0 var(--space-4);
  color: var(--cream);
}
.testimonial-stars{
  display: flex;
  justify-content: center;
  gap: 4px;
  color: var(--marigold);
  margin-bottom: var(--space-3);
}
.testimonial-stars svg{ width: 20px; height: 20px; }
.testimonial-author{ font-weight: 700; }
.testimonial-role{
  font-size: 0.9rem;
  color: rgba(250,242,228,0.75);
  margin-top: 2px;
}

/* Dos testimonios lado a lado (uno debajo del otro en móvil) */
.testimonial-grid{
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (min-width: 760px){
  .testimonial .wrap{ max-width: 1040px; }
  .testimonial-grid{ grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.testimonial-item{
  margin: 0;
  display: flex;
  flex-direction: column;
  background: rgba(250,242,228,0.05);
  border: 1px solid rgba(250,242,228,0.12);
  border-radius: 14px;
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.testimonial-item .testimonial-quote{
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem);
  margin: var(--space-4) 0;
  flex: 1;
}
.testimonial-item figcaption{ margin-top: auto; }

/* ---------------------------------------------------------------------
   12. CONTACT / FORM
   --------------------------------------------------------------------- */
.contact{ background: var(--cream); }
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-7);
  align-items: start;
}
.contact-info{ position: sticky; top: calc(var(--header-h) + 24px); }
.contact-info .section-head{ margin-bottom: var(--space-5); }
.contact-list{ display: flex; flex-direction: column; gap: var(--space-4); }
.contact-list li{ display: flex; gap: 14px; align-items: flex-start; }
.contact-list .ci-icon{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-list .ci-icon svg{ width: 19px; height: 19px; }
.contact-list a, .contact-list span{ font-weight: 600; }
.contact-list .ci-label{
  display: block;
  font-weight: 500;
  font-size: 0.82rem;
  color: rgba(36,28,21,0.55);
}
.contact-note{
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  color: rgba(36,28,21,0.7);
}

.form-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.field{ margin-bottom: var(--space-4); }
.field label{
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 6px;
}
.field .optional{
  font-weight: 500;
  color: rgba(36,28,21,0.48);
  text-transform: none;
  letter-spacing: 0;
}
.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(36,28,21,0.18);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 0.98rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color: rgba(36,28,21,0.32); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 4px rgba(14,91,84,0.15);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23241C15'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}
.field-error{
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--barro-text);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: var(--barro-text);
}
.field.has-error .field-error{ display: flex; }

.consent{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.consent input{
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--verde);
}
.consent span{ font-size: 0.88rem; color: rgba(36,28,21,0.78); font-weight: 500; }
.consent a{ text-decoration: underline; font-weight: 700; color: var(--ink); }

/* Honeypot — hidden from real users, visible to bots that fill every field */
.hp-field{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-note{
  font-size: 0.82rem;
  color: rgba(36,28,21,0.55);
  margin-top: var(--space-3);
}

.form-status{
  display: none;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: var(--space-4);
}
.form-status svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.form-status.is-visible{ display: flex; }
.form-status.success{ background: rgba(14,91,84,0.1); color: var(--verde-dark); }
.form-status.error{ background: rgba(194,78,50,0.1); color: var(--barro-text); }
.form-status .icon-error{ display: none; }
.form-status.error .icon-success{ display: none; }
.form-status.error .icon-error{ display: block; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-info{ position: static; order: 2; }
  .form-card{ order: 1; padding: var(--space-5) var(--space-4); }
}
@media (max-width: 560px){
  .form-row{ grid-template-columns: 1fr; gap: 0; }
}

/* ---------------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------------- */
.site-footer{
  background: var(--verde-dark);
  color: var(--cream);
  /* Sin padding arriba para que la cinta de marca quede al ras del
     borde; el espacio lo pone .wrap. */
  padding: 0 0 var(--space-4);
}
.site-footer > .wrap{ padding-top: var(--space-7); }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(250,242,228,0.14);
}
.footer-brand{ display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); }
.footer-brand img{ width: 40px; height: 40px; }
.footer-brand .brand-word{ color: var(--cream); }
.footer-tagline{ color: rgba(250,242,228,0.68); max-width: 320px; font-size: 0.94rem; }
.footer-col h3{
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--marigold);
  margin-bottom: var(--space-3);
}
.footer-col ul{ display: flex; flex-direction: column; gap: 12px; }
.footer-col a{ color: rgba(250,242,228,0.82); font-size: 0.94rem; }
.footer-col a:hover{ color: var(--cream); text-decoration: underline; }
.footer-col li{ display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; color: rgba(250,242,228,0.82); }
.footer-col svg{ width: 17px; height: 17px; margin-top: 2px; color: var(--marigold); flex-shrink: 0; }
.footer-bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  font-size: 0.82rem;
  color: rgba(250,242,228,0.68);
}
.footer-bottom a{ color: rgba(250,242,228,0.72); }
.footer-bottom a:hover{ color: var(--cream); text-decoration: underline; }
.footer-legal{ display: flex; gap: var(--space-4); flex-wrap: wrap; }

@media (max-width: 780px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-tagline{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------------------------------------------------------------------
   14. LEGAL / SIMPLE PAGES (privacy policy)
   --------------------------------------------------------------------- */
.legal{ background: var(--paper); padding: var(--space-8) 0; }
.legal .wrap{ max-width: 760px; }
.legal h1{ font-size: 2.2rem; margin-bottom: var(--space-2); }
.legal .updated{ color: rgba(36,28,21,0.55); font-size: 0.9rem; margin-bottom: var(--space-6); }
.legal h2{ font-size: 1.3rem; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal p, .legal li{ color: rgba(36,28,21,0.78); font-size: 0.98rem; margin-bottom: 0.9em; }
.legal ul{ list-style: disc; padding-left: 1.4em; }
.legal a{ text-decoration: underline; font-weight: 600; color: var(--verde); }

/* ---------------------------------------------------------------------
   15. SCROLL REVEAL (progressive enhancement, purely decorative)
   --------------------------------------------------------------------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 640ms var(--ease), transform 640ms var(--ease);
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}
.no-js [data-reveal]{ opacity: 1; transform: none; }