/* ===========================================================
   LA HERRADURA — CSS COMPLETO (Inmersivo + Estructura Corregida)
   =========================================================== */

/* ===========================================================
   1. VARIABLES Y RESETEO
   =========================================================== */
:root {
  --bg-deep: #0a0f0c; 
  --bg-glass: rgba(19, 32, 26, 0.4);
  --clay: #bd5f30;
  --clay-soft: #e08a54;
  --gold: #e3b158;
  --stone: #9c9484;
  --cream: #f2ead9;
  --forest: #24402c;
  --line: rgba(242,234,217,0.1);
  --serif: 'Fraunces', serif;
  --sans: 'Space Grotesk', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: auto; }

body {
  background-color: var(--bg-deep);
  color: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
  position: relative;
}

::selection { background: var(--gold); color: var(--bg-deep); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ===========================================================
   2. CURSOR MAGNÉTICO PERSONALIZADO
   =========================================================== */
body.has-custom-cursor * { cursor: none !important; }

/* Excepción: inputs y textareas deben mantener el cursor de texto */
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor select {
  cursor: text !important;
}

#custom-cursor, #custom-cursor-follower {
  position: fixed; 
  top: 0; left: 0; 
  transform: translate(-50%, -50%); 
  pointer-events: none; 
  z-index: 10000;
  display: none;
}
body.has-custom-cursor #custom-cursor, 
body.has-custom-cursor #custom-cursor-follower {
  display: block;
}

#custom-cursor {
  width: 8px; height: 8px;
  background: var(--gold); border-radius: 50%;
  transition: width 0.2s, height 0.2s, background 0.2s;
}
#custom-cursor-follower {
  width: 30px; height: 30px;
  border: 1px solid rgba(227, 177, 88, 0.5); border-radius: 50%;
  z-index: 9999;
  transition: width 0.3s, height 0.3s, border-color 0.3s;
}
body.hovering #custom-cursor { width: 40px; height: 40px; background: rgba(227, 177, 88, 0.1); backdrop-filter: blur(2px); }
body.hovering #custom-cursor-follower { width: 60px; height: 60px; border-color: transparent; }

/* ===========================================================
   3. WEBGL BACKGROUND Y GLASSMORPHISM
   =========================================================== */
#webgl {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at center, #0d1811 0%, #050a07 100%);
}

section, header, footer { position: relative; z-index: 2; }

.glass-section {
  background: linear-gradient(180deg, rgba(10, 15, 12, 0.4) 0%, rgba(36, 64, 44, 0.15) 50%, rgba(10, 15, 12, 0.9) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.03);
}

.glass-card {
  background: var(--bg-glass); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* ===========================================================
   4. CABECERA (HEADER) Y NAVEGACIÓN
   =========================================================== */
#siteHeader, header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 3vw, 64px); /* Reducción de padding lateral */
  z-index: 900;
  background: transparent;
  transition: background 0.4s ease;
}

#siteHeader.scrolled, header.scrolled {
  background: rgba(10, 15, 12, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo-word {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--gold);
  text-decoration: none;
  z-index: 1000;
  letter-spacing: 0.02em;
}

.main-nav ul {
display: flex;
  gap: 24px; /* Ajustado para ganar espacio */
  align-items: center;
  list-style: none;
}

.main-nav a {
 font-size: 0.75rem; /* Ajustado ligeramente */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream);
}

.main-nav a:hover, .main-nav a.current {
  color: var(--gold);
}

/* Botón CTA — ya no vive dentro de .main-nav (ver sección 16, .floating-cta
   al final del archivo). Por eso ahora trae su propia tipografía: antes la
   heredaba gratis de ".main-nav a". */
.nav-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--gold);
  padding: 8px 16px;
  border-radius: 4px;
  color: #000000;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--gold);
  color: var(--bg-deep);
}

/* Menú Móvil & Hamburguesa */
#burgerBtn, .burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  flex-direction: column;
  gap: 6px;
}
.burger span {
  display: block; width: 30px; height: 2px;
  background-color: var(--cream); transition: 0.3s;
}

#mobileNav {
  position: fixed;
  top: 0;
  right: -100%; 
  width: 100%;
  height: 100vh;
  background: var(--bg-deep);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
#mobileNav.open { right: 0; }
#mobileNav ul { display: flex; flex-direction: column; gap: 35px; text-align: center; }
#mobileNav a { font-family: var(--serif); font-size: 2.2rem; color: var(--cream); font-style: italic; }
#mobileNav a:hover { color: var(--gold); }
.close-x {
  position: absolute; top: 30px; right: clamp(20px, 5vw, 64px);
  background: none; border: none; color: var(--stone); font-size: 0.8rem;
  font-family: var(--mono); cursor: pointer; text-transform: uppercase;
  letter-spacing: 0.1em; transition: color 0.3s ease;
}
.close-x:hover { color: var(--gold); }

@media (max-width: 900px) {
  .main-nav { display: flex;
  align-items: center; }
  #burgerBtn, .burger { display: flex; }
}

/* ===========================================================
   5. SECCIONES GENÉRICAS Y TIPOGRAFÍA
   =========================================================== */
section { padding: 100px clamp(20px,5vw,64px); }
.eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: .75rem; letter-spacing: .15em; color: var(--gold); text-transform: uppercase; margin-bottom: 20px;}
.eyebrow .rule { width: 40px; height: 1px; background: var(--gold); }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1.1; margin-bottom: 20px; }
h2 em { font-style: italic; color: var(--clay-soft); }
.lead { color: var(--stone); font-size: 1.05rem; line-height: 1.7; max-width: 60ch; margin-bottom: 30px; }

/* Botones Globales */
.btn-primary { background: var(--gold); color: var(--bg-deep); padding: 15px 30px; font-weight: 600; font-size: .9rem; display: inline-block; transition: 0.3s; border-radius: 4px; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(227, 177, 88, 0.3); }
.btn-outline { border: 1px solid var(--gold); color: #24402c; padding: 15px 30px; font-weight: 500; font-size: .9rem; display: inline-block; transition: 0.3s; border-radius: 4px; }
.btn-outline:hover { background: var(--gold); color: var(--bg-deep); }
.btn-whatsapp { border: 1px solid #25D366; color: #24402c; padding: 15px 30px; font-weight: 500; font-size: .9rem; display: inline-block; transition: 0.3s; border-radius: 4px; }
.btn-whatsapp:hover { background: #25D366; color: var(--bg-deep); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(227, 177, 88, 0.3); }

/* ===========================================================
   6. HERO (HOME PAGE)
   =========================================================== */
.hero { height: 100vh; display: flex; align-items: flex-end; padding-bottom: 80px; }
.hero-content { padding: 0 clamp(20px,6vw,72px); width: 100%; display: flex; flex-direction: column; gap: 26px; }
.hero-layers { position: absolute; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
.hero-layer { position:absolute; width:100%; height:100%; background-size:cover; background-position:center; }
.hero-strip { position: absolute; top: 120px; left: clamp(20px,6vw,72px); display: flex; gap: 30px; font-family: var(--mono); font-size: .75rem; color: var(--stone); z-index: 10; }
.hero-strip a:hover { color: var(--gold); }
.eyebrow-row { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
.eyebrow-row .rule { width: 40px; height: 1px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: 0.95; text-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.hero h1 em { font-style: italic; color: var(--clay-soft); }
.hero-sub { max-width: 46ch; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.8); text-shadow: 0 2px 4px rgba(0,0,0,0.9); }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 10px; flex-wrap: wrap; }
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; color: var(--stone); }
.scroll-hint .stick { width: 1px; height: 40px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.scroll-hint .stick::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--gold); animation: stick 1.8s ease-in-out infinite; }
@keyframes stick { 0%{top:-100%;} 60%,100%{top:100%;} }
.page-hero { padding-top: 180px; padding-bottom: 80px; display: flex; align-items: flex-end; position: relative; }
.page-hero-content { position: relative; z-index: 2; max-width: 800px; }
.breadcrumb { font-family: var(--mono); font-size: 0.8rem; color: var(--stone); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.1em; }
.breadcrumb a { color: var(--gold); }
.ph-bg { position: absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:0.15; z-index:0; }

/* ===========================================================
   7. SECCIÓN NOSOTROS Y ESTADÍSTICAS
   =========================================================== */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.stats { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.stat-row { width: 100%; }
.stat-label { display: block; font-size: 0.9rem; margin-bottom: 8px; color: var(--cream); }
.stat-pct { float: right; font-family: var(--mono); color: var(--gold); }
.stat-track { width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; clear: both; }
.stat-fill { height: 100%; background: var(--gold); width: 0; transition: width 1.5s ease; }
.about-panel { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 40px; text-align: center; border-radius: 4px; }
.counter { font-family: var(--serif); font-size: 5rem; color: var(--gold); line-height: 1; margin-bottom: 10px; }
.counter-label { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--stone); margin-bottom: 30px; }
.panel-photo img { border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }

/* Grid de Datos (Página Nosotros) */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 50px; margin-bottom: 50px; }
.fact-cell { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); padding: 35px 30px; border-radius: 4px; transition: border-color 0.3s ease, transform 0.3s ease; text-align: center; }
.fact-cell:hover { border-color: rgba(227, 177, 88, 0.4); transform: translateY(-5px); }
.f-num { font-family: var(--serif); font-size: 2.5rem; color: var(--gold); margin-bottom: 10px; }
.f-label { color: var(--stone); font-size: 0.95rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }

/* Fila de Fotos (Página Nosotros) */
.photo-row { display: flex; gap: 20px; margin-top: 60px; margin-bottom: 60px; align-items: stretch; }
.photo-row img { flex: 1; width: 100%; height: 350px; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); transition: filter 0.3s ease, transform 0.3s ease; }
.photo-row img:hover { filter: brightness(1.1); transform: scale(1.02); }
@media (max-width: 900px) { 
  .fact-grid { grid-template-columns: 1fr; gap: 30px; }
  .photo-row { flex-direction: column; gap: 30px; }
  .photo-row img { height: auto; min-height: 250px; }
}

/* ===========================================================
   8. BENEFICIOS Y TARJETAS 3D
   =========================================================== */
.cards-wrap { margin-top: 50px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; perspective: 1200px; }
.tilt-card { 
  padding: 45px 35px; display: flex; flex-direction: column; 
  transition: transform 0.1s linear, border-color 0.3s ease;
  transform-style: preserve-3d;
}
.tilt-card > * { transform: translateZ(50px); transition: transform 0.3s ease; }
.tilt-card:hover > * { transform: translateZ(70px); }
.tilt-card:hover { border-color: rgba(227, 177, 88, 0.6); }
.tilt-card .num { font-family: var(--mono); color: var(--gold); font-size: .85rem; letter-spacing: .1em; margin-bottom: 15px; display: block; }
.tilt-card h3 { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 15px; color: #fff; }
.tilt-card p { color: rgba(255,255,255,0.7); font-size: .95rem; line-height: 1.6; margin-bottom: 20px; }
.tilt-card ul { margin-bottom: 30px; display: flex; flex-direction: column; gap: 10px; }
.tilt-card li { font-size: .88rem; color: var(--cream); padding-left: 20px; position: relative; }
.tilt-card li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 1px; background: var(--gold); box-shadow: 0 0 5px var(--gold); }
.tilt-card .card-link { margin-top: auto; font-size: .85rem; color: var(--gold); font-weight: 600; padding-top: 15px; }

/* ===========================================================
   9. VISIÓN INTEGRAL Y GALERÍA STACK
   =========================================================== */
.transform-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 40px;}
@media (max-width: 900px) { .transform-wrap { grid-template-columns: 1fr; } }
.feature-list { display: flex; flex-direction: column; gap: 30px; }
.feature-item { display: flex; gap: 20px; align-items: flex-start; }
.fi-num { font-family: var(--mono); color: var(--gold); font-size: 1.2rem; margin-top: 3px; }
.feature-item h4 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
.feature-item p { color: var(--stone); font-size: 0.95rem; line-height: 1.5; }

.gallery-stack { position: relative; height: 450px; perspective: 1500px; transform-style: preserve-3d; }
.gallery-stack img { position: absolute; border-radius: 4px; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform;}
.g1 { width: 65%; height: 75%; top: 0; left: 0; z-index: 3; }
.g2 { width: 50%; height: 55%; bottom: 0; right: 0; z-index: 2; }
.g3 { width: 40%; height: 40%; top: 10%; right: 5%; z-index: 4; border-color: rgba(227, 177, 88, 0.4); }

/* ===========================================================
   10. PROCESO DE INVERSIÓN Y TOPOGRAFÍA
   =========================================================== */
.process { padding-bottom: 0; }
.process-pin { position: relative; min-height: 100vh; display: flex; align-items: center; }
.process-grid { display: grid; grid-template-columns: 120px 1fr; gap: 50px; width: 100%; }
.topo { position: relative; }
.topo svg { width: 100%; height: 600px; overflow: visible; }
.process-steps { display: grid; gap: 0; }
.p-step { display: grid; grid-template-columns: 80px 1fr; gap: 25px; padding: 30px 0; opacity: 0.15; transform: translateX(30px); transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.p-step.active { opacity: 1; transform: translateX(0); border-left: 2px solid var(--gold); padding-left: 20px; }
.p-step.past { opacity: 0.4; transform: translateX(0); }
.p-step .p-num { font-family: var(--serif); font-style: italic; font-size: 2.2rem; color: var(--gold); }
.p-step h4 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
@media (max-width: 900px) { .process-grid { grid-template-columns: 60px 1fr; gap: 20px; } .p-step { grid-template-columns: 50px 1fr; padding: 15px 0;} .p-step .p-num { font-size: 1.5rem; } }

/* ===========================================================
   11. BANDA CTA (CALL TO ACTION)
   =========================================================== */
.cta-band {
  text-align: center; padding: 120px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; margin-top: 60px;
}
.cta-band h2 { margin-bottom: 20px; }
.cta-band .lead { margin: 0 auto 40px auto; max-width: 600px; }
.hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ===========================================================
   12. PÁGINA DE CONTACTO (FORMULARIO Y GRID)
   =========================================================== */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 50px; }
@media (max-width: 900px) { .contact-wrap { grid-template-columns: 1fr; gap: 50px; } }

form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--mono); font-size: 0.85rem; color: var(--gold); letter-spacing: 0.05em; }

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; padding: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--cream); font-family: var(--sans); font-size: 1rem; border-radius: 4px; transition: border-color 0.3s ease, background 0.3s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, 0.06); }
textarea { resize: vertical; min-height: 120px; }

.submit-btn { background: var(--gold); color: var(--bg-deep); padding: 18px 30px; font-family: var(--sans); font-weight: 600; font-size: 1rem; border: none; border-radius: 4px; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; margin-top: 10px; }
.submit-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(227, 177, 88, 0.2); }

.info-block { display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px;}
.info-row { display: flex; flex-direction: column; gap: 6px; }
.il { font-family: var(--mono); font-size: 0.75rem; color: var(--stone); text-transform: uppercase; letter-spacing: 0.1em; }
.iv { font-size: 1.15rem; color: var(--cream); line-height: 1.4; }
.iv a { transition: color 0.3s ease; }
.iv a:hover { color: var(--gold); }
.contact-ctas { display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
.map-embed iframe { width: 100%; height: 300px; border: none; border-radius: 4px; filter: grayscale(100%) invert(90%) contrast(85%); }

/* ===========================================================
   13. PÁGINAS LEGALES (Términos, Privacidad)
   =========================================================== */
.legal-body { max-width: 800px; margin-top: 40px; }
.legal-body h3 { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); margin: 40px 0 20px; }
.legal-body p { color: var(--stone); font-size: 1.05rem; line-height: 1.7; margin-bottom: 20px; }
.legal-body ul { list-style: disc; padding-left: 20px; color: var(--stone); margin-bottom: 20px; }
.legal-body li { margin-bottom: 10px; line-height: 1.6; }
.legal-note { margin-top: 60px; padding: 20px; background: rgba(227, 177, 88, 0.1); border-left: 3px solid var(--gold); color: var(--cream); font-size: 0.9rem; font-family: var(--mono); }

/* ===========================================================
   14. FOOTER
   =========================================================== */
footer { padding: 80px clamp(20px,6vw,72px) 40px; background: #050a07; border-top: 1px solid rgba(255,255,255,0.05); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; position: relative; z-index: 10; }
@media (max-width: 900px) { footer { grid-template-columns: 1fr; gap: 40px;} }
footer .f-logo { font-family: var(--serif); font-style: italic; font-size: 1.8rem; color: var(--gold); margin-bottom: 15px; }
footer p { color: var(--stone); font-size: 0.95rem; line-height: 1.6; max-width: 400px; }
footer h5 { font-family: var(--mono); font-size: 0.85rem; color: var(--cream); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; }
.f-links { display: flex; flex-direction: column; gap: 12px; color: var(--stone); font-size: 0.95rem; }
.f-links a:hover { color: var(--gold); }
.foot-bottom { grid-column: 1/-1; margin-top: 40px; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--mono); font-size: .75rem; color: var(--stone); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.f-legal { display: flex; gap: 20px; }
.f-legal a:hover { color: var(--gold); }

/* ===========================================================
   15. MEJORAS — MICROINTERACCIONES, AIRE, PROFUNDIDAD, LENIS
   =========================================================== */

/* Accesibilidad: respeta "reducir movimiento" del sistema operativo */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001s !important; transition-duration:0.001s !important; }
}

/* Lenis (scroll suave) — clases que su propio lenis.css espera */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-stopped{ overflow:hidden; }

/* Arreglo: los links del menú móvil no tenían espacio entre sí (el CSS
   original apuntaba a "#mobileNav ul", pero el HTML no tiene <ul>) */
#mobileNav{ gap:35px; }

/* Tipografía editorial: más tracking en los textos "eyebrow" */
.eyebrow{ letter-spacing:.2em; }
.eyebrow-row{ letter-spacing:.2em; }

/* Más aire entre secciones y dentro de las tarjetas */
section{ padding:150px clamp(24px,6vw,80px); }
.cta-band{ padding:150px 20px; }
.main-nav ul{ gap:32px; }
.tilt-card{ padding:56px 42px; }
.about-panel{ padding:52px; }
.fact-cell{ padding:44px 36px; }

@media (max-width:900px){
  section{ padding:110px 24px; }
  .cta-band{ padding:100px 20px; }
  .tilt-card{ padding:40px 30px; }
}

/* Sombras difusas — los elementos parecen "flotar" sobre el fondo */
.tilt-card, .about-panel, .fact-cell{ box-shadow:0 30px 60px -25px rgba(0,0,0,.55); }
.panel-photo img, .photo-row img{ box-shadow:0 25px 55px -22px rgba(0,0,0,.55); }
.btn-primary{ box-shadow:0 18px 40px -14px rgba(227,177,88,.35); }

/* Parallax sutil dirigido por scroll — ver [data-parallax] en main.js */
[data-parallax]{ will-change:transform; }

/* Botón primario — brillo diagonal al pasar el mouse */
.btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-20deg); transition:left .65s ease; pointer-events:none;
}
.btn-primary:hover::after{ left:130%; }

/* Botones "outline"/WhatsApp/CTA de nav — barrido de color al pasar el mouse */
.btn-outline, .btn-whatsapp, .nav-cta{
  position:relative; overflow:hidden; isolation:isolate; z-index:1;
  transition:color .45s ease .12s;
}
.btn-outline::before, .btn-whatsapp::before, .nav-cta::before{
  content:''; position:absolute; inset:0; left:-100%; z-index:-1; pointer-events:none;
  transition:left .5s cubic-bezier(.22,.8,.28,1);
}
.btn-outline::before, .nav-cta::before{ background:var(--gold); }
.btn-whatsapp::before{ background:#25D366; }
.btn-outline:hover, .nav-cta:hover{ background:transparent; color:var(--bg-deep); }
.btn-whatsapp:hover{ background:transparent; color:var(--bg-deep); }
.btn-outline:hover::before, .btn-whatsapp:hover::before, .nav-cta:hover::before{ left:0; }

/* Estado de carga al confirmar una acción, p. ej. "Obtenga una cotización" */
.btn-primary.is-loading, .btn-outline.is-loading, .nav-cta.is-loading{
  pointer-events:none; color:transparent !important;
}
.btn-primary.is-loading::before, .btn-outline.is-loading::after, .nav-cta.is-loading::after{
  content:''; position:absolute; width:16px; height:16px; top:50%; left:50%;
  margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,.35); border-top-color:var(--bg-deep);
  border-radius:50%; animation:spin .6s linear infinite; z-index:5;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Proceso de inversión: los pasos ya vistos quedan tenues, no invisibles */
.p-step.past{ opacity:.45; transform:translateX(0); border-left:2px solid transparent; padding-left:0; }

/* Revelado escalonado al hacer scroll (ver main.js) */
.reveal-up{ opacity:0; transform:translateY(28px); }

/* ===========================================================
   16. CTA FLOTANTE — independiente del header
   Antes vivía apretado dentro de .main-nav; ahora es un elemento
   fijo aparte que floating-cta.js muestra/oculta según el scroll.
   Reutiliza el look de .nav-cta (borde dorado + barrido de color)
   y solo le suma posición, aparición y una sombra "elevada".
   Al ser una píldora angosta en la esquina —no una barra— nunca
   tapa contenido; además queda oculta durante el hero (que ya
   tiene su propio CTA) y detrás del menú móvil (z-index menor).
   =========================================================== */
.floating-cta {
  position: fixed;
  right: clamp(20px, 3vw, 40px);
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 850;
  padding: 14px 24px;
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.22,0.8,0.28,1),
              transform 0.5s cubic-bezier(0.22,0.8,0.28,1),
              box-shadow 0.3s ease;
}

/* floating-cta.js agrega/quita esta clase según la posición del scroll */
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.floating-cta:hover {
  box-shadow: 0 22px 46px -16px rgba(227, 177, 88, 0.45);
}

.floating-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  .floating-cta {
    right: 16px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    padding: 12px 18px;
    font-size: 0.68rem;
  }
}