/* ==================================================================
   PASCALE LAUZ S.A.S. — Hoja de estilos principal
   ------------------------------------------------------------------
   GUÍA RÁPIDA DE EDICIÓN
   1. Colores, tipografías, sombras y formas -> variables en :root.
   2. Cada sección del sitio tiene su propio bloque, ordenado igual
      que en index.html (header, hero, nosotros, servicios,
      clientes, contacto, footer).
   3. Los comentarios "EDITAR AQUÍ" marcan los puntos donde más
      probablemente quieras hacer cambios rápidos.
   ================================================================== */

:root{
  /* ---------- PALETA DE COLOR (EDITAR AQUÍ) ----------
     Marrón corporativo + dorado cálido sobre fondos crema.
     Todos los pares texto/fondo cumplen contraste WCAG AA (>= 4.5:1). */
  --color-brand: #552707;        /* MARRÓN DE MARCA: título "Pascale Lauz Consultora", títulos, botones */
  --color-brand-dark: #3E1F0A;   /* marrón profundo: tarjetas y bloques oscuros */
  --color-brand-light: #7B4A26;  /* marrón claro: hovers y foco */
  --color-ink: #2B1405;          /* casi negro cálido: fondos muy oscuros, texto sobre dorado */
  --color-accent: #C9983F;       /* dorado: detalles sobre fondos OSCUROS (líneas, botón, progreso) */
  --color-accent-dark: #B2832D;  /* dorado en hover */
  --color-accent-text: #855411;  /* dorado oscuro: texto de acento sobre fondos CLAROS */
  --color-green: #2F6B4A;        /* verde "aprobado" (tildes, mensaje de envío OK) */
  --color-bg: #FAF6EF;           /* fondo general crema */
  --color-bg-alt: #F1E9DC;       /* fondo alterno de secciones */
  --color-surface: #FFFFFF;
  --color-text: #2A1D12;         /* texto principal */
  --color-text-muted: #65523F;   /* texto secundario */
  --color-border: #E3D8C6;

  /* ---------- TIPOGRAFÍA (EDITAR AQUÍ) ----------
     Títulos: Montserrat. Texto: Inter. (Si Google Fonts no carga, cae a Arial.) */
  --font-display: 'Montserrat', 'Arial Black', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: var(--font-body);   /* ya no se usa una tipografía monoespaciada */

  /* LOGO (pedido expreso del cliente): "PASCALE LAUZ" en Arial Black + "Consultora" en Teko.
     Se usa en el header, el footer y el título del hero. No cambiar. */
  --font-logo: 'Arial Black', Arial, sans-serif;
  --font-logo-alt: 'Teko', sans-serif;

  /* ---------- ESPACIADO Y FORMA ---------- */
  --space-section: clamp(4.5rem, 9vw, 8rem);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --container-w: 1180px;
  --header-h: 4.6rem;            /* alto aproximado del header fijo (para las anclas) */

  /* Sombras en capas, teñidas de marrón (se ven más naturales que una sola sombra gris) */
  --shadow-xs: 0 1px 2px rgba(43,20,5,0.06);
  --shadow-sm: 0 1px 2px rgba(43,20,5,0.05), 0 6px 14px -6px rgba(43,20,5,0.14);
  --shadow-md: 0 2px 4px rgba(43,20,5,0.04), 0 14px 30px -12px rgba(43,20,5,0.22);
  --shadow-lg: 0 4px 8px rgba(43,20,5,0.04), 0 30px 60px -24px rgba(43,20,5,0.34);
  --shadow-soft: var(--shadow-md);
  --shadow-tag: 0 18px 34px -14px rgba(43,20,5,0.45);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ================= RESET BÁSICO ================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ text-wrap: balance; }
p{ text-wrap: pretty; }
button{ font-family:inherit; cursor:pointer; }
input, textarea{ font-family:inherit; font-size:1rem; }
::selection{ background: var(--color-accent); color: var(--color-ink); }

/* Foco visible para quien navega con teclado */
:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

/* Enlace "Saltar al contenido" (solo aparece al navegar con Tab) */
.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:1100;
  background: var(--color-brand); color: var(--color-bg);
  padding:0.7rem 1.1rem; border-radius: 999px; font-weight:700; font-size:0.9rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus{ top: 1rem; }

.container{
  width:100%;
  max-width: var(--container-w);
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ================= BARRA DE PROGRESO ================= */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
  z-index: 1000;
  transition: width 0.1s linear;
}

/* ================= HEADER / NAV ================= */
.header{
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  padding-block: 1rem;
  transition: padding 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.brand{ display:flex; align-items:center; gap:0.6rem; }
.brand__mark{ display:none; }   /* espacio reservado por si algún día hay isotipo */
.brand__text{
  font-family: var(--font-logo); font-weight: 900; font-size:1.3rem;
  letter-spacing:0.001em; color: var(--color-brand);   /* #552707 */
  line-height:1.1; white-space:nowrap;
}
.brand__dot{
  font-family: var(--font-logo-alt); font-weight: 500; font-size:1.3rem;
  letter-spacing:0.01em; color: var(--color-brand);
}

.nav{ display:flex; align-items:center; gap:2rem; }
.nav__link{
  font-size:0.92rem; font-weight:600; color: var(--color-text);
  position:relative; padding-block:0.35rem;
  transition: color 0.2s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--color-accent); border-radius:2px; transition: width 0.25s var(--ease);
}
.nav__link:hover{ color: var(--color-brand); }
.nav__link:hover::after{ width:100%; }
.nav__link--cta{
  background: var(--color-brand); color: var(--color-bg) !important;
  padding:0.62rem 1.3rem; border-radius: 999px; font-weight:700;
  box-shadow: var(--shadow-sm);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav__link--cta::after{ display:none; }
.nav__link--cta:hover{ background: var(--color-brand-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; margin-right:-8px; }
.nav-toggle span{ width:24px; height:2px; background: var(--color-brand); border-radius:2px; transition:0.3s var(--ease); }

/* Header: crema translúcido siempre (el título marrón necesita fondo claro).
   El desenfoque va en ::before para no romper el menú móvil (position:fixed). */
.header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: rgba(250, 246, 239, 0.86);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(227, 216, 198, 0.7);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.header.is-scrolled{
  box-shadow: 0 12px 30px -20px rgba(43,20,5,0.45);
  padding-block: 0.65rem;
}
.header.is-scrolled::before{ background: rgba(250, 246, 239, 0.96); border-bottom-color: var(--color-border); }

/* ================= BOTONES ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding: 0.95rem 1.8rem; border-radius: 999px; font-weight:700; font-size:0.97rem; letter-spacing:0.005em;
  border: 2px solid transparent; white-space:nowrap;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease),
              transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn--primary{ background: var(--color-accent); color: var(--color-ink); box-shadow: 0 6px 18px -8px rgba(201,152,63,0.9); }   /* dorado + texto casi negro: 6.7:1 */
.btn--primary:hover{ background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(201,152,63,0.95); }
.btn--primary:active{ transform: translateY(0); }
.btn--ghost{
  border-color: rgba(255,255,255,0.45); color:#fff;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn--ghost:hover{ border-color:#fff; background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.btn--block{ width:100%; }

/* ================= HERO ================= */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:center;
  overflow:hidden; color:#fff;
  /* Si todavía no hay fotos (o alguna no carga), se ve este fondo marrón */
  background: radial-gradient(120% 100% at 15% 0%, var(--color-brand) 0%, var(--color-brand-dark) 45%, var(--color-ink) 100%);
  padding-top: 6rem;
  padding-bottom: 9rem;   /* deja lugar a la barra inferior (progreso + descripción) */
}

/* ---------- FOTOS DEL HERO (carrusel a pantalla completa) ---------- */
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0;
  transition: opacity 1.2s ease;               /* fundido entre fotos */
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1);
  /* al irse la foto, vuelve a escala 1 recién cuando ya se desvaneció */
  transition: transform 0s linear 1.3s;
}
.hero-slide.is-active img{
  transform: scale(1.08);                       /* zoom lento y sutil */
  transition: transform var(--hero-zoom-time, 8.3s) linear 0s;
}

/* Capa oscura para que el texto siempre se lea sobre cualquier foto.
   Para fotos más "limpias" bajá los números (0.78 / 0.35 / 0.72). */
.hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(43,20,5,0.82) 0%, rgba(43,20,5,0.48) 55%, rgba(43,20,5,0.12) 100%),
    linear-gradient(180deg, rgba(43,20,5,0.42) 0%, rgba(43,20,5,0) 28%, rgba(43,20,5,0) 55%, rgba(43,20,5,0.75) 100%);
}

/* ---------- BARRA INFERIOR: progreso + descripción ---------- */
.hero__bottom{
  position:absolute; left:0; right:0; bottom:2.2rem; margin-inline:auto; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  pointer-events:none;
}
.hero__bottom > *{ pointer-events:auto; }

.hero-progress{ display:flex; gap:0.5rem; }
.hero-progress__seg{
  position:relative; width:46px; height:24px; padding:0; border:0; background:none; cursor:pointer;
}
.hero-progress__seg::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px;
  background: rgba(255,255,255,0.3); border-radius:2px;
}
.hero-progress__fill{
  position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; width:0;
  background: var(--color-accent); border-radius:2px;
}
.hero-progress__seg.is-done .hero-progress__fill{ width:100%; }
.hero-progress__seg.is-active .hero-progress__fill{ animation: heroFill var(--hero-slide-time, 7s) linear forwards; }
@keyframes heroFill{ from{ width:0; } to{ width:100%; } }

/* Descripción de la foto: aparece unos segundos después de que entra la foto */
.hero-caption{
  max-width: 380px; padding: 1rem 1.3rem 1.1rem;
  background: rgba(43,20,5,0.5); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  opacity:0; transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;     /* salida rápida */
}
.hero-caption.is-in{
  opacity:1; transform: none;
  transition: opacity 0.9s ease, transform 0.9s ease;     /* entrada suave */
}
.hero-caption__line{
  display:block; height:2px; width:42px; margin-bottom:0.7rem;
  background: var(--color-accent); border-radius:2px;
  transform: scaleX(0); transform-origin:left;
  transition: transform 0.3s ease;
}
.hero-caption.is-in .hero-caption__line{ transform: scaleX(1); transition: transform 0.8s ease 0.3s; }
.hero-caption__text{ font-size:0.95rem; line-height:1.5; color: rgba(255,255,255,0.94); }

@media (max-width: 760px){
  .hero{ padding-bottom: 11rem; }
  .hero__bottom{ flex-direction: column-reverse; align-items:stretch; gap:0.8rem; bottom:1.4rem; }
  .hero-caption{ max-width:none; }
  .scroll-cue{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide.is-active img{ transform:none; }
}

.hero__inner{ position:relative; z-index:2; max-width: var(--container-w); }
.hero__inner > *{ max-width: 780px; }   /* el texto no se estira, pero queda alineado con la barra de abajo */

/* Título del hero: "PASCALE LAUZ" grande + "Consultora" más liviano en dorado (igual que el logo del header) */
.hero__title{
  font-family: var(--font-logo); font-weight:900; letter-spacing:-0.02em;
  font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height:1.04; margin-bottom:1.5rem;
  text-shadow: 0 2px 30px rgba(43,20,5,0.35);
}
.hero__title .accent{
  display:block; font-family: var(--font-logo-alt); font-weight:500; font-size:0.72em;
  letter-spacing:0.01em; line-height:1.1; margin-top:0.1em; color: var(--color-accent);
}

.hero__subtitle{
  font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height:1.65; color: rgba(255,255,255,0.86);
  max-width: 540px; margin-bottom: 2.4rem;
}
.hero__actions{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-bottom: 3rem; }

.scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,0.55); border-radius:999px;
  z-index:2;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:#fff;
  animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue{ 0%{ opacity:1; top:7px; } 70%{ opacity:0; top:22px; } 100%{ opacity:0; top:7px; } }

/* ================= DIVISOR "CINTA DE SEGURIDAD" =================
   Es el guiño a la obra y la seguridad. Ahora más fina y recta para que acompañe sin pesar. */
.hazard-divider{ position:relative; height: 12px; overflow:hidden; background: var(--color-ink); }
.hazard-divider__inner{
  position:absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, var(--color-accent) 0 18px, var(--color-ink) 18px 36px);
}

/* ================= UTILIDADES DE SECCIÓN ================= */
.section{ padding-block: var(--space-section); }
.section--nosotros{ background: var(--color-surface); }
.section--servicios{ background: var(--color-bg-alt); }
.section--proceso{ background: var(--color-brand-dark); color:#fff; }
.section--clientes{ background: var(--color-surface); }
.section--testimonios{ background: var(--color-surface); }
.section--contacto{ background: var(--color-bg-alt); }

/* Rótulo sobre cada título: texto normal + una línea dorada (ya no mayúsculas con fuente de código) */
.section-eyebrow{
  display:inline-flex; align-items:center; gap:0.7rem;
  font-size:0.86rem; letter-spacing:0.02em; font-weight:600;
  color: var(--color-accent-text); margin-bottom:0.9rem;
}
.section-eyebrow::before{ content:''; width:26px; height:2px; border-radius:2px; background: var(--color-accent); }
.section--proceso .section-eyebrow{ color: var(--color-accent); }
.section-title{
  font-family: var(--font-display); font-weight:800; font-size: clamp(1.95rem, 3.7vw, 2.85rem);
  line-height:1.1; letter-spacing:-0.025em; margin-bottom:1.1rem; color: var(--color-brand);
}
.section-lead{ color: var(--color-text-muted); max-width:56ch; font-size:1.08rem; line-height:1.7; }
.section--proceso .section-lead{ color: rgba(255,255,255,0.74); }
.section-head{ margin-bottom: 3.2rem; }
.section-text{ color: var(--color-text-muted); font-size:1.05rem; line-height:1.75; max-width:62ch; margin-bottom:1.6rem; }

.grid-2{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.2rem, 5vw, 4.5rem); align-items:start; }

/* ================= SOBRE NOSOTROS ================= */
.values{ display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:1.6rem; }
.value-chip{
  font-size:0.86rem; font-weight:600; letter-spacing:0.005em;
  background: var(--color-bg); border:1px solid var(--color-border);
  padding: 0.5rem 1rem; border-radius:999px; color: var(--color-brand-dark);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.value-chip:hover{ border-color: var(--color-accent); background:#fff; }

.mv-cards{ display:flex; flex-direction:column; gap:1.2rem; }
.mv-card{
  background: linear-gradient(155deg, #4A230A 0%, var(--color-brand-dark) 100%);
  color:#fff; border-radius: var(--radius-md);
  padding: 2rem 2.1rem; position:relative; overflow:hidden;
  box-shadow: var(--shadow-md);
}
.mv-card::after{
  /* destello dorado muy suave en la esquina */
  content:''; position:absolute; right:-70px; top:-70px; width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,152,63,0.22) 0%, transparent 70%); pointer-events:none;
}
.mv-card--alt{ background: linear-gradient(155deg, #6B3410 0%, var(--color-brand) 100%); }
.mv-card__icon{
  width:40px; height:40px; border-radius:50%; margin-bottom:1rem;
  display:grid; place-items:center; font-size:1rem; line-height:1;
  color: var(--color-accent); background: rgba(201,152,63,0.14); border:1px solid rgba(201,152,63,0.35);
}
.mv-card h3{ font-family: var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:-0.01em; margin-bottom:0.55rem; }
.mv-card p{ color: rgba(255,255,255,0.82); font-size:0.98rem; line-height:1.7; }

/* ================= STATS (franja opcional) ================= */
.stats{ background: var(--color-ink); color:#fff; padding-block: clamp(3rem, 6vw, 4.5rem); }
.stats__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1.5rem; text-align:center;
}
.stat{ padding-inline:0.5rem; }
.stat__number{
  font-family: var(--font-display); font-weight:800; font-size: clamp(2.2rem, 4vw, 3.1rem);
  color: var(--color-accent); display:block; line-height:1; letter-spacing:-0.02em;
}
.stat__label{
  font-size:0.86rem; color: rgba(255,255,255,0.72);
  margin-top:0.6rem; display:block; letter-spacing:0.01em;
}

/* ================= SERVICIOS (filas largas, estilo editorial) ================= */
.services-list{ display:flex; flex-direction:column; border-top: 1px solid var(--color-border); }
.services-list > a{ display:block; border-bottom: 1px solid var(--color-border); border-radius: 4px; }
.service-row{
  display:grid;
  grid-template-columns: 76px 1fr auto;
  align-items:center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: clamp(1.7rem, 3.2vw, 2.5rem) 1rem;
  position:relative;
  transition: background 0.35s var(--ease);
}
.service-row::before{
  /* barra de acento que "crece" desde arriba al pasar el mouse */
  content:''; position:absolute; left:0; top:12%; bottom:12%; width:3px; border-radius:3px;
  background: var(--color-accent); transform: scaleY(0); transform-origin: center;
  transition: transform 0.35s var(--ease);
}
.service-row:hover{ background: rgba(255,255,255,0.65); }
.service-row:hover::before{ transform: scaleY(1); }

.service-row__icon{
  width:76px; height:76px; object-fit:contain;
  transition: transform 0.35s var(--ease);
}
.service-row:hover .service-row__icon{ transform: scale(1.06); }

.service-row__body{ min-width:0; }
.service-row__body h3{
  font-family: var(--font-display); font-weight:700; font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  margin-bottom:0.5rem; letter-spacing:-0.015em; line-height:1.2; color: var(--color-brand);
}
.service-row__body p{
  color: var(--color-text-muted); font-size:1rem; max-width: 62ch; line-height:1.7;
}

.service-row__arrow{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color: var(--color-brand-dark);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.service-row:hover .service-row__arrow{
  background: var(--color-brand); border-color: var(--color-brand); color:#fff;
  transform: translateX(4px);
}

@media (max-width: 720px){
  .service-row{ grid-template-columns: 1fr auto; grid-template-areas: "icon arrow" "body body"; row-gap: 1rem; padding-inline:0.4rem; }
  .service-row__arrow{ grid-area: arrow; justify-self:end; }
  .service-row__icon{ grid-area: icon; width:64px; height:64px; }
  .service-row__body{ grid-area: body; }
}

/* ================= CLIENTES / CARRUSEL (marquee) ================= */
.marquee{ position:relative; overflow:hidden; padding-block: 1.6rem; }
/* Desvanecido de los bordes con capas simples (la máscara anterior
   se trababa en Safari/iPhone al combinarse con la animación). */
.marquee::before, .marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:12%; z-index:2; pointer-events:none;
}
.marquee::before{ left:0;  background: linear-gradient(90deg,  var(--color-surface), transparent); }
.marquee::after{  right:0; background: linear-gradient(270deg, var(--color-surface), transparent); }
/* El movimiento lo aplica initMarquee() en js/main.js */
.marquee__track{ display:flex; align-items:center; gap: 3.4rem; width:max-content; will-change: transform; backface-visibility:hidden; }
.client-logo{
  display:flex; align-items:center; justify-content:center;
  height: 56px; flex-shrink:0;
}
/* Logos siempre a color (pedido del cliente). */
.client-logo img{
  height: 150%;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  transition: transform 0.3s var(--ease);
}
.client-logo:hover img{
  transform: scale(1.04);
}
@media (max-width: 760px){
  .marquee__track{ gap: 2.2rem; }
  .client-logo{ height: 44px; }
  .client-logo img{ max-width: 180px; }
}

/* Casos destacados (sección opcional, hoy no se muestra) */
.cases{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.6rem; margin-top:2.5rem; }
.case-card{
  border-radius: var(--radius-md); overflow:hidden; background: var(--color-surface);
  border:1px solid var(--color-border); display:flex; flex-direction:column; box-shadow: var(--shadow-xs);
}
.case-card__media{
  height:150px; position:relative; overflow:hidden;
}
.case-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform 0.5s var(--ease); }
.case-card:hover .case-card__media img{ transform: scale(1.08); }
.case-card__body{ padding: 1.4rem 1.5rem 1.7rem; }
.case-card__tag{ font-size:0.78rem; color: var(--color-green); font-weight:700; }
.case-card h3{ font-family: var(--font-display); font-size:1.05rem; margin: 0.4rem 0 0.5rem; }
.case-card p{ color: var(--color-text-muted); font-size:0.93rem; }

/* ================= TESTIMONIOS (sección opcional, hoy comentada en index.html) ================= */
.testi{ position:relative; display:flex; align-items:center; gap:1rem; margin-top:2rem; }
.testi__viewport{ overflow:hidden; flex:1; }
.testi__track{ display:flex; transition: transform 0.5s var(--ease); }
.testi__slide{ min-width:100%; padding: 0.5rem; }
.testi-card{
  background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 2.4rem clamp(1.5rem, 4vw, 3.5rem);
  text-align:center; max-width: 720px; margin-inline:auto;
}
.testi-card__quote{ color: var(--color-brand); font-size: clamp(1.05rem, 2vw, 1.28rem); font-family: var(--font-display); font-weight:600; line-height:1.5; margin-bottom:1.4rem; }
.testi-card__author{ font-weight:700; }
.testi-card__role{ color: var(--color-text-muted); font-size:0.9rem; }
.testi__arrow{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid var(--color-border);
  background: var(--color-surface); font-size:1.4rem; display:flex; align-items:center; justify-content:center;
  color: var(--color-brand-dark); transition: all 0.2s var(--ease);
}
.testi__arrow:hover{ background: var(--color-brand-dark); color:#fff; border-color: var(--color-brand-dark); }
.testi__dots{ display:flex; justify-content:center; gap:0.5rem; margin-top:1.4rem; }
.testi__dot{ width:9px; height:9px; border-radius:50%; background: var(--color-border); border:none; padding:0; }
.testi__dot.is-active{ background: var(--color-accent); width:22px; border-radius:999px; transition: all 0.3s var(--ease); }

/* ================= CONTACTO ================= */
.grid-2--contact{ align-items:stretch; }
.contact-list{ display:flex; flex-direction:column; gap:1.1rem; margin-top:1.8rem; }
.contact-list li{ display:flex; gap:1rem; align-items:center; font-size:1rem; }
.contact-list a{ border-bottom:1px solid transparent; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.contact-list a:hover{ color: var(--color-brand); border-bottom-color: var(--color-accent); }
.contact-list .ico{
  width:42px; height:42px; border-radius:50%; background: var(--color-brand-dark); color: var(--color-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-list .ico svg{ width:19px; height:19px; }

.contact-form{
  background: var(--color-surface); border-radius: var(--radius-lg); padding: clamp(1.7rem, 4vw, 2.6rem);
  border:1px solid var(--color-border); box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column; gap:1.15rem;
}
.field{ display:flex; flex-direction:column; gap:0.45rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{ font-size:0.86rem; font-weight:600; color: var(--color-text); }
.field input, .field textarea{
  border:1.5px solid var(--color-border); border-radius: 12px; padding:0.85rem 1rem;
  background: var(--color-bg); color: var(--color-text); resize: vertical;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:#7A6753; opacity:1; }
.field input:hover, .field textarea:hover{ border-color:#CDBFA8; }
.field input:focus, .field textarea:focus{
  outline:none; border-color: var(--color-brand-light); background:#fff;
  box-shadow: 0 0 0 4px rgba(201,152,63,0.25);
}
.form-note{ font-size:0.92rem; color: var(--color-green); min-height:1.2em; font-weight:600; }
.contact-form .btn--primary:disabled{ opacity:0.7; cursor:wait; transform:none; }

/* ================= FOOTER ================= */
.footer{ background: var(--color-bg-alt); color: var(--color-text-muted); padding-block: 3.5rem 2.2rem; border-top: 1px solid var(--color-border); }
.footer__inner{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--color-border); padding-bottom:2.2rem; }
.brand__text--footer{ color: var(--color-brand); }
.footer__brand{ max-width: 420px; }
.footer__brand p{ margin-top:0.7rem; font-size:0.94rem; line-height:1.7; }
.footer__nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer__nav a{
  font-size:0.92rem; font-weight:600; color: var(--color-text); position:relative; padding-block:0.2rem;
  transition: color 0.2s var(--ease);
}
.footer__nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0; background: var(--color-accent); border-radius:2px;
  transition: width 0.25s var(--ease);
}
.footer__nav a:hover{ color: var(--color-brand); }
.footer__nav a:hover::after{ width:100%; }
.footer__legal{ width:100%; margin-top:1.4rem; font-size:0.84rem; }

/* ================= ANIMACIONES AL SCROLLEAR ================= */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal--right{ transform: translateY(18px) translateX(0); }
.reveal.is-visible{ opacity:1; transform: translateY(0) translateX(0); }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .grid-2{ grid-template-columns: 1fr; }
  .cases{ grid-template-columns: repeat(2, 1fr); }
  .stats__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .nav{
    position:fixed; top:0; right:0; height:100svh; width: min(80vw, 330px);
    background: var(--color-bg); flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 2rem 2.2rem; gap:1.7rem; transform: translateX(100%); transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
    box-shadow: -24px 0 50px rgba(43,20,5,0.28); visibility:hidden;
  }
  .nav.is-open{ transform: translateX(0); visibility:visible; transition: transform 0.35s var(--ease); }
  .nav__link{ font-size:1.12rem; }
  .nav__link--cta{ font-size:1rem; }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .cases{ grid-template-columns: 1fr; }
  .stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .field-row{ grid-template-columns: 1fr; }
  .brand__text, .brand__dot{ font-size:1.12rem; }
}


/* ================= BOTÓN FLOTANTE DE WHATSAPP ================= */
/* Vive en components/footer.html, así que sale en todas las páginas.
   Queda por debajo del header (z-index 900) para no tapar el menú móvil. */
.wa-float{
  position: fixed; right: clamp(0.9rem, 2.4vw, 1.6rem); bottom: clamp(0.9rem, 2.4vw, 1.6rem); z-index: 850;
  display:flex; align-items:center; justify-content:center; gap:0;
  height: 58px; min-width: 58px; padding: 0; border-radius: 999px;   /* en reposo: círculo perfecto 58 x 58 */
  background:#25D366; color:#fff;
  box-shadow: 0 10px 24px -8px rgba(43,20,5,0.55);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), padding 0.3s var(--ease), gap 0.3s var(--ease);
}
.wa-float:hover{ background:#1EBE5A; transform: translateY(-3px); }
.wa-float:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 3px; }
.wa-float svg{ flex-shrink:0; }
/* Etiqueta: solo en computadoras con mouse, aparece al pasar el cursor */
.wa-float__label{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-weight:700; font-size:0.92rem;
  transition: max-width 0.35s var(--ease), opacity 0.25s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .wa-float:hover, .wa-float:focus-visible{ padding: 0 18px; gap: 0.6rem; }   /* al pasar el mouse se alarga con la etiqueta */
  .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label{ max-width: 220px; opacity:1; }
}
/* Anillo suave que invita a tocar (se apaga con "reducir movimiento") */
.wa-float::before{
  content:''; position:absolute; inset:0; border-radius:inherit; background:#25D366; z-index:-1;
  animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.55; } 70%,100%{ transform:scale(1.45); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .wa-float::before{ animation:none; display:none; } }

/* Que no tape la descripción de la foto del hero */
@media (max-width: 1360px){ .hero__bottom{ padding-right: calc(clamp(1.25rem, 4vw, 2.5rem) + 4.4rem); } }

/* En celular las barritas de progreso del hero se achican para no quedar debajo del botón */
@media (max-width: 760px){
  .hero-progress{ width: calc(100% - 4.8rem); gap:0.3rem; }
  .hero-progress__seg{ flex:1 1 0; width:auto; max-width:46px; min-width:0; }
}

/* ================= CLIENTES: enlace "Ver todos" y página con todos los clientes ================= */
.clients-more{ display:flex; justify-content:center; margin-top: 1.4rem; }
.link-all{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-weight:700; font-size:1rem; color: var(--color-brand);
  border-bottom: 2px solid var(--color-accent); padding-bottom: 3px;
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.link-all:hover{ gap:0.9rem; color: var(--color-brand-light); }

.clients-grid{
  display:grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));   /* filas y columnas automáticas */
}
.client-card{
  display:flex; flex-direction:column; align-items:center; gap:0.9rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1.5rem 1.2rem 1.2rem; box-shadow: var(--shadow-xs);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.client-card:hover{ border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.client-card__logo{ width:100%; height:110px; display:flex; align-items:center; justify-content:center; }
.client-card__logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}
.client-card__name{
  font-size:0.84rem; font-weight:600; text-align:center;
  color: var(--color-text-muted); letter-spacing:0.005em;
}
@media (max-width: 560px){
  .clients-grid{ grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .client-card{ padding: 1rem 0.8rem 0.9rem; }
  .client-card__logo{ height: 86px; }
}

/* Pantallas muy angostas: el nombre de la marca se achica un poco para no chocar con el botón del menú */
@media (max-width: 400px){
  .brand__text, .brand__dot{ font-size:0.95rem; }
}