/* =========================
   PIMO — Mobile-first UI
   Theme: Silver & Modern (Graphite / Silver / Steel Blue / Gold)
   Tipografía única: Manrope
   ========================= */

:root{
  /* Paleta base */
  --graphite:#1e1e1e;
  --graphite-2:#141414;
  --porcelain:#f2f2f2;
  --muted:#c9ced6;
  --silver:#e5e5e5;
  --steel:#4a6fa5;
  --gold:#c9a646;

  /* Layout */
  --radius:16px;
  --px: clamp(16px, 4vw, 24px);
  --gap: 24px;
  --gap-lg: 40px;
  --container: 1120px;

  /* Tipografía */
  --ff: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font:400 16px/1.55 var(--ff);
  color: var(--porcelain);
  background: var(--graphite);
  padding-top:46px; /* compensa topbar fija en móvil */
}
img{ max-width:100%; height:auto; display:block; }

/* Utilidad contenedor */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}

/* -------------------------
   Loader
-------------------------- */
#preloader{
  position: fixed; inset:0; display:grid; place-items:center; z-index:9999;
  background: var(--graphite);
  transition: opacity .4s ease, visibility .4s ease;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; }
.preloader__wrap{ position:relative; display:grid; place-items:center; }
.preloader__logo{
  font:800 22px/1 var(--ff); letter-spacing:.18em; color:#c7ccd4; text-transform:uppercase;
}
.preloader__shine{
  position:absolute; top:50%; left:-120%; width:120%; height:2px; transform: translateY(-50%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: shine 2.2s ease-in-out infinite;
}
@keyframes shine{
  0%{ left:-120%; opacity:0 } 40%{ opacity:.85 } 100%{ left:120%; opacity:0 }
}

/* -------------------------
   Topbar
-------------------------- */
.topbar{
  position: fixed; top:0; left:0; right:0; z-index:999;
  background: var(--gold); color: var(--graphite);
  padding: 8px var(--px);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  text-align:center;
}
.topbar__link{ display:block; font:800 13px/1.2 var(--ff); text-decoration:none; color:inherit; }

/* -------------------------
   Hero + VSL (9:16)
-------------------------- */
.hero{
  padding: 60px var(--px) 28px;
  background: linear-gradient(180deg,#232323 0%, var(--graphite) 100%);
  text-align:center;
  max-width: 900px; /* ancho legible desktop */
  margin: 0 auto;
}
.hero__eyebrow{
  margin:0 0 30px; color: var(--muted);
  font:700 clamp(11px,2.9vw,13px)/1 var(--ff);
  letter-spacing:.08em; text-transform:uppercase;
}
.hero__title{
  margin:0 0 30px; color: var(--porcelain);
  font:800 clamp(30px,7.5vw,56px)/1.08 var(--ff);
  letter-spacing:.01em;
}
.hero__sub{
  margin:0 0 30px; color:#d7dadf;
  font:500 clamp(14px,4.2vw,18px)/1.55 var(--ff);
}
.vsl{ max-width:540px; margin:0 auto 14px; }
.vsl__poster{
  position:relative; width:100%; aspect-ratio:9/16; border:1px solid var(--silver);
  border-radius:14px; overflow:hidden; cursor:pointer; background:#000; padding:0;
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
.vsl__poster img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vsl__play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; font-size:26px; color: var(--graphite);
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, var(--gold), #e3d19a) border-box;
  border:2px solid transparent; box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.hero__note{ display:block; margin-top:8px; font:500 13px/1.35 var(--ff); color:#aeb6c1; }

/* -------------------------
   Botones / CTA
-------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  text-decoration:none; cursor:pointer; border-radius:999px;
  padding:14px 18px; min-height:48px; min-width:48px; border:1px solid transparent;
  font:700 clamp(14px,3.8vw,16px)/1 var(--ff); letter-spacing:.02em; touch-action:manipulation;
}
.btn--gold{
  color: var(--graphite); background: var(--gold);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--gold:hover{ filter: brightness(1.03) }
.btn--xl{ padding:16px 22px }
.btn--full{ width:100% }
.btn:focus-visible{ outline:2px solid #94a3b8; outline-offset:2px }

/* -------------------------
   Section title
-------------------------- */
.section-title{
  margin:0 0 14px; text-align:center; color: var(--porcelain);
  font:800 clamp(22px,5.6vw,36px)/1.12 var(--ff); letter-spacing:.02em;
}

/* -------------------------
   Beneficios
-------------------------- */
.benefits{ background: var(--graphite); padding:22px 0; }
.benefits__grid{
  display:grid; gap:16px; padding:0 var(--px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  justify-content:center; /* centra la última fila de 2 */
}
.bcard{
  background: var(--silver); border:1px solid #dadada; border-radius:14px;
  padding:16px; text-align:center; box-shadow:0 10px 24px rgba(0,0,0,.25); color: var(--graphite);
  width:100%; max-width:320px; margin:0 auto;
}
.bcard__icon{
  width:44px; height:44px; margin:0 auto 8px; border-radius:50%;
  display:grid; place-items:center; color: var(--graphite);
  background: linear-gradient(135deg,#f7f7f7,#ffffff) padding-box,
              linear-gradient(135deg,var(--gold),#e3d19a) border-box;
  border:1px solid transparent;
}
.bcard__title{ margin:0 0 4px; font:800 clamp(16px,3.6vw,20px)/1.18 var(--ff); letter-spacing:.06em; text-transform:uppercase; }
.bcard__text{ margin:0; color:#384250; font:600 14px/1.5 var(--ff); }

/* -------------------------
   Carruseles (portafolio / testimonios)
-------------------------- */
.portfolio{ padding:26px var(--px); background: var(--graphite); }
.center{ text-align:center; margin-top:10px; }
.carousel{ position:relative; max-width:1120px; margin:0 auto; }

/* Viewport 16:9 por defecto (fotos) */
.carousel__viewport{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:14px;
  border:1px solid var(--silver); background:#0b1117;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* Viewport 9:16 para videos (portafolio y testimonios) */
#pf-videos .carousel__viewport,
.vtest .carousel__viewport{
  aspect-ratio:9/16;
  max-width:540px;
  margin-left:auto; margin-right:auto;
}

.slide{
  position:absolute; inset:0; opacity:0; transition:opacity .28s ease;
  display:flex; align-items:center; justify-content:center; flex-direction:column; color:#e7edf7;
}
.slide.is-active{ opacity:1 }
.slide img{ width:100%; height:100%; object-fit:cover; }

/* Video frame (9:16) */
.vframe{
  width:100%; height:100%; aspect-ratio:9/16;
  display:grid; place-items:center; background:#000;
}
.vframe video{ width:100%; height:100%; object-fit:cover; }

/* Captions centradas */
.vcap{ font:600 12px/1.4 var(--ff); color:#bfd0ea; margin-top:6px; text-align:center; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* Controles carrusel */
.cbtn{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  border:0; background:rgba(255,255,255,.92); color: var(--graphite); cursor:pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.35); font-size:22px;
}
.cbtn.prev{ left:10px } .cbtn.next{ right:10px }
.cbtn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }

/* Dots */
.dots{ display:flex; gap:8px; justify-content:center; margin:12px 0 0; }
.dots .dot{
  width:12px; height:12px; border-radius:999px; background:transparent; border:1.5px solid #98b1d6; cursor:pointer;
}
.dots .dot.is-active{ background: var(--gold); border-color:#a7892e; box-shadow:0 0 0 4px rgba(201,166,70,.22); transform:scale(1.05) }

/* Tabs Portafolio */
.pf-tabs{ display:flex; gap:8px; justify-content:center; margin:8px var(--px) 16px; }
.pf-tab{
  appearance:none; border:1px solid #dadada; background:#fff; color:#1e1e1e;
  padding:10px 14px; border-radius:999px; font:800 12px/1 var(--ff); letter-spacing:.06em; cursor:pointer;
}
.pf-tab.is-active{
  background: var(--gold); color: var(--graphite); border-color:transparent;
  box-shadow:0 8px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.pf-panel[hidden]{ display:none !important }

/* Gutters uniformes */
.portfolio .carousel, .vtest .carousel{
  max-width: min(1120px, calc(100% - (var(--px) * 2)));
  margin-left:auto; margin-right:auto; padding-bottom:2px;
}

/* Centrar carrusel de testimonios explícitamente */
.vtest .carousel{ max-width:540px; margin-left:auto; margin-right:auto; }

/* -------------------------
   QUIÉN LIDERA TU REMODELACIÓN
-------------------------- */
.leader{ padding:26px var(--px); background: var(--graphite); }
.leader .container{
  max-width:760px; margin-inline:auto;
  display:grid; justify-items:center; text-align:center;
}
.leader__wrap{
  max-width:680px; width:100%; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:inherit;
}
.leader__media{ margin:0 auto 10px }
.leader__media img{
  width:120px; height:120px; border-radius:50%; object-fit:cover; display:block; border:1px solid var(--silver);
}
.leader__name{ margin:8px 0 2px; font:800 clamp(18px,4.6vw,22px)/1 var(--ff); letter-spacing:.06em; }
.leader__role{ margin:0; color:#AEB6C1; font:700 12px/1.2 var(--ff); letter-spacing:.06em; text-transform:uppercase; }
.leader__bio{ margin:10px auto 0; color:#D2D7DF; font:600 14px/1.55 var(--ff); max-width:66ch; }
.leader__cta{ display:flex; justify-content:center; margin-top:16px }

/* -------------------------
   FAQ (centrado)
-------------------------- */
.faq{ padding:26px var(--px); background: var(--graphite); text-align:center; }
.faq__list{ max-width:760px; margin:0 auto; }
.faq details{ border-bottom:1px solid #3A3A3A; padding:14px 0 }
.faq summary{
  list-style:none; cursor:pointer; position:relative; padding-right:28px;
  font:800 clamp(16px,3.6vw,22px)/1.22 var(--ff); color: var(--porcelain); text-align:center;
}
.faq summary::-webkit-details-marker{ display:none }
.faq details[open] summary{ color: var(--muted) }
.faq details p{ margin:10px 0 6px; color:#D2D7DF; font:600 14px/1.55 var(--ff); text-align:center; }
.faq summary::after{
  content:"+"; position:absolute; right:0; top:0; width:22px; text-align:center; color: var(--gold);
  transition: transform .2s ease;
}
.faq details[open] summary::after{ content:"–"; transform: rotate(180deg) }

/* -------------------------
   Sticky CTA (solo móvil)
-------------------------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom: calc(12px + env(safe-area-inset-bottom));
  padding:0 var(--px); display:none; z-index:998;
}
.sticky-cta .btn{ border:1px solid rgba(0,0,0,.18) }
@media (max-width:600px){ .sticky-cta{ display:block } }

/* -------------------------
   Footer (igual Policies)
-------------------------- */
.footer{
  background: var(--graphite-2); color: var(--porcelain); text-align:center;
  padding:24px var(--px) calc(24px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.10);
}
.footer__social{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.75rem 2rem; margin-bottom:8px;
}
.footer__social a{
  display:inline-flex; align-items:center; gap:.6rem; color: var(--porcelain);
  text-decoration:none; border-bottom:1px solid transparent;
}
.footer__social a:hover{ border-color: var(--porcelain) }
.footer .social-ic{ width:20px; height:20px; color: var(--gold) }
.footer__links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:8px 0 6px }
.footer__links a{ color: var(--porcelain); text-decoration:none; border-bottom:1px solid transparent }
.footer__links a:hover{ border-color: var(--porcelain) }
.footer__disclaimer{ color: var(--muted); font:500 12px/1.5 var(--ff); margin:12px 0 4px }
.footer__copy{ color:#a7b0bc; font:500 12px/1 var(--ff); margin:10px 0 0 }

/* -------------------------
   Responsive suaves
-------------------------- */
@media (min-width:600px){
  .bcard{ padding:18px }
}

/* ===== TÍTULOS EN MAYÚSCULAS (GLOBAL) ===== */
h1,h2,h3,h4,h5,h6,
.section-title,.hero__title,.hero__eyebrow,.bcard__title{
  text-transform: uppercase !important;
}

/* ===== Cookie banner ===== */
.cookie{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 12px var(--px);
  display: none; /* se mostrará por JS si no hay preferencia */
}
.cookie.is-visible{ display: block; }
.cookie__inner{
  max-width: 920px; margin: 0 auto;
  background: var(--graphite-2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.4);
  padding: 14px;
  display: grid; gap: 10px; align-items: center;
}
.cookie__text{
  margin:0; color: var(--porcelain); font: 600 14px/1.5 var(--ff);
}
.cookie__text a{ color: var(--gold); text-decoration: underline; }
.cookie__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie__actions .btn{ min-height: 40px; padding: 10px 16px; }
@media (min-width: 720px){
  .cookie__inner{ grid-template-columns: 1fr auto; }
}