/* ==========================
   IMPORTAR TIPOGRAFÍAS
   ========================== */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

/* Signatura Monoline – Regular */


/* Fuentes globales */
/* Reemplaza el bloque que tengas por este */
@font-face{
  font-family: "Signatura Monoline";
  /* Usa exactamente la ruta/nombre reales. Evitá espacios o escápalos con comillas. */
  src: url("../assets/fonts/signatura-monoline.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Si solo tenés el .otf (y funciona), usa eso y quita la línea del .ttf */
@font-face{
  font-family: "Signatura Monoline";
  src: url("../assets/fonts/signatura_monoline/Signatura Monoline.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}




/* ==========================
      VARIABLES GLOBALES
      ========================== */
:root {
  --color-bg: #ece9e2;
  --color-dark: #000000;
  --color-accent: #112f15;

  --font-primary: 'Gowun Batang', serif;         /* párrafos y resto */
  --font-script: 'Signatura Monoline', cursive;  /* títulos y “firma” */
  --header-h: 7.2rem; /* 72px */
}

   /* ==========================
      ESTILOS BASE
      ========================== */
html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-size: 1.6rem;
  line-height: 1.6;
}

   /* ==========================
      TITULOS Y TEXTOS
      ========================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-accent);
  margin: 0 0 2rem 0;
}

h1 { font-size: 3.2rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2rem; }

p {
  margin: 0 0 1.6rem 0;
  font-size: 1.6rem;
}

/* “Identidad que trasciende” y cualquier .signature */
.signature{
  font-family: var(--font-script), cursive;
  font-weight: 400;
  color: var(--color-dark);
  font-size: clamp(3.8rem, 6vw, 7.6rem);
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 2.8rem;
}


   /* ==========================
      BOTONES
      ========================== */
.btn {
  display: inline-block;
  padding: 1rem 2.2rem;
  border-radius: 99.9rem;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  transition: filter .2s ease;
}

.btn--primary {
  text-transform: uppercase;
  color:#fff;
}
.btn--primary:hover{ filter: brightness(.92); }

   /* ==========================
      CONTENEDOR
      ========================== */
   .container{
       max-width: 120rem;
       margin: 0 auto;
       padding: 0 2rem;
   }
   
   /* Barra superior */
   .topbar{
       background: var(--color-bg);
       position: sticky;
       top: 0;
       z-index: 50;
   }
   
   /* Nav */
   .nav{
       display: grid;
       grid-template-columns: 1fr auto 1fr;
       align-items: center;
       min-height: 6.4rem;
       padding: 2rem 0;
       gap: 2rem;
   }
   .nav__list{
       list-style: none;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 6.4rem;
       margin: 0;
       padding: 0;
   }
   .nav a{
       font-family: var(--font-primary);
       font-size: 1.8rem;
       color: var(--color-dark);
       text-decoration: none;
       letter-spacing: .02em;
   }
   .nav a:hover{ color: var(--color-accent); }
   
   /* Logo */
   .brand{
       display: inline-flex;
       align-items: center;
       justify-content: center;
       height: 3.8rem;
   }
   .brand__img{
       height: 100%;
       width: auto;
       display: block;
       transform: scale(11);
       transform-origin: center;
   }
   
   /* ==========================
      HERO
      ========================== */
   .hero {
       height: 92vh;
       overflow: hidden;
   }
   .hero__img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center -20rem;
   }
   
   /* ==========================
      HAMBURGUESA
      ========================== */
   .nav__toggle{
     display: none;
     width: 3.2rem;
     height: 2.6rem;
     background: transparent;
     border: 0;
     cursor: pointer;
     position: relative;
   }
   .nav__bar{
     position: absolute;
     left: 0; right: 0;
     height: 0.2rem;
     background: var(--color-dark);
     border-radius: 0.2rem;
   }
   .nav__bar:nth-child(1){ top: 0; }
   .nav__bar:nth-child(2){ top: 1.2rem; }
   .nav__bar:nth-child(3){ bottom: 0; }
   
   /* ==========================
      MENU DROPDOWN (unificado)
      ========================== */
   #nav-drawer{
     position: absolute;
     top: var(--header-h);
     left: 0;
     right: 0;
     width: 100vw;
     margin-left: calc(50% - 50vw);
   
     background: var(--color-bg);
     box-shadow: 0 1.2rem 2.4rem rgba(0,0,0,.14);
     border-radius: 0;
   
     /* altura solo del contenido */
     height: auto;
     max-height: none;
     overflow: hidden;
   
     transform: translateY(-1rem);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition: transform .22s ease, opacity .22s ease;
     z-index: 1100;
     padding: 3rem 0 4rem;
   }
   #nav-drawer.is-open{
     transform: translateY(0);
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }
   
   /* lista centrada */
   #nav-drawer .nav__drawer-list{
     list-style: none;
     margin: 0;
     padding: 0;
     display: grid;
     gap: 1.8rem;
     justify-items: center;
   }
   #nav-drawer .nav__drawer-list a{
     font-family: var(--font-primary);
     font-size: 1.9rem;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     color: var(--color-dark);
     text-decoration: none;
   }
   
   /* Botón cerrar */
   #nav-drawer .nav__close{
     position: absolute;
     top: .8rem; right: 1.2rem;
     background: transparent;
     border: 0;
     font-size: 2.4rem;
     line-height: 1;
     color: var(--color-dark);
     cursor: pointer;
   }
   
   /* Quitar overlay */
   .nav.is-overlay::after{ display: none; }
   
   /* ==========================
      MEDIA QUERIES
      ========================== */
   @media (max-width: 90rem){
     .nav__list{ gap: 3.2rem; }
     .brand__img{ transform: scale(1.35); }
   }
   @media (max-width: 64rem){
     .nav{
       grid-template-columns: 1fr auto 1fr;
       align-items: center;
     }
     .brand{ justify-self: center; }
     .nav__list{ display: none; }
     .nav__toggle{ display: inline-flex; justify-self: end; }
     .brand__img{ transform: scale(1.15); }
   }


/* === Mobile: logo centrado y hamburguesa a la derecha === */
@media (max-width: 64rem){
  .nav{
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* espacio | logo | hamburguesa */
    align-items: center;
  }

  /* Logo al centro (columna 2) */
  .brand{
    grid-column: 2;
    justify-self: center;
    order: 0;
  }

  /* Botón hamburguesa a la derecha (columna 3) */
  .nav__toggle{
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Ocultamos las listas en móvil */
  .nav__list{ display: none; }
  
}

/* Ajuste en tablets */
@media (max-width: 90rem){
  .brand__img{
    transform: scale(1.1);
  }
}

/* Ajuste en móviles */
@media (max-width: 64rem){
  .brand__img{
    height: 4rem;
    transform: scale(7); /* logo más compacto en mobile */
  }
}

/* === Menú desplegable un poco más abajo del header === */
#nav-drawer{
  top: calc(var(--header-h, 7.2rem) + 2rem) !important; /* header + espacio extra */
}

/* === Hamburguesa que se transforma en cruz === */
.nav__toggle.is-open .nav__bar:nth-child(1){
  transform: rotate(45deg);
  top: 1.2rem;   /* centro */
}
.nav__toggle.is-open .nav__bar:nth-child(2){
  opacity: 0;    /* desaparece */
}
.nav__toggle.is-open .nav__bar:nth-child(3){
  transform: rotate(-45deg);
  bottom: 1.2rem; /* centro */
}

/* Ocultar la X interna del panel */
#nav-drawer .nav__close{ display:none !important; }

/* Transiciones suaves en las barritas */
.nav__toggle .nav__bar{
  transition: transform .22s ease, opacity .22s ease, top .22s ease, bottom .22s ease;
}

/* Al abrir: la hamburguesa se vuelve cruz */
.nav__toggle.is-open .nav__bar:nth-child(1){
  transform: rotate(45deg);
  top: 1.2rem;
}
.nav__toggle.is-open .nav__bar:nth-child(2){
  opacity: 0;
}
.nav__toggle.is-open .nav__bar:nth-child(3){
  transform: rotate(-45deg);
  bottom: 1.2rem;
}

/* =========================
   Animaciones dropdown
   ========================= */

/* Estado base: oculto pero medible */
#nav-drawer{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-1.2rem);
}

/* Abrir */
#nav-drawer.is-open{
  visibility: visible;
  pointer-events: auto;
  animation: dropdownIn .28s ease both;
}

/* Cerrar (usamos clase temporal) */
#nav-drawer.is-closing{
  visibility: visible;              /* para que se vea mientras anima */
  pointer-events: none;
  animation: dropdownOut .22s ease both;
}

/* Keyframes */
@keyframes dropdownIn{
  from{ opacity: 0; transform: translateY(-1.2rem); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes dropdownOut{
  from{ opacity: 1; transform: translateY(0); }
  to  { opacity: 0; transform: translateY(-1rem); }
}

/* Stagger de los ítems */
#nav-drawer .nav__drawer-list li{
  opacity: 0;
  transform: translateY(-.4rem);
}
#nav-drawer.is-open .nav__drawer-list li{
  animation: itemIn .24s ease both;
}
#nav-drawer.is-open .nav__drawer-list li:nth-child(1){ animation-delay: .05s; }
#nav-drawer.is-open .nav__drawer-list li:nth-child(2){ animation-delay: .10s; }
#nav-drawer.is-open .nav__drawer-list li:nth-child(3){ animation-delay: .15s; }
#nav-drawer.is-open .nav__drawer-list li:nth-child(4){ animation-delay: .20s; }

@keyframes itemIn{
  from{ opacity: 0; transform: translateY(-.4rem); }
  to  { opacity: 1; transform: translateY(0); }
}

/* Hamburguesa → X (suavizada) */
.nav__toggle .nav__bar{
  transition: transform .22s ease, opacity .22s ease, top .22s ease, bottom .22s ease;
}
.nav__toggle.is-open .nav__bar:nth-child(1){ transform: rotate(45deg); top: 1.2rem; }
.nav__toggle.is-open .nav__bar:nth-child(2){ opacity: 0; }
.nav__toggle.is-open .nav__bar:nth-child(3){ transform: rotate(-45deg); bottom: 1.2rem; }

/* quitar mayúsculas a todos */
#nav-drawer .nav__drawer-list a{
  text-transform: none; /* los demás en minúsculas */
}

/* solo el último (Contacto) en mayúsculas */
#nav-drawer .nav__drawer-list li:last-child a{
  text-transform: uppercase;
}

#nav-drawer .nav__drawer-list a{
  text-transform: none;
}
#nav-drawer .nav__drawer-list a.contact-link{
  text-transform: uppercase;
}

/* ===== Sección Identidad (igual a la referencia) ===== */
.identity{
  padding: 8rem 0 9rem;
  background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,0) 55%);
}

.identity__content{
  text-align: center;
  max-width: 110rem;
}

/* “Identidad que trasciende” (script) */
/* “Identidad que trasciende” y cualquier .signature */
.signature{
  font-family: var(--font-script), cursive;
  font-weight: 400;
  color: var(--color-dark);
  font-size: clamp(3.8rem, 6vw, 7.6rem);
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 2.8rem;
}


/* Titular grande en mayúsculas, sin bordes */
.identity__headline{
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-dark);
  font-size: clamp(2.4rem, 3.4vw, 5.2rem);
  line-height: 1.28;
  margin: 0 auto 3.6rem;
  max-width: 96rem; /* controla el ancho como en la imagen */
}

/* Párrafo angosto y suave */
.identity__desc{
  max-width: 78rem;
  margin: 0 auto 4rem;
  font-size: 1.8rem;
  line-height: 1.7;
  opacity: .9;
}

/* Botón oscuro centrado */
.identity__cta{
  display: inline-block;
  padding: 1.6rem 3.2rem;
  font-size: 2rem;
  border-radius: .4rem;
  background: #0f0f0f;           /* oscuro como en la captura */
  color: #fff;
  border: .2rem solid #0f0f0f;
  text-decoration: none;
}
.identity__cta:hover{
  background: transparent;
  color: #0f0f0f;
}

/* Responsive fino */
@media (max-width: 64rem){
  .identity{ padding: 6rem 0 7rem; }
  .identity__headline{ font-size: clamp(2.4rem, 5.6vw, 4rem); max-width: 90%; }
  .identity__desc{ font-size: 1.7rem; max-width: 90%; }
  .identity__cta{ font-size: 1.8rem; padding: 1.4rem 2.6rem; }
}

/* === IDENTIDAD → igual a la 2ª imagen === */

/* Título script (arriba): negro, fino y grande */
.identity .signature{
  font-family: var(--font-script), cursive;
  font-weight: 400;
  color: var(--color-dark) !important;   /* quitar el verde */
  font-size: clamp(3.6rem, 6vw, 7.2rem);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 2.8rem;
}

/* Titular grande en mayúsculas, sin “bold” pesado */
.identity__headline{
  font-family: var(--font-primary);
  font-weight: 400;                       /* antes 700 → demasiado grueso */
  text-transform: uppercase;
  color: var(--color-dark);
  font-size: clamp(2.6rem, 3.4vw, 5.2rem);
  line-height: 1.28;
  letter-spacing: .02em;
  max-width: 96rem;                       /* ancho como la referencia */
  margin: 0 auto 3.6rem;
}

/* Párrafo más angosto y suave */
.identity__desc{
  max-width: 78rem;
  margin: 0 auto 4rem;
  font-size: 1.8rem;
  line-height: 1.7;
  opacity: .9;
  text-align: center;
}

/* Botón oscuro centrado */
.identity__cta{
  display: inline-block;
  padding: 1.6rem 3.2rem;
  font-size: 2rem;
  border-radius: .4rem;
  background: #0f0f0f;
  border: .2rem solid #0f0f0f;
  color: #fff;
}
.identity__cta:hover{
  background: transparent;
  color: #0f0f0f;
}

/* Ajustes mobile */
@media (max-width: 64rem){
  .identity__headline{ font-size: clamp(2.4rem, 5.6vw, 4rem); max-width: 90%; }
  .identity__desc{ max-width: 90%; }
  .identity__cta{ font-size: 1.8rem; padding: 1.4rem 2.6rem; }
}

/* ===== MOBILE: eliminar hueco entre HERO e IDENTIDAD ===== */
@media (max-width: 64rem){
  .hero{
    height: auto !important;     /* sin 92vh en mobile */
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero__img{
    display: block;               /* quita gap por baseline */
    width: 100%;
    height: auto !important;      /* toma su altura real */
    object-fit: cover;
    object-position: center;      /* evita recortes raros */
  }

  /* La sección de identidad arranca pegada al hero */
  .identity{
    margin-top: 0 !important;
    padding-top: 2.4rem !important;  /* ajusta si querés menos/mas aire */
  }
}


/* =========================
   2) Sección IDENTIDAD (final)
   Reemplaza todo lo anterior de identidad
   ========================= */

/* Contenedor y fondo suave como la referencia */
.identity{
  padding: 10rem 0 9rem;
  background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,0) 55%);
}

.identity__content{
  text-align: center;
  max-width: 110rem;
  margin: 0 auto;
}

/* “Identidad que trasciende” – script negro, grande y aireado */
.signature{
  font-family: var(--font-script), cursive !important;
  font-weight: 400;
  font-style: normal;
  color: var(--color-dark);
  font-size: 10rem !important;
  line-height: 1.08;          /* compacto para “firma” */
  letter-spacing: 0;
  margin: 0 0 2.8rem;
}

/* Titular en mayúsculas, fino (no bold pesado) y ancho controlado */
.identity__headline{
  font-family: var(--font-primary);
  font-weight: 400;           /* más fino, como en la 2ª imagen */
  text-transform: uppercase;
  color: var(--color-dark);
  letter-spacing: .02em;
  line-height: 1.26;
  font-size: 3.6rem;
  max-width: 100rem;           /* bloque más angosto para line-breaks bonitos */
  margin: 0 auto 3.2rem;
}

/* Párrafo suave y más angosto */
.identity__desc{
  max-width: 72rem;
  margin: 0 auto 3.6rem;
  font-size: 2rem;
  line-height: 1.7;
  opacity: .85;
  text-align: center;
}

/* Botón oscuro centrado */
.identity__cta{
  display: inline-block;
  padding: 1.6rem 3.2rem;
  font-size: 2rem;
  border-radius: .4rem;
  background: #0f0f0f;
  color: #fff;
  border: .2rem solid #0f0f0f;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.identity__cta:hover{
  background: transparent;
  color: #0f0f0f;
}

/* Responsive fino */
@media (max-width: 64rem){
  .identity{ padding: 6rem 0 7rem; }
  .identity__headline{ font-size: clamp(2.4rem, 5.6vw, 4rem); max-width: 90%; }
  .identity__desc{ font-size: 1.7rem; max-width: 90%; }
  .identity__cta{ font-size: 1.8rem; padding: 1.4rem 2.6rem; }
}

/* ===== QUIÉNES SOMOS ===== */
.about{
  padding: 8rem 0 6rem;
  background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,0) 55%);
}

.about__grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr;   /* texto | imagen */
  align-items: start;
  gap: 5.6rem;
}

.about__eyebrow{
  /* Usa la fuente script que ya cargaste (Fantelina/Signature) */
  font-weight: 400;
  font-size: clamp(3.6rem, 5.2vw, 6.4rem);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 1.8rem;
  color: var(--color-dark);
}

.about__text p{
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-size: 2.9rem;
  line-height: 1.8;
  margin: 0 0 2.8rem;
  max-width: 62ch; /* ancho cómodo de lectura */
}

.about__media{
  position: relative;
  overflow: hidden;
  border-radius: .4rem;
  box-shadow: 0 1.6rem 3.2rem rgba(0,0,0,.08);
}

.about__media img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Desvanecido inferior como la referencia */
.about__fade{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(236,233,226,.85) 60%,
    var(--color-bg) 100%
  );
  pointer-events: none;
}

/* ===== Responsive ===== */
@media (max-width: 64rem){
  .about{ padding: 6rem 0 4rem; }
  .about__grid{
    grid-template-columns: 1fr;     /* una columna */
    gap: 3.6rem;
  }
  .about__text{ text-align: left; }
  .about__media{ max-width: 72rem; width: 100%; margin: 0 auto; }
}

/* ===== Ajustes ABOUT en móviles ===== */
@media (max-width: 48rem){  /* ~768px, podés ajustar */
  .about__grid{
    grid-template-columns: 1fr;  /* una sola columna */
    text-align: center;
    gap: 2.4rem;
  }

  .about__eyebrow{
    font-size: 6rem;  /* título más grande */
    margin-bottom: 2rem;
    text-align: center;
  }

  .about__text p{
    font-size: 1.5rem;   /* letra más chica */
    line-height: 1.6;
    margin: 0 0 1.8rem;
  }

  .about__media{
    margin: 0 auto;
    max-width: 90%;
  }
}

/* 1) CARGO LA FUENTE CORRECTA: SIGNATURA MONOLINE */
@font-face{
  font-family: 'Signatura Monoline';
  src: url('../assets/fonts/Signatura Monoline.ttf') format('truetype'),
       url('../assets/fonts/signatura_monoline/Signatura\ Monoline.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2) SETEO VARIABLES: GOWUN PARA TEXTO, SIGNATURA PARA TÍTULOS/FIRMAS */

/* ===== Servicios ===== */
.services{
  padding: 6rem 0 8rem;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,0) 70%);
}

.services__title{
  text-align: center;
  font-weight: 400;
  font-size: clamp(3.6rem, 6vw, 9rem);
  line-height: 1.05;
  margin: 0 0 4.8rem;
  color: var(--color-dark);
}

/* Tarjeta principal */
.service__card{
  position: relative;
  background: #f7f4ef; /* base suave */
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* texto | imagen */
  gap: 0;
  border: .9rem solid #fff;            /* marco blanco grande */
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.08);
}

/* Borde interior sutil como la ref */
.service__card::before{
  content: "";
  position: absolute; inset: 1.6rem;
  border: .2rem solid rgba(0,0,0,.16);
  pointer-events: none;
}

/* Columna texto */
.service__text{
  padding: 3.6rem 3.6rem 3.2rem 3.6rem;
}

.service__eyebrow{
  font-weight: 400;
  font-size: clamp(3rem, 4.2vw, 4.6rem);
  line-height: 1.1;
  margin: 0 0 1.8rem;
  color: var(--color-dark);
}

.service__text p{
  font-family: var(--font-primary);
  font-size: 1.7rem;
  line-height: 1.75;
  margin: 0 0 1.6rem;
  color: var(--color-dark);
  opacity: .95;
}

.service__lead{ margin-top: .6rem; }

.service__list{
  margin: .6rem 0 2.2rem 1.8rem;
  padding: 0;
  font-size: 1.7rem;
  line-height: 1.7;
}

.service__actions{
  display: flex;
  gap: 1.2rem;
}

/* Botones */
.service__btn{
  border-radius: 0;
  padding: 1.2rem 2.2rem;
  font-size: 1.6rem;
  border: .2rem solid #0f0f0f;
}

.service__btn--ghost{
  background: transparent;
  color: #0f0f0f;
}

.service__btn--dark{
  background: #0f0f0f;
  color: #fff;
}

/* Columna imagen */
.service__media{
  position: relative;
  overflow: hidden;
}
.service__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ===== Responsive ===== */
@media (max-width: 64rem){
  .service__card{
    grid-template-columns: 1fr;
  }
  .service__text{
    padding: 2.4rem 2rem 2rem;
  }
  .service__actions{
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 42rem){
  .services__title{ font-size: clamp(3.2rem, 9vw, 5.6rem); }
  .service__eyebrow{ font-size: clamp(2.6rem, 7vw, 3.8rem); }
  .service__text p, .service__list{ font-size: 1.55rem; }
}

.service__media img{
  width: 85%;      /* la haces más chica (ajusta el % a tu gusto) */
  margin: 0 auto;  /* centra la imagen en su columna */
  display: block;
}

.service__media{
  padding: 2rem;   /* crea espacio entre la foto y la línea gris */
  box-sizing: border-box;
}

.service__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: .4rem; /* opcional: esquinas suaves */
}

.service__card{
  max-width: 100rem;   /* 👈 ancho máximo de la carta */
  margin: 0 auto;      /* 👈 la centra dentro del container */
}

.service__eyebrow{
  font-weight: 400;
  font-size: clamp(3rem, 4.2vw, 4.6rem);
  line-height: 1.1;
  margin: 0 0 1.8rem;
  color: var(--color-dark);

}

.service__media{
  display: flex;
  align-items: center;   /* centra verticalmente */
  justify-content: center; /* centra horizontalmente */
  padding: 2rem;         /* deja aire respecto al borde gris */
  box-sizing: border-box;
}

.service__media img{
  width: 120%;      /* 👈 la forzamos a ser más grande que su columna */
  max-width: none;  /* desactiva el límite */
  margin-left: -10%;/* 👈 centrado (ajusta el % según quieras que “salga”) */
  height: auto;
  display: block;
  
}

.service{
  margin-bottom: 2rem;  /* 👈 más espacio entre cartas */
}

.service:last-child{
  margin-bottom: 0;     /* no deja espacio extra al final */
}

.service__text{
  display: flex;
  flex-direction: column;
  height: 80%;      /* asegura que ocupe toda la altura de la tarjeta */
}

.service__actions{
  margin-top: auto;  /* 👈 empuja los botones hacia abajo */
  display: flex;
  gap: 1.2rem;
}

.service__text{
  display: flex;
  flex-direction: column;
  height: 100%;      /* asegura que ocupe toda la altura de la tarjeta */
}

.service__actions{
  margin-top: auto;       /* mantiene el botón abajo */
  margin-bottom: 8rem;    /* 👈 separa del borde gris */
  display: flex;
  gap: 1.2rem;
}


/* ===== SOLO TEXTO EN MÓVIL ===== */
@media (max-width: 40rem){   /* ≤ 640px */
  .service__media{
    display: none;   /* oculta las imágenes */
  }
  .service__card{
    grid-template-columns: 1fr; /* solo queda el texto */
  }
}

/* === Ajuste Mobile: que todo entre en la carta === */
@media (max-width: 40rem){   /* ≤ 640px */
  .service__card{
    padding: 1.2rem;          /* crea aire entre contenido y borde */
    box-sizing: border-box;
  }

  .service__text{
    padding: 1.6rem 1.2rem;   /* menos padding lateral */
    display: flex;
    flex-direction: column;
  }

  .service__eyebrow{
    font-size: 5rem !important; /* título más compacto */
    line-height: 1.2;
    margin-bottom: 1.2rem;
    white-space: normal;      /* permite salto de línea */
    word-break: break-word;   /* corta palabras largas si es necesario */
  }

  .service__text p,
  .service__list{
    font-size: 1.45rem;
    line-height: 1.6;
  }

  .service__actions{
    margin-top: 1.6rem;
    margin-bottom: .8rem;     /* botones justo antes de la línea gris */
    flex-wrap: wrap;
    justify-content: center;
  }

  .service__btn{
    flex: 1 1 auto;
    font-size: 1.4rem;
    padding: .9rem 1.2rem;
    text-align: center;
    max-width: 48%;           /* evita que se salgan */
  }
}

/* === Servicios más chicos en móviles === */
@media (max-width: 40rem){   /* ≤ 640px */
  .service__card{
    padding: 0.8rem;           /* menos espacio interno */
    border-width: 0.6rem;      /* marco blanco más fino */
  }
  .service__card::before{
    inset: 0.6rem;             /* línea gris más cerca */
  }

  .service__text{
    padding: 1.2rem 1rem;      /* reduce espacio del texto */
  }

  .service__eyebrow{
    font-size: clamp(1.6rem, 5vw, 2rem); /* título más chico */
    margin-bottom: 0.8rem;
  }

  .service__text p,
  .service__list{
    font-size: 1.3rem;   /* texto más chico */
    line-height: 1.5;
  }

  .service__actions{
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    gap: 0.6rem;
  }
  .service__btn{
    font-size: 1.2rem;
    padding: 0.6rem 1rem;
  }
}

/* ===== Quote Final de Sección ===== */
.quote{
  padding: 5rem 2rem;
  text-align: center;

}

.quote blockquote{
  margin: 0 auto;
  max-width: 800px;
}

.quote p{
  font-size: 4rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 2rem;
}



.quote cite{
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-dark);
  display: block;
}

.nav a {
  position: relative; /* necesario para el pseudo-elemento */
  text-decoration: none; /* aseguramos que no haya subrayado por defecto */
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;   /* separación del texto */
  width: 0;
  height: 0.2rem;    /* grosor de la línea */
  background: var(--color-accent); /* usa tu color verde */
  transition: width 0.3s ease;     /* animación suave */
}

.nav a:hover::after {
  width: 100%; /* se dibuja la línea completa al hacer hover */
}

.service__btn {
  position: relative;
  transition: all 0.3s ease;
  text-decoration: none; /* evitamos subrayado nativo */
  overflow: hidden;      /* asegura que la animación no se desborde */
}

/* Pseudo-elemento para la línea */
.service__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.4rem;       /* separa un poquito del texto */
  width: 0;
  height: 2px;
  background: currentColor; /* mismo color que el texto */
  transition: width 0.3s ease;
}

/* Al hacer hover, se dibuja la línea */
.service__btn:hover::after {
  width: 100%;
}

/* Ghost: de borde negro a fondo negro */
.service__btn--ghost:hover {
  background: var(--color-dark);
  color: #fff;
}

/* Dark: de fondo negro a fondo blanco */
.service__btn--dark:hover {
  background: var(--color-bg);
  color: #0f0f0f;
  border: 0.2rem solid #0f0f0f;
}


/* ===== Sección Pilares (“No somos una agencia más”) ===== */
.pillars{
  background:#0f1f1a;           /* verde-negruzco como la referencia */
  color:#f4f1eb;
  padding: 8rem 0 6rem;
}

.pillars .signature{
  color:#fff !important;        /* firma blanca */
  text-align:center;
  font-size: 6rem;
  margin-bottom: 4rem;
}

.pillars__grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5rem 7rem;               /* filas x columnas */
  max-width: 110rem;
  margin: 0 auto;
}

.pillars__title{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.2;
  color:#fff;
  margin: 0 0 1.2rem;
  text-align: center;
}

.pillars__text{
  font-size: 3rem;
  line-height: 1.8;
  opacity:.9;
  max-width: 48ch;
  margin: 0 auto;
  text-align: center;
}

/* CTA centrado */
.pillars__cta{
  margin-top: 4.5rem;
  display:flex;
  justify-content:center;
}

/* Botón claro para fondo oscuro */
.btn--light{
  background:#fff;
  color:#0f0f0f;
  border:.2rem solid #fff;
  padding: 1.4rem 3.2rem;
  border-radius:.4rem;
  text-decoration:none;
  font-weight:700;
}
.btn--light:hover{
  background:transparent;
  color:#fff;
  border-color:#fff;
}

/* ===== Responsive ===== */
@media (max-width: 64rem){
  .pillars{ padding: 6rem 0 5rem; }
  .pillars__grid{ grid-template-columns: 1fr; gap: 3.6rem; }
  .pillars__text{ font-size: 1.7rem; }
}

/* Botón estilo minimalista pero más grande y alargado */
.btn--light{
  background: var(--color-bg);
  color: var(--color-dark);
  border: 2px solid #f4f1eb;
  padding: 0.5rem 4rem;       /* más alto y más ancho */
  font-size: 3.5rem;          /* texto más grande */
  font-weight: 400;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  letter-spacing: .5px;
  min-width: 280px;           /* asegura que sea alargado */
  text-align: center;
}

.btn--light:hover{
  background: transparent;
  color: var(--color-bg);
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* ===== Responsive solo para celular ===== */
@media (max-width: 480px){
  .btn--light{
    padding: 0.5rem 1rem; /* menos padding para que no desborde */
    font-size: 2rem;      /* texto un poco más chico */
    min-width: 100%;        /* ocupa todo el ancho del contenedor */
    text-align: center;
    display: block;         /* asegura que se vea centrado */
  }

  .pillars__cta{
    padding-inline: 1rem;   /* espacio lateral en móviles */
  }
}




/* hover sutil */
.phone-card:hover{
  transform: translateY(-6px);
}




/* Galería de 4 cartas (limpia, sin fondo/sombra) */
.pillars__gallery{
  margin: 3.6rem auto 4.2rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem;
  max-width: 140rem;          /* más ancho total */
}

.phone-card{
  padding: 0;                 /* quita el marco */
  border: none;               /* sin borde */
  border-radius: 0;           /* sin esquinas extra */
  box-shadow: none;           /* sin sombra */
  overflow: hidden;
  aspect-ratio: 9 / 19.5;     /* mantiene proporción vertical */
}

.phone-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1.6rem;      /* leve redondeado para la pantalla */
}

/* Responsive */
@media (max-width: 992px){
  .pillars__gallery{
    grid-template-columns: repeat(2, 1fr);
    max-width: 80rem;
  }
}
@media (max-width: 520px){
  .pillars__gallery{
    grid-template-columns: 1fr;
    max-width: 36rem;         /* más grande en móvil */
  }
}

/* ===== Carrusel móvil para la galería ===== */
@media (max-width: 520px){
  .pillars__gallery{
    display: flex;                 /* de grid -> carrusel horizontal */
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* scroll-snap */
    -webkit-overflow-scrolling: touch;
    gap: 1.2rem;
    padding: .5rem 1rem;
    max-width: none;               /* usa todo el ancho disponible */
  }
  .pillars__gallery::-webkit-scrollbar{ display:none; } /* oculta scrollbar */

  .phone-card{
    flex: 0 0 85%;                 /* ancho de cada slide */
    scroll-snap-align: center;
    aspect-ratio: 9 / 19.5;        /* mantiene proporción vertical */
    border-radius: 1.2rem;
    overflow: hidden;
  }
  .phone-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Puntos / indicadores */
  .pillars__dots{
    display: flex;
    justify-content: center;
    gap: .6rem;
    margin-top: -1rem;
  }
  .pillars__dots button{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: #7f8b85;
    opacity: .6;
    transition: transform .2s ease, opacity .2s ease;
  }
  .pillars__dots button[aria-current="true"]{
    background: #fff;
    opacity: 1;
    transform: scale(1.25);
  }
}

/* ===== CONTACTO ===== */
.contact{
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,0) 70%);
  padding: 7rem 0 8rem;
}

.contact__wrap{
  max-width: 96rem;
}

.contact__head{
  text-align: center;
  margin-bottom: 3.6rem;
}
.contact .signature{
  margin-bottom: 1.2rem;
  color: var(--color-dark);
}
.contact__title{
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-dark);
  font-size: clamp(2.4rem, 3.8vw, 4rem);
  margin: 0 0 .8rem;
}
.contact__desc{
  opacity: .9;
  font-size: 1.7rem;
}

.contact__form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem 3.2rem;
  background: #fff;
  border: .8rem solid var(--color-bg);
  box-shadow: 0 1.2rem 2.6rem rgba(0,0,0,.06);
  padding: 3rem;
}

.contact__field{
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.contact__field--full{
  grid-column: 1 / -1;
}

.contact__field label{
  font-size: 1.5rem;
  color: var(--color-dark);
  opacity: .85;
}

/* Inputs “subrayados” */
.contact__field input,
.contact__field textarea{
  border: 0;
  border-bottom: .2rem solid rgba(0,0,0,.14);
  padding: 1rem 0 .9rem;
  background: transparent;
  font-family: var(--font-primary);
  font-size: 1.6rem;
  color: var(--color-dark);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact__field textarea{
  resize: vertical;
}

/* Foco en color de marca */
.contact__field input:focus,
.contact__field textarea:focus{
  border-bottom-color: var(--color-accent);
  box-shadow: 0 3px 0 -1px var(--color-accent);
}

/* Botón acorde a la marca */
.contact__btn{
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--color-accent);
  color: #fff;
  border: .2rem solid var(--color-accent);
  padding: 1.2rem 2.8rem;
  border-radius: .4rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.contact__btn:hover{
  filter: brightness(.92);
}

/* Responsive */
@media (max-width: 64rem){
  .contact__form{
    grid-template-columns: 1fr;
    padding: 2.2rem;
  }
  .contact__btn{
    justify-self: stretch;
    text-align: center;
  }
}

/* Layout de dos columnas */
.contact__grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Caja de info */
.contact__info{
  padding: 2.5rem;
  border-radius: .6rem;
  color: var(--color-accent);
  font-size: 1.5rem;
  line-height: 1.6;
}
.contact__info-title{
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-bg);
}
.contact__info ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact__info li{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.contact__info i{
  color: var(--color-accent);
  font-size: 1.6rem;
}

/* Responsive */
@media (max-width: 900px){
  .contact__grid{
    grid-template-columns: 1fr;
  }
  .contact__info{
    margin-top: 2rem;
  }
}

/* Layout de dos columnas (más ancho el cuadro de info) */
.contact__grid{
  display: grid;
  grid-template-columns: 3fr 2fr;   /* antes era 2fr 1fr */
  gap: 4rem;
  align-items: start;
}

/* Caja de info más grande */
.contact__info{
  padding: 3.5rem;          /* más espacio interno */
  border-radius: .8rem;
  color: var(--color-accent);
  font-size: 1.7rem;        /* antes 1.5rem */
  line-height: 1.8;
}
.contact__info-title{
  font-family: var(--font-script);
  font-size: 5rem;        /* título más grande */
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--color-accent);
}
.contact__info ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact__info li{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}
.contact__info i{
  color: var(--color-accent);
  font-size: 2rem;          /* íconos más grandes */
}

/* Responsive */
@media (max-width: 900px){
  .contact__grid{
    grid-template-columns: 1fr;
  }
  .contact__info{
    margin-top: 2.5rem;
    font-size: 1.6rem;
    padding: 2.8rem;
  }
}

/* === Footer Marketing === */
.mkt-footer{
  background: var(--color-bg);
  color: var(--color-accent);
  padding: 48px 0 28px;
  font-family: var(--font-primary);
}
.mkt-footer__top{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: clamp(16px,4vw,48px);
  align-items:start;
}
.mkt-footer__brand{
  display:flex; flex-direction:column; gap:10px;
}
.mkt-footer__brand img{
  width:220px; height:auto; display:block; filter:brightness(1.05);
}
.mkt-footer__tagline{ color:var(--muted); font-size:0.95rem; max-width:34ch; }

.mkt-footer__col h4{
  margin:0 0 12px; color: var(--color-accent); font-size:2rem; font-weight:800;
}
.mkt-footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.mkt-footer__col a{ color:var(--fg); text-decoration:none; }
.mkt-footer__col a:hover{ color:var(--accent); }

/* Contacto + iconos */
.mkt-footer__list li{ display:flex; align-items:center; gap:10px; }
.mkt-footer .ico{ width:18px; height:18px; fill:var(--fg); flex:0 0 18px; opacity:.9; }
.mkt-footer__social a{ display:flex; align-items:center; gap:8px; }
.mkt-footer__social a:hover{ color:var(--accent); }
.mkt-footer__divider{ border:0; border-top:1px solid #242424; margin:22px 0 12px; }
.mkt-footer__copy{ margin:0; color:var(--muted); font-size:.95rem; }

/* Responsive */
@media (max-width: 980px){
  .mkt-footer__top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .mkt-footer__top{ grid-template-columns: 1fr; gap:24px; }
  .mkt-footer__brand img{ width:160px; }
}

/* ===== Footer Marketing — Mobile refinado ===== */

/* Base: un poco más de aire y tamaños cómodos */
.mkt-footer{
  padding: 40px 0 24px;
}
.mkt-footer .ico{
  width: 20px;
  height: 20px;
}

/* Apilado y centrado en tablets hacia abajo */
@media (max-width: 980px){
  .mkt-footer__top{
    grid-template-columns: 1fr;   /* una sola columna */
    gap: 24px;
  }
}

/* Celular: tipografías y targets más grandes, todo centrado */
@media (max-width: 640px){
  .mkt-footer{
    padding: 36px 0 20px;
  }

  .mkt-footer__top{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Orden sugerido: marca, contacto, secciones, redes */
  .mkt-footer__brand{ order: 1; align-items: center; text-align: center; }
  .mkt-footer__col:nth-of-type(2){ order: 3; } /* Secciones */
  .mkt-footer__col:nth-of-type(3){ order: 2; } /* Contacto */
  .mkt-footer__col:nth-of-type(4){ order: 4; } /* Redes */

  .mkt-footer__brand img{
    width: 160px;
  }
  .mkt-footer__tagline{
    font-size: 1rem;
    text-align: center;
  }

  .mkt-footer__col h4{
    text-align: center;
    font-size: 1.05rem;
    margin-bottom: 10px;
  }

  /* Enlaces y listas: centrados y con mayor altura táctil */
  .mkt-footer__col ul{
    gap: 10px;
  }
  .mkt-footer__col a{
    display: inline-block;
    padding: 10px 4px;             /* ~44px alto total con línea */
    text-align: center;
  }

  /* Contacto: cada item con buen hit area */
  .mkt-footer__list li{
    justify-content: center;
    gap: 12px;
    padding: 10px 0;               /* aumenta área táctil */
    line-height: 1.5;
  }
  .mkt-footer .ico{
    width: 22px;
    height: 22px;
  }

  /* Redes: fila centrada con separación cómoda */
  .mkt-footer__social{
    display: flex;
    justify-content: center;
    gap: 18px;
  }
  .mkt-footer__social a{
    padding: 10px 8px;
  }

  .mkt-footer__divider{
    margin: 18px 0 12px;
  }
  .mkt-footer__copy{
    text-align: center;
    font-size: .95rem;
  }
}

/* Centrar secciones en mobile */
@media (max-width: 640px){
  .mkt-footer__col{
    text-align: center;         /* centra todo el contenido */
  }

  .mkt-footer__col ul{
    display: flex;
    flex-direction: column;
    align-items: center;        /* centra cada link */
    gap: 10px;
  }

  .mkt-footer__col ul li a{
    text-align: center;
    display: block;
    width: 100%;
  }
}

/* Línea separadora en mobile */
@media (max-width: 640px){
  .mkt-footer__col{
    text-align: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.15); /* línea sutil */
  }

  /* que la primera columna no tenga línea arriba */
  .mkt-footer__col:first-of-type{
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
}

/* Línea que separa el footer de la página */
.mkt-footer{
  border-top: 1px solid rgba(255,255,255,0.15); /* en caso de fondo oscuro */
}

/* Si usás fondo claro (ej. --color-bg), cambiá a color oscuro */
body.light .mkt-footer{
  border-top: 1px solid rgba(0,0,0,0.15);
}

/* ===== Sección "Como es trabajar con nosotros" ===== */
.workwithus {
  padding: 8rem 0 6rem;
  background: var(--color-bg);
}

.workwithus__content {
  text-align: center;
  max-width: 90rem;
  margin: 0 auto;
}

.workwithus .signature {
  font-family: var(--font-script), cursive;
  font-weight: 400;
  font-size: clamp(3.6rem, 6vw, 6.8rem);
  color: var(--color-dark);
  margin-bottom: 2.4rem;
}

.workwithus__desc {
  font-family: var(--font-primary);
  font-size: 2rem;
  line-height: 1.7;
  color: var(--color-dark);
  opacity: 0.9;
  max-width: 72rem;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 64rem) {
  .workwithus {
    padding: 6rem 0 5rem;
  }
  .workwithus__desc {
    font-size: 1.7rem;
    max-width: 90%;
  }
}

/* ===== Proceso (versión más compacta) ===== */
.process{
  background: var(--color-bg);
  padding: 3rem 0 4rem;          /* menos alto */
}

.process__wrap{
  position: relative;
  max-width: 90rem;              /* más angosto */
  margin: 0 auto;
}

/* línea central más sutil */
.process__wrap::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(0,0,0,.25);
  transform: translateX(-50%);
}

/* cada paso */
.process__item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;                     /* menos separación */
  align-items: center;
  padding: 1.8rem 0;
}

.process__item::before{
  content:"";
  position: absolute;
  top: 50%;
  width: 3rem;                   /* conector más corto */
  height: 1px;
  background: rgba(0,0,0,.4);
  transform: translateY(-50%);
}

/* lado derecho */
.process__item--right .process__text{ grid-column: 1; text-align: right; }
.process__item--right .process__media{ grid-column: 2; }
.process__item--right::before{ right: calc(50% + 0px); }

/* lado izquierdo */
.process__item--left .process__media{ grid-column: 1; }
.process__item--left .process__text{ grid-column: 2; text-align: left; }
.process__item--left::before{ left: calc(50% + 0px); }

/* tipografías más chicas */
.process__eyebrow{
  font-family: var(--font-primary);
  font-size: 1.3rem;             /* antes 1.6rem */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0 0 .8rem;
}

.process .signature{
  font-size: 1.6rem;             /* mucho más chica */
  margin: .2rem 0 .6rem;
}

.process__text p{
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0 0 .8rem;
  opacity: .85;
}

/* imágenes más pequeñas */
.process__media img{
  display: block;
  width: 80%;                   /* no ocupan toda la columna */
  height: auto;
  margin: 0 auto;
  border-radius: .3rem;
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 900px){
  .process__wrap::before{ left: 1rem; }
  .process__item{
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.6rem 0;
  }
  .process__item::before{
    left: 1rem; width: 1.5rem;
  }
  .process__item--right .process__text,
  .process__item--left  .process__text{
    padding-left: 2.4rem;
    text-align: left;
  }
  .process__media img{ width: 100%; }
}

/* ===== Proceso (igual a la maqueta) ===== */
.process--tight{
  background: var(--color-bg);
  padding: 3.2rem 0 3.6rem;        /* sección bien compacta */
}

/* contenedor angosto */
.process__wrap{
  position: relative;
  max-width: 86rem;                /* ancho similar al diseño */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 6rem 1fr; /* izq | línea | der */
  gap: 2rem;
}

/* columnas */
.process__col{
  display: flex;
  flex-direction: column;
  gap: 2.6rem;                     /* separación entre bloques */
}

/* línea vertical central */
.process__divider{
  position: relative;
}
.process__divider::before{
  content:"";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(0,0,0,.35);
}

/* pequeñas rayitas que salen hacia los bloques */
.process__divider .tick{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--y);
  width: 4.4rem;
  height: 1px;
  background: rgba(0,0,0,.6);
}

/* bloques (texto, títulos e imágenes) */
.process__block{ }
.process__eyebrow{
  font-family: var(--font-primary);
  font-size: 1.35rem;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0 0 .8rem;
  text-align: center;              /* como la referencia */
}

/* párrafos de la columna izquierda */
.process__col--left p{
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--color-dark);
  opacity: .95;
  margin: 0 0 .9rem;
  text-align: left;
  max-width: 39ch;                 /* ancho de texto similar */
}

/* frases en script */
.process__signature{
  font-size: 1.9rem;               /* más grande que el párrafo */
  line-height: 1.35;
  color: var(--color-dark);
  margin-top: .4rem;
  text-align: left;
}

/* imágenes (marcos suaves) */
.process__media{
  margin-top: .6rem;
}
.process__media img{
  display:block;
  width: 100%;
  height: auto;
  border-radius: .4rem;
  box-shadow: 0 .6rem 1.4rem rgba(0,0,0,.06);
}

/* ——— Responsive ——— */
@media (max-width: 900px){
  .process__wrap{
    grid-template-columns: 1fr;   /* una sola columna */
    max-width: 48rem;
    gap: 1.6rem;
  }
  .process__divider{ display:none; } /* ocultamos la línea en mobile */
  .process__eyebrow{ text-align: left; }
  .process__col{ gap: 1.8rem; }
  .process__signature{ font-size: 1.7rem; }
  .process__col--left p{ max-width: none; }
}

/* ===== Proceso (ajustes tipográficos) ===== */
.process__eyebrow{
  font-family: var(--font-primary);
  font-size: 1.8rem;         /* antes 1.35rem → más grande */
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0 0 1rem;
  text-align: center;
}

.process__col--left p{
  font-size: 1.8rem;        /* antes 1.35rem → más grande */
  line-height: 1.7;
  color: var(--color-dark);
  opacity: .95;
  margin: 0 0 1.2rem;
  text-align: left;
  max-width: 45ch;
}

/* firmas / frases manuscritas */
.process__signature{
  font-size: 5.5rem !important;         /* antes 1.9rem → más chico */
  line-height: 1.4;
  color: var(--color-dark);
  margin-top: .6rem;
  text-align: left;
}

/* ===== Líneas del proceso (como la maqueta) ===== */

/* columna central: línea más marcada */
.process__divider{
  position: relative;
}
.process__divider::before{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.6px;                          /* un poco más gruesa */
  background: rgba(0,0,0,.56);            /* más contraste */
}

/* Variable de separación para el “hueco” antes de tocar la línea central */
:root{
  --process-gap: 0.9rem;                  /* distancia desde el conector a la línea */
  --process-mid: 6rem;                    /* ancho de la columna central de tu grid */
}



@media (max-width: 900px){
  .process__wrap{ counter-reset: paso; }
  .step{
    position: relative;
    padding-left: 3.4rem;
  }
  .step::before{
    counter-increment: paso;
    content: counter(paso);
    position: absolute; left: 0; top: .1rem;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.35);
    display: grid; place-items: center;
    font-size: 1.3rem;
    line-height: 1;
    background: #fff8;
  }
}



@media (max-width: 900px){
  /* Forzamos orden cronológico */
  .process__col--right{ order: 1; } /* Paso 1,3,4 */
  .process__col--left { order: 2; } /* Texto + Paso 2 + Paso 5 */

  /* Pero dentro de la columna izquierda, aseguramos que Paso 2 vaya primero */
  .process__col--left .process__block:nth-child(2){ order: 1; } /* Paso 2 */
  .process__col--left .process__block:nth-child(1){ order: 2; } /* Texto */
  .process__col--left .process__block:nth-child(3){ order: 3; } /* Paso 5 */
}

/* ===== Proceso: corregir orden en móviles ===== */
@media (max-width: 900px){
  .process__wrap{
    display: flex;
    flex-direction: column;
  }

  /* cada bloque en orden natural */
  .process__col--left, 
  .process__col--right{
    display: contents; /* 👈 hace que los hijos se mezclen en un solo flujo */
  }
}



@media (max-width: 900px){
  .process__wrap{
    display: flex;
    flex-direction: column;
  }
  .process__col--left, 
  .process__col--right{
    display: contents;
  }

  /* Corrige el orden manualmente */
  .process__block:nth-of-type(1){ order: 1; } /* Paso 1 */
  .process__block:nth-of-type(2){ order: 2; } /* Paso 2 */
  .process__block:nth-of-type(3){ order: 3; } /* Paso 3 */
  .process__block:nth-of-type(4){ order: 4; } /* Paso 4 */
  .process__block:nth-of-type(5){ order: 5; } /* Paso 5 */
}



@media (max-width: 900px){
  .process__wrap{
    display: flex;
    flex-direction: column;
  }

  .process__col--left,
  .process__col--right{
    display: contents; /* se ignoran como contenedor */
  }

  /* Forzar orden correcto en mobile */
  .process__block:nth-of-type(1){ order: 1; } /* Paso 1 */
  .process__block:nth-of-type(2){ order: 2; } /* Paso 2 */
  .process__block:nth-of-type(3){ order: 3; } /* Paso 3 */
  .process__block:nth-of-type(4){ order: 4; } /* Paso 4 */
  .process__block:nth-of-type(5){ order: 5; } /* Paso 5 */
}


/* Orden correcto SOLO en mobile */
@media (max-width: 900px){
  .process__wrap{ display:flex; flex-direction:column; }
  .process__col--left, .process__col--right{ display:contents; } /* mezcla columnas */
  .process__block{ order: 999; }       /* default */
  .process__block.step--1{ order: 1; }
  .process__block.step--2{ order: 2; }
  .process__block.step--3{ order: 3; }
  .process__block.step--4{ order: 4; }
  .process__block.step--5{ order: 5; }
}

@media (max-width: 900px){
  .process__wrap{ display:flex; flex-direction:column; }
  .process__col--left, .process__col--right{ display:contents; }
  .process__block{ order: var(--order, 999); } /* toma el número que setea JS */
}



/* ===== Proceso: reordenar y numerar bien en móviles ===== */
@media (max-width: 900px){
  /* 1) Forzar flex (anula el grid del layout de escritorio) */
  #proceso .process__wrap{
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2) Mezclar hijos de ambas columnas en un solo flujo */
  #proceso .process__col--left,
  #proceso .process__col--right{
    display: contents !important;
  }

  /* 3) Ocultar la línea central en móvil */
  #proceso .process__divider{ display: none !important; }

  /* 4) Orden por defecto alto (luego lo bajamos por JS o clases) */
  #proceso .process__block{ order: 999; }

  /* 5) Desactivar counters viejos y usar badge por atributo */
  #proceso .process__wrap{ counter-reset: none !important; }
  #proceso .step{ counter-increment: none !important; }
  #proceso .step::before{
    /* badge con el número real del PASO leído por JS */
    content: attr(data-step);
    position: absolute;
    left: .8rem;
    transform: translateY(-.2rem);
    width: 2.4rem; height: 2.4rem;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.2rem;
    background: transparent;
  }
}

@media (max-width: 900px){
  /* Intro arriba de todos */
  #proceso .process__block--intro{
    order: 0 !important;  /* antes que todos los pasos */
  }
}

@media (max-width: 900px){
  #proceso .process__wrap{
    display: flex !important;
    flex-direction: column !important;
  }
  #proceso .process__col--left,
  #proceso .process__col--right{
    display: contents !important;
  }
  #proceso .process__divider{ display: none !important; }

  /* valor por defecto alto; el script lo cambia */
  #proceso .process__block{ order: 999; }

  /* badge solo para .step (los pasos) */
  #proceso .step::before{
    content: attr(data-step);
    position: absolute;
    left: .8rem;
    transform: translateY(-.2rem);
    width: 2.4rem; height: 2.4rem;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 1.2rem;
    background: transparent;
  }
}

@media (max-width: 768px){
  .process__signature{
    font-size: 5rem !important;
  }
}


/* ===== Ajustes más grandes para "Como es trabajar con nosotros" ===== */
.workwithus .signature{
  font-size: 12rem !important;  /* antes máx ~6.8rem → ahora hasta 9rem */
  margin-bottom: 3.2rem;
}

.workwithus__desc{
  font-size: 2.4rem;    /* antes 2rem */
  line-height: 1.8;
  max-width: 80rem;     /* un poco más ancho para aire */
  margin: 0 auto;
}

/* Responsive: que siga grande pero ajustado en pantallas chicas */
@media (max-width: 64rem){
  .workwithus .signature{
    font-size: 7rem !important;
  }
  .workwithus__desc{
    font-size: 1.5rem;
    max-width: 90%;
  }
}



/* ===== Servicios: versión móvil unificada para TODAS las cartas ===== */
@media (max-width:40rem){

  /* La card se apila en columna (imagen arriba, texto abajo) */
  .services .service .service__card{
    display: flex !important;
    flex-direction: column !important;
    border: none !important;         /* sin línea gris */
    box-shadow: none !important;
  }

  /* Imagen visible en móvil (anula cualquier display:none previo) */
  .services .service .service__media{
    order: -1;                        /* imagen arriba */
    display: block !important;        /* asegurar visibilidad */
    width: 100% !important;
    height: 280px;                    /* alto del banner (ajustable) */
    margin: 0 !important;
    padding: 0 !important;
    position: relative;               /* para el degradé */
    overflow: hidden;                 /* recorte limpio */
    box-sizing: border-box !important;
  }

  /* La imagen llena el contenedor y se recorta sin deformar */
  .services .service .service__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    margin: 0 !important;
    transform: none !important;       /* sin zoom heredado */
    max-width: none !important;
    border-radius: 0 !important;
  }

  /* Degradé blanco inferior como overlay */
  .services .service .service__media::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;                       /* cuánto ocupa el degradé */
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.9) 100%
    );
    pointer-events: none;
  }

  /* Quitar divisores dentro de las tarjetas en móvil */
  .services .service .service__divider{
    display: none !important;
  }
}

/* ===== Opcional (global, por si querés sin líneas en desktop también) ===== */
.service__card{
  border: none;
  box-shadow: none;
}
.service__divider{
  display: none;
}

/* ===== Quote: texto más chico en móviles ===== */
@media (max-width:40rem){
  .quote p{
    font-size: 2.5rem;    /* ajusta a tu gusto (0.8–1rem) */
    line-height: 1.4;     /* opcional: mantiene buena legibilidad */
  }

  .quote cite{
    font-size: 1.8rem;    /* tamaño un poco menor para la cita */
  }
}

/* ===== Hero: texto más chico en pantallas móviles ===== */
@media (max-width:40rem){

  /* Si tu hero tiene un título/heading */
  .hero h1,
  .hero h2,
  .hero__headline {
    font-size: 1.4rem !important;       /* ajustá según tu gusto (1.2–1.6 rem) */
    line-height: 1.3;       /* mejor legibilidad en pantallas chicas */
  }

  /* Si hay subtítulo o párrafo */
  .hero p,
  .hero__desc {
    font-size: 0.9rem;      /* un poco más pequeño que el texto normal */
    line-height: 1.4;
  }
}


/* ===== Identidad (frases del "hero") más chicas en móviles ===== */
@media (max-width:40rem){
  .identity__eyebrow.signature{
    font-size: 5rem !important;
  }
  .identity__headline{
    font-size: 1.35rem !important;   /* ~22px aprox */
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }
  .identity__desc{
    font-size: 1.5rem !important;   /* ~15px */
    line-height: 1.5 !important;
  }
  .identity__cta{
    font-size: 0.95rem !important;
    padding: .7rem 1rem !important;
  }
}

/* ===== Desactivar subrayado/animación del logo en móviles ===== */
@media (max-width:40rem){
  /* Quita cualquier borde, sombra o underline del link del logo */
  .brand,
  .brand:link,
  .brand:visited,
  .brand:hover,
  .brand:focus {
    text-decoration: none !important;
    background-image: none !important;   /* por si usa gradient underline */
    box-shadow: none !important;
    border: none !important;
    transition: none !important;
  }

  /* Si hay pseudo-elementos usados para la animación, los anulamos */
  .brand::before,
  .brand::after {
    content: none !important;
    display: none !important;
  }
}

/* Galería de 5 cartas en una sola fila (desktop) */
.pillars__gallery{
  margin: 3.6rem auto 4.2rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* ← antes: repeat(4, 1fr) */
  gap: 2.4rem;                                      /* un poco menos de separación */
  max-width: 180rem;                                 /* podés subir a 150–160rem si querés más aire */
}

/* ===== Pillars gallery visible y tipo carrusel en móviles ===== */
@media (max-width:40rem){

  /* mostrar la galería (pisa cualquier display:none previo) */
  .pillars__gallery{
    display: flex !important;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 1rem;
    width: 100%;
    min-height: 1px;           /* evita colapso de altura */
  }

  /* cada phone-card actúa como slide centrado */
  .pillars__gallery .phone-card{
    flex: 0 0 80%;             /* ancho de cada slide (ajusta 70–90%) */
    scroll-snap-align: center;
  }

  /* imágenes seguras */
  .pillars__gallery .phone-card img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* aseguro que los puntitos se vean en móvil */
  .pillars__dots{
    display: flex !important;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 0 0;
  }
  .pillars__dots > *{
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.45);
  }
  .pillars__dots [aria-current="true"]{
    background: #fff;
  }
}

/* === Pillars: acercar los puntitos al carrusel en móvil === */
@media (max-width:40rem){
  .pillars__dots{
    margin-top: -1rem !important;   /* antes seguro era ~2rem o más */
    padding-top: 0 !important;
  }

  /* opcional: reducir el espacio inferior del carrusel si hay padding */
  .pillars__gallery{
    margin-bottom: 0.5rem !important;
  }
}

/* === Pillars: puntitos justo debajo de las imágenes en móvil === */
@media (max-width:40rem){
  /* elimina margen/padding extra del carrusel */
  .pillars__gallery{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* coloca los dots inmediatamente después de las cards */
  .pillars__dots{
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;   /* asegura que quede en el flujo normal */
  }
}

.pillars__dots{ margin-top: -0.25rem !important; }

/* === Pillars (móvil): dots pegados a las imágenes === */
@media (max-width:40rem){
  /* Quita márgenes/padding del carrusel */
  .pillars__gallery{
    margin: 0 !important;
    padding: 0 1rem 0 1rem !important; /* solo laterales */
    display: flex !important;          /* nos aseguramos del layout */
    gap: 1rem;                          /* horizontal */
  }

  /* Quita el margen por defecto del <figure> */
  .pillars__gallery .phone-card{
    margin: 0 !important;
  }

  /* Por si la imagen dejaba “línea” debajo */
  .pillars__gallery .phone-card img{
    display: block !important;
  }

  /* Dots: sin margen y subidos visualmente */
  .pillars__dots{
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: -10px;                         /* súbelo; ajustá -6px/-12px a gusto */
  }
}

/* === Pillars móvil: dots pegados a la galería === */
@media (max-width:40rem){
  /* eliminar cualquier espacio extra debajo de la galería */
  .pillars__gallery{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* el contenedor de los dots sin margen/padding */
  .pillars__dots{
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
  }

  /* asegurar que los dots queden justo después de las cards */
  .pillars{
    display: flex;
    flex-direction: column;
  }
  .pillars__dots{
    order: 2; /* inmediatamente tras la galería (que es order:1 por defecto) */
  }
}

/* === Más espacio antes de las phone-cards en móvil === */
@media (max-width:40rem){
  /* Opción A: margen superior en la galería misma */
  .pillars__gallery{
    margin-top: 10rem !important;   /* ajustá a 3rem si querés más */
  }

  /* Opción B (alternativa): margen superior a toda la sección */
  /* .pillars{
       padding-top: 2.5rem !important;
  } */
}

/* === Pillars: subir los dots en móviles === */
@media (max-width:40rem){
  .pillars__dots{
    margin-top: -10rem !important;   /* sube ~24 px, ajustá a gusto */
    position: relative !important;
  }
}

/* === Pillars: dots superpuestos a las phone-cards en móviles === */
@media (max-width:40rem){
  /* referencia para el posicionamiento */
  .pillars{
    position: relative;
  }

  /* superpone los dots encima de la galería */
  .pillars__dots{
    position: absolute !important;
    bottom: 1rem;                /* distancia desde la parte inferior de las phone-cards */
    left: 50%;
    transform: translateX(-50%); /* centrado horizontal */
    margin: 0 !important;
    padding: 0 !important;
    z-index: 5;                  /* asegura que queden por encima */
  }
}

/* === Pillars: dots justo debajo de la imagen en móvil === */
@media (max-width:40rem){
  /* Asegura que la galería no deje espacio extra */
  .pillars__gallery{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Dots pegados al final de la phone-card */
  .pillars__dots{
    position: relative !important;  /* vuelve al flujo normal */
    margin-top: 0.25rem !important; /* un pequeño respiro de 4px */
    padding-top: 0 !important;
  }
}

/* === Pillars móvil: dots justo debajo de la imagen (parche final) === */
@media (max-width: 520px){
  /* quita el margen grande que queda de desktop */
  .pillars__gallery{
    margin: 0 !important;                 /* elimina el 4.2rem de abajo */
    padding: 0 1rem !important;           /* solo laterales */
    gap: 1.2rem !important;
  }
  /* por si <figure> trae margen del user agent */
  .pillars__gallery .phone-card{
    margin: 0 !important;
  }

  /* dots pegados a la galería */
  .pillars__dots{
    position: relative !important;
    margin-top: 0.25rem !important;       /* 0 si los querés totalmente pegados */
    padding-top: 0 !important;
  }
}

/* Quitar el redondel numerado de cada paso */
.step::before {
  content: none !important;
}

/* Evitar salto de línea en títulos de servicios en móviles */
@media (max-width: 640px) {
  .service__eyebrow {
    white-space: nowrap;       /* evita que el texto se corte */
    font-size: clamp(1.6rem, 4.5vw, 2.4rem); /* reduce la letra si es necesario */
  }
}

/* Degradé global de fondo en toda la página */
.identity,
.about,
.services,
.quote,
.contact,
.mkt-footer {
  background: transparent !important;
}

/* === Unificar imágenes de las cartas de servicio (como la 1ª) === */
@media (min-width: 769px) {
  .service__media{
    padding: 2rem;              /* mismo aire que la 1ª */
    box-sizing: border-box;
    display: block;
    overflow: hidden;           /* esconde el recorte del cover */
  }

  .service__media img{
    width: 100% !important;
    height: 100% !important;    /* ocupa toda la columna */
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important; /* anula límites previos */
    margin: 0 !important;       /* quita desplazamientos tipo -10% */
    display: block;
  }


  /* === Aumentar tamaño de las imágenes de servicio === */
  .service__media img{
    width: 110% !important;      /* antes 100%, ahora un poco más grande */
    height: 110% !important;     /* ocupa más alto */
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
    margin: 0 !important;
    display: block;
  }

  /* Desplaza la imagen hacia arriba y a la derecha */
  .service__media img{
    width: 110% !important;
    height: 110% !important;
    object-fit: cover !important;
    object-position: 60% 50% !important; /* X Y  → 60% más a la derecha, 40% más arriba */
  }

  .service__media img{
    width: 110% !important;
    height: 110% !important;
    object-fit: cover !important;
    object-position: 60% 20% !important;  /* X Y → 20% la sube más */
  }

  .service__media{
    overflow: hidden;
  }

  /* Sube todo el bloque de imagen dentro de la carta */
  .service__media{
    position: relative;
    top: -10px; 
    right: -10px;
  }

  .service__eyebrow{
    font-size: 8rem !important;
  }

}

/* ===== Fondos individuales por sección ===== */

/* Sección de inicio */
/* ==== Fondos individuales por sección (forzado) ==== */

/* Hero */
/* ===== Fondos individuales, de más oscuro a más claro (no blanco) ===== */

/* ===== Fondo para la sección HERO ===== */
/* ===== HERO con degradado estilo Canva ===== */
.hero {
  background: linear-gradient(
    180deg,
    rgba(236, 233, 226, 1) 0%,      /* #ece9e2 100% opacidad */
    rgba(236, 233, 226, 0.95) 40%,  /* un poco translúcido */
    rgba(236, 233, 226, 0.90) 70%,  /* más claro */
    rgba(236, 233, 226, 0.85) 100%  /* final más claro pero no blanco */
  ) !important;

  /* elimina imagen si aún existe */
  background-image: none !important;
}


/* ===== HERO con degradado estilo Canva ===== */
.identity {
  background: linear-gradient(
    180deg,
    rgba(236, 233, 226, 1) 0%,      /* #ece9e2 100% opacidad */
    rgba(236, 233, 226, 0.95) 40%,  /* un poco translúcido */
    rgba(236, 233, 226, 0.90) 70%,  /* más claro */
    rgba(236, 233, 226, 0.85) 100%  /* final más claro pero no blanco */
  ) !important;

  /* elimina imagen si aún existe */
  background-image: none !important;
}


.about {
  background: linear-gradient(180deg, #d9d4c8 0%, var(--color-bg) 100%) !important;
}

.services {
  background: linear-gradient(180deg, #d9d4c8 0%, var(--color-bg) 100%) !important;
}

/* ===== HERO con degradado estilo Canva ===== */
.quote {
  background: linear-gradient(
    180deg,
    rgba(236, 233, 226, 1) 0%,      /* #ece9e2 100% opacidad */
    rgba(236, 233, 226, 0.95) 40%,  /* un poco translúcido */
    rgba(236, 233, 226, 0.90) 70%,  /* más claro */
    rgba(236, 233, 226, 0.85) 100%  /* final más claro pero no blanco */
  ) !important;

  /* elimina imagen si aún existe */
  background-image: none !important;
}


/* Pilares conserva su verde */
.pillars {
  background: #0f1f1a !important;
}

/* ===== HERO con degradado estilo Canva ===== */
.contact {
  background: linear-gradient(
    180deg,
    rgba(236, 233, 226, 1) 0%,      /* #ece9e2 100% opacidad */
    rgba(236, 233, 226, 0.95) 40%,  /* un poco translúcido */
    rgba(236, 233, 226, 0.90) 70%,  /* más claro */
    rgba(236, 233, 226, 0.85) 100%  /* final más claro pero no blanco */
  ) !important;

  /* elimina imagen si aún existe */
  background-image: none !important;
}



@media (max-width: 768px) {
  .pillars__gallery {
    transform: translateX(20px); /* mueve todo 20 px a la derecha */
  }

  .pillars__dots {
    transform: translateX(20px); /* mismo desplazamiento para los puntos */
  }
}
/* Subir la sección verde (pillars) en mobile */
@media (max-width: 768px) {
  /* reduce el aire superior interno */
  .pillars {
    padding-top: 16px !important;
  }

  /* por si la sección anterior deja mucho espacio debajo */
  .quote {
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
  }
}


/* Feed más chico */
.pillars__gallery .phone-card {
  width: 80%;         /* reduce el ancho total de cada tarjeta */
  margin: 0 auto;     /* centra la tarjeta */
}

.pillars__gallery .phone-card img {
  width: 100%;        /* la imagen sigue llenando la tarjeta */
  height: auto;
}

.pillars__gallery .phone-card img {
  max-width: 100%;   /* evita que se estire más que su resolución */
  height: auto;
}

html, body {
  scroll-behavior: smooth;
  overflow-x: hidden; /* para anclas con desplazamiento suave */
}
/* Reducir tamaño de los feeds SOLO en pantallas chicas */
@media (max-width: 520px) {
  .pillars__gallery .phone-card {
    flex: 0 0 70%;      /* antes 85%, ocupa menos ancho */
    max-width: 70%;
  }

  .pillars__gallery .phone-card img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 520px){
  .pillars__gallery{
    padding-right: 15%; /* agrega espacio al final del carrusel */
  }
}

@media (max-width: 520px){
  .pillars__gallery .phone-card:last-child{
    margin-right: 5%;
  }
}

/* ===== Carrusel móvil: que el último feed no se corte ===== */
@media (max-width: 520px){
  .pillars__gallery{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1.2rem;
    padding: .5rem 0;                  /* sin padding lateral, lo daremos con los “spacers” */
  }

  /* Cada slide ocupa 85% del viewport */
  .pillars__gallery .phone-card{
    flex: 0 0 85%;
    scroll-snap-align: center;         /* centrado */
    border-radius: 1.2rem;
    overflow: hidden;
  }

  /* Spacers: (100% - 85%) / 2 = 7.5% a ambos lados */
  .pillars__gallery::before,
  .pillars__gallery::after{
    content: "";
    flex: 0 0 7.5%;
  }
}



@media (max-width: 520px){
  .pillars .signature {
  font-size: 8rem !important;       /* antes 6rem: título principal más chico */
  }
  .pillars__title{
    font-size: 3rem;

  }
  .pillars__text{
    font-size: 2rem;
  }

}

/* ===== Testimonios ===== */
.testimonials{
  padding: 8rem 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,0) 70%);
}

.testimonials__title{
  text-align: center;
  font-weight: 400;
  font-size: clamp(3.2rem, 5vw, 6rem);
  margin-bottom: 5rem;
  color: var(--color-dark);
}

.testimonials__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 4rem;
  max-width: 100rem;
  margin: 0 auto;
}

.testimonial{
  position: relative;
  background: #fff;
  border: .2rem solid rgba(0,0,0,.1);
  padding: 3rem 2.4rem 5rem;
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.08);
  text-align: center;
  border-radius: .8rem;
}

.testimonial__quote p{
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--color-dark);
  font-style: italic;
  margin-bottom: 2.4rem;
}

.testimonial__footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: -3rem;
  left: 50%;
  transform: translateX(-50%);
}

.testimonial__avatar{
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: .3rem solid #fff;
  box-shadow: 0 0 .8rem rgba(0,0,0,.15);
  margin-bottom: 1rem;
}

.testimonial__name{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--color-accent);
}

/* Responsive */
@media (max-width: 640px){
  .testimonial__quote p{ font-size: 1.6rem; }
}

/* ===== Carrusel de Testimonios ===== */
.testimonials {
  padding: 8rem 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,0) 70%);
  position: relative;
}

.testimonials__title {
  text-align: center;
  font-weight: 400;
  font-size: clamp(3.2rem, 5vw, 6rem);
  margin-bottom: 4rem;
  color: var(--color-dark);
}

.testimonials__carousel {
  overflow: hidden;
  max-width: 100rem;
  margin: 0 auto;
}

.testimonials__track {
  display: flex;
  transition: transform 0.5s ease;
}

.testimonial {
  flex: 0 0 50%;       /* 2 testimonios visibles */
  box-sizing: border-box;
  padding: 3rem 2.4rem;
  background: #fff;
  border: .2rem solid rgba(0,0,0,.1);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.08);
  text-align: center;
  border-radius: .8rem;
  margin: 0 1rem;
}

.testimonial__quote p {
  font-size: 1.8rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 1.6rem;
}

.testimonial__name {
  display: block;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-accent);
}

/* Navegación */
.testimonials__nav {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}

.testimonials__nav button {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  font-size: 2rem;
  cursor: pointer;
  transition: background .3s;
}
.testimonials__nav button:hover {
  background: #0d2412;
}

/* Responsive: en móvil mostramos solo 1 */
@media (max-width: 700px){
  .testimonial { flex: 0 0 100%; }
}

/* ===== Ajuste tamaño de las cartas de testimonios ===== */
.testimonial {
  flex: 0 0 48%;      /* antes 50% → ahora más angostas: entran 2 y sobra espacio */
  padding: 2rem 1.6rem;  /* menos relleno interno */
  margin: 0 0.8rem;      /* menor separación lateral */
}

/* Texto un poco más pequeño para acompañar */
.testimonial__quote p {
  font-size: 1.6rem;   /* antes 1.8rem */
  line-height: 1.5;
}

.testimonial__name {
  font-size: 1.4rem;   /* antes 1.6rem */
}

/* Quitar sombra de las cartas de testimonios */
.testimonial {
  box-shadow: none !important;
}

/* ====== TABLET (opcional, suave) ====== */
@media (max-width: 900px){
  .testimonials{ padding: 6rem 0; }
}

/* ====== MÓVIL (≤700px): 1 tarjeta por vista + título legible ====== */
@media (max-width: 700px){
  /* Título de la sección */
  .testimonials__title.signature{
    font-size: clamp(2.8rem, 8.5vw, 4.4rem) !important;
    line-height: 1.06;
    margin-bottom: 2rem;
  }

  /* Una sola card por “página” (pisa el 48% que viene después en tu CSS) */
  .testimonial{
    flex: 0 0 100% !important;
    margin: 0 .8rem;
    padding: 2rem 1.6rem;
  }

  /* Tipos un poco más chicos en móvil */
  .testimonial__quote p{ font-size: 1.55rem; line-height: 1.55; }
  .testimonial__name{ font-size: 1.35rem; }

  /* Botones de navegación más chicos */
  .testimonials__nav{ gap: .8rem; margin-top: 1.4rem; }
  .testimonials__nav button{ width: 3.4rem; height: 3.4rem; font-size: 1.6rem; }
}

/* ====== TELÉFONOS PEQUEÑOS (≤520px): ajuste fino ====== */
@media (max-width: 520px){
  .testimonials{ padding: 4.8rem 0; }

  .testimonials__title.signature{
    font-size: 6rem !important;
  }

  /* Oculta las esquinas decorativas para ganar aire */
  .testimonial--frame .corner{ display: none; }
}

/* Testimonios: ocultar flechas en mobile */
@media (max-width:700px){
  .testimonials__nav{ display: none !important; }
}

.about {
  padding: 8rem 0 6rem;
  background: linear-gradient(
    90deg,
    rgba(236, 233, 226, 0) 0%,
    rgba(236, 233, 226, 0.5) 50%,
    rgba(236, 233, 226, 1) 100%
  ) !important;
}

.services, .testimonials, .quote {
  background: linear-gradient(
    90deg,
    rgba(236, 233, 226, 0) 0%,
    rgba(236, 233, 226, 0.5) 50%,
    #d4cfc3 100%
  ) !important;
}

.contact__info a {
  color: var(--color-accent);      /* mismo color que el resto del texto */
  text-decoration: none;           /* sin subrayado */
  font-weight: normal;             /* por si se ve más grueso */
}

.contact__info a:hover {
  color: var(--color-dark);        /* opcional: color al pasar el mouse */
}