/* ====== Reset & tokens ====== */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:var(--font, 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif);color:#0c0c0c;background:#fff}
img,svg,video{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{font:inherit}

:root{
  --max-w:1200px;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --shadow-soft:0 2px 12px rgba(0,0,0,.06);
  --ink:#0c0c0c;
  --muted:#616161;
  --line:#e9ecef;
  --chip:#111;
  --chip-ink:#fff;
  --fs-hero:clamp(36px,4.5vw,60px);
  --fs-h2:clamp(22px,3vw,32px);
  --fs-h3:clamp(18px,2.2vw,22px);
  --fs-body:clamp(16px,1.6vw,18px);
  --wa: #25D366;       /* WhatsApp Green */
--wa-dark: #128C7E;  /* tono más oscuro */
}

.container{max-width:var(--max-w);margin-inline:auto;padding-inline:24px}
.stack{display:grid;gap:32px}
.stack-lg{display:grid;gap:48px}

/* ====== NAV ====== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.brand-mark{ width:26px; height:26px; border-radius:6px; background: transparent; }
.brand-mark img{ width:100%; height:100%; object-fit: contain; display:block; }
.nav-links{display:flex;align-items:center;gap:18px}
.nav-links a{font-size:15px;color:#2b2b2b;opacity:.9}
.nav-links a:hover{opacity:1}

.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--chip);color:var(--chip-ink);border:1px solid #000;box-shadow:0 6px 16px rgba(0,0,0,.12);font-weight:400}
.chip:active{transform:translateY(1px)}
.link-muted{display:none}

/* ====== HERO ====== (background) */
.hero{}
.hero-grid{display:grid;gap:36px}
.hero h1{font-size:var(--fs-hero);line-height:1.06;margin:0 0 12px 0;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:var(--fs-body);margin:0}

/* Hero como background */
.hero--bg{
  background-image: url('/assets/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0a0a0a; /* fallback si no carga la imagen */
}

.hero--bg::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.80));
}
.hero--bg .container{ position: relative; z-index: 1; }
.hero--bg .hero-copy{
  max-width: 760px;
 background: transparent;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;   /* opcional */
  padding: 0;        /* opcional, si querés que el texto no tenga marco */
  color: #fff;       /* mantenemos texto blanco */
}

.cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid #000;font-weight:400}
.btn-primary{background:#111;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.btn-outline{background:#fff;color:#111}

/* ====== MARCAS ====== */
.brands{padding-block:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(#fff,#fafafa)}
.brands-row{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;align-items:center;justify-items:center;opacity:.85;filter:grayscale(100%)}

/* ====== INFO TRES COLUMNAS ====== */
.info-3{padding-block:80px}
.cols-3{display:grid;grid-template-columns:1fr;gap:28px}
.info-card h3{font-size:var(--fs-h3);margin:0 0 8px}
.info-card p{color:var(--muted);margin:0}

/* ====== TARJETAS CON FOTO ====== */
.cards-3{display:grid;grid-template-columns:1fr;gap:24px; padding-block:40px}
.pic-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);overflow:hidden}
.pic-card .body{padding:16px}
.pic-card h4{font-size:18px;margin:0 0 8px}
.pic-card p{color:var(--muted);margin:0}

/* ====== BANNER GRANDE ====== */
.banner{padding-block:72px}
.banner .img{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ====== BLOQUE TEXTO CENTRAL ====== */
.centered{padding-block:28px}
.centered h2{font-size:var(--fs-h2);margin:0 0 12px;text-align:left}
.centered p{color:var(--muted);margin:0 0 16px}

/* ====== CTA FINAL SEPARADA ====== */
.cta-final{padding-block:80px}
.cta-panel{margin-top:24px;border:1px solid var(--line);border-radius:14px;display:grid;grid-template-columns:96px 1fr;gap:20px;padding:18px;background:#fff;box-shadow:var(--shadow-soft);align-items:center}
.cta-panel h5{font-size:18px;margin:0 0 4px}
.cta-panel p{color:var(--muted);margin:0 0 12px}
.cta-picture{width:96px;height:96px;border-radius:12px;overflow:hidden}

/* ====== FOOTER ====== */
footer{margin-top:88px;border-top:1px solid var(--line);padding-block:36px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:24px}
.foot-title{font-weight:900}
.foot-muted{color:var(--muted)}
.social{display:flex;gap:12px;margin-top:8px}
.contact a{display:block;margin:8px 0;color:#2b2b2b}

/* ====== Responsive ====== */
@media (min-width:768px){
  .link-muted{display:inline}
  .hero--bg{ padding-block: 180px; }
  .hero-grid{grid-template-columns:1fr;align-items:center}
  .brands-row{grid-template-columns:repeat(4,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr);gap:32px}
  .cards-3{grid-template-columns:repeat(3,1fr);gap:28px; padding-block:56px}
  .centered h2{text-align:left}
  .foot-grid{grid-template-columns:1fr auto}
}
@media (max-width:767.98px){
  .hero-media{display:none} /* por si quedara remanente */
}


/* === HERO: overlay oscuro + texto blanco === */
.hero--bg::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.45));
}
.hero--bg .container{ position:relative; z-index:1; }
.hero--bg .hero-copy{ color:#fff; }
.hero--bg .hero-copy h1{ color:#fff; }
.hero--bg .hero-copy .lead{ color:rgba(255,255,255,.92); }

/* Botones sobre fondo oscuro */
.hero--bg .btn-outline{ background:transparent; color:#fff; border-color:#fff; }
.hero--bg .btn-primary{ background:#fff; color:#111; border-color:#fff; box-shadow:0 10px 22px rgba(255,255,255,.18); }

/* ====== QUIÉNES SOMOS ====== */
.about{ padding-block: 80px; }

.about-card{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.about-media{ min-height: 220px; }
.about-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-body{ padding: 20px; }

.eyebrow{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}

.about-claim{
  margin: 14px 0 6px;
  color: var(--ink);
}

.about-sub{
  margin: 14px 0 4px;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .02em;
}

.about-tags{
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Desktop layout */
@media (min-width: 768px){
  .about-card{
    grid-template-columns: 1.05fr 1fr; /* imagen + texto */
    gap: 0;
  }
  .about-media{ min-height: 380px; }
  .about-body{ padding: 28px 32px; }
}

/* === Ajustes "Quiénes somos" === */
.about-card{
  gap: 0;                /* sin separación entre imagen y texto */
  align-items: center;   /* centra verticalmente las columnas */
  overflow: hidden;      /* respeta los bordes redondeados */
  border-radius: 18px;   /* mismo radio que la tarjeta */
}

.about-media{
  margin: 0;             /* <figure> trae margin por defecto */
  min-height: 280px;     /* alto mínimo en mobile */
}
.about-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* la imagen rellena y recorta sin deformar */
  border-radius: 0;      /* el radius lo da el contenedor (overflow hidden) */
}

.about-body{
  padding: 28px 32px;
  display: flex;               /* centra verticalmente el texto */
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px){
  .about-media{ min-height: 420px; } /* más presencia en desktop */
}

/* Nav: botón WhatsApp verde + texto blanco */
.nav .chip{
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
  box-shadow: 0 6px 16px rgba(37,211,102,.28);
}
.nav .chip:hover{
  filter: brightness(.97);
  box-shadow: 0 8px 20px rgba(37,211,102,.35);
}
.nav .chip:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* HERO: 90% de alto, sin derrames y centrado */
.hero--bg{
  /* quita/ignora cualquier padding-block anterior */
  min-height: 90svh;     /* usa altura visible real en mobile */
  min-height: 90vh;      /* fallback */
  display: grid;
  align-items: center;    /* centra el copy verticalmente */
  overflow: hidden;       /* evita que el overlay se “asome” abajo */
  padding-block: clamp(24px, 5vh, 56px); /* un poco de aire sin exceder la altura */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero--bg::before{ inset: 0; } /* nos aseguramos que el overlay no se pase */

@media (max-width: 767.98px){
  .hero--bg{
    min-height: 75svh;   /* un poco menos de alto en mobile */
    padding-block: 24px; /* menos padding */
    background-position: center 30%; /* sube el foco si la imagen corta cabezas */
  }
  .hero-grid{ gap: 20px; }
}

/* HERO: ajustes mobile */
@media (max-width: 767.98px){
  .hero--bg{
    min-height: 90svh;          /* antes 75–90svh: bajamos la altura en mobile */
    padding-block: 20px 28px;   /* menos padding vertical */
    background-size: cover;     /* que llene sin deformar */
    background-position: 50% 35%; /* sube un poco el foco de la foto */
    overflow: hidden;           /* nada se “derrame” */
  }
  .hero-grid{ gap: 20px; }

  /* Título y bajada un toque más chicos para que respiren */
  .hero--bg .hero-copy h1{
    font-size: clamp(26px, 8.5vw, 34px);
    line-height: 1.1;
  }
  .hero--bg .hero-copy .lead{
    font-size: 15px;
  }

  /* Botones: un pelín más compactos */
  .cta-row{ gap: 12px; }
  .btn{ padding: 12px 18px; }
}

/* Evitar la “franja”/sombra entre el hero y marcas */
.hero--bg + .brands{ margin-top: 0; }
.brands{ background: #fff; }  /* si querés, podés dejar el degradé, pero esto lo blanquea */

/* Icono del hero */
.hero-icon{
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(0,0,0,.35);        /* suave, hace juego con el overlay */
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(3px);
  margin: 0 0 12px 0;
}
.hero-icon img{ width: 28px; height: 28px; object-fit: contain; }

@media (min-width:768px){
  .hero-icon{ width:64px; height:64px; margin-bottom:16px; }
  .hero-icon img{ width:32px; height:32px; }
}

/* ===== Animaciones base ===== */
:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .7s;
}

/* Entrada de página */
body.page-enter{ opacity: 0; filter: blur(2px); transform: translateY(6px); }
body.page-enter-active{
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease);
}

/* Salida de página */
body.page-leave{ opacity: 0; transition: opacity .22s var(--ease); }

/* Scroll-reveal (clase base + variantes) */
.reveal{ opacity: 0; transform: translateY(14px); filter: blur(2px); }
.reveal-visible{
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.reveal.fade-in{ transform: none; }        /* solo fade */
.reveal.fade-up{ transform: translateY(14px); }
.reveal.scale-in{ transform: scale(.96); }
.reveal.blur-in{ filter: blur(4px); }

/* Respeto a usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  body.page-enter, body.page-enter-active, body.page-leave{ filter:none; transform:none; }
  .reveal, .reveal-visible{ opacity:1; transform:none; filter:none; transition:none; }
}
/* HERO: contención + altura y centrado */
.hero--bg{
  position: relative;
  isolation: isolate;          /* evita mezclas con lo siguiente */
  overflow: hidden;            /* nada se “escapa” del hero */
  display: grid;
  align-items: center;         /* centra el copy verticalmente */
  min-height: 90svh;           /* 90% de pantalla */
  padding-block: clamp(20px, 5vh, 48px); /* aire controlado */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero--bg::before{ position:absolute; inset:0; } /* overlay contenido */

/* Mobile: un poco más bajo y encuadre */
@media (max-width: 767.98px){
  .hero--bg{
    min-height: 70svh;
    padding-block: 20px 28px;
    background-position: 50% 35%; /* sube el foco de la imagen */
  }
  .hero-grid{ gap: 20px; }
  .hero--bg .hero-copy h1{ font-size: clamp(28px, 8vw, 36px); line-height: 1.1; }
  .hero--bg .hero-copy .lead{ font-size: 15px; }
}

/* Quitar la “franja” entre hero y marcas */
.hero--bg + .brands{ margin-top: 0; }
.brands{ background: #fff; }  /* reemplaza cualquier degradé */

/* ===== HERO: layout estable + overlay contenido ===== */
.hero--bg{
  position: relative;
  isolation: isolate;               /* evita mezclas con la sección siguiente */
  overflow: hidden;                 /* nada se escapa del hero */
  display: grid;
  align-items: center;              /* centra el copy verticalmente */
  min-height: 90svh;                /* 90% de pantalla */
  padding-block: clamp(20px, 5vh, 48px);
  background-image: url('/assets/hero.jpg'); /* verificá la ruta/archivo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero--bg::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.45));
}
.hero--bg .container{ position: relative; z-index: 1; }
.hero--bg .hero-copy{ color:#fff; max-width: 860px; }
.hero--bg .hero-copy h1{ color:#fff; margin:0 0 10px; }
.hero--bg .hero-copy .lead{ color:rgba(255,255,255,.92); margin-bottom:18px; }

/* Iconito del hero (opcional) */
.hero-icon{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:14px; background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18); margin-bottom:14px;
}
.hero-icon img{ width:28px; height:28px; object-fit:contain; display:block; }
/* Evitar ícono roto si no hay imagen */
.hero-icon img[src=""], .hero-icon img:not([src]){ display:none; }

/* Mobile: altura menor y encuadre cómodo */
@media (max-width: 767.98px){
  .hero--bg{
    min-height: 70svh;
    padding-block: 20px 28px;
    background-position: 50% 35%;
  }
  .hero-grid{ gap: 20px; }
  .hero--bg .hero-copy h1{ font-size: clamp(28px, 8vw, 36px); line-height: 1.1; }
  .hero--bg .hero-copy .lead{ font-size: 15px; }
}

/* Quitar cualquier franja entre hero y marcas */
.hero--bg + .brands{ margin-top: 0; }

/* === Hero: tamaño del logo === */
.hero-icon{
  width: 128px;      /* antes 56/64 */
  height: 128px;
  margin-bottom: 18px;
}
.hero-icon img{
  width: 80px;      /* antes 28/32 */
  height: 80px;
  object-fit: contain;
}
.hero-icon{
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

/* Desktop un toque más grande */
@media (min-width: 768px){
  .hero-icon{ width: 250px; height: 250px; }
  .hero-icon img{ width: 180px; height: 180px; }
}