/* ============ Variables ============ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root{
  --bg:#010827;
  --text:#e6edf3;
  --muted:#9fb1c1;
  --brand:#7cd4fd;
  --surface:#15171c;
  --focus:#f49051;
  --gold:#F0CB90;
  --gold-ink:#7b5d2c;

  --radius:16px;
  --space:clamp(1rem,2.5vw,1.5rem);

  /* Márgenes y anchos (ajustados) */
  --container-max: 920px;            /* más margen lateral en desktop */
  --section-pad: clamp(2rem,5vw,3.5rem);
  --page-gutter-desktop: 8rem;       /* margen lateral extra en desktop */

  /* Tipos */
  --fs-display:clamp(2.4rem,5.5vw,3.3rem);
  --fs-h2:clamp(1.6rem,3.5vw,2.2rem);
  --fs-h3:clamp(1rem,2.4vw,1.25rem);
  --fs-body:clamp(.98rem,1.6vw,1.1rem);
  --fs-small:.92rem;
}

/* ============ Reset/Base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text); background:#121212; line-height:1.6; font-size:var(--fs-body);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.u-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:-10000px}
.skip-link:focus{position:static;margin:.5rem;padding:.5rem .75rem;background:var(--focus);color:#000}

/* ============ Layout ============ */
.container{ width:min(100% - 2rem, var(--container-max)); margin-inline:auto; }
@media (min-width:1200px){
  .container{ width:min(100% - var(--page-gutter-desktop), var(--container-max)); }
}
main > section{ padding-block:var(--section-pad); }
main > section + section{ margin-top: clamp(4rem,8vw,7rem); }

/* Acercar pares de secciones solicitadas */
.portfolio + .tech{                 /* “Nuestros trabajos” → “Servicio Técnico” */
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
.clients + .celebrities{            /* “Empresas” → “Famosos” */
  margin-top: clamp(.8rem, 2.5vw, 1.6rem);
}

/* ============ Header ============ */
.site-header{background:#1c1c1e;border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .container{display:flex;justify-content:center;align-items:center;padding:.5rem var(--space)}
.brand{font-weight:700;color:var(--text)}
.logoinicio{width:clamp(60px,15vw,120px);height:auto;margin:0 auto}

/* ============ Hero ============ */
.hero-header{position:relative;overflow:hidden;height:clamp(360px,40vh,820px);background:#111;margin-bottom:clamp(2rem,6vw,5rem)}
@media (min-width:1024px){.hero-header{height:75vh;max-height:900px}}
.hero-slide{position:absolute;inset:0;background-position:center 35%;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 700ms ease;will-change:opacity,transform}
.hero-slide.is-visible{opacity:1}
@keyframes kb-zoom-right{from{transform:scale(1.03) translateX(-1%)}to{transform:scale(1.08) translateX(1%)}}
@keyframes kb-zoom-left{from{transform:scale(1.03) translateX(1%)}to{transform:scale(1.08) translateX(-1%)}}
.hero-slide.kb-right{animation:kb-zoom-right 8s ease-in-out forwards}
.hero-slide.kb-left{animation:kb-zoom-left 8s ease-in-out forwards}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:opacity 300ms linear;animation:none!important}}
@media (max-width:600px){.hero-header{height:clamp(240px,55vh,560px)}}
.scroll-down{position:absolute;left:50%;bottom:clamp(14px,3vh,28px);transform:translateX(-50%);inline-size:48px;block-size:48px;border-radius:999px;display:grid;place-items:center;background:var(--gold);color:#1a1a1a;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:2;animation:floatDown 1.8s ease-in-out infinite}
.scroll-down svg{width:22px;height:22px;fill:currentColor;transition:transform .2s ease}
.scroll-down:hover svg{transform:translateY(2px)}
.scroll-down:active{transform:translate(-50%,1px)}
.scroll-down:focus-visible{box-shadow:0 0 0 3px #1a1a1a,0 0 0 5px var(--gold)}
@keyframes floatDown{0%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}100%{transform:translate(-50%,0)}}

/* ============ Bienvenidos ============ */
.hero{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; padding:3rem 1rem; }
h1{font-size:var(--fs-display);font-weight:800;margin:0 0 .5rem}
h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 1rem}
h3{font-size:var(--fs-h3);font-weight:700}
p,li{font-size:var(--fs-body);line-height:1.6}
small{font-size:var(--fs-small);color:var(--muted)}
.hero p{max-width:800px;margin:0 auto;line-height:1.8}
.button{display:inline-block;margin-top:1rem;padding:.6rem 1rem;border-radius:999px;border:0;background:var(--gold);color:#0b0c10;font-weight:600}

/* ============ Features ============ */
.features .grid{display:flex;flex-direction:column;gap:1.5rem}
.card{display:flex;align-items:stretch;width:100%;background:#1c1c1e;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card-img{width:40%;min-height:220px;object-fit:cover;-webkit-mask-image:linear-gradient(to right,#000 70%,transparent 100%);mask-image:linear-gradient(to right,#000 70%,transparent 100%)}
.card-img.card-img--right{-webkit-mask-image:linear-gradient(to left,#000 70%,transparent 100%);mask-image:linear-gradient(to left,#000 70%,transparent 100%)}
.text-card{flex:1;padding:1rem 1.2rem;display:flex;flex-direction:column;justify-content:center;gap:.4rem;text-align:left;font-size:.9rem;line-height:1.5}
.text-card h3{font-size:1rem;margin:0 0 .4rem}
.card--valores{max-height:260px}
.card--valores .text-card{font-size:.8rem;line-height:1.35;padding:.8rem 1rem}
.card--valores .text-card ul{margin:.3rem 0;padding-left:1.1rem}
.card--valores .text-card li{margin-bottom:.2rem}
@media (max-width:720px){
  .card{flex-direction:column;max-width:680px;margin-inline:auto}
  .card-img{width:100%;min-height:180px;-webkit-mask-image:none;mask-image:none}
  .text-card{text-align:center;font-size:.9rem}
}

/* ============ Portfolio ============ */
.portfolio h2,.portfolio .portfolio-sub{text-align:center}
.carousel{position:relative;width:100%;max-width:860px;aspect-ratio:16 / 9;margin:2rem auto;overflow:hidden;border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.35);background:#000}
.carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.carousel img.active{opacity:1;z-index:1}

/* ============ Servicio Técnico ============ */
.tech{padding-block:var(--section-pad)}
.tech__title{text-align:center;margin:0 0 .75rem}
.tech__lead{max-width:62ch;margin:0 auto 1rem;text-align:center;color:var(--muted)}
.tech__cta{display:grid;justify-items:center;gap:.5rem}
.button--pdf{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.button--pdf::before{content:"";inline-size:18px;block-size:18px;background:currentColor;display:inline-block;-webkit-mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM8 12h3a2 2 0 1 1 0 4H9v2H8v-6zm1 1v2h2a1 1 0 1 0 0-2H9zm6 0h-2v5h1v-2h1a1.5 1.5 0 0 0 0-3zm-.1 1a.5.5 0 0 1 0 1H14v-1h.9zM14 3.5L18.5 8H14V3.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM8 12h3a2 2 0 1 1 0 4H9v2H8v-6zm1 1v2h2a1 1 0 1 0 0-2H9zm6 0h-2v5h1v-2h1a1.5 1.5 0 0 0 0-3zm-.1 1a.5.5 0 0 1 0 1H14v-1h.9zM14 3.5L18.5 8H14V3.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.tech__note{color:var(--muted);font-size:.85rem;text-align:center}

/* ============ Renders ============ */
.renders .container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media (max-width:768px){.renders .container{grid-template-columns:1fr;text-align:center}}
.renders-text h2{margin-bottom:1rem}
.renders-text p{margin-bottom:1rem;color:var(--muted)}
.renders-images model-viewer{width:100%;height:420px;border-radius:12px;background:transparent!important;--poster-color:transparent;--progress-bar-color:rgba(255,255,255,.45)}

/* ============ Clients / Logos ============ */
.clients__title,.clients__sub{text-align:center}
.clients__sub{color:var(--muted);margin-top:.25rem}
.clients__strip{position:relative;overflow:hidden;margin-top:1.25rem;-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
.clients__track{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.8rem);animation:logos-scroll 24s linear infinite;will-change:transform}
.clients__logo{display:grid;place-items:center;inline-size:clamp(180px,24vw,280px);block-size:clamp(72px,12vw,112px);padding-inline:.25rem}
.clients__logo img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:opacity .2s ease,filter .2s ease,transform .2s ease}
.clients__logo img:hover{opacity:1;filter:grayscale(0);transform:scale(1.04)}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.clients__strip:hover .clients__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.clients__track{animation:none}}

/* ============ Celebrities ============ */
.celebrities{padding-top:clamp(.5rem,1.5vw,1rem);padding-bottom:var(--section-pad)}
.celebrities__kicker{text-align:center;color:var(--muted);font-size:clamp(.9rem,1.2vw,1rem);margin:0 0 .75rem;letter-spacing:.02em}
.celebrities__grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:clamp(1rem,3vw,2rem);justify-items:center}
.celebrity{text-align:center;margin:0}
.celebrity__avatar{width:clamp(90px,18vw,140px);height:clamp(90px,18vw,140px);object-fit:cover;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);background:#0e0e0e;transition:transform .25s ease,filter .25s ease,box-shadow .25s ease}
.celebrity__avatar:hover{transform:translateY(-2px) scale(1.03);filter:none;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.celebrity__name{margin-top:.5rem;font-size:clamp(.85rem,1.4vw,.95rem);font-weight:600;color:var(--text)}
@media (max-width:520px){.celebrities__grid{grid-template-columns:1fr}}

/* ============ Leaders (fotos más grandes) ============ */
.leaders__title{text-align:center;margin:0 0 1.5rem;letter-spacing:.02em}
.leaders__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,3vw,2.25rem)}
@media (min-width:480px){.leaders__grid{grid-template-columns:repeat(2,1fr)}}
.leader{text-align:center;color:#fff}
.leader__media{margin:0 0 .75rem}
.leader__img,.leader__video{
  width:100%;
  max-width: 280px;      /* antes 220px → más grandes */
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  background:#000;
  margin:0 auto;
  display:block;
}
@media (min-width:1024px){
  .leader__img,.leader__video{ max-width: 320px; }  /* aún más grandes en desktop amplio */
}
.leader__name{margin:.5rem 0 .4rem;font-weight:700}
.leader__bio{margin:0 auto;max-width:36ch;line-height:1.65;color:rgba(255,255,255,.9)}

/* ============ Testimonials (compacto) ============ */
.testimonials__title{margin:0 0 1rem;font-size:clamp(1.4rem,3vw,2rem)}
.t-carousel{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem}
.t-viewport{overflow:hidden;scroll-behavior:smooth}
.t-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(120px,16vw,180px);gap:.45rem}
.t-card{background:#fff;color:#222;border:1px solid color-mix(in oklab,var(--gold),#000 8%);border-radius:6px;padding:.3rem .45rem;min-height:70px;font-size:.58rem;line-height:1.2;transition:transform 400ms ease,box-shadow 400ms ease;box-shadow:0 3px 10px rgba(0,0,0,.05)}
@media (prefers-color-scheme:dark){.t-card{background:#141416;color:#eaeef3;border-color:color-mix(in oklab,var(--gold),#000 35%)}}
.t-stars{color:var(--gold);letter-spacing:.05rem;margin-bottom:.08rem;font-size:.55rem;user-select:none}
.t-text{margin:0 0 .2rem;font-size:.58rem;line-height:1.25}
.t-author{margin:0;font-weight:700;color:var(--gold-ink);font-size:.56rem}
.t-nav{inline-size:36px;block-size:36px;border:0;border-radius:999px;background:var(--gold);color:#1a1a1a;font-size:1.2rem;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.t-nav:disabled{opacity:.45;cursor:not-allowed}
.t-prev{justify-self:end}.t-next{justify-self:start}
.t-dots{display:flex;gap:.45rem;justify-content:center;margin-top:.8rem;grid-column:1 / -1}
.t-dots button{inline-size:6px;block-size:6px;border:0;border-radius:999px;background:color-mix(in oklab,var(--gold),#000 50%)}
.t-dots button.is-active{inline-size:16px;background:var(--gold)}

/* ============ Contacto ============ */
.contact{padding-block:var(--section-pad)}
.contact__wrap{display:grid;gap:clamp(1rem,3vw,1.5rem)}
.contact__title{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.02em;margin:0 0 .25rem;text-transform:uppercase}
.contact__lead{color:var(--muted);margin:0;max-width:60ch}
.contact__info{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.5vw,1.25rem);padding-top:.5rem;border-top:1px solid rgba(255,255,255,.08)}
@media (min-width:860px){.contact__info{grid-template-columns:repeat(3,1fr)}}
.contact__label{margin:0 0 .25rem;font-weight:700;letter-spacing:.01em}
.contact__value{margin:0;font-size:1.05rem}
.contact__value a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.contact__social{display:flex;gap:.8rem;align-items:center}
.social-btn{inline-size:56px;block-size:56px;display:grid;place-items:center;border-radius:12px;background:#1c1c1e;border:1px solid rgba(255,255,255,.08);box-shadow:0 6px 16px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.social-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);box-shadow:0 10px 22px rgba(0,0,0,.22)}
.social-btn svg{width:26px;height:26px;fill:var(--text);opacity:.9}

/* ============ Footer ============ */
.site-footer{margin-top:3rem;background:var(--surface)}
.site-footer .container{padding:1rem var(--space);color:var(--muted);font-size:.95rem}
.footer-nav ul{list-style:none;margin:0 0 1rem 0;padding:0;display:flex;justify-content:center;gap:1.5rem}
.footer-nav img{display:block;transition:transform .2s ease}
.footer-nav img:hover{transform:scale(1.2)}


/* ===== Portfolio con 3 carruseles ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.portfolio-grid .carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  background: #000;
}

.portfolio-grid .carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.portfolio-grid .carousel img.active {
  opacity: 1;
  z-index: 1;
}

/* Versión mobile: un carrusel abajo del otro */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Portfolio con 3 carruseles grandes ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.portfolio-grid .carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* más vertical para que las fotos sean altas */
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  background: #000;
}

.portfolio-grid .carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.portfolio-grid .carousel img.active {
  opacity: 1;
  z-index: 1;
}

/* Versión mobile: un carrusel por fila y ocupan más ancho */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid .carousel {
    aspect-ratio: 16 / 10; /* más apaisado en mobile */
    height: auto;
  }
}
/* ===== Portfolio con carruseles gigantes ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.portfolio-grid .carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;  /* alto estilo foto vertical grande */
  min-height: 550px;    /* altura mínima para que se vean imponentes */
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  background: #000;
}

.portfolio-grid .carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.portfolio-grid .carousel img.active {
  opacity: 1;
  z-index: 1;
}

/* Versión mobile: 1 por fila y aún grandes */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid .carousel {
    aspect-ratio: 4 / 3;  /* un poco más apaisado en mobile */
    min-height: 400px;    /* siguen siendo grandes en celular */
  }
}
/* ===== Portfolio con carruseles enormes ===== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.portfolio-grid .carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 12; /* más ancho */
  min-height: 500px;     /* alto grande */
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  background: #000;
}

.portfolio-grid .carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.portfolio-grid .carousel img.active {
  opacity: 1;
  z-index: 1;
}

/* Mobile: uno solo y también ancho */
@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-grid .carousel {
    aspect-ratio: 16 / 10; /* ancho en mobile */
    min-height: 380px;
  }
}
:root{
  /* antes: 1000px */
  --container-max: 1400px;    

  /* antes: 6rem */
  --page-gutter-desktop: 3rem;  
}
 /* Portfolio y secciones visuales más anchas */
.portfolio .container,
.renders .container,
.leaders.container {
  max-width: 1600px;    /* más grande que el resto */
  padding-inline: 2rem; /* márgenes chicos */
}
/* Centrar el título */
.testimonials__title {
  margin: 0 0 2rem;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  text-align: center;   /* <-- centrado */
}

/* Testimonios más grandes */
.t-track {
  grid-auto-columns: clamp(220px, 22vw, 280px); /* tarjetas más anchas */
  gap: 1rem; /* más espacio entre ellas */
}

.t-card {
  background: #fff;
  color: #222;
  border: 1px solid color-mix(in oklab, var(--gold), #000 10%);
  border-radius: 10px;
  padding: 1rem 1.2rem;   /* más aire adentro */
  min-height: 140px;      /* más altas */
  font-size: 0.85rem;     /* texto un poco más grande */
  line-height: 1.45;
  box-shadow: 0 5px 14px rgba(0,0,0,.08);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

@media (prefers-color-scheme: dark) {
  .t-card {
    background: #141416;
    color: #eaeef3;
    border-color: color-mix(in oklab, var(--gold), #000 30%);
  }
}

.t-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* ===== Carrusel de logos – loop perfecto ===== */
.clients__strip{
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;

  /* podés quedarte con tu mask si querés el fade */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
  --speed: 24s;                  /* velocidad del loop */
}

.clients__track{
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.8rem);
  width: max-content;            /* la pista mide lo que necesite */
  will-change: transform;
  animation: logos-marquee var(--speed) linear infinite;
  /* el script setea --half-translate con el ancho mitad real */
  --half-translate: 50%;
}

@keyframes logos-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--half-translate))); }
}

/* Cada logo */
.clients__logo{
  display: grid;
  place-items: center;
  inline-size: clamp(180px, 24vw, 280px);
  block-size: clamp(72px, 12vw, 112px);
  padding-inline: .25rem;
}
.clients__logo img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .8;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.clients__logo img:hover{
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.04);
}

/* Accesibilidad */
.clients__strip:hover .clients__track{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .clients__track{ animation: none; }
}
/* ===== FIX logos cortados en carrusel de empresas ===== */

/* Opción A: sin fade (no recorta nunca) */
.clients__strip{
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;
  -webkit-mask-image: none;
          mask-image: none;
  padding-inline: 24px; /* gutter para que ningún logo pegue el borde */
}

/* Si preferís mantener un fade suave, usa esta opción B en vez de la A:
.clients__strip{
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  padding-inline: 24px;  // el fade no llega al logo por este gutter
}
*/

/* La pista (no cambia el loop, solo prolijo) */
.clients__track{
  display: inline-flex; /* evita saltos de ancho */
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  will-change: transform;
}

/* Cada ítem mantiene su tamaño y no se deforma */
.clients__logo{
  flex: 0 0 auto; /* no se estira ni se encoge */
  inline-size: clamp(170px, 22vw, 240px);
  block-size: clamp(70px, 10vw, 96px);
  padding-inline: .25rem;
}

/* La imagen SIEMPRE completa, sin recortes */
.clients__logo img{
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* preserva el logo completo */
  filter: grayscale(1);
  opacity: .8;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.clients__logo img:hover{
  opacity: 1; filter: grayscale(0); transform: scale(1.04);
}
/* ===== Carrusel de empresas – versión COMPACTA ===== */

/* Fade suave en bordes + un poco de aire para que nada se corte */
.clients__strip{
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding-inline: 12px; /* antes 24px */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* Pista más compacta */
.clients__track{
  display: inline-flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.25rem); /* menos separación */
  will-change: transform;
}

/* Cada logo (ANCHO x ALTO más chico) */
.clients__logo{
  flex: 0 0 auto;
  inline-size: clamp(120px, 14vw, 180px); /* antes 170–240 */
  block-size: clamp(52px, 8vw, 80px);     /* antes 70–96 */
  padding-inline: .2rem;
}

/* Imagen siempre completa (sin deformar) */
.clients__logo img{
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .8;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.clients__logo img:hover{
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.03);
}

/* En pantallas muy grandes, no los dejes crecer demasiado */
@media (min-width: 1440px){
  .clients__logo{ inline-size: 160px; block-size: 68px; }
}

/* En mobile, un poco más grandes para que se lean bien */
@media (max-width: 600px){
  .clients__logo{
    inline-size: clamp(120px, 42vw, 160px);
    block-size: clamp(52px, 14vw, 72px);
  }
}
/* ============ Features (versión compacta) ============ */
.features.container{ max-width: 1080px; }            /* menos ancho que el resto */
.features .grid{ display:flex; flex-direction:column; gap:1rem; }

.card{
  display:flex; align-items:stretch; width:100%;
  background:#1c1c1e; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  max-height: 320px;                                   /* ↓ antes más alto */
}

.card-img{
  width: 38%;                                          /* ↓ era 40% */
  height: 100%;                                        /* iguala la altura del texto */
  object-fit: cover;
  -webkit-mask-image:linear-gradient(to right,#000 70%,transparent 100%);
          mask-image:linear-gradient(to right,#000 70%,transparent 100%);
}

.card-img.card-img--right{
  -webkit-mask-image:linear-gradient(to left,#000 70%,transparent 100%);
          mask-image:linear-gradient(to left,#000 70%,transparent 100%);
}

.text-card{
  flex:1; padding: .9rem 1rem;                         /* ↓ menos padding */
  display:flex; flex-direction:column; justify-content:center; gap:.35rem;
  text-align:left; font-size:.88rem; line-height:1.45; /* ↓ tipografía más chica */
}
.text-card h3{ font-size:.98rem; margin:0 0 .35rem; }

.card--valores{ max-height: 320px; }                   /* empareja con la de arriba */
.card--valores .text-card{ font-size:.86rem; line-height:1.38; padding:.85rem 1rem; }
.card--valores .text-card ul{ margin:.25rem 0; padding-left:1.05rem; }
.card--valores .text-card li{ margin-bottom:.18rem; }

/* Mobile: vuelve a columna y controla alto */
@media (max-width: 720px){
  .features.container{ max-width: 680px; }
  .card{ flex-direction:column; max-height:none; }
  .card-img{ width:100%; height: 200px;                /* alto razonable en cel */ 
             -webkit-mask-image:none; mask-image:none; }
  .text-card{ text-align:center; font-size:.92rem; padding: .9rem 1rem; }
}

/* ===== Contacto con mapa (estilo mockup) ===== */
.contact--map{
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.contact--map .contact__title{
  text-align:center;
  font-size: clamp(2rem, 5vw, 3rem);      /* TÍTULO GRANDE */
  letter-spacing:.02em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 520px;       /* texto | mapa */
  gap: clamp(1rem, 3vw, 2rem);
  align-items:start;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Columna de texto */
.c-info{
  display:grid;
  gap: clamp(1rem, 2.2vw, 1.4rem);
  color: var(--text);
}
.c-block h3{
  margin:0 0 .35rem;
  font-weight:700;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--text);
}
.c-block p{
  margin:0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height:1.6;
  color: color-mix(in oklab, var(--text), #000 18%);
}
.c-block a{ color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* Caja mapa */
.c-map{
  background:#222; border:1px solid rgba(255,255,255,.08);
  border-radius: 10px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.c-map iframe{
  display:block; width:100%; aspect-ratio: 1 / 1;   /* cuadrado como en el mockup */
  filter: grayscale(100%);                           /* look en blanco y negro */
}
/* ===== CONTACTO — layout y estilo limpio ===== */
.contact .container { padding-top: clamp(2rem, 4vw, 3rem); }
.contact__title {
  text-align: center; margin: 0 0 clamp(1rem, 3vw, 1.5rem);
  letter-spacing: .02em;
}

.c-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* texto un poquito más ancho */
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
}

/* Tarjetas */
.c-card{
  background:#1c1c1e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1rem, 3vw, 1.5rem);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.c-info .c-item + .c-item{ margin-top: .9rem; }
.c-label{
  margin:0 0 .25rem; font-weight:800; font-size: clamp(1rem, 2vw, 1.05rem);
}
.c-value{ margin:0; color: var(--muted); }
.c-value a{ color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* Iconitos sutiles */
.c-item{ position: relative; padding-left: 28px; }
.c-item::before{
  content:""; position:absolute; left:0; top:.2rem; width:18px; height:18px; background: var(--gold);
  -webkit-mask: var(--c-ico) center/contain no-repeat; mask: var(--c-ico) center/contain no-repeat;
  opacity:.95;
}
.c-item:nth-child(1){ --c-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a9 9 0 0 0-9 9c0 7 9 11 9 11s9-4 9-11a9 9 0 0 0-9-9zm0 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E"); }
.c-item:nth-child(2){ --c-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19 3H5a2 2 0 0 0-2 2v14l4-4h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E"); }
.c-item:nth-child(3){ --c-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.6 10.2c1.2 2.4 3.1 4.3 5.5 5.5l1.8-1.8c.2-.2.6-.3.9-.2 1 .3 2 .5 3.1.5.5 0 .9.4.9.9V19c0 .5-.4.9-.9.9C10.7 19.9 4.1 13.3 4.1 5.8c0-.5.4-.9.9-.9h3.9c.5 0 .9.4.9.9 0 1.1.2 2.1.5 3.1.1.3 0 .6-.2.9l-1.8 1.8z'/%3E%3C/svg%3E"); }
.c-item:nth-child(4){ --c-ico: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5L4 8V6l8 5 8-5v2z'/%3E%3C/svg%3E"); }

/* Mapa */
.c-map{ padding: 0; overflow: hidden; }
.map-frame{
  display:block; width:100%;
  aspect-ratio: 4 / 3;          /* forma agradable */
  border:0;
  filter: grayscale(1) contrast(.95) brightness(.9);
  transition: filter .25s ease, transform .25s ease;
}
.c-map:hover .map-frame{ filter: none; transform: scale(1.01); }

/* Responsive */
@media (max-width: 900px){
  .c-grid{ grid-template-columns: 1fr; }
  .c-map{ order: 2; }
  .c-info{ order: 1; }
}
/* Contacto: igualar altura entre texto y mapa */
.c-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: stretch;   /* ← hace que ambas columnas tengan el mismo alto */
}

/* Las tarjetas ocupan toda la altura */
.c-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;           /* ← fuerza a ocupar toda la celda */
}

.c-map {
  padding: 0;
}

.map-frame {
  width: 100%;
  height: 100%;           /* ← mapa ocupa todo el alto del recuadro */
  border: 0;
  border-radius: 16px;
  filter: grayscale(1) contrast(.95) brightness(.9);
  transition: filter .25s ease, transform .25s ease;
}
/* ===== CONTACTO: tarjeta y mapa del mismo tamaño ===== */
.c-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(1rem,3vw,1.5rem);
  align-items: stretch;              /* iguala alturas */
}

/* Alto coherente (desktop) y responsive */
.c-card,
.c-map{
  height: clamp(320px, 46vh, 460px); /* ambos miden lo mismo */
}

/* Tarjeta “oscura” */
.c-card{
  background:#1c1c1e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding: clamp(1rem,2.5vw,1.25rem);
  display:flex; flex-direction:column; justify-content:center;
}

/* Contenedor del mapa con el mismo radio y sin rebalses */
.c-map{
  border-radius:16px;
  overflow:hidden;                   /* recorta contenido del iframe */
}

/* El iframe ocupa todo el contenedor */
.map-frame{
  width:100%; height:100%;
  border:0;
  filter: grayscale(1) contrast(.95) brightness(.9);
  transition: filter .25s ease, transform .25s ease;
}
.map-frame:hover{ filter:none; }

/* En tablets bajamos un toque el alto */
@media (max-width: 1024px){
  .c-card, .c-map{ height: clamp(300px, 42vh, 420px); }
}

/* En mobile apilado y alto automático */
@media (max-width: 720px){
  .c-grid{ grid-template-columns: 1fr; }
  .c-card, .c-map{ height:auto; }
  .map-frame{ min-height: 280px; }
}

/* Separación arriba del título para que no “toque” los testimonios */
.testimonials + .contact{ margin-top: clamp(2rem, 5vw, 3rem); }
.contact {
  padding-block: clamp(2rem, 5vw, 3.5rem);
 border-top: 1px solid var(--gold); /* línea fina */
  margin-top: clamp(2rem, 6vw, 4rem);        /* espacio respecto a la sección anterior */
}

/* Flechas del carrusel de portfolio */
.carousel .p-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  inline-size:38px; block-size:38px; border:0; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; font-size:22px;
  display:grid; place-items:center; cursor:pointer; z-index:3;
  backdrop-filter: blur(2px);
}
.carousel .p-prev{ left:10px; }
.carousel .p-next{ right:10px; }
.carousel .p-nav:hover{ background:rgba(255,255,255,.25); }

/* === Scroll reveal (genérico y variantes) === */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* Variantes opcionales con data-reveal */
[data-reveal="fade-in"]{ transform:none; }
[data-reveal="slide-left"]{ transform: translateX(24px); }
[data-reveal="slide-right"]{ transform: translateX(-24px); }
[data-reveal="scale"]{ transform: scale(.96); }

/* FIX: los logos del carrusel siempre visibles */
.clients__logo { opacity: 1 !important; transform: none !important; }

/* LÍDERES: degradé inferior en las piezas (img/video) */
.leader__img,
.leader__video{
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

/* Base (desktop/tablet) */
.card{
  display:flex; align-items:stretch; width:100%;
  background:#1c1c1e; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.card-img{
  width:40%; min-height:220px; object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,#000 72%,transparent 100%);
          mask-image:linear-gradient(to right,#000 72%,transparent 100%);
}

/* Invierte el orden visual en desktop */
.card--reverse{ flex-direction: row-reverse; }

/* Y cambia el degradé del borde para que apunte al texto */
.card--reverse .card-img{
  -webkit-mask-image:linear-gradient(to left,#000 72%,transparent 100%);
          mask-image:linear-gradient(to left,#000 72%,transparent 100%);
}

/* Texto */
.text-card{ flex:1; padding:1rem 1.2rem; display:flex; flex-direction:column; justify-content:center; gap:.4rem; }

/* Mobile (≤720px): apila, quita máscaras para que la foto ocupe todo el ancho) */
@media (max-width:720px){
  .card, .card--reverse{ flex-direction:column; max-width:680px; margin-inline:auto; }
  .card-img{
    width:100%; min-height:200px;
    -webkit-mask-image:none; mask-image:none;
  }
  .text-card{ text-align:center; }
}

.card {
  display: flex;
  align-items: stretch;   /* ← fuerza a que imagen y texto midan lo mismo */
  width: 100%;
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.card-img {
  flex: 1;               /* ← en vez de width fija */
  object-fit: cover;
  height: auto;
  min-height: 100%;      /* ← ocupa todo el alto del padre */
}

/* Para alternar */
.card--reverse {
  flex-direction: row-reverse;
}

/* Mobile: apila y deja la imagen arriba */
@media (max-width: 720px) {
  .card,
  .card--reverse {
    flex-direction: column;
  }

  .card-img {
    width: 100%;
    min-height: 220px;   /* alto razonable en cel */
  }
}
/* ==== Línea decorativa para títulos principales ==== */
.section-title,
.clients__title,
.leaders__title {
  position: relative;
  display: inline-block;   /* permite que la línea se ajuste al ancho del texto */
  text-align: center;
  margin-bottom: 2rem;     /* espacio con la siguiente sección */
}

/* La línea en sí */
.section-title::after,
.clients__title::after,
.leaders__title::after {
  content: "";
  display: block;
  width: 120%;             /* más largo que el texto */
  max-width: 320px;        /* límite para que no se pase de ancho */
  height: 3px;             /* grosor */
  margin: 0.5rem auto 0;   /* centrado */
  background: var(--gold); /* color dorado de tu paleta */
  border-radius: 2px;      /* esquinas redondeadas */
}
.section-title,
.clients__title,
.leaders__title {
  position: relative;
  display: inline-block;
  margin: 0 auto 2rem;   /* centra el bloque */
  text-align: center;    /* centra el texto dentro */
}
.hero,
.portfolio,
.clients,
.leaders {
  text-align: center; /* centra todo el contenido de esa sección */
}

.section-title,
.clients__title,
.leaders__title {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}
/* === Títulos con línea decorativa centrada === */
/* Aplica a tus h1/h2 que ya tienen .section-title
   y a los que ya vienen con .clients__title y .leaders__title */
:is(.section-title, .clients__title, .leaders__title){
  position: relative;
  display: inline-block;      /* el heading mide lo que el texto */
  margin-inline: auto;        /* centra el bloque */
  text-align: center;
  padding-bottom: .9rem;      /* espacio para la línea */
}

/* La línea (un poco más ancha que el título) */
:is(.section-title, .clients__title, .leaders__title)::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);  /* centra la línea */
  bottom: 0;

  /* ancho → 120% del texto, con límites para que no “explote”
     en pantallas grandes ni se achique demasiado */
  width: min(560px, 120%);
  min-width: 140px;
  height: 4px;
  border-radius: 999px;

  /* color/difuminado dorado */
  background: linear-gradient(90deg,
    transparent 0 6%,
    var(--gold) 6% 94%,
    transparent 94% 100%);
  /* si preferís sólido: background: var(--gold); */
}

/* Asegura que los contenedores de esas secciones no desalineen el centro */
.hero.container,
.portfolio .container,
.clients .container,
.leaders.container,
.testimonials .container{
  text-align: center;
}

/* ======= MOBILE COMPACT (≤480px) — pegar al final ======= */
@media (max-width: 480px){

  /* Vars más chicas en mobile */
  :root{
    --section-pad: clamp(1.1rem, 4vw, 1.6rem);
    --space: clamp(.6rem, 2.4vw, .9rem);
    --fs-display: clamp(1.6rem, 6vw, 2rem); /* h1 */
    --fs-h2: clamp(1.1rem, 4.8vw, 1.35rem);
    --fs-h3: clamp(.95rem, 3.8vw, 1.05rem);
    --fs-body: clamp(.9rem, 3.6vw, .98rem);
    --fs-small: .82rem;
    --container-max: 100%;
  }

  /* Contenedor y texto base */
  .container{ width: min(100% - 1rem, var(--container-max)); }
  body{ line-height: 1.55; }

  /* Header */
  .site-header .container{ padding: .4rem .6rem; }
  .logoinicio{ width: clamp(68px, 32vw, 96px); }

  /* Hero (mantiene impacto pero más corto) */
  .hero-header{
    height: 48vh; min-height: 240px; margin-bottom: 1.25rem;
  }
  .scroll-down{ inline-size: 36px; block-size: 36px; bottom: 12px; }

  /* Hero texto */
  .hero{ gap: .6rem; padding: 1.5rem .5rem; }
  .hero p{ max-width: 48ch; line-height: 1.55; }
  .button{ margin-top:.6rem; padding:.5rem .85rem; font-size:.95rem; }

  /* Títulos con línea decorativa (más breves) */
  :is(.section-title, .clients__title, .leaders__title){
    padding-bottom: .6rem;
    margin-bottom: 1.2rem;
  }
  :is(.section-title, .clients__title, .leaders__title)::after{
    height: 3px;
    width: min(260px, 120%);  /* más corta en mobile */
    min-width: 110px;
  }

  /* Features / Cards */
  .features.container{ max-width: 100%; }
  .card,
  .card--reverse{ flex-direction: column; max-width: 100%; }
  .card-img{
    width: 100%; height: 180px; min-height: 180px;
    object-fit: cover; -webkit-mask-image:none; mask-image:none;
  }
  .text-card{ padding: .75rem .85rem; font-size: .95rem; }
  .card--valores .text-card{ font-size: .9rem; }

  /* Portfolio: 1 por fila y más chico */
  .portfolio .container{ padding-inline: .5rem; }
  .portfolio-grid{ grid-template-columns: 1fr; gap: .9rem; margin-top: 1rem; }
  .carousel{
    aspect-ratio: 16 / 10; min-height: 210px; border-radius: 12px;
  }
  .carousel .p-nav{ inline-size: 32px; block-size: 32px; font-size: 18px; }

  /* Servicio técnico */
  .tech__lead{ padding-inline: .25rem; }
  .button--pdf{ font-size: .95rem; }

  /* Renders */
  .renders .container{ grid-template-columns: 1fr; gap: 1rem; }
  .renders-images model-viewer{ height: 320px; }

  /* Logos de empresas */
  .clients__strip{ padding-inline: 8px; }
  .clients__track{ gap: .7rem; }
  .clients__logo{
    inline-size: clamp(110px, 42vw, 150px);
    block-size: clamp(46px, 12vw, 64px);
  }

  /* Famosos */
  .celebrities__grid{ grid-template-columns: 1fr; gap: .9rem; }
  .celebrity__avatar{ width: clamp(110px, 42vw, 150px); height: clamp(110px, 42vw, 150px); }

  /* Líderes */
  .leaders.container{ padding-inline: .75rem; }
  .leaders__grid{ grid-template-columns: 1fr; gap: 1rem; }
  .leader__img, .leader__video{
    max-width: 100%; aspect-ratio: 4/5; border-radius: 12px;
  }
  .leader__bio{ max-width: 40ch; }

  /* Testimonios */
  .testimonials .container{ padding-inline: .5rem; }
  .testimonials__title{ margin-bottom: 1rem; }
  .t-track{ grid-auto-columns: clamp(220px, 84vw, 300px); gap: .6rem; }
  .t-card{ min-height: 110px; font-size: .88rem; padding: .8rem .9rem; }
  .t-nav{ inline-size: 32px; block-size: 32px; }

  /* Contacto */
  .c-grid{ grid-template-columns: 1fr; gap: .9rem; }
  .c-card, .c-map{ height: auto; }
  .map-frame{ min-height: 240px; border-radius: 12px; }
  .c-item{ padding-left: 24px; }
  .c-label{ font-size: 1rem; }
  .c-value{ font-size: .98rem; }

  /* Footer */
  .footer-nav ul{ gap: .9rem; }
}

/* Afinado extra para pantallas muy chicas (≤360px) */
@media (max-width: 360px){
  :root{
    --fs-display: 1.5rem;
    --fs-h2: 1.05rem;
    --fs-body: .9rem;
  }
  .carousel{ min-height: 190px; }
  .t-track{ grid-auto-columns: 88vw; }
}
/* ====== MOBILE FIRST ACOMODO (≤ 480px) ====== */
@media (max-width: 480px){

  /* seguridad */
  html, body { overflow-x: hidden; }
  img, video, canvas, iframe { max-width: 100%; height: auto; }

  /* achico tipografías y espacios vía variables */
  :root{
    --section-pad: 1.25rem;
    --space: 1rem;
    --fs-display: 1.85rem;  /* h1 */
    --fs-h2: 1.25rem;       /* h2 */
    --fs-h3: 0.95rem;       /* h3 */
    --fs-body: 0.95rem;     /* párrafos */
    --fs-small: 0.86rem;
  }

  /* contenedor más angosto y sin gutters enormes */
  .container{ width:min(100% - 1rem, 640px); }

  /* HERO */
  .site-header .container{ padding: .5rem 0.75rem; }
  .logoinicio{ width: 76px; }
  .hero-header{ height: 48vh; min-height: 280px; margin-bottom: 1.25rem; }
  .scroll-down{ inline-size: 40px; block-size: 40px; bottom: 10px; }
  .hero.container{ padding: 1.25rem .75rem; gap: .75rem; }
  .hero p{ max-width: 38ch; line-height: 1.65; }
  .button{ padding:.5rem .9rem; font-size:.95rem; }

  /* Títulos con línea decorativa – que no se pasen de ancho */
  :is(.section-title, .clients__title, .leaders__title){ padding-bottom: .6rem; }
  :is(.section-title, .clients__title, .leaders__title)::after{
    height: 3px;
    width: min(220px, 115%);
  }

  /* FEATURES (tarjetas) */
  .features.container{ max-width: 680px; }
  .features .grid{ gap: .9rem; }
  .card, .card--reverse{ flex-direction: column; }
  .card{ border-radius: 10px; }
  .card-img{ width: 100%; min-height: 190px; -webkit-mask-image:none; mask-image:none; }
  .text-card{ text-align: center; padding: .85rem .9rem; font-size:.94rem; }

  /* PORTFOLIO (3 carruseles → 1 por fila) */
  .portfolio .container{ padding-inline: .75rem; }
  .portfolio-grid{ grid-template-columns: 1fr; gap: 1rem; margin-top: 1.25rem; }
  .portfolio-grid .carousel{ aspect-ratio: 4/3; min-height: 230px; border-radius: 12px; }
  .carousel .p-nav{ inline-size:32px; block-size:32px; font-size:18px; }

  /* RENDERS (texto arriba, modelo abajo) */
  .renders .container{ grid-template-columns: 1fr; gap: 1rem; padding-inline: .75rem; }
  .renders-images model-viewer{ height: 280px; }

  /* CLIENTES (logos) */
  .clients .container{ padding-inline: .75rem; }
  .clients__strip{ padding-inline: 8px; }
  .clients__track{ gap: clamp(.6rem, 3vw, 1rem); }
  .clients__logo{ inline-size: clamp(110px, 40vw, 150px); block-size: clamp(44px, 12vw, 64px); }

  /* CELEBRITIES */
  .celebrities__grid{ grid-template-columns: 1fr; gap: .9rem; }
  .celebrity__avatar{ width: 120px; height: 120px; }

  /* LÍDERES */
  .leaders.container{ padding-inline: .75rem; }
  .leaders__grid{ grid-template-columns: 1fr; gap: 1rem; }
  .leader__img, .leader__video{ max-width: 260px; border-radius: 12px; }

  /* TESTIMONIOS */
  .testimonials .container{ padding-inline: .75rem; }
  .testimonials__title{ margin-bottom: 1rem; }
  .t-track{ grid-auto-columns: 78%; gap: .6rem; }
  .t-card{ min-height: 120px; font-size:.82rem; padding:.8rem; }

  /* CONTACTO (columna única + alturas auto) */
  .contact .container{ padding-inline: .75rem; }
  .c-grid{ grid-template-columns: 1fr; gap: 1rem; }
  .c-card, .c-map{ height: auto; }
  .map-frame{ min-height: 260px; }

  /* Footer */
  .site-footer .container{ padding: .9rem .75rem; font-size: .9rem; }
  .footer-nav ul{ gap: 1rem; }
}
/* ====== MOBILE COMPACT EXTREMO (≤480px) ====== */
@media (max-width: 480px){

  html, body {
    overflow-x: hidden;
    font-size: 14px; /* base más chica */
  }

  .container {
    width: 100%;
    padding: 0 12px;
  }

  /* TIPOGRAFÍAS */
  h1, .section-title, .clients__title, .leaders__title {
    font-size: 1.3rem;
  }
  h2 { font-size: 1.1rem; }
  h3 { font-size: 1rem; }
  p, li { font-size: 0.9rem; }

  /* HEADER */
  .logoinicio { width: 64px; }

  /* HERO */
  .hero-header { height: 40vh; min-height: 200px; }
  .hero p { font-size: 0.9rem; line-height: 1.4; }
  .button { font-size: 0.85rem; padding: .4rem .7rem; }

  /* TITULOS SUBRAYADOS */
  :is(.section-title, .clients__title, .leaders__title)::after {
    width: 140px;
    height: 2px;
  }

  /* CARDS */
  .card, .card--reverse {
    flex-direction: column;
    gap: .5rem;
  }
  .card-img {
    height: 160px;
    object-fit: cover;
  }
  .text-card { padding: .6rem; font-size: .9rem; }

  /* PORTFOLIO */
  .portfolio-grid { grid-template-columns: 1fr; gap: .75rem; }
  .carousel { min-height: 180px; border-radius: 8px; }
  .carousel .p-nav { width: 28px; height: 28px; font-size: 16px; }

  /* RENDERS */
  .renders .container { grid-template-columns: 1fr; gap: .75rem; }
  .renders-images model-viewer { height: 220px; }

  /* CLIENTES */
  .clients__logo {
    width: 90px;
    height: 40px;
  }

  /* CELEBRITIES */
  .celebrity__avatar {
    width: 100px;
    height: 100px;
  }

  /* LÍDERES */
  .leaders__grid { grid-template-columns: 1fr; }
  .leader__img, .leader__video { max-width: 200px; }
  .leader__bio { font-size: 0.85rem; }

  /* TESTIMONIOS */
  .t-track { grid-auto-columns: 85%; }
  .t-card {
    font-size: .8rem;
    padding: .7rem;
  }

  /* CONTACTO */
  .c-grid { grid-template-columns: 1fr; }
  .map-frame { min-height: 200px; }

  /* FOOTER */
  .footer-nav img { width: 24px; height: 24px; }
  .site-footer { font-size: 0.8rem; }
}
/* ===== Ajustes MOBILE cards y márgenes ===== */
@media (max-width: 480px){

  /* Márgenes laterales más generosos para TODA la página */
  .container {
    padding-inline: 18px;  /* antes 12px */
  }

  /* Todas las cards un poco más chicas (no ocupan 100%) */
  .card {
    max-width: 92%;   /* achica ancho */
    margin-inline: auto; /* centradas */
    border-radius: 10px;
  }

  /* Segunda card específica (la de valores y compromisos) */
  .card:nth-of-type(2) {
    transform: scale(0.92);  /* la encoge un poco */
    transform-origin: top center;
  }
  .card:nth-of-type(2) .card-img {
    height: 140px;  /* reduce alto imagen */
    object-fit: cover;
  }
  .card:nth-of-type(2) .text-card {
    font-size: 0.85rem; /* texto un poco más chico */
    line-height: 1.4;
  }
}
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 64px;          /* tamaño del botón */
  height: 64px;
  border-radius: 50%;
  background-color: #2b2b2b; /* verde WhatsApp */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-fab img {
  width: 60%;  /* ajustá según tu imagen */
  height: auto;
}

.whatsapp-fab:hover {
  transform: scale(1.07);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

@media (max-width: 600px) {
  .whatsapp-fab {
    width: 54px;
    height: 54px;
    right: 12px;
    bottom: 12px;
  }
}

.logoinicio {
  width: 135px; /* subí de a 10px para probar */
}

img[alt="Stephanie Demner"] {
  object-position: center 25%;
}

/* iOS: desactivar el fade por máscara para evitar cortes */
@supports (-webkit-touch-callout: none) {
  .clients__strip{
    -webkit-mask-image: none !important;
            mask-image: none !important;
    padding-inline: 16px; /* aire para que ningún logo toque el borde */
  }
}

/* Asegurar tamaños estables de los ítems (independiente del logo) */
.clients__logo{
  flex: 0 0 auto;
  inline-size: clamp(140px, 20vw, 200px);
  block-size: clamp(50px, 9vw, 80px);
}

.clients__logo img{
  display:block;
  width:auto; height:100%;
  max-width:100%; max-height:100%;
  object-fit:contain;
}
/* ===== FIX mobile para las 2 cards de Features ===== */
@media (max-width: 720px){

  /* Ambas cards apiladas igual */
  .features .card,
  .features .card--reverse{
    flex-direction: column !important;
  }

  /* La imagen NO se estira: */
  .features .card .card-img{
    display: block;
    width: 100%;
    height: auto !important;        /* quita estirado vertical */
    min-height: 200px !important;   /* alto razonable en cel */
    max-height: none !important;
    object-fit: cover;              /* recorte prolijo */
    flex: 0 0 auto !important;      /* evita que “rellene” el alto del texto */

    /* SIN degradé/máscara en mobile */
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* Texto centrado como la primera */
  .features .text-card{
    text-align: center;
  }
}

/* === Features: igualar alto de las fotos en mobile === */
:root{
  --feat-img-h-mob: 220px;   /* ajustá 200–260px según te guste */
}

@media (max-width: 720px){
  .features .card,
  .features .card--reverse{
    flex-direction: column;
  }

  .features .card .card-img{
    width: 100%;
    height: var(--feat-img-h-mob) !important; /* mismo alto en ambas */
    object-fit: cover;                         /* recorte prolijo */
    -webkit-mask-image: none !important;       /* sin fade raro */
            mask-image: none !important;
    flex: 0 0 auto !important;                 /* no se estira por el texto */
  }

  .features .text-card{ text-align: center; }
}

/* iOS / móviles: evita recortes raros */
@supports (-webkit-touch-callout: none){
  .clients__strip{
    -webkit-mask-image: none !important;
            mask-image: none !important;
    padding-inline: 16px;
  }
}

/* Fallback: si algo falla en el JS, mostrarlos fijos */
.clients__track.no-anim{
  animation: none !important;
  transform: none !important;
}