/* ==========================================================================
   JM CLEAN PRO — hoja de estilos principal
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --gold: #d4af37;
  --gold-light: #e8cf7d;
  --gold-dim: #a89a78;
  --bg: #0a0a0d;
  --bg-alt: #121218;
  --surface: #16161c;
  --surface-2: #1c1c24;
  --border: rgba(212,175,55,.22);
  --border-strong: rgba(212,175,55,.45);
  --text: #f3efe4;
  --text-muted: #b9b3a3;
  --text-dim: #83807a;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.22,1,.36,1);
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', 'Segoe UI', sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }

/* ---------- PWA splash (solo visible al abrir la app instalada) ---------- */
#pwa-splash{
  display:none;
  position:fixed; inset:0; z-index:9999;
  background: var(--bg);
  align-items:center; justify-content:center;
}
html.is-pwa #pwa-splash{ display:flex; }
#pwa-splash svg{
  width: 120px; height: 140px;
  animation: splashPulse 1.1s ease-in-out infinite;
}
@media (max-width: 380px){
  #pwa-splash svg{ width: 92px; height: 107px; }
}
#pwa-splash.is-hiding{
  opacity:0; pointer-events:none;
  transition: opacity .45s ease;
}
@keyframes splashPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.72; transform:scale(.96); }
}
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input,select,textarea{ font-family: inherit; }

h1,h2,h3,h4{
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 .5em;
  letter-spacing: .3px;
}
h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.08; font-weight: 700; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size: 1.35rem; }
p{ margin: 0 0 1em; color: var(--text-muted); }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow{
  display:inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section{ padding: 82px 0; position: relative; }
.section-alt{ background: var(--bg-alt); }
.section-head{ max-width: 640px; margin: 0 auto 44px; text-align:center; }
.section-head p{ margin: 0 auto; }

.gold{ color: var(--gold); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: .92rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 60%, #b6902a);
  color: #14140f;
  box-shadow: 0 10px 30px rgba(212,175,55,.25);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(212,175,55,.4); }
.btn-outline{
  background: rgba(212,175,55,.06);
  border: 2px solid var(--gold);
  color: var(--gold);
}
.btn-outline:hover{
  background: var(--gold); color:#14140f; border-color: var(--gold);
  transform: translateY(-3px); box-shadow: 0 16px 40px rgba(212,175,55,.4);
}
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 22px; font-size: .78rem; }

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 1000;
  padding: 22px 0;
  transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Velo oscuro detrás del menú mientras el hero no ha hecho scroll —
   garantiza que los enlaces se lean sobre imágenes de fondo claras.
   Al hacer scroll el header ya tiene su propio fondo, así que se apaga. */
.site-header::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,10,13,.62) 0%, rgba(10,10,13,.30) 55%, rgba(10,10,13,0) 100%);
  transition: opacity .35s var(--ease);
}
.site-header.is-scrolled::before{ opacity:0; }
.site-header.is-scrolled{
  padding: 12px 0;
  background: rgba(10,10,13,.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height: 46px; width:auto; transition: height .35s var(--ease); }
.site-header.is-scrolled .brand img{ height: 38px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text b{ font-family:'Playfair Display',serif; letter-spacing:2px; font-size:1.05rem; color:var(--text); }
.brand-text span{ font-size:.6rem; letter-spacing:2.5px; color: var(--gold-dim); text-transform:uppercase; }

.nav-links{ display:flex; align-items:center; gap:40px; flex-wrap:nowrap; }
.nav-links a{
  font-size: .85rem; letter-spacing: .5px; color: var(--text);
  position: relative; padding: 4px 0; transition: color .3s;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  white-space: nowrap; flex-shrink:0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background: var(--gold);
  transition: width .3s var(--ease);
}
.nav-links a:hover{ color: var(--text); }
.nav-links a:hover::after{ width:100%; }

.nav-cta{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:none; border:none; padding:8px;
  min-width:44px; min-height:44px; /* tamaño mínimo cómodo para el dedo */
}
.nav-toggle span{ width:24px; height:1.5px; background: var(--gold); transition: transform .3s, opacity .3s; }
.lang-toggle-mobile{ display:none; }

@media (max-width: 1260px){
  .nav-links{
    position: fixed; top:0; right:0; height:100vh; height:100dvh; width: min(78vw, 340px);
    background: var(--bg-alt); flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 40px; gap: 26px; border-left: 1px solid var(--border);
    /* Cerrado: el panel se queda DENTRO de la pantalla pero recortado y
       oculto (antes se movía fuera de la pantalla a la derecha, y eso hacía la
       página más ancha que el celular: se podía deslizar de lado). Además
       "visibility:hidden" evita que los links ocultos reciban el foco del
       teclado o del lector de pantalla. */
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path .45s var(--ease), visibility 0s linear .45s;
  }
  .nav-links.is-open{
    clip-path: inset(0); visibility: visible;
    transition: clip-path .45s var(--ease), visibility 0s;
  }
  .nav-links a{ font-size:1rem; }
  .nav-toggle{ display:flex; }
  .nav-cta .btn-outline{ display:none; }
  .nav-cta #lang-toggle{ display:none; }
  .lang-toggle-mobile{ display:inline-block; margin-top:6px; cursor:pointer; }
}

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 100vh; min-height: 100dvh; display:flex; flex-direction:column;
  justify-content:center; align-items:stretch;
  padding-top: 150px; padding-bottom: 50px; overflow:hidden; gap: 60px;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(10,10,13,.80) 0%, rgba(10,10,13,.52) 28%, rgba(10,10,13,.58) 62%, var(--bg) 100%),
    linear-gradient(100deg, rgba(10,10,13,.85) 0%, rgba(10,10,13,.42) 52%, rgba(10,10,13,.35) 100%),
    url("../img/hero-bg.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center 30%;
  background-repeat: no-repeat;
}
.hero-bg video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity: .34; mix-blend-mode: luminosity;
}
@media (max-width: 680px){
  .hero-bg video{ display:none; }
}
.hero-noise{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(rgba(212,175,55,.08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.hero-content{ position:relative; z-index:2; max-width: 800px; }
.hero-content h1{ font-size: clamp(2.8rem, 6vw, 5rem); line-height:1.04; }
.hero-content p.lead{ font-size: 1.2rem; max-width: 540px; margin-bottom: 2.2em; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom: 44px; }

.hero-stats{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 620px;
}
.stat{
  border:1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 14px;
  background: rgba(255,255,255,.02); min-height: 112px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.stat b{
  display:block; font-family:'Playfair Display',serif; font-size: 2rem; font-weight:700;
  color: var(--gold); margin-bottom:6px; line-height:1; white-space:nowrap;
}
.stat > span{ font-size:.72rem; letter-spacing:.5px; color: var(--text-dim); text-transform:uppercase; line-height:1.3; display:block; }

.scroll-cue{
  position:relative; z-index:2; align-self:center;
  display:flex; flex-direction:column; align-items:center; gap:8px; color: var(--text-dim);
  font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:36px; background: linear-gradient(var(--gold), transparent); animation: scrollcue 1.8s infinite; }
@keyframes scrollcue{ 0%{opacity:0; transform:scaleY(0);} 40%{opacity:1; transform:scaleY(1);} 100%{opacity:0; transform:scaleY(1);} }

@media (max-width: 680px){
  .hero-stats{ grid-template-columns: repeat(3,1fr); gap: 10px; }
  .stat{ padding: 14px 8px; min-height: 96px; }
  .stat b{ font-size: 1.6rem; }
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{ opacity:0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.22s; }
.reveal-delay-3{ transition-delay:.34s; }

/* ============ COMO FUNCIONA ============ */
.como-section{ position:relative; overflow:hidden; }
.como-bg-photo{
  position:absolute; inset:0; z-index:0;
  background: url("../img/como-bg.jpg") center 50% / cover no-repeat;
}
.como-bg-photo.reveal{ transform:none; transition: opacity 1.6s ease; }
.como-bg-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,10,13,.88) 0%, rgba(10,10,13,.94) 55%, var(--bg) 100%);
}
.como-section .container{ position:relative; z-index:2; }

.como-head{ display:flex; flex-direction:column; align-items:center; }
.como-icon{
  width:54px; height:54px; border-radius:50%; flex:none;
  border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
}
.como-line{ width:1px; height:30px; background: linear-gradient(var(--gold-dim), transparent); }
.como-rule{ width:100%; max-width:460px; height:1px; background: var(--border); margin: 22px 0; }
.como-head .eyebrow{ margin-bottom:10px; }

/* ---------- Pasos (tarjetas con ícono, 3 pasos) ---------- */
.how-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how-step{
  position:relative; text-align:center;
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 42px 30px 36px;
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.how-step:hover{ transform: translateY(-8px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.how-step__num{
  position:absolute; top:20px; right:26px;
  font-family:'Playfair Display',serif; font-size:2.6rem; color: var(--gold); opacity:.14; line-height:1;
  user-select:none;
}
.how-step__icon{
  width:64px; height:64px; border-radius:50%; margin: 0 auto;
  border:1px solid var(--border-strong); background: rgba(212,175,55,.06);
  display:flex; align-items:center; justify-content:center; color: var(--gold);
}
.how-step__bar{ display:block; width:30px; height:2px; background: var(--gold); margin: 18px auto 16px; }
.how-step__title{ font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:600; color:#fff; margin-bottom:10px; }
.how-step__desc{ font-size:.88rem; line-height:1.6; color: var(--text-muted); }

@media (max-width: 760px){
  .how-steps{ grid-template-columns: 1fr; }
}

/* ---------- Bloque de confianza (cifras, entre el hero y "Cómo funciona") ---------- */
.trust-band{ background: var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 46px 0; }
.trust-item{ text-align:center; }
.trust-number{ font-family:'Playfair Display',serif; font-size:2.3rem; color: var(--gold); line-height:1; margin-bottom:10px; }
.trust-label{ font-size:.8rem; line-height:1.5; color: var(--text-muted); max-width:220px; margin:0 auto; }

@media (max-width: 760px){
  .trust-grid{ grid-template-columns: repeat(2, 1fr); gap: 34px 20px; padding: 38px 0; }
  .trust-number{ font-size:1.9rem; }
}

/* ============ SERVICIOS ============ */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-card{
  background: linear-gradient(180deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 38px 32px; position:relative; overflow:hidden;
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.service-card:hover{ transform: translateY(-8px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.service-icon{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px; color: var(--gold);
}
.service-price{ margin: 10px 0 20px; }
.service-price .price-line{ display:block; font-family:'Playfair Display',serif; font-size: 1.6rem; color: var(--gold); line-height:1.35; }
.service-price .price-suffix{ font-size:.9rem; color: var(--text-dim); font-family:'Jost',sans-serif; }
.service-price .price-regular{ font-size: 1.05rem; color: var(--text-muted); margin-bottom: 6px; }
.service-price .price-member-label{ display:block; font-size:.66rem; color: var(--gold-dim); text-transform:uppercase; letter-spacing:1px; font-family:'Jost',sans-serif; text-decoration:none; margin-bottom:2px; }
.scope-toggle{
  margin-top: 18px; font-size: .8rem; letter-spacing:.5px; color: var(--gold-dim);
  display:flex; align-items:center; gap:6px; user-select:none;
}
.scope{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease); }
.scope.is-open{ max-height: 900px; }
.scope-cols{ display:grid; grid-template-columns:1fr; gap: 16px; padding-top: 18px; }
.scope-cols h4{ font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.scope-cols .yes h4{ color: var(--gold); }
.scope-cols .no h4{ color: var(--text-dim); }
.scope-cols li{ font-size:.86rem; color: var(--text-muted); padding: 4px 0 4px 18px; position:relative; }
.scope-cols .yes li::before{ content:'✓'; position:absolute; left:0; color: var(--gold); }
.scope-cols .no li::before{ content:'—'; position:absolute; left:0; color: var(--text-dim); }

/* ---------- Desglose de precios por tamaño dentro del "scope" ---------- */
.scope-tiers{ padding-top: 18px; }
.scope-tiers h4{ font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; color: var(--gold); }
.scope-tiers ul{ display:flex; flex-direction:column; gap:8px; }
.scope-tiers li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 12px; border:1px solid var(--border); border-radius: 8px;
}
.tier-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tier-name{ font-size:.86rem; color: var(--text); font-weight:500; }
.tier-detail{ font-size:.72rem; color: var(--text-dim); }
.tier-price{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; white-space:nowrap; flex-shrink:0; }
.tier-price-main{ font-family:'Playfair Display',serif; font-size:1rem; color: var(--gold); }
.tier-price-member{ font-size:.68rem; color: var(--gold-dim); }
.tier-note{ font-size:.74rem; color: var(--text-dim); margin-top:12px; line-height:1.5; }
.tier-note--top{ margin-top:0; padding-top:18px; }

/* ---------- CTA debajo de la grilla de Servicios ---------- */
.services-cta{
  margin-top: 48px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:16px;
}
.services-cta p{ font-family:'Playfair Display',serif; font-size:1.3rem; color: var(--text); }

/* ---------- Servicios puntuales (limpieza profunda / mudanza) ---------- */
.services-special{ margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--border); }
.services-special__head{ max-width: 640px; margin-bottom: 28px; }
.services-special__head h3{
  font-family:'Playfair Display',serif; font-size: 1.7rem; color: var(--text);
  margin: 6px 0 10px;
}
.services-special__head p{ font-size:.92rem; color: var(--text-muted); line-height:1.6; }
.services-special__grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

@media (max-width: 940px){
  .services-grid{ grid-template-columns: 1fr; }
  .services-special__grid{ grid-template-columns: 1fr; }
}

.service-badge-line{
  font-size:.8rem; color: var(--gold-light, var(--gold)); line-height:1.5;
  background: rgba(212,175,55,.08); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 0 0 14px;
}

/* ---------- Selector de modalidad en el cotizador ---------- */
.q-tiles--modalidad{ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------- Tarjeta de servicio con video de fondo (Alfombra) ---------- */
.service-card--video{ padding: 0; }
.service-card__bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.service-card__bg-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,10,13,.40) 0%, rgba(10,10,13,.20) 38%, rgba(10,10,13,.58) 72%, rgba(10,10,13,.82) 100%);
}
.service-card__content{ position:relative; z-index:2; padding: 38px 32px; }
/* El badge "Reservar" flota anclado abajo a la derecha de toda la tarjeta
   (para quedar siempre sobre el video, sin importar cuánto crezca el
   contenido). Le reservamos espacio abajo para que nunca tape el botón
   "Ver alcance del servicio", que es lo último del contenido normal. */
.service-card--video .service-card__content{ padding-bottom: 76px; }
/* Texto legible sin recuadros — solo una sombra fuerte y bien pegada a la
   letra (no un halo difuso), que funciona sobre cualquier parte del video,
   clara u oscura, sin tapar el video con cajas oscuras. */
.service-card--video .service-card__content h3,
.service-card--video .service-card__content .price-line,
.service-card--video .service-card__content p{
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.75);
}
.service-card--video .service-card__content p{ color: var(--text); }
.service-card--video .price-member-label,
.service-card--video .price-suffix{ color: var(--gold-light); }
.service-card--video .price-member-label{ font-weight:600; }
.service-card--video .price-regular{
  color: var(--text); text-decoration-color: var(--text-muted); font-weight:500;
}
.service-card--video .scope.is-open{
  background: rgba(10,10,13,.92); border-radius: var(--radius-sm); margin-top:10px; padding: 2px 16px 16px;
}
/* Botón "Reservar" en la esquina del video — lleva directo al cotizador. */
.service-card__brand-badge{
  position:absolute; right:12px; bottom:12px; z-index:3; white-space:nowrap;
  padding:8px 16px; border-radius:999px; background: rgba(10,10,13,.78);
  border:1.5px solid var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,.35);
  font-family:'Jost',sans-serif; font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--gold-light); text-decoration:none; cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.service-card__brand-badge:hover{
  background: var(--gold); color:#14140f; transform: translateY(-2px);
}

/* ============ MEMBRESIAS ============ */
.plans-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items:stretch; }
.plan-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 40px 30px; display:flex; flex-direction:column; position:relative;
  transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.plan-card:hover{ transform: translateY(-10px) scale(1.015); border-color: var(--border-strong); box-shadow: var(--shadow); }
.plan-card.featured{ border-color: var(--gold); background: linear-gradient(180deg, #1c1a12, var(--surface)); }
.plan-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--gold); color:#14140f; font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase;
  padding: 6px 16px; border-radius: 999px; font-weight:600;
}
.plan-tier{ font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color: var(--gold-dim); margin-bottom: 6px; }
.plan-price{ font-family:'Playfair Display',serif; font-size: 2.6rem; color: var(--gold); margin: 6px 0; }
.plan-price sup{ font-size: 1rem; top:-1em; }
.plan-price small{ font-size: .95rem; color: var(--text-dim); font-family:'Jost',sans-serif; }
.plan-price-note{ font-size:.76rem; color: var(--text-dim); margin: -2px 0 10px; font-family:'Jost',sans-serif; }
.plan-save{ font-size:.8rem; color: var(--gold-dim); margin-bottom: 22px; }

/* ---------- Esencial: pestañas para elegir el servicio fijo (apto/casa/carro/alfombra) ---------- */
.plan-toggle{ display:flex; gap:6px; margin-bottom: 16px; }
.plan-toggle__btn{
  flex:1 1 0; min-width:0; padding:8px 4px; border-radius:999px;
  border:1px solid var(--border-strong); background:transparent; color: var(--text-dim);
  font-family:'Jost',sans-serif; font-size:.66rem; letter-spacing:.3px; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; transition: background .3s, color .3s, border-color .3s;
}
.plan-toggle__btn:hover{ border-color: var(--gold-dim); color: var(--text); }
.plan-toggle__btn.is-active{ background: var(--gold); border-color: var(--gold); color:#14140f; font-weight:600; }
.freq-badge{
  display:inline-block; padding:3px 10px; border-radius:999px;
  background: rgba(212,175,55,.12); border:1px solid rgba(212,175,55,.35);
  color: var(--gold-dim); font-size:.68rem; letter-spacing:.5px; text-transform:uppercase;
}
.plan-features{ margin: 0 0 30px; flex:1; }
.plan-features li{ padding: 9px 0; border-top: 1px solid var(--border); font-size: .9rem; color: var(--text-muted); display:flex; gap:10px; }
.plan-features li:first-child{ border-top:none; }
.plan-features li::before{ content:'✓'; color: var(--gold); font-weight:600; }

@media (max-width: 940px){ .plans-grid{ grid-template-columns: 1fr; } .plan-card.featured{ order:-1; } }

/* ============ COTIZADOR ============ */
.quote-wrap{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items:flex-start;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 44px;
}
.q-group{ margin-bottom: 30px; }
.q-label{ display:block; font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color: var(--gold-dim); margin-bottom: 14px; }
.q-select{
  width:100%; appearance:none; -webkit-appearance:none;
  background: var(--bg-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23d4af37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  border:1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 40px 13px 16px;
  color: var(--text); font-family:'Jost',sans-serif; font-size: 1rem; cursor:pointer;
  transition: border-color .3s;
}
.q-select:hover, .q-select:focus{ border-color: var(--gold-dim); outline:none; }
.q-tiles{ display:grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; }
.q-tile{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 14px; text-align:center;
  background: var(--bg-alt); transition: border-color .35s, background .35s, transform .35s, box-shadow .35s;
}
.q-tile:hover{ transform: translateY(-3px); border-color: var(--gold-dim); box-shadow: 0 10px 26px rgba(212,175,55,.14); }
.q-tile input{ display:none; }
.q-tile > span{ position:relative; z-index:1; display:block; }
.q-tile .t-name{ display:block; font-size:.88rem; color: var(--text); margin-bottom:4px; }
.q-tile .t-price{ display:block; font-size:.76rem; color: var(--gold-dim); }
.q-tile input:checked + span{ color: var(--gold); }

/* ---------- Casilla seleccionada: brillo suave "respirando", sin partículas
   ni seguimiento del mouse — un solo detalle discreto que llama la atención
   sin distraer, y funciona igual en celular (no depende de hover/JS). ---------- */
.q-tile:has(input:checked){
  border-color: var(--gold); background: rgba(212,175,55,.09);
  animation: qTileGlow 2.6s ease-in-out infinite;
}
.q-tile:has(input:checked)::after{
  content:'✓'; position:absolute; top:8px; right:8px; z-index:1; width:16px; height:16px; border-radius:50%;
  background: var(--gold); color:#14140f;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; line-height:1;
}
@keyframes qTileGlow{
  0%,100%{ box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 0 0 rgba(212,175,55,0); }
  50%{ box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(212,175,55,.35); }
}
@media (prefers-reduced-motion: reduce){
  .q-tile:has(input:checked){ animation:none; box-shadow: 0 0 0 1px var(--gold); }
}

.q-extras{ display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 10px; }
.q-check{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: .85rem; color: var(--text-muted); transition: border-color .3s, background .3s;
}
.q-check:has(input:checked){ border-color: var(--gold); background: rgba(212,175,55,.07); color: var(--text); }
.q-check input{ accent-color: var(--gold); width:16px; height:16px; }

.q-upload{
  display:flex; align-items:center; gap:16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 22px;
  background: rgba(212,175,55,.04);
  cursor:pointer; transition: border-color .3s, background .3s;
}
.q-upload:hover{ border-color: var(--border-strong); background: rgba(212,175,55,.08); }
.q-upload input{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.q-upload-icon{
  flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; color: var(--gold);
}
.q-upload-copy{ display:flex; flex-direction:column; gap:3px; text-align:left; }
.q-upload-copy b{ font-family:'Jost',sans-serif; font-weight:500; font-size:.92rem; color: var(--text); }
.q-upload-copy small{ font-size:.78rem; color: var(--text-dim); line-height:1.5; }
.q-thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.q-thumbs img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }

.q-summary{
  position: sticky; top: 110px; background: var(--bg-alt); border:1px solid var(--border-strong);
  border-radius: var(--radius); padding: 32px; align-self:flex-start;
}
.q-summary h3{ margin-bottom: 4px; }
.q-price-block{ margin: 18px 0 6px; }
.q-price-tag{ display:block; font-family:'Jost',sans-serif; font-size:.68rem; letter-spacing:1.5px; text-transform:uppercase; color: var(--text-dim); margin-bottom:4px; }
.q-total{ font-family:'Playfair Display',serif; font-size: 2rem; color: var(--gold); transition: opacity .25s, font-size .25s, color .25s; }
.q-total small{ font-size:1.1rem; color:var(--text-dim); font-family:'Jost',sans-serif; }
.q-total.is-discounted{ font-size: 1.6rem; color: var(--text-muted); }
.q-price-member{ display:none; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.q-price-member.show{ display:block; }
.q-price-member .q-price-tag{ color: var(--gold-dim); }
.q-price-member #q-member-amount{ font-family:'Playfair Display',serif; font-size: 2.6rem; font-weight:600; color: var(--gold); }
.q-breakdown{ margin: 20px 0; padding-top:18px; border-top:1px solid var(--border); }
.q-breakdown li{ display:flex; justify-content:space-between; font-size:.85rem; color: var(--text-muted); padding: 6px 0; }
.q-note{ font-size:.78rem; color: var(--text-dim); margin-top: 16px; }
.q-once-badge[hidden]{ display:none; }
.q-once-badge{
  display:inline-block; margin-top: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(212,175,55,.12); border: 1px solid var(--gold-dim);
  font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.5px; text-transform:uppercase;
  color: var(--gold-light, var(--gold)); font-weight:600;
}
.q-member-hint{
  margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(212,175,55,.08);
  border:1px solid var(--border); font-size:.82rem; color: var(--gold-dim); display:none;
}
.q-member-hint.show{ display:block; }

@media (max-width: 900px){
  .quote-wrap{ grid-template-columns: 1fr; padding: 28px; }
  .q-summary{ position:static; }
}

/* ---------- Barra de precio fija (solo móvil): mantiene el precio a la
   vista mientras el visitante llena el cotizador, sin taparle el contenido
   (se oculta sola cuando el resumen real ya está en pantalla). ---------- */
.q-sticky-bar{
  display:none; position: fixed; left:0; right:0; bottom:0; z-index: 900;
  align-items:center; justify-content:space-between; gap:14px;
  background: rgba(10,10,13,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-strong);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.35);
}
.q-sticky-bar[hidden]{ display:none; }
.q-sticky-bar.show{ display:flex; }
.q-sticky-bar__price{ display:flex; flex-direction:column; min-width:0; }
.q-sticky-bar__label{ font-size:.62rem; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim); }
.q-sticky-bar__amount{ font-family:'Playfair Display',serif; font-size:1.3rem; color: var(--gold); white-space:nowrap; }
.q-sticky-bar__btn{
  flex-shrink:0; padding:11px 20px; border-radius:999px; background: var(--gold); color:#14140f;
  font-family:'Jost',sans-serif; font-size:.76rem; letter-spacing:1px; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
}
@media (min-width: 901px){ .q-sticky-bar{ display:none !important; } }

/* ============ POR QUE ELEGIRNOS ============ */
.why-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.why-card{
  display:flex; gap:18px; padding: 26px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  transition: transform .4s var(--ease), border-color .4s;
}
.why-card:hover{ transform: translateY(-5px); border-color: var(--border-strong); }
.why-icon{ flex:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.privacy-note{
  margin-top: 40px; padding: 26px 30px; border-radius: var(--radius); border:1px dashed var(--border-strong);
  background: rgba(212,175,55,.05); font-size:.9rem; color: var(--text-muted); display:flex; gap:16px; align-items:flex-start;
}
@media (max-width: 800px){ .why-grid{ grid-template-columns: 1fr; } }

/* ============ TESTIMONIOS ============ */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.testi-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 30px;
  transition: transform .4s var(--ease), border-color .4s;
}
.testi-card:hover{ transform: translateY(-6px); border-color: var(--border-strong); }
.testi-stars{ color: var(--gold); letter-spacing:3px; margin-bottom: 14px; }
.testi-name{ margin-top: 18px; font-size:.85rem; color: var(--gold-dim); letter-spacing:.5px; }
@media (max-width: 940px){ .testi-grid{ grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq-list{ max-width: 780px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--border); }
.faq-q{
  width:100%; background:none; border:none; color: var(--text); text-align:left;
  padding: 22px 0; display:flex; justify-content:space-between; align-items:center; gap: 20px;
  font-size: 1.02rem; font-family:'Playfair Display',serif;
}
.faq-q .icon{ color: var(--gold); font-size:1.3rem; transition: transform .35s var(--ease); flex:none; }
.faq-item.is-open .faq-q .icon{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.faq-a p{ padding-bottom: 22px; margin:0; }

/* ============ CONTACTO ============ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 46px; }
.contact-info-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 34px;
  margin-bottom: 20px;
}
.contact-info-card h4{ font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color: var(--gold-dim); margin-bottom:10px; }
.zone-list{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 14px; }
.zone-list li{ font-size:.78rem; padding: 6px 14px; border-radius:999px; border:1px solid var(--border); color: var(--text-muted); }

.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color: var(--gold-dim); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg-alt); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 16px; color: var(--text); font-size: 1rem; transition: border-color .3s;
  /* 16px (1rem) evita el zoom automático de Safari en iPhone al enfocar
     un campo — por debajo de ese tamaño iOS hace zoom in solo, sin avisar. */
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--gold); }
.field textarea{ resize: vertical; min-height: 110px; }
.form-note{ font-size:.78rem; color: var(--text-dim); margin-top:10px; }
.form-success{ display:none; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(212,175,55,.1); border:1px solid var(--border-strong); color: var(--gold-light); font-size:.85rem; margin-top: 14px; }
.form-success.show{ display:block; }
.form-error{ background: rgba(200,60,60,.08); border-color: rgba(200,60,60,.35); color: #c23b3b; }

@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.site-footer{ background: var(--bg-alt); border-top: 1px solid var(--border); padding: 60px 0 28px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer-col--zonas{ grid-column: 1 / -1; margin-top: 6px; padding-top: 26px; border-top: 1px solid var(--border); }
.footer-zonas{ font-size:.82rem; color: var(--text-muted); line-height:1.7; max-width: 640px; }
.footer-brand img{ height: 40px; margin-bottom: 14px; }
.footer-brand p{ max-width: 280px; font-size:.85rem; }
.footer-col h5{ font-size:.75rem; letter-spacing:1.5px; text-transform:uppercase; color: var(--gold-dim); margin-bottom: 18px; }
.footer-col li{ margin-bottom: 10px; }
.footer-col a{ font-size:.86rem; color: var(--text-muted); transition: color .3s; }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top: 26px; border-top: 1px solid var(--border); font-size:.78rem; color: var(--text-dim);
}
.footer-admin-link{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; letter-spacing:.5px;
  color: var(--text-dim); opacity:.6; transition: opacity .3s, color .3s;
}
.footer-admin-link:hover{ opacity:1; color: var(--gold-dim); }
@media (max-width: 800px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }
/* En móvil el link "Portal" (admin) queda al final de la última fila del
   footer, justo donde flota el botón de WhatsApp — le damos aire abajo
   para que el botón nunca tape el link al llegar al final de la página. */
@media (max-width: 640px){
  .site-footer{ padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position: fixed; z-index: 900;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  right: calc(26px + env(safe-area-inset-right, 0px));
  width: 58px; height:58px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center; color:#14140f;
  box-shadow: 0 12px 30px rgba(212,175,55,.35);
  transition: transform .3s var(--ease);
}
.wa-float:hover{ transform: scale(1.08); }
/* Cuando la barra de precio fija del cotizador está visible (móvil), subimos
   el botón de WhatsApp para que no quede tapado por la barra ni la tape. */
.wa-float.wa-float--raised{
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transition: bottom .3s var(--ease);
}

/* Utility */
.count{ transition: none; }
::selection{ background: var(--gold); color:#14140f; }

/* ============ Celulares angostos (≤480px): nada debe ser más ancho que la pantalla ============
   Antes el botón principal del inicio ("Cotiza tu limpieza al instante") no podía
   partir su texto en dos líneas y medía más que la pantalla, y las casillas del
   cotizador no se encogían: la página quedaba ~23px más ancha que el teléfono
   (se podía deslizar de lado y en iPhone se veía un poco "alejada"). */
@media (max-width: 480px){
  .btn{ white-space: normal; text-align: center; padding-left: 22px; padding-right: 22px; letter-spacing: 1px; }
  .quote-wrap{ grid-template-columns: minmax(0, 1fr); }
  .q-main{ min-width: 0; }
  .q-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El botón flotante de WhatsApp/llamada queda justo al final de la primera pantalla:
   dejamos aire a la derecha del aviso de SMS del inicio para que no lo tape. */
@media (max-width: 480px){
  #hero-sms-cta{ padding-right: 68px; }
}