/* AURO — clon de "Pagina Auro GUIA FINAL" */
:root{
  --ancho:1250px;
  --negro:#000302;
  --oscuro:#2E3736;
  --oro:#9D8265;
  --crema:#F2F1F0;
  --texto:#12100E;
  --sec:#6E6A66;
  --radio:64px;
  --marco:5vw;
  --fuente:"Helvetica Neue","HelveticaNeue",Helvetica,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fuente);color:var(--texto);background:#fff;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:min(90vw,1700px);margin-inline:auto;padding-inline:1.5rem;width:100%}
.marco{margin-inline:var(--marco)}
.bloque-pdf{width:min(90vw,1700px);margin-inline:auto;container-type:inline-size}

h1,h2{font-weight:700;letter-spacing:-.02em;line-height:1.1}
.kicker{color:var(--oro);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.01em}
.oro{color:var(--oro)}

/* ---------- HERO ----------  medidas en % del propio bloque (PDF 2840x1512) */
.hero{position:relative;background:var(--negro);border-radius:var(--radio);overflow:hidden;
  aspect-ratio:2840/1512;margin-top:2.5rem;container-type:inline-size}
.hero__bg{position:absolute;inset:0;background:var(--negro)}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,3,2,.86) 0%,rgba(0,3,2,.62) 26%,rgba(0,3,2,.2) 44%,rgba(0,3,2,0) 56%)}
.hero__nav{position:absolute;top:6.4%;right:5.5%;z-index:3;display:flex;align-items:center;gap:1.5cqw;
  color:var(--oro);font-size:1.02cqw;letter-spacing:.085em;white-space:nowrap}
.hero__nav a:hover{color:var(--crema)}
.hero__nav i{color:#fff;opacity:1;font-style:normal}
.hero__marca{position:absolute;top:14.35%;right:5.88%;z-index:3;width:16.3%;height:auto}
.hero__in{position:absolute;left:6.2%;top:19.9%;right:44%;z-index:2}
.hero h1{color:var(--crema);font-weight:300;text-transform:uppercase;
  font-size:4.17cqw;line-height:3.98cqw;letter-spacing:.004em}
.hero h1 em{font-style:normal;color:var(--oro)}
.hero__tags{display:flex;gap:1.1cqw;color:var(--crema);font-size:1.37cqw;letter-spacing:.02em;
  margin-top:1.35cqw;text-transform:uppercase;font-weight:300;white-space:nowrap}
.hero__tags i{opacity:.45;font-style:normal}
.hero__p{color:var(--crema);margin-top:2.7cqw;font-weight:300;font-size:1.32cqw;line-height:1.8cqw;max-width:34ch}
.hero__link{display:block;width:94.6%;margin-top:2.9cqw;color:var(--oro)}
.hero__link span{display:flex;align-items:center;justify-content:space-between;
  font-size:1.16cqw;letter-spacing:.13em;text-transform:uppercase;padding-bottom:1.1cqw}
.hero__link svg{width:3.4cqw;height:1.2cqw;stroke:var(--oro);fill:none;stroke-width:1}
.hero__link::after{content:"";display:block;height:1px;background:linear-gradient(90deg,var(--oro) 0%,var(--oro) 55%,rgba(157,130,101,.25) 100%)}
.hero__link:hover span{color:var(--crema)}

/* ---------- MARCAS ----------  PDF: alto 11.69% del bloque, fondo radial claro al centro */
.marcas{margin-top:3.4cqw;height:11.69cqw;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(ellipse 46% 120% at 49.4% 52%, #fffefd 0%, #f4f3f2 26%, #e0e1df 58%, #cbcccb 84%, #cbcccb 100%)}
.marcas__in{display:flex;align-items:center;gap:2.6cqw;width:100%;padding-inline:5.2cqw}
.marcas .label{flex:none;font-size:.94cqw;font-weight:700;line-height:1.55;width:12.5cqw;color:#3a3a38}
.marcas__pista{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.marcas__tira{display:flex;align-items:center;gap:4.2cqw;width:max-content;animation:desfila 30s linear infinite}
.marcas:hover .marcas__tira{animation-play-state:paused}
.marcas__tira img{width:auto;flex:none}
.marcas__tira img.emiliana{height:3.03cqw}
.marcas__tira img.maison{height:3.70cqw}
.marcas__tira img.masterg{height:2.01cqw}
.marcas__tira img.auramay{height:4.65cqw}
.marcas__tira img.coyam{height:2.68cqw}
@keyframes desfila{to{transform:translateX(-50%)}}

/* ---------- QUE HACE AURO ----------  PDF */
.bloque{padding:7rem 0}
.s3{position:relative;padding-top:20.6cqw}
.s3__kicker{position:absolute;left:0;top:5.15cqw;color:var(--oro);font-size:1.95cqw;font-weight:400;margin:0}
.s3 h2{position:absolute;left:0;top:8.1cqw;font-size:3.19cqw;line-height:2.75cqw;letter-spacing:-.025em;
  width:32.6cqw;font-weight:700}
.s3__p{position:absolute;right:0;top:7.2cqw;width:34cqw;font-size:2.01cqw;line-height:2.57cqw;font-weight:400}
.s3__fotos{--hueco:2cqw;--vista:3;overflow:hidden;margin:0;padding-inline:0}
.s3__pista{display:flex;gap:var(--hueco);will-change:transform}
.s3__fotos figure{flex:0 0 calc((100% - (var(--vista) - 1) * var(--hueco)) / var(--vista));
  margin:0;border-radius:1.1cqw;overflow:hidden;aspect-ratio:809/729}
.s3__fotos img{width:100%;height:100%;object-fit:cover}

/* ---------- DETRÁS DE CADA PROYECTO ---------- */
.centro{text-align:center;max-width:760px;margin-inline:auto}
.centro h2{font-size:clamp(2rem,3.9vw,3.2rem);margin:.6rem 0 1.6rem;letter-spacing:-.025em}
.centro .small{color:var(--oro);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;line-height:2;margin-inline:-3rem}
.pill{display:inline-flex;align-items:center;gap:1rem;margin-top:2rem;border:1px solid var(--oro);border-radius:999px;padding:.45rem .45rem .45rem 1.6rem;font-size:1.1rem;transition:.25s}
.pill i{width:40px;height:40px;border-radius:999px;background:var(--oro);display:grid;place-items:center;flex:none}
.pill i svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.6}
.pill:hover{background:var(--oro);color:#fff}
.pill:hover i{background:#fff}
.pill:hover i svg{stroke:var(--oro)}

/* ---------- CARRUSEL EN ARCO ----------  clon folioblox: anillo 3D real.
   perspective:600px en el padre (medida del m34 del original); tarjetas planas
   colocadas con translate3d + rotateY, un plano cada 30 grados; la arista
   exterior queda mas cerca de la camara (trapecio hacia afuera). */
.arco{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:1.5rem;
  height:580px;overflow:hidden;perspective:600px;perspective-origin:50% 50%}
.arco__pista{position:absolute;inset:0;transform-style:preserve-3d}
.arco figure{position:absolute;left:50%;top:50%;width:145px;height:207px;
  margin:-103.5px 0 0 -72.5px;border-radius:14px;overflow:hidden;background:#eee;
  box-shadow:0 5px 15px rgba(0,0,0,.16);will-change:transform}
.arco figure img{width:100%;height:100%;object-fit:cover;display:block}
.arco figure:nth-child(1){transform:translate3d(-290.3px,0,433.7px) rotateY(90.0deg)}
.arco figure:nth-child(2){transform:translate3d(-290.3px,0,433.7px) rotateY(90.0deg)}
.arco figure:nth-child(3){transform:translate3d(-290.3px,0,288.7px) rotateY(90.0deg)}
.arco figure:nth-child(4){transform:translate3d(-251.3px,0,143.5px) rotateY(59.9deg)}
.arco figure:nth-child(5){transform:translate3d(-145.0px,0,37.1px) rotateY(30.0deg)}
.arco figure:nth-child(6){transform:translate3d(0.0px,0,0.0px) rotateY(0.0deg)}
.arco figure:nth-child(7){transform:translate3d(145.0px,0,37.1px) rotateY(-30.0deg)}
.arco figure:nth-child(8){transform:translate3d(251.3px,0,143.5px) rotateY(-59.9deg)}
.arco figure:nth-child(9){transform:translate3d(290.3px,0,288.7px) rotateY(-90.0deg)}
.arco figure:nth-child(10){transform:translate3d(290.3px,0,433.7px) rotateY(-90.0deg)}

/* ---------- CTA ---------- */
.cta{margin-top:-2rem;background:#fff;border-radius:var(--radio) var(--radio) 0 0;padding:5.5rem 0 6.5rem;text-align:center}
.cta .kicker{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.cta h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-top:.7rem;letter-spacing:-.025em}

/* ---------- FOOTER ----------  PDF: alto 52.75% del bloque, barra punteada, wordmark gigante */
.footer{position:relative;background:var(--oscuro);color:#fff;border-radius:var(--radio) var(--radio) 0 0;
  height:52.75cqw;overflow:hidden;margin-top:0}
.footer__barra{position:absolute;left:4.15%;top:11.1%;width:91.41%;height:6.28%;
  border:1px dashed rgba(157,130,101,.75);border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:4.4cqw;font-size:1.16cqw;white-space:nowrap}
.footer__barra .pre{color:var(--oro);font-size:.96cqw;letter-spacing:.045em;text-transform:uppercase}
.footer__barra a{display:inline-flex;align-items:center;gap:.8cqw;font-weight:500}
.footer__barra a:hover{color:var(--oro-claro,#B39D86)}
.footer__barra svg{width:2.05cqw;height:2.05cqw;fill:none;stroke:var(--oro);stroke-width:1.5;flex:none}
.footer__barra svg .lleno{fill:var(--oro);stroke:none}
.footer__marca{position:absolute;left:0;top:33.8%;width:100%;opacity:1;pointer-events:none}
.footer__marca img{width:100%;filter:brightness(0) saturate(100%) invert(26%) sepia(6%) saturate(600%) hue-rotate(120deg) brightness(95%);opacity:.55}
.footer__copy{position:absolute;left:0;right:0;bottom:2.4%;text-align:center;color:#fff;font-size:1.05cqw;font-weight:500}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  :root{--radio:34px;--marco:1.1rem}
  .hero{aspect-ratio:auto;margin-top:1.1rem;display:block}
  .hero__in{position:static;padding:9rem 1.5rem 7rem;right:auto}
  .hero h1{font-size:2rem;line-height:2.1rem}
  .hero__tags{font-size:.78rem;gap:.6rem;margin-top:1.2rem}
  .hero__p{font-size:.95rem;line-height:1.6rem;margin-top:1.8rem}
  .hero__link{width:100%;margin-top:2.4rem}
  .hero__link span{font-size:.72rem;padding-bottom:.8rem}
  .hero__link svg{width:30px;height:11px}
  .hero__bg img{width:100%;margin:0}
  .hero__nav{top:1.3rem;right:1.4rem;left:1.4rem;justify-content:flex-start;font-size:.72rem;gap:.6rem}
  .hero__marca{top:auto;bottom:1.4rem;right:1.6rem;width:112px}
  .hero__bg::after{background:linear-gradient(180deg,rgba(0,3,2,.92) 0%,rgba(0,3,2,.8) 60%,rgba(0,3,2,.6) 100%)}
  .dos,.trio{grid-template-columns:1fr;gap:2rem}
  .dos h2,.dos p{max-width:none}
  .bloque{padding:4rem 0}
  .marcas__in{flex-direction:column;gap:0;padding-inline:1rem}
  .marcas .label{max-width:none;text-align:center;padding:1.4rem 0 0}
  .marcas__pista{width:100%}
  .marcas__tira{gap:3rem;padding:1.4rem 1.5rem}

  /* el texto del hero quedaba TAPADO por la imagen: al pasar a static perdia el z-index */
  .hero__in{position:relative;z-index:2}

  /* marcas: alto y logos estaban en cqw (3-10px en movil) */
  .marcas{height:auto;margin-top:2rem;padding:1.1rem 0}
  .marcas .label{font-size:.8rem;width:auto;line-height:1.5}
  .marcas__tira{gap:2.4rem}
  .marcas__tira img.emiliana{height:20px}
  .marcas__tira img.maison{height:24px}
  .marcas__tira img.masterg{height:14px}
  .marcas__tira img.auramay{height:30px}
  .marcas__tira img.coyam{height:18px}

  /* que hace auro: estaba en posiciones absolutas y cqw (texto de 3px) */
  .s3{padding-top:3rem}
  .s3__kicker,.s3 h2,.s3__p{position:static;width:auto}
  .s3__kicker{font-size:.95rem}
  .s3 h2{font-size:1.8rem;line-height:1.15;margin:.4rem 0 1rem}
  .s3__p{font-size:1rem;line-height:1.6;margin-bottom:2rem}
  .s3__fotos{--hueco:1rem;--vista:1}

  /* arco: en movil solo entran la central y las vecinas */
  .arco{height:360px;margin-top:.5rem}

  .cta{padding:3.5rem 0 4rem}
  .centro .small{margin-inline:0}

  /* footer: alto y contenidos en cqw; la barra iba absoluta */
  .footer{height:auto;padding:2rem 1.1rem 1.4rem}
  .footer__barra{position:static;width:auto;height:auto;padding:1.1rem 1rem;
    flex-direction:column;gap:.9rem;border-radius:26px;text-align:center;
    font-size:.85rem;white-space:normal}
  .footer__barra .pre{font-size:.7rem}
  .footer__barra a{gap:.5rem}
  .footer__barra svg{width:19px;height:19px}
  .footer__marca{position:static;margin-top:1.6rem}
  .footer__copy{position:static;margin-top:1.2rem;font-size:.75rem}
}

/* tablet: las tres fotos caben en fila, apiladas quedaban larguisimas */
@media(min-width:600px) and (max-width:980px){
  .s3__fotos{--hueco:1.2rem;--vista:3}
  .footer__barra{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.7rem 1.6rem}
}