/* ===========================================================================
   estilos.css — Demo Landing Page HTML · V1.07
   Marketing Electrónico · www.marketingelectronico.cl
   ---------------------------------------------------------------------------
   Todo el diseño del sitio. Empieza por la sección "A. VARIABLES GLOBALES":
   ahí se cambian colores, tipografías y medidas de todo el sitio.
   Cada bloque está numerado igual que las secciones del index.html.
   =========================================================================== */
/* =========================================================================
   A. VARIABLES GLOBALES  (cambia aquí colores, tipografías y medidas)
   ========================================================================= */
:root {
  /* --- COLORES: paleta cálida y oscura (piedra, madera, luz cálida) --- */
  --bg:          #0d0c0b;   /* Fondo principal (casi negro cálido) */
  --bg-2:        #14120f;   /* Fondo alterno para separar secciones */
  --surface:     #1c1915;   /* Tarjetas */
  --light:       #f3efe9;   /* Fondo claro (sección contacto) */
  --text:        #efe9e1;   /* Texto claro */
  --text-dark:   #1d1915;   /* Texto oscuro sobre fondo claro */
  --muted:       #a39a8f;   /* Texto secundario */
  --line:        rgba(239, 233, 225, 0.12);  /* Líneas finas */

  /* --- COLOR DE ACENTO: champagne / latón cepillado (botones y detalles) --- */
  --accent:       #c9a27e;  /* Botón principal */
  --accent-hover: #dcbb98;  /* Botón al pasar el mouse */
  --accent-text:  #1a140e;  /* Texto dentro del botón */

  /* --- TIPOGRAFÍAS --- */
  --font-display: 'Jost', sans-serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-body:    'Inter', sans-serif;

  /* --- MEDIDAS --- */
  --maxw: 1280px;     /* Ancho máximo del contenido */
  --pad-x: 40px;      /* Margen lateral */
  --header-h: 80px;   /* Alto del menú */

  /* --- PLACEHOLDERS DE IMÁGENES --- */
  --ph-bg:    #e9e4dc;
  --ph-bg-b:  #d8d0c4;  /* Variante más oscura (para distinguir imágenes) */
  --ph-label: #7a5c3e;
  --ph-size:  #1d1915;

  /* --- VELOCIDAD DEL SLIDER (milisegundos). Debe coincidir con el JS --- */
  --slide-dur: 6500ms;
}

/* =========================================================================
   B. BASE  (normalmente no se toca)
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--font-body); background: var(--bg); color: var(--text);
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.section { padding: 120px 0; }

/* Etiqueta pequeña sobre los títulos: "— 01 / Servicios" */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: .74rem; font-weight: 400;
  letter-spacing: 4px; text-transform: uppercase; color: var(--accent); margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }

/* Títulos de sección: finos, en mayúsculas, con palabra en cursiva serif */
.title {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08;
  letter-spacing: 1.5px; text-transform: uppercase;
}
/* Palabra destacada: <em>tu hogar</em>
   CAMBIO V1.04: se quitó "text-transform: none" para que la cursiva serif
   quede en MAYÚSCULAS igual que el resto del título (como "ASESORÍAS").
   Esta regla aplica a TODOS los <em> de títulos, hero y llamada final. */
.title em, .hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent);
}
.lead { color: var(--muted); max-width: 560px; margin-top: 20px; }

/* =========================================================================
   C. PLACEHOLDER DE IMÁGENES  (recuadro con nombre y medidas)
   Para poner la imagen real: reemplaza el <div class="ph">…</div> por
   <img src="img/archivo.jpg" alt="Descripción"> (con la misma clase si
   el placeholder tenía clases de posición, ej: class="slide-bg").
   ========================================================================= */
.ph {
  width: 100%; height: 100%; background: var(--ph-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; color: var(--ph-size);
}
.ph--b { background: var(--ph-bg-b); }
.ph-label { font-weight: 600; font-size: 1rem; color: var(--ph-label); }
.ph-size  { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: 1px; }
/* IMAGEN REAL encima del placeholder: <img class="fill" src="img/…">
   Cubre todo su contenedor. Si el archivo no existe, se elimina sola
   (onerror) y queda visible el recuadro con la medida. */
img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   D. BOTONES  (NUEVO V1.03: color champagne + flecha animada)
   .btn        → botón principal relleno
   .btn-ghost  → botón con contorno (secundario)
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 500; font-size: .78rem;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 17px 30px; border: 1px solid var(--accent); border-radius: 2px;
  background: var(--accent); color: var(--accent-text); cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.btn svg { width: 16px; height: 16px; transition: transform .3s ease; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); }
.btn:hover svg { transform: translateX(5px); }   /* la flecha avanza */
.btn-ghost { background: transparent; color: var(--text); border-color: rgba(239,233,225,.35); }
.btn-ghost:hover { background: rgba(239,233,225,.08); border-color: var(--text); color: var(--text); }

/* =========================================================================
   E. ANIMACIÓN DE APARICIÓN AL HACER SCROLL
   Agrega class="reveal" a cualquier elemento y aparecerá suavemente
   cuando entre en pantalla. style="--d:.2s" le da un retraso.
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================================
   1. CABECERA  (transparente al inicio, oscura al hacer scroll)
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease;
}
.site-header.scrolled { background: rgba(13,12,11,.88); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 30px; }
/* LOGO: archivo img/logo-header.png (212 × 48, blanco). Se muestra a 40px de alto.
   Enlaza a www.marketingelectronico.cl */
/* CAMBIO V1.06: sin "height" → el logo se ve a su tamaño real (212 × 48), nítido */
.logo img { width: auto; transition: opacity .3s; }
.logo:hover img { opacity: .8; }
/* CAMBIO V1.04: menú y botón agrupados a la derecha con una separación justa */
.nav-right { display: flex; align-items: center; gap: 40px; }
.nav-menu { display: flex; gap: 32px; list-style: none; }
.nav-menu a {
  position: relative; font-family: var(--font-display); font-size: .78rem;
  letter-spacing: 2px; text-transform: uppercase; padding: 6px 0;
}
/* Línea que crece bajo el enlace al pasar el mouse */
.nav-menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s ease;
}
.nav-menu a:hover::after { transform: scaleX(1); transform-origin: left; }
/* BOTÓN "COTIZAR" ANIMADO (NUEVO V1.04)
   - Degradado champagne → dorado que se desplaza lentamente.
   - Destello de luz que cruza el botón cada 4 segundos.
   - Halo suave que "respira" alrededor para llamar la atención.
   - Al pasar el mouse: se ilumina, sube y la flecha avanza.
   Para cambiar los colores, edita los 3 tonos del linear-gradient. */
.header-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 13px 24px; border: none;
  background: linear-gradient(110deg, #b88a5e, #e2c29c, #c9a27e, #b88a5e);
  background-size: 300% 100%;
  animation: cta-flow 6s ease-in-out infinite, cta-glow 3s ease-in-out infinite;
}
.header-cta::before {   /* destello de luz */
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg); animation: cta-shine 4s ease-in-out infinite;
}
.header-cta:hover { background-position: 100% 0; box-shadow: 0 10px 30px rgba(201,162,126,.45); }
@keyframes cta-flow  { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes cta-glow  { 0%,100% { box-shadow: 0 0 0 0 rgba(201,162,126,.55); } 50% { box-shadow: 0 0 0 8px rgba(201,162,126,0); } }
@keyframes cta-shine { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } }
.nav-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.6rem; cursor: pointer; }

/* =========================================================================
   2. HERO CON SLIDER  (2 imágenes que se alternan con fundido + zoom lento)
   Para agregar una 3ª imagen: copia un bloque <div class="slide"> completo.
   El JS detecta solo la cantidad de slides.
   ========================================================================= */
.hero { position: relative; height: 100vh; min-height: 680px; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.4s ease, visibility 1.4s; }
.slide.is-active { opacity: 1; visibility: visible; }
/* Imagen de fondo de cada slide: efecto "Ken Burns" (zoom muy lento) */
.slide-bg { position: absolute; inset: 0; transform: scale(1.12); transition: transform 8s ease-out; }
.slide.is-active .slide-bg { transform: scale(1); }
/* Velo oscuro para que el texto se lea */
.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.5) 50%, rgba(10,9,8,.15) 100%),
              linear-gradient(0deg, rgba(10,9,8,.7) 0%, transparent 40%);
}
.slide-content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
.slide-content .inner { max-width: 640px; padding-top: 40px; }
/* Los textos entran escalonados cada vez que cambia el slide */
.slide-content .inner > * { opacity: 0; transform: translateY(30px); transition: opacity .9s ease, transform .9s ease; }
.slide.is-active .inner > * { opacity: 1; transform: none; }
.slide.is-active .inner > *:nth-child(2) { transition-delay: .35s; }
.slide.is-active .inner > *:nth-child(3) { transition-delay: .5s; }
.slide.is-active .inner > *:nth-child(4) { transition-delay: .65s; }
.hero h1 {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.02; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero p { color: #cfc6bb; font-size: 1.05rem; max-width: 470px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Controles del slider: contador, barra de progreso y flechas */
.hero-controls {
  position: absolute; z-index: 5; bottom: 44px; right: 0; left: 0;
}
.hero-controls .container { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.hero-count { font-family: var(--font-display); font-size: .85rem; letter-spacing: 3px; color: var(--muted); }
.hero-count b { color: var(--text); font-weight: 400; }
.hero-progress { width: 140px; height: 1px; background: var(--line); overflow: hidden; }
.hero-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hero-progress.run span { animation: progress var(--slide-dur) linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }
.hero-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(239,233,225,.3);
  background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center;
  transition: background .3s, border-color .3s;
}
.hero-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.hero-arrow svg { width: 18px; height: 18px; }
/* Indicador "scroll" a la izquierda */
.scroll-hint {
  position: absolute; z-index: 5; bottom: 44px; left: max(110px, calc((100vw - var(--maxw)) / 2 + var(--pad-x)));   /* 110px: no choca con WhatsApp */
  font-family: var(--font-display); font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 12px;
}
.scroll-hint i { width: 1px; height: 42px; background: var(--line); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: drip 2s ease-in-out infinite; }
@keyframes drip { to { top: 100%; } }

/* =========================================================================
   3. FRANJA DE BENEFICIOS  (4 íconos con líneas verticales)
   ========================================================================= */
.perks { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.perk { display: flex; align-items: center; gap: 18px; padding: 38px 30px; border-left: 1px solid var(--line); }
.perk:first-child { border-left: none; padding-left: 0; }
.perk svg { width: 34px; height: 34px; flex-shrink: 0; stroke: var(--accent); fill: none; stroke-width: 1.2; }
.perk h3 { font-family: var(--font-display); font-weight: 400; font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; }
.perk p { color: var(--muted); font-size: .82rem; line-height: 1.4; }

/* =========================================================================
   4. NOSOTROS — GRILLA SOBRE IMAGEN  (inspirado en tu referencia "Kanto")
   La imagen lleva encima una grilla de líneas finas y etiquetas que
   aparecen una a una. Posición de cada etiqueta: style="--x:..; --y:.."
   ========================================================================= */
.about { background: var(--bg); }
.about-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
.about-head > div { flex: 1 1 auto; }
.about-head .lead { flex: 0 1 400px; }
/* CAMBIO V1.04: mantiene "Creamos espacios que" en una sola línea (solo en escritorio) */
@media (min-width: 861px) { .nowrap { white-space: nowrap; } }

.kanto { display: grid; grid-template-columns: 2.4fr 1fr; border: 1px solid var(--line); }
.kanto-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
/* ANIMACIÓN DE LA IMAGEN (NUEVO V1.04):
   1) Al aparecer, la imagen se "aleja" lentamente (zoom 1.25 → 1).
   2) Luego queda "respirando" con un zoom muy sutil y continuo.
   3) Al pasar el mouse, se acerca un poco.
   El placeholder y la imagen real van dentro de .kanto-media */
/* CAMBIO V1.05: animación más marcada y en 2 capas para que se note siempre:
   - .kanto-media → zoom de entrada (1.4 → 1) y zoom al pasar el mouse (1.12).
   - Hijos (.ph / img) → "Ken Burns" continuo: acercamiento + desplazamiento
     lento de ida y vuelta (20 s). Para cambiar la intensidad, edita @keyframes kenburns. */
.kanto-media { position: absolute; inset: 0; transform: scale(1.4); transition: transform 2.8s cubic-bezier(.2,.7,.2,1); }
.kanto-media > * { position: absolute; inset: 0; }
.kanto.is-visible .kanto-media { transform: scale(1); }
.kanto.is-visible .kanto-media > * { animation: kenburns 20s ease-in-out 2.8s infinite alternate; }
.kanto-visual:hover .kanto-media { transform: scale(1.12); transition-duration: 1.2s; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.18) translate(-3%, -2%); }
}
/* TEXTURA DEL PLACEHOLDER (solo mientras no esté la imagen real):
   le da luz y líneas al recuadro gris para que el zoom se vea en la demo */
.kanto-media > .ph, .final-media > .ph, .slide-bg > .ph {
  background-image:
    radial-gradient(ellipse at 30% 35%, rgba(255,246,232,.55), transparent 55%),
    repeating-linear-gradient(135deg, rgba(60,45,30,.07) 0 2px, transparent 2px 26px);
}
/* Haz de luz que cruza la imagen una vez al aparecer */
.kanto-visual::after {
  content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,240,220,.18), transparent); transform: skewX(-18deg);
}
.kanto.is-visible .kanto-visual::after { animation: sweep 2.2s ease-in-out 1s 1 both; }
@keyframes sweep { from { left: -40%; } to { left: 120%; } }
.kanto-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(10,9,8,.42); } /* oscurece la imagen */
/* Grilla: líneas cada 1/4 de ancho y 1/3 de alto. Aparecen al hacer scroll */
.kanto-lines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 25% 100%, 100% 33.333%;
  opacity: 0; transition: opacity 1.4s ease .2s;
}
.kanto.is-visible .kanto-lines { opacity: 1; }
/* Etiquetas flotantes tipo "pastilla" */
.chip {
  position: absolute; z-index: 3; left: var(--x); top: var(--y);
  padding: 7px 16px; border: 1px solid rgba(255,255,255,.5); border-radius: 30px;
  font-size: .74rem; letter-spacing: .5px; color: #fff; background: rgba(20,17,14,.35); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease, background .3s;
  transition-delay: var(--d, 0s);
}
.kanto.is-visible .chip { opacity: 1; transform: none; }
.chip:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
/* Textos pequeños en las esquinas de la imagen */
.kanto-note { position: absolute; z-index: 3; font-size: .74rem; color: #ddd4c8; max-width: 22%; line-height: 1.45; }
.kanto-note.tl { left: 2.5%; top: 5%; }
.kanto-note.bl { left: 2.5%; bottom: 6%; }
.kanto-word { position: absolute; z-index: 3; font-family: var(--font-display); font-weight: 300; font-size: clamp(.8rem, 1.3vw, 1.05rem); letter-spacing: 2px; color: #fff; }
/* Panel lateral de texto */
.kanto-panel { padding: 42px 36px; border-left: 1px solid var(--line); background: var(--bg-2); }
.kanto-panel h3 { font-family: var(--font-display); font-weight: 300; font-size: 1.45rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 22px; line-height: 1.2; }
.kanto-panel p { color: var(--muted); font-size: .92rem; margin-bottom: 26px; }
.kanto-panel ul { list-style: none; }
.kanto-panel li { padding: 14px 0; border-top: 1px solid var(--line); font-size: .88rem; display: flex; gap: 12px; }
.kanto-panel li::before { content: "◆"; color: var(--accent); font-size: .6rem; padding-top: 5px; }

/* =========================================================================
   5. SERVICIOS — 1 IMAGEN DIVIDIDA EN 4 PANELES  (los que te gustaron)
   Imagen real (UNA sola panorámica): 1920 × 640.
   Para ponerla: en .services-strip descomenta "background-image" y borra
   el <div class="strip-ph">.
   ========================================================================= */
.services { background: var(--bg-2); }
.services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 56px; }
.services-strip {
  position: relative; display: flex; height: 560px; overflow: hidden;
  background: linear-gradient(115deg, #2a241e 0%, #3a3128 45%, #1b1713 100%);
  /* background-image: url('img/servicios-1920x640.jpg');
     background-size: cover; background-position: center; */
}
.strip-ph {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #d9cfc2;
}
.strip-ph b { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: 1px; }
.services-strip > .strip-img { z-index: 1; }   /* la imagen real tapa la etiqueta provisional */
.strip-ph span { font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: #a39a8f; }
.panel {
  position: relative; z-index: 2; flex: 1 1 0; display: flex; align-items: flex-end;
  border-left: 1px solid rgba(255,255,255,.14); cursor: pointer;
  transition: flex-grow .7s cubic-bezier(.2,.7,.2,1);
}
.panel:first-child { border-left: none; }
.panel:hover, .panel:focus-within { flex-grow: 2.4; }
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,9,8,.9) 0%, rgba(10,9,8,.2) 55%, transparent 100%);
}
.panel-num { position: absolute; z-index: 2; top: 26px; left: 28px; font-family: var(--font-display); font-size: .8rem; letter-spacing: 3px; color: var(--accent); }
.panel-content { position: relative; z-index: 2; padding: 32px 28px; width: 100%; }
.panel-content h3 {
  font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; letter-spacing: 2px; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.panel-content h3 svg { width: 20px; height: 20px; transition: transform .4s ease; }
.panel:hover h3 svg { transform: rotate(-45deg); color: var(--accent); }
/* La descripción aparece solo cuando el panel se expande */
.panel-content p {
  color: #d3cabf; font-size: .9rem; max-width: 320px;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .5s ease, margin .5s ease;
}
.panel:hover .panel-content p, .panel:focus-within .panel-content p { max-height: 120px; opacity: 1; margin-top: 12px; }

/* =========================================================================
   6. ANTES / DESPUÉS  (arrastra la línea para comparar)
   Dos imágenes del MISMO tamaño: 1400 × 800 cada una.
   ========================================================================= */
.compare { background: var(--bg); }
.compare-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
.ba {
  --pos: 50%;   /* posición inicial de la línea */
  position: relative; aspect-ratio: 7 / 4; overflow: hidden; user-select: none;
}
.ba-layer { position: absolute; inset: 0; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }   /* "Después" se ve a la derecha de la línea */
.ba-tag {
  position: absolute; z-index: 3; top: 20px; padding: 6px 14px; font-family: var(--font-display);
  font-size: .7rem; letter-spacing: 3px; text-transform: uppercase; background: rgba(13,12,11,.75); color: var(--text);
}
.ba-tag.before { left: 20px; }
.ba-tag.after  { right: 20px; background: var(--accent); color: var(--accent-text); }
.ba-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; }
.ba-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; font-size: 1.1rem; letter-spacing: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
/* Control deslizante invisible que cubre toda la imagen (funciona con mouse, dedo y teclado) */
.ba-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.compare-list { list-style: none; margin-top: 30px; }
.compare-list li { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.compare-list b { color: var(--text); font-weight: 400; font-family: var(--font-display); letter-spacing: 1px; }

/* =========================================================================
   7. MATERIALES  (tarjetas escalonadas con inclinación 3D al mover el mouse)
   Cada imagen: 480 × 640 (vertical).
   ========================================================================= */
.materials { background: var(--bg-2); }
.materials-grid { display: grid; grid-template-columns: 1fr 2.6fr; gap: 50px; align-items: center; }
.mat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; perspective: 900px; }
.mat-tile {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .3s;
}
.mat-tile:nth-child(even) { margin-top: 48px; }   /* efecto escalonado */
.mat-tile:hover { box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.mat-tile .ph { position: absolute; inset: 0; }
.mat-tile .ph-size { font-size: 1rem; }
.mat-tile .ph-label { font-size: .8rem; }
.mat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,.85), transparent 55%); }
.mat-name {
  position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: 2.5px; text-transform: uppercase;
  transform: translateY(6px); transition: transform .4s ease, color .3s;
}
.mat-tile:hover .mat-name { transform: none; color: var(--accent); }

/* =========================================================================
   8. PROCESO  (línea de tiempo que se "dibuja" al aparecer)
   Para agregar un paso: copia un bloque <li class="step">.
   ========================================================================= */
.process { background: var(--bg); }
.steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-top: 70px; }
.steps-line { position: absolute; top: 27px; left: 0; right: 0; height: 1px; background: var(--line); }
.steps-line span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 2.2s cubic-bezier(.4,0,.2,1) .3s; }
.steps.is-visible .steps-line span { transform: scaleX(1); }
.step { position: relative; opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d); }
.steps.is-visible .step { opacity: 1; transform: none; }
.step-num {
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--accent); background: var(--bg);
  display: grid; place-items: center; font-family: var(--font-display); font-size: .9rem; color: var(--accent);
  margin-bottom: 26px; position: relative; z-index: 1; transition: background .3s, color .3s;
}
.step:hover .step-num { background: var(--accent); color: var(--accent-text); }
.step h3 { font-family: var(--font-display); font-weight: 400; font-size: .95rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: .88rem; }

/* =========================================================================
   9. CIFRAS  (números que cuentan desde 0 al aparecer)
   Cambia el número en data-target y el texto en data-suffix / data-prefix.
   ========================================================================= */
.stats { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 80px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 0 30px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; padding-left: 0; }
.stat-num { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1; color: var(--text); }
.stat-num span { color: var(--accent); }
.stat p { color: var(--muted); font-size: .85rem; margin-top: 12px; letter-spacing: .5px; }

/* =========================================================================
   10. TESTIMONIOS  (2 filas: arriba → derecha, abajo → izquierda)
   El JS duplica las tarjetas automáticamente para el bucle infinito:
   solo escribe cada testimonio UNA vez.
   ========================================================================= */
.testimonials { background: var(--bg); overflow: hidden; }
.testimonials .head { text-align: center; margin-bottom: 60px; }
.testimonials .lead { margin: 18px auto 0; }
.marquee { overflow: hidden; margin-bottom: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 22px; width: max-content; }
.marquee-track.to-right { animation: m-right 60s linear infinite; }
.marquee-track.to-left  { animation: m-left  60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes m-left  { from { transform: translateX(0); }    to { transform: translateX(calc(-50% - 11px)); } }
@keyframes m-right { from { transform: translateX(calc(-50% - 11px)); } to { transform: translateX(0); } }
.tm-card { width: 360px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line); padding: 26px; border-radius: 4px; }
.tm-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tm-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: .85rem; color: #1a140e; flex-shrink: 0; }
.tm-name { font-weight: 600; font-size: .95rem; }
.tm-tag { font-size: .72rem; color: var(--accent); letter-spacing: .5px; }
.tm-stars { margin-left: auto; color: var(--accent); font-size: .75rem; letter-spacing: 2px; }
.tm-text { color: var(--muted); font-size: .9rem; }

/* =========================================================================
   11. LLAMADA FINAL A PANTALLA COMPLETA  (inspirado en tu referencia "Form")
   Imagen: 1920 × 1080.
   ========================================================================= */
.final { position: relative; min-height: 92vh; display: grid; place-items: center; text-align: center; overflow: hidden; }
/* ZOOM AL HACER SCROLL (NUEVO V1.04): la imagen se aleja a medida que bajas.
   El JS cambia la variable --zoom entre 1.3 y 1 (ver "LLAMADA FINAL" en el script). */
/* CAMBIO V1.05: 2 zooms combinados para que se note claramente:
   - .final-media → zoom según el scroll (1.45 al entrar → 1 al salir), lo maneja el JS.
   - Hijos (.ph / img) → zoom continuo de acercamiento y alejamiento (18 s). */
.final-media { position: absolute; inset: 0; transform: scale(var(--zoom, 1.45)); will-change: transform; }
.final-media > * { position: absolute; inset: 0; animation: final-zoom 18s ease-in-out infinite alternate; }
@keyframes final-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.2) translateY(-2%); }
}
/* El título se "abre" (aumenta el espaciado de letras) al aparecer */
.final h2 { transition: letter-spacing 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.4s ease; }
.final-inner:not(.is-visible) h2 { letter-spacing: 0; opacity: 0; }
.final-mark rect, .final-mark path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 2s ease .3s; }
.final-inner.is-visible .final-mark rect, .final-inner.is-visible .final-mark path { stroke-dashoffset: 0; }   /* el ícono se "dibuja" */
.final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(10,9,8,.55), rgba(10,9,8,.9)); }
.final-inner { position: relative; z-index: 2; padding: 0 var(--pad-x); }
.final-mark { width: 64px; height: 64px; margin: 0 auto 30px; stroke: var(--text); fill: none; stroke-width: 1; }
.final h2 { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.4rem, 7vw, 5.6rem); letter-spacing: clamp(6px, 1.6vw, 22px); text-transform: uppercase; line-height: 1.05; }
.final-rule { width: 60px; height: 1px; background: var(--accent); margin: 28px auto; }
.final p { font-family: var(--font-display); font-size: .82rem; letter-spacing: 5px; text-transform: uppercase; color: var(--accent); margin-bottom: 40px; }

/* =========================================================================
   12. CONTACTO  (fondo claro para romper la monotonía)
   El formulario es DEMO: no envía datos. Al conectarlo a tu servidor,
   cambia el atributo action del <form> y borra el JS de "demo".
   ========================================================================= */
.contact { background: var(--light); color: var(--text-dark); padding-bottom: 30px; }
.contact .eyebrow { color: #9a7451; }
.contact .title em { color: #9a7451; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; }
.contact-info p { color: #5f574e; margin: 20px 0 36px; }
.contact-info dl { display: grid; gap: 18px; }
.contact-info dt { font-family: var(--font-display); font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: #9a7451; }
.contact-info dd { font-size: 1.05rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: #6d645a; }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--text-dark); background: transparent;
  border: none; border-bottom: 1px solid #c9bfb2; padding: 10px 0; border-radius: 0; transition: border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: #9a7451; }
.field textarea { resize: vertical; min-height: 90px; }
.form .btn { justify-self: start; background: var(--text-dark); border-color: var(--text-dark); color: var(--light); }
.form .btn:hover { background: #9a7451; border-color: #9a7451; }
.form-msg { grid-column: 1 / -1; color: #3f7a4e; font-size: .9rem; min-height: 1.2em; }
.form-msg.error { color: #a3473a; }
.form .btn[disabled] { opacity: .6; cursor: wait; transform: none; }
/* Campo trampa anti-spam: invisible para personas, los robots lo rellenan */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-legal { grid-column: 1 / -1; font-size: .72rem; color: #8a8076; }
.form-legal a { text-decoration: underline; }
.contact-info dd a:hover { color: #9a7451; }

/* =========================================================================
   BOTÓN FLOTANTE DE WHATSAPP (NUEVO V1.04)
   Número en el href: https://wa.me/56977354030
   ========================================================================= */
.wa-float {
  position: fixed; left: 24px; bottom: 24px; z-index: 90;   /* CAMBIO V1.06: lado IZQUIERDO */
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .3s ease;
}
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-ring 2.4s ease-out infinite; }
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
@keyframes wa-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* =========================================================================
   13. PIE DE PÁGINA  (V1.07: tarjeta a lo ancho completo, más aire)
   -------------------------------------------------------------------------
   Una sola tarjeta oscura redondeada que ocupa todo el ancho de la pantalla
   dejando solo un margen pequeño (--footer-gap), con muesca arriba al centro.
     - .footer-brand  → logo + descripción + redes
     - .footer-cols   → 4 columnas con línea vertical y flecha » en los enlaces
     - .footer-bottom → línea final: copyright | agencia
   ========================================================================= */
.site-footer { --footer-gap: 12px; background: var(--light); padding: 30px var(--footer-gap) var(--footer-gap); }
.footer-card {
  position: relative; width: 100%;                       /* sin ancho máximo: ocupa todo */
  background: var(--bg); color: var(--text);
  border-radius: 32px;
  padding: 96px clamp(28px, 5vw, 96px) 36px;             /* aire interior generoso */
}
/* Muesca superior central (del color del fondo claro) */
.footer-card::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 36px; background: var(--light); border-radius: 0 0 34px 34px;
}
/* Fila principal: marca a la izquierda, columnas a la derecha */
.footer-main { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: clamp(50px, 6vw, 120px); align-items: start; }

/* Columna de marca. Logo: img/logo-footer.png a su tamaño real (312 × 71) */
.footer-brand .logo img { width: auto; margin-bottom: 26px; transition: opacity .3s; }
.footer-brand .logo:hover img { opacity: .8; }
.footer-brand p { color: var(--muted); font-size: .95rem; line-height: 1.75; }
.footer-social { display: flex; gap: 10px; margin-top: 30px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--text); transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); transform: translateY(-3px); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* 4 columnas repartidas en todo el ancho disponible (sin apretarse) */
.footer-cols { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 30px; }
.footer-col { padding: 4px 0 8px 38px; border-left: 1px solid var(--line); }
.footer-col h4 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.12rem;
  letter-spacing: 1px; color: var(--text); margin-bottom: 26px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 16px; }
.footer-col a, .footer-col span {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: .94rem; white-space: nowrap;
  transition: color .3s, transform .3s;
}
/* Flecha » dorada delante de cada enlace */
.footer-col a::before {
  content: "»"; color: var(--accent); font-weight: 700; font-size: 1.05rem; line-height: 1;
  transition: transform .3s;
}
.footer-col a:hover { color: var(--text); }
.footer-col a:hover::before { transform: translateX(4px); }

/* Línea final */
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 30px;
  margin-top: 80px; padding: 26px 64px 0; border-top: 1px solid var(--line);   /* 64px: no lo tapan los botones flotantes */
  font-family: var(--font-display); font-size: .74rem; letter-spacing: 1.5px; color: var(--muted);
}
.footer-bottom a { color: var(--accent); }
.footer-bottom a:hover { text-decoration: underline; }

/* =========================================================================
   BOTÓN "VOLVER ARRIBA" (NUEVO V1.05)
   Aparece al bajar 600px. El anillo dorado muestra cuánto llevas leído.
   ========================================================================= */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(13,12,11,.85); backdrop-filter: blur(6px); color: var(--text);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .4s, visibility .4s, transform .4s, background .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); color: var(--accent-text); }
.to-top > svg.arrow { width: 18px; height: 18px; transform: rotate(-90deg); }
.to-top .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top .ring circle { fill: none; stroke-width: 2; }
.to-top .ring .track { stroke: rgba(239,233,225,.15); }
.to-top .ring .bar { stroke: var(--accent); stroke-dasharray: 145; stroke-dashoffset: 145; transition: stroke-dashoffset .15s linear; }

/* =========================================================================
   F. RESPONSIVE  (tablet y móvil)
   ========================================================================= */
@media (max-width: 1080px) {
  .perks-grid { grid-template-columns: repeat(2, 1fr); }
  .perk:nth-child(3) { border-left: none; padding-left: 0; }
  .perk { border-top: 1px solid var(--line); }
  .perk:nth-child(-n+2) { border-top: none; }
  .kanto { grid-template-columns: 1fr; }
  .kanto-panel { border-left: none; border-top: 1px solid var(--line); }
  .materials-grid, .compare-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
  .steps-line { display: none; }
}
/* Footer: la marca pasa arriba y las columnas debajo cuando no caben en una fila */
@media (max-width: 1500px) {
  .footer-main { grid-template-columns: 1fr; gap: 64px; }
  .footer-brand { max-width: 620px; }
}
@media (max-width: 900px) {
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; row-gap: 46px; }
  .footer-col a, .footer-col span { white-space: normal; }
}
@media (max-width: 860px) {
  .nav-menu { display: none; }
  .nav-right { gap: 14px; }
  .header-cta { padding: 10px 16px; }
  .nav-toggle { display: block; }
  .nav-menu.open {
    display: flex; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 0;
  }
  .nav-menu.open a { display: block; padding: 14px var(--pad-x); }
  .about-head, .services-head { flex-direction: column; align-items: flex-start; }
  .kanto-note { display: none; }
  /* Servicios: paneles apilados en vertical, con la descripción siempre visible */
  .services-strip { flex-direction: column; height: auto; }
  .panel { min-height: 180px; border-left: none; border-top: 1px solid rgba(255,255,255,.14); }
  .panel:first-child { border-top: none; }
  .panel:hover { flex-grow: 1; }
  .panel-content p { max-height: none; opacity: 1; margin-top: 10px; }
  .mat-row { grid-template-columns: repeat(3, 1fr); }
  .mat-tile:nth-child(even) { margin-top: 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .stat:nth-child(3) { border-left: none; padding-left: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 600px) {
  :root { --pad-x: 22px; }
  .section { padding: 80px 0; }
  .perks-grid { grid-template-columns: 1fr; }
  .perk { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .perk:first-child { border-top: none !important; }
  .chip { font-size: .62rem; padding: 4px 10px; }
  .kanto-word { display: none; }
  .mat-row { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-left: none; padding-left: 0; }
  .form { grid-template-columns: 1fr; }
  .tm-card { width: 290px; }
  .hero-progress, .scroll-hint { display: none; }
  .logo img { max-width: 160px; height: auto; }   /* en móvil se ajusta al ancho para que quepa con el botón */
  .header-cta svg { display: none; }
  .wa-float { left: 16px; bottom: 16px; width: 52px; height: 52px; }
  .site-footer { --footer-gap: 8px; padding-top: 20px; }
  .footer-card { border-radius: 24px; padding: 70px 22px 84px; }   /* 84px abajo: espacio para botones flotantes */
  .footer-card::before { width: 140px; height: 26px; border-radius: 0 0 24px 24px; }
  .footer-brand .logo img { max-width: 240px; height: auto; }
  .footer-cols { grid-template-columns: 1fr; row-gap: 38px; }
  .footer-col { padding-left: 22px; }
  .footer-bottom { flex-direction: column; margin-top: 50px; padding: 24px 0 0; }
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}
/* Menos movimiento para quien lo prefiera */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; animation: none !important; scroll-behavior: auto !important; }
  .marquee { overflow-x: auto; }
}