/* ==========================================================================
   Chocolatte — web de captación (rediseño del 12/9/2026)
   Oscuro editorial con la paleta de la marca: chocolate, crema y dorado.
   ========================================================================== */

:root {
  --bg:      #120C09;
  --bg-2:    #1A120D;
  --bg-3:    #241911;
  --choco:   #3B2418;
  --cream:   #F5EDE4;
  --cream-2: #D9CCBC;
  --muted:   #A08F7C;
  --gold:    #C9A15C;
  --gold-2:  #E2C089;
  --white:   #FFFDF9;
  --line:    rgba(245, 237, 228, .12);
  --line-2:  rgba(245, 237, 228, .22);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 18px;
  --ease: cubic-bezier(.16, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--bg); }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }
.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); max-width: 16ch; }
h2 em, h1 em { font-style: italic; color: var(--gold-2); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cream-2); max-width: 58ch; margin: 22px 0 0; }

/* ----- Botones ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 28px; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s, box-shadow .35s;
}
.btn-gold { background: var(--gold); color: #1A120D; box-shadow: 0 10px 34px -12px rgba(201, 161, 92, .7); }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); }


.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ----- Cabecera ----- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(18, 12, 9, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand img { height: 26px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { text-decoration: none; font-size: 14px; color: var(--cream-2); transition: color .3s; }
.main-nav a:hover { color: var(--gold-2); }
.main-nav .btn { padding: 12px 20px; font-size: 12px; color: #1A120D; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--cream); margin: 6px auto; transition: transform .35s var(--ease), opacity .3s; }

/* ----- Portada ----- */
@property --mesh-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  padding: 130px 0 90px; overflow: hidden; isolation: isolate;
}
.hero-mesh {
  position: absolute; inset: -20%; z-index: -2; filter: blur(70px); opacity: .75;
  background:
    radial-gradient(40% 45% at 78% 30%, rgba(201, 161, 92, .40), transparent 70%),
    radial-gradient(35% 40% at 15% 80%, rgba(139, 84, 46, .45), transparent 70%),
    conic-gradient(from var(--mesh-a) at 60% 55%, #3B2418, #120C09, #5A3620, #120C09, #3B2418);
  animation: mesh 24s linear infinite;
}
@keyframes mesh { to { --mesh-a: 360deg; } }
.hero-grain {
  position: absolute; inset: 0; z-index: -1; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.hero h1 { font-size: clamp(2.8rem, 7.4vw, 6.4rem); max-width: 13ch; }
.hero h1 .line { display: block; }
.hero .lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }


/* ----- Cifras ----- */
.numbers { background: var(--bg-2); border-block: 1px solid var(--line); }


/* ----- Clientes (carrusel) ----- */
.rail-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.rail-arrows { display: flex; gap: 10px; }
.rail-arrows button {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: none;
  color: var(--cream); cursor: pointer; font-size: 18px; transition: border-color .3s, color .3s, transform .3s;
}
.rail-arrows button:hover { border-color: var(--gold); color: var(--gold-2); transform: scale(1.05); }
.rail {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 48px;
  padding: 4px max(20px, calc((100vw - var(--container)) / 2)) 26px; scrollbar-width: none; cursor: grab;
  /* Sin esto, el ajuste automático pega la primera tarjeta al borde e ignora el margen. */
  scroll-padding-inline: max(20px, calc((100vw - var(--container)) / 2));
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.case {
  flex: 0 0 min(380px, 84vw); scroll-snap-align: start; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
  display: flex; flex-direction: column; gap: 14px; transition: border-color .4s, transform .4s var(--ease);
}
.case:hover { border-color: rgba(201, 161, 92, .45); transform: translateY(-4px); }
.case-top { display: flex; align-items: center; gap: 14px; }
.case-logo {
  width: 58px; height: 58px; border-radius: 14px; background: var(--cream); flex: none;
  display: grid; place-items: center; overflow: hidden; color: var(--choco);
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.case-logo img { width: 80%; height: 80%; object-fit: contain; }
.case-logo--dark { background: #0B0706; border: 1px solid var(--line-2); }
.case-logo--wide { width: auto; min-width: 58px; padding: 0 14px; }
.case-logo--wide img { width: auto; height: auto; max-width: 132px; max-height: 34px; }
.case--featured .case-top, .case-top:has(.case-logo--wide) { flex-wrap: wrap; }
.case-name { font-family: var(--font-display); font-size: 22px; line-height: 1.15; }
.case-sector { font-size: 13px; color: var(--muted); }
.case-result { font-family: var(--font-display); font-size: 30px; color: var(--gold-2); line-height: 1.1; margin-top: 6px; }
.case-result small { display: block; font-family: var(--font-body); font-size: 14px; color: var(--cream-2); margin-top: 6px; line-height: 1.45; }
.case p { margin: 0; color: var(--cream-2); font-size: 15px; }
.case-link { margin-top: auto; font-size: 13px; color: var(--gold); text-decoration: none; letter-spacing: .04em; }
.case-link:hover { color: var(--gold-2); }
.case--featured { background: linear-gradient(160deg, #3B2418, var(--bg-3) 70%); border-color: rgba(201, 161, 92, .35); }

/* ----- Sistema en 3 pasos ----- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.step { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); display: flex; flex-direction: column; }
.step-video {
  aspect-ratio: 16 / 10; background: radial-gradient(80% 90% at 30% 20%, rgba(201, 161, 92, .22), transparent 60%), var(--choco);
  display: grid; place-items: center; position: relative;
}
.step-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(245, 237, 228, .5); display: grid; place-items: center; }
.play::after { content: ""; border-left: 16px solid var(--cream); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.step-video .soon { position: absolute; bottom: 14px; left: 16px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-2); }
.step-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.step-n { font-size: 12px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.step h3 { font-size: 27px; }
.step p { margin: 0; color: var(--cream-2); font-size: 15.5px; }
.step ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: var(--cream); }
.step li { padding-left: 18px; position: relative; }
.step li::before { content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1px; background: var(--gold); }
.step--highlight { border-color: rgba(201, 161, 92, .45); }

/* ----- Dos motores ----- */
.engines { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 56px; }
.engine { border-radius: var(--radius); padding: 36px; background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.engine h3 { font-size: 30px; }
.engine p { margin: 0; color: var(--cream-2); }
.engine svg { width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.engine .curve { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.2s var(--ease) .2s; }
.engine.is-in .curve { stroke-dashoffset: 0; }
.engine .area { fill: url(#fadeGold); opacity: .5; }
.engine .axis { stroke: var(--line-2); stroke-width: 1; }


.voice-media .soon { position: absolute; bottom: 12px; left: 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-2); }


/* ----- Para quién ----- */
.qualify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.q-card { border-radius: var(--radius); padding: 34px; border: 1px solid var(--line); background: var(--bg-2); }
.q-card h3 { font-size: 24px; margin-bottom: 18px; }
.q-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.q-card li { padding-left: 30px; position: relative; color: var(--cream-2); }
.q-card li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.q-yes li::before { content: "✓"; color: var(--gold); }
.q-no li::before { content: "—"; color: var(--muted); }
.q-yes { border-color: rgba(201, 161, 92, .4); }


.brand-plus .kicker { color: #8A5A32; }

.brand-plus .lead { color: #5B4636; }


/* ----- Sobre mí ----- */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.about-photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius); background: linear-gradient(160deg, #3B2418, #120C09);
  display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo .voice-initials { font-size: 96px; }
.about p { color: var(--cream-2); margin: 18px 0 0; }
.about .signature { font-family: var(--font-display); font-style: italic; color: var(--gold-2); font-size: 26px; margin-top: 26px; }

/* ----- Preguntas ----- */

/* ----- Llamada final ----- */
.final { text-align: center; overflow: hidden; isolation: isolate; }
.final::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 70% at 50% 100%, rgba(201, 161, 92, .28), transparent 70%);
}
.final h2 { margin-inline: auto; max-width: 18ch; }
.final .lead { margin-inline: auto; }
.final .hero-actions { justify-content: center; }

/* ----- Pie ----- */
.site-footer { border-top: 1px solid var(--line); padding: 44px 0 110px; color: var(--muted); font-size: 14px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer-inner img { height: 22px; width: auto; opacity: .9; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--gold-2); }

/* ----- Botón fijo en móvil ----- */
.sticky-cta {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: none;
  transform: translateY(140%); transition: transform .5s var(--ease);
}
.sticky-cta.is-visible { transform: none; }

/* ----- Apariciones al hacer scroll ----- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }
/* La portada entra sola con CSS: no depende de que el JavaScript o el navegador avisen. */
.hero .reveal { opacity: 1; transform: none; transition: none; animation: heroIn 1s var(--ease) both; }
.hero .reveal.d1 { animation-delay: .1s; } .hero .reveal.d2 { animation-delay: .22s; } .hero .reveal.d3 { animation-delay: .34s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

/* ----- Tablet ----- */
@media (max-width: 1020px) {
  
  .steps, .voices { grid-template-columns: 1fr; max-width: 640px; }
  
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo { max-width: 420px; }

}

/* ----- Móvil: composición propia, no la de ordenador aplastada ----- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .header-inner { height: 66px; }
  .brand img { height: 22px; }
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: 66px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(18, 12, 9, .97); backdrop-filter: blur(14px); padding: 10px 20px 26px;
    border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform .45s var(--ease);
  }
  .main-nav.is-open { transform: none; }
  .main-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .main-nav .btn { margin-top: 18px; border-bottom: 0; }
  .nav-toggle.is-open span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle.is-open span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .hero { min-height: auto; padding: 118px 0 64px; align-items: flex-start; }
  .hero h1 { font-size: clamp(2.5rem, 11.5vw, 3.4rem); }
  
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  

  
  
  
  
  

  .rail-arrows { display: none; }
  .engines, .qualify-grid { grid-template-columns: 1fr; }
  .engine, .q-card { padding: 28px 24px; }
  .sticky-cta { display: flex; }

}

@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation-duration: 90s; }

}

/* ==========================================================================
   Cambios del 12/9 por la tarde: portada compacta con un solo botón,
   tira de logos, cifra extra, antes y después de la marca.
   ========================================================================== */
.hero { min-height: 0; padding: 136px 0 0; align-items: stretch; flex-direction: column; }

.hero-inner { display: grid; grid-template-columns: 1fr; align-items: center; gap: 40px; }
.hero-inner.has-visual { grid-template-columns: 1.15fr .85fr; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.9rem); max-width: 14ch; }
.hero .lead { margin-top: 18px; }
.hero-actions { margin-top: 30px; }
.btn-lg { padding: 20px 34px; font-size: 14px; }
.hero-visual:empty { display: none; }
.hero-visual img { width: 100%; height: auto; }

.logo-marquee { margin-top: 64px; padding: 26px 0 30px; border-top: 1px solid var(--line); }
.marquee-label { text-align: center; margin: 0 0 32px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img { height: 30px; width: auto; max-width: 170px; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; }
.marquee-word { font-family: var(--font-display); font-size: 22px; color: var(--cream); opacity: .72; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }


@media (max-width: 1020px) {
  .hero-inner.has-visual, .plus-top { grid-template-columns: 1fr; }

}
@media (max-width: 760px) {
  .hero { padding: 104px 0 0; }
  .hero h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .hero .lead { font-size: 1.02rem; }
  .hero-actions .btn { width: 100%; }
  .logo-marquee { margin-top: 44px; }
  .marquee-track { gap: 44px; animation-duration: 30s; }
  .marquee-track img { height: 24px; }
  .marquee-word { font-size: 18px; }

}

/* Retrato en la portada: se funde con el fondo en vez de verse como un rectángulo */
.hero-visual { position: relative; justify-self: end; width: min(100%, 470px); }
.hero-visual img {
  border-radius: 24px;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 42%, #000 58%, transparent 82%);
  mask-image: radial-gradient(120% 95% at 50% 42%, #000 58%, transparent 82%);
  animation: heroIn 1.2s var(--ease) .2s both;
}
@media (max-width: 760px) { .hero-visual { display: none; } 
}

/* Sobre mí: la foto es un PNG cuadrado con fondo transparente; se enseña entera, sin recortar */
.about-photo { aspect-ratio: auto; background: none; border: 0; overflow: visible; }
.about-photo img { height: auto; object-fit: contain; }

/* Nextube no tiene logo en fichero: su web lo compone en texto, «Nex» en blanco y «tube» en rojo */
.nextube-mark { font-family: var(--font-body); font-weight: 800; font-size: 21px; letter-spacing: -.03em; color: #fff; }
.nextube-mark b { color: #EB1414; font-weight: 800; }
.marquee-word--nextube { font-family: var(--font-body); font-weight: 800; letter-spacing: -.03em; }

/* Clientes sin logo: icono de su sector en vez de iniciales */
.case-icon { width: 28px; height: 28px; fill: none; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Cada sección, dentro de la pantalla — 25 de septiembre de 2026
   Regla suya: «si tengo que hacer scroll para ver la sección entera, está mal
   diseñada». Su pantalla útil son 1512 x 695 px de verdad —portátil con barra
   de marcadores—, así que el objetivo aquí es que ninguna sección pase de unos
   660 px de alto. Todo lo de abajo es recorte vertical: menos aire, menos
   cuerpo de letra, mismas piezas.
   ========================================================================== */
@media (min-width: 981px) {
  .section { padding: 52px 0; }
  h2 { font-size: clamp(1.9rem, 2.9vw, 2.5rem); max-width: 20ch; }
  .kicker { margin-bottom: 12px; }
  .section .lead { font-size: 1.02rem; margin-top: 10px; }

  .steps, .engines { margin-top: 26px; }


  
  
  
  

  /* Los tres vídeos */
  .step-video { aspect-ratio: 16 / 9; }
  .play { width: 48px; height: 48px; }

  /* Los dos motores */
  .engine { padding: 22px 24px; gap: 10px; }
  .engine h3 { font-size: 23px; }
  .engine p { font-size: 15px; line-height: 1.5; }
  .engine svg { max-height: 96px; margin-top: 6px; }

  /* Preguntas */

  /* Portada: que se vea el botón y la tira de logos sin bajar */
  .hero { padding-top: 104px; }
  .hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
  .hero .lead { font-size: 1.05rem; }
  .hero-actions { margin-top: 24px; }

}

/* La llamada a la acción que cierra una sección, centrada. */
.section-cta { display: flex; justify-content: center; margin-top: 26px; }

/* Los números ya no llevan titular: son la franja que remata «cómo trabajamos». */
.numbers--mini .kicker { margin-bottom: 14px; }

/* Segunda vuelta del recorte: las dos secciones que seguían sin caber. */
@media (min-width: 981px) {
  .section { padding: 44px 0; }
  .section .lead { font-size: .98rem; }

  /* Portada: la altura la mandaba el retrato, no el texto. */
  .hero { padding-top: 88px; }
  .hero-visual { width: min(100%, 360px); }
  .logo-marquee { margin-top: 26px; padding: 14px 0 4px; }
  .marquee-label { margin-bottom: 20px; }
  .marquee-track img { height: 24px; }
  .marquee-word { font-size: 18px; }
  .marquee-track { gap: 48px; }

  /* Cómo trabajamos: la lista de cada pieza pasa a dos columnas en vez de
     cuatro filas. Se mantiene todo lo que dice, ocupando la mitad. */
  #sistema { padding: 36px 0; }
  .step-body { padding: 16px 18px; gap: 8px; }
  .step-n { font-size: 11px; }
  .step h3 { font-size: 19px; line-height: 1.15; }
  .step p { font-size: 13.5px; line-height: 1.45; }
  .step ul { grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 12.5px; }

  .section-cta { margin-top: 20px; }

}

/* Tercera vuelta: «cómo trabajamos» seguía 120 px por encima de la pantalla. */
@media (min-width: 981px) {
  #sistema { padding: 32px 0; }
  #sistema .lead { font-size: .92rem; max-width: 78ch; margin-top: 8px; }
  #sistema .step-video { aspect-ratio: 2 / 1; }
  #sistema .step-body { padding: 14px 16px; gap: 6px; }
  #sistema .step h3 { font-size: 18px; }
  #sistema .step p { font-size: 13px; line-height: 1.4; }
  #sistema .step ul { font-size: 12px; gap: 5px 12px; }
  #sistema .section-cta .btn { padding: 13px 24px; }

}

@media (min-width: 981px) { #sistema { padding: 26px 0; } 
}

/* ----- Móvil: la barra de cristal que le sigue -----
   Él la pidió así el 25/9/2026: «formato Liquid Glass, transparente y se ve la
   web detrás, pero manteniendo los colores de marca», el texto repartido a lo
   ancho y, a la derecha, un botón redondo con un teléfono.
   Antes era un botón normal de lado a lado: se le solapaba con el botón de
   «subir» del navegador y no se leía. */
@media (max-width: 980px) {
  .sticky-cta {
    left: 12px; right: 12px; bottom: 14px; width: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 9px 9px 22px;
    border-radius: 999px;
    color: var(--cream); text-decoration: none;
    background: linear-gradient(120deg, rgba(59, 36, 24, .52), rgba(26, 18, 13, .58));
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(226, 192, 137, .32);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 253, 249, .14);
    transform: translateY(170%);
  }
  .sticky-cta.is-visible { transform: none; }

  /* Todo en un renglón: él lo quiere de lado a lado, no en dos líneas. */
  .sticky-cta__texto {
    display: flex; align-items: baseline; gap: .42em; white-space: nowrap;
    font-size: 12px; font-weight: 600; line-height: 1;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .sticky-cta__texto span:last-child { color: var(--gold-2); }

  .sticky-cta__icono {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center; color: #17100B;
    background: linear-gradient(140deg, var(--gold-2), var(--gold));
    box-shadow: 0 6px 18px rgba(201, 161, 92, .45);
  }
  .sticky-cta__icono svg { width: 21px; height: 21px; }

  /* Con la barra siempre a mano, los dos botones sueltos de en medio sobran.
     El de la portada y el del cierre se quedan: esos no son .section-cta. */
  .section-cta { display: none; }

}

/* ----- La costura entre la portada y la tira de logos — 25/9/2026 -----
   Él: «hay como una línea oscura ahí, parece que se ha quitado una sección y
   ha quedado mal construido». Era el borde duro donde acaba el degradado de la
   portada, más una línea de 1 px a todo lo ancho sobre los logos.
   Ahora la portada se disuelve en el fondo y la línea es un trazo que se apaga
   por los lados. Y debajo de los logos, aire. */
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
  background: linear-gradient(180deg, rgba(18, 12, 9, 0), var(--bg) 92%);
  pointer-events: none; z-index: -1;
}
.logo-marquee { border-top: 0; position: relative; }
.logo-marquee::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 192, 137, .26), transparent);
}
@media (min-width: 981px) {
  .logo-marquee { margin-top: 30px; padding: 22px 0 40px; }

}
@media (max-width: 980px) {
  .logo-marquee { padding-bottom: 34px; }

}

/* Los tres vídeos, sin las listas — 25/9/2026
   Él: «son tres vídeos que obligamos a ver; encima explicarlo todo en texto es
   redundante». Se quedan título y una línea. Con eso sobra alto, así que el
   vídeo recupera tamaño y la sección respira. */
@media (min-width: 981px) {
  #sistema { padding: 46px 0; }
  #sistema .step-video { aspect-ratio: 16 / 10; }
  #sistema .step-body { padding: 20px 22px 24px; gap: 8px; }
  #sistema .step h3 { font-size: 21px; }
  #sistema .step p { font-size: 14.5px; line-height: 1.5; }

}

/* ----- Ajustes del 28 de septiembre de 2026 -----
   Los pidió él, viendo la web ya publicada. */

/* La promesa de la portada lleva debajo a quién NO servimos. En gris y pequeño
   a proposito: filtra sin robarle fuerza al titular. */
.hero-filtro {
  margin: 14px 0 0; max-width: 48ch;
  font-size: 14.5px; line-height: 1.5; color: var(--muted);
}

/* El cierre de «cómo trabajamos»: la frase del traje a medida antes del botón. */
.cierre {
  margin: 44px auto 0; max-width: 54ch; text-align: center;
  font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3; color: var(--cream);
}

/* Una sección más clara para romper el marrón seguido del final de la página.
   Palabras suyas: «es marrón, marrón y marrón, o sea, es como un poco soso».
   Se la queda «Para quién es», que es la que más se lee antes de la llamada. */
.section--claro {
  background: linear-gradient(180deg, #2B1D14 0%, #3B2418 100%);
  border-block: 1px solid rgba(226, 192, 137, .2);
}
.section--claro .q-card { background: rgba(18, 12, 9, .34); border-color: rgba(245, 237, 228, .16); }
.section--claro .q-yes { border-color: rgba(226, 192, 137, .5); }
.section--claro .q-card li { color: var(--cream); }

/* Compactado del 28/9/2026: con el texto nuevo, portada y «cómo trabajamos»
   se salían de pantalla (832 y 973 px contra 695 de alto útil), y su regla es
   que una sección que no cabe está mal diseñada. */
@media (min-width: 981px) {
  .hero { padding-top: 70px; }
  .hero h1 { font-size: clamp(2.6rem, 4.1vw, 3.5rem); }
  .hero .lead { margin-top: 12px; }
  .hero-filtro { margin-top: 10px; font-size: 13.5px; }
  .hero-actions { margin-top: 18px; }
  .logo-marquee { margin-top: 34px; padding: 18px 0 8px; }
  .marquee-label { margin-bottom: 18px; }

  .steps { margin-top: 30px; }
  .step-video { aspect-ratio: 16 / 9; }
  .step-body { padding: 20px 22px; gap: 8px; }
  .step h3 { font-size: 22px; }
  .step p { font-size: 14.6px; line-height: 1.5; }
  .cierre { margin-top: 24px; font-size: clamp(18px, 1.9vw, 21px); }
  .section-cta { margin-top: 16px; }
}

/* El cierre de «cómo trabajamos» va en fila con su botón: apilado se comía
   140 px y la sección no cabía en pantalla. */
.cierre-fila { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 26px; }
.cierre-fila .cierre { margin: 0; text-align: left; max-width: 34ch; }
.cierre em { color: var(--gold-2); font-style: italic; }

@media (min-width: 981px) {
  #sistema { padding: 34px 0 38px; }
  #sistema h2 { font-size: clamp(2rem, 3.1vw, 2.6rem); }
  .step-video { max-height: 210px; }
  .cierre-fila { margin-top: 20px; }
}
@media (max-width: 720px) {
  .cierre-fila { flex-direction: column; gap: 14px; }
  .cierre-fila .cierre { text-align: center; }
}

/* Último apretón para que portada y «cómo trabajamos» quepan en 695 px de alto,
   que es lo que da su pantalla. Medido, no estimado. */
@media (min-width: 981px) {
  .hero { padding-top: 56px; }
  .hero h1 { font-size: clamp(2.5rem, 3.9vw, 3.3rem); }
  .hero .lead { margin-top: 8px; }
  .logo-marquee { margin-top: 24px; padding: 12px 0 4px; }
  .marquee-label { margin-bottom: 14px; }

  #sistema { padding: 24px 0 26px; }
  #sistema .kicker { margin-bottom: 10px; }
  .step-video { max-height: 148px; }
  .step-body { padding: 16px 20px; gap: 6px; }
  .step p { font-size: 14.2px; line-height: 1.45; }
}

/* ==========================================================================
   Página de contacto — 28 de septiembre de 2026
   La vieja era una mini web (qué hacemos, sobre mí, casos de éxito) con un
   formulario que además escribía en una tabla borrada. Ahora es lo que él
   pidió: un formulario y nada más.
   ========================================================================== */
.contacto-bloque { padding-top: 120px; }
.contacto-inner { max-width: 780px; }
.contacto-inner h1 { font-size: clamp(2.1rem, 4.4vw, 3rem); }
.contacto-inner .lead { margin-top: 12px; }

.form-contacto {
  margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
}
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--cream); }
.campo label span { display: block; font-weight: 400; font-size: 12.5px; letter-spacing: 0; color: var(--muted); margin-top: 3px; }
.campo input, .campo textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  background: rgba(18, 12, 9, .5); border: 1px solid var(--line);
  color: var(--cream); font-family: var(--font-body); font-size: 15.5px; line-height: 1.5;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(160, 143, 124, .75); }
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: rgba(226, 192, 137, .6); background: rgba(18, 12, 9, .8);
}
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.form-estado { margin: 0; font-size: 14.5px; color: var(--cream-2); }
.form-estado--ok { color: var(--gold-2); }
.form-estado--mal { color: #E9A18B; }
.form-estado a { color: inherit; }

/* La banda de abajo: él la quería más grande, en negrita y con el botón
   dorado al lado, no una línea fina y triste. */
.banda-llamada { padding: 0 0 90px; }
.banda-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  padding: 34px 38px; border-radius: var(--radius);
  background: linear-gradient(180deg, #2B1D14 0%, #3B2418 100%);
  border: 1px solid rgba(226, 192, 137, .28);
}
.banda-texto {
  margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 2.7vw, 2rem);
  line-height: 1.2; color: var(--cream);
}
.banda-texto strong { color: var(--gold-2); font-weight: 600; }

@media (max-width: 760px) {
  .contacto-bloque { padding-top: 96px; }
  .form-contacto { grid-template-columns: 1fr; }
  .banda-inner { padding: 26px 22px; text-align: center; justify-content: center; }
  .banda-llamada { padding-bottom: 120px; }
}


/* ==========================================================================
   Ritmo y respiración — 28 de septiembre de 2026 (segunda tanda)
   Palabras suyas: «hay algunas que se nota como súper cortado, una raya,
   cambio de color súper forzado, y hay otras que está súper fluido».
   ========================================================================== */

/* La portada ya no lleva el párrafo de servicios: el filtro ocupa su sitio,
   con su tamaño y su color. Filtra desde la primera pantalla. */
.hero-filtro {
  margin: 18px 0 0; max-width: 46ch;
  font-size: clamp(1.02rem, 1.55vw, 1.2rem); line-height: 1.45;
  color: var(--cream-2);
}

/* «Han confiado en nosotros» entre dos trazos que se apagan, y con aire
   por debajo antes de los logos. */
.marquee-label {
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 22px);
  margin: 0 0 30px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream-2);
}
.marquee-label::before,
.marquee-label::after {
  content: ""; height: 1px; width: clamp(30px, 7vw, 84px); flex: none;
}
.marquee-label::before { background: linear-gradient(90deg, transparent, rgba(226, 192, 137, .75)); }
.marquee-label::after  { background: linear-gradient(90deg, rgba(226, 192, 137, .75), transparent); }

/* Separador entre secciones: el mismo trazo que ya usa la portada sobre los
   logos, para que la web hable un solo idioma. */
.separador { display: flex; justify-content: center; }
.separador span {
  display: block; height: 1px; width: min(var(--container), calc(100% - 48px));
  background: linear-gradient(90deg, transparent, rgba(226, 192, 137, .3) 22%, rgba(226, 192, 137, .3) 78%, transparent);
}

/* Los dos cambios de color duros. En vez de un borde de 1 px que corta,
   cada bloque entra y sale degradando hacia el fondo de la página. */
.numbers {
  background: linear-gradient(180deg, var(--bg) 0%, #1F1610 14%, #241911 50%, #1F1610 86%, var(--bg) 100%);
  border-block: 0;
}
.section--claro {
  background: linear-gradient(180deg,
    var(--bg) 0%, #241811 7%, #3B2418 22%, #452C1C 50%, #3B2418 78%, #241811 93%, var(--bg) 100%);
  border-block: 0;
}

/* Sin los párrafos, las tarjetas son vídeo y titular. El vídeo manda. */
#sistema .step-body { padding: 18px 22px 22px; gap: 6px; }
#sistema .step h3 { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.22; }

/* Y el cierre deja de ir pegado a las tarjetas. */
.cierre-fila { margin-top: 38px; }

@media (min-width: 981px) {
  .hero-filtro { margin-top: 16px; font-size: 1.18rem; }
  .logo-marquee { margin-top: 30px; padding: 16px 0 6px; }
  .marquee-label { margin-bottom: 30px; font-size: 13.5px; }
  .separador { padding: 6px 0; }
  #sistema { padding: 26px 0 30px; }
  /* El titular nuevo es más largo: se le da anchura para que entre en dos
     líneas en vez de tres, que era lo que sacaba la sección de pantalla. */
  #sistema h2 { max-width: 25ch; font-size: clamp(1.9rem, 2.8vw, 2.35rem); }
  .step-video, #sistema .step-video { max-height: 208px; aspect-ratio: 16 / 10; }
  .cierre-fila { margin-top: 28px; }
}

@media (max-width: 980px) {
  .marquee-label { margin-bottom: 22px; font-size: 12.5px; letter-spacing: .18em; }
  .separador { padding: 4px 0; }
  .cierre-fila { margin-top: 28px; }
}


/* ==========================================================================
   «Quién hay detrás», recompuesto para el móvil — 28 de septiembre de 2026
   Palabras suyas: «lo de quién hay detrás tal vez lo pondría arriba, como
   inauguración de la sección; todo esto te estoy hablando de la versión
   móvil, porque es la que más gente va a ver». Y: «deja un poco de aire».
   El kicker sale del bloque de texto y pasa a ser el primer hijo de la
   rejilla: en móvil, que es una sola columna, cae arriba del todo por orden
   natural. En ordenador se le devuelve su sitio con áreas de rejilla.
   ========================================================================== */
@media (min-width: 1021px) {
  .about-grid {
    grid-template-columns: .9fr 1.1fr;
    grid-template-areas:
      "foto kicker"
      "foto texto";
    column-gap: 60px; row-gap: 0;
    align-items: center;
  }
  .about-kicker { grid-area: kicker; align-self: end; margin-bottom: 14px; }
  .about-photo  { grid-area: foto; }
  .about-texto  { grid-area: texto; align-self: start; }
}

/* Móvil y tableta: una columna, y el orden que él pidió —rótulo, foto,
   nombre, texto, firma— sale solo del HTML. Aquí solo se reparte el aire. */
@media (max-width: 1020px) {
  #sobre-mi { padding-block: clamp(64px, 12vw, 96px); }
  .about-grid { gap: 30px; }
  .about-kicker { margin: 0; }
  .about-texto h2 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .about-texto p { margin-top: 20px; line-height: 1.6; }
  .about .signature { margin-top: 30px; }
}


/* ==========================================================================
   Página de contacto, segunda pasada — 28 de septiembre de 2026
   Él, mirándola en el móvil: «hay como un botón ahí arriba, raro, todo el
   rato, que me molesta; está como mal construido», «lo de los puntitos esos
   de arriba a la derecha habría que quitarlo» y «es un marrón soso básico:
   le podríamos haber puesto el mismo fade de la web principal».
   ========================================================================== */

/* La cabecera se queda con el logo y nada más. El botón dorado de la
   navegación se salía por arriba en móvil, y la hamburguesa no abría nada
   que hiciera falta: aquí solo se rellena el formulario.
   Y va con fondo desde el principio: esta página no carga el JS que le pone
   la clase al hacer scroll, así que si no el logo flotaba sobre los campos. */
.site-header--limpia .header-inner { justify-content: flex-start; height: 68px; }
.site-header--limpia {
  background: rgba(18, 12, 9, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

/* El mismo fondo vivo de la portada, para que no parezca otra web. */
.contacto-bloque { position: relative; overflow: hidden; isolation: isolate; }
.contacto-bloque .hero-mesh { opacity: .5; filter: blur(90px); }
.contacto-bloque .hero-grain { opacity: .09; }
.contacto-bloque::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  background: linear-gradient(180deg, rgba(18, 12, 9, 0), var(--bg) 88%);
  pointer-events: none; z-index: -1;
}

@media (max-width: 980px) {
  .contacto-bloque { padding-top: 96px; }
  .contacto-inner h1 { font-size: clamp(1.95rem, 8vw, 2.5rem); }
}


/* ==========================================================================
   Aire bajo la cabecera — 28 de septiembre de 2026
   Él, mirando la web en el monitor grande: «fíjate el tamaño que hay entre
   ese botón del header y la imagen, hay muy poco espacio, está como muy
   pegado». Medido: **9 px**. El recorte del 28/9 dejó el hueco superior en
   56 px, menos que los 76 px que mide la propia cabecera.
   Se reparte por altura de pantalla: en su portátil (695 px útiles) la
   portada tiene que seguir cabiendo entera, así que ahí se gana el aire
   quitándoselo al pie; en pantallas altas se abre de verdad.
   ========================================================================== */
@media (min-width: 981px) {
  .hero { padding-top: 104px; padding-bottom: 42px; }
}
@media (min-width: 981px) and (min-height: 780px) {
  .hero { padding-top: 140px; padding-bottom: 64px; }
  .logo-marquee { margin-top: 38px; }
}
@media (min-width: 981px) and (min-height: 940px) {
  .hero { padding-top: 172px; padding-bottom: 84px; }
  .logo-marquee { margin-top: 46px; }
}

/* En móvil pasaba lo mismo, y ahí la cabecera tapaba directamente el rótulo. */
@media (max-width: 980px) {
  .hero { padding-top: 116px; }
}

/* En su portátil (1512×695) el aire de arriba hay que pagarlo con algo: el
   titular baja un punto y la tira de logos se aprieta. Sigue cabiendo todo. */
@media (min-width: 981px) and (max-height: 779px) {
  .hero { padding-top: 104px; padding-bottom: 24px; }
  .hero h1 { font-size: clamp(2.3rem, 3.5vw, 2.95rem); }
  .logo-marquee { margin-top: 22px; padding: 12px 0 4px; }
  .marquee-label { margin-bottom: 22px; }
}

/* El logotipo de Cova Guerra es una firma manuscrita de trazo muy fino: con
   el alto y la opacidad del resto de la tira desaparecía. Se le dan cuatro
   píxeles más y opacidad plena. Sacado del banner de su canal de YouTube,
   que es donde está su marca actual. */
.logo-cova { height: 36px !important; max-width: 190px !important; opacity: .92 !important; }
@media (max-width: 720px) { .logo-cova { height: 30px !important; } }

/* El botón de la banda salía «gordo»: partido en tres líneas y con la
   flecha suelta al lado. En móvil se estrecha la letra, se ajusta el alto
   y ocupa el ancho de la tarjeta, que es lo que pedía la caja. */
@media (max-width: 760px) {
  .banda-inner .btn-lg {
    width: 100%; padding: 16px 20px; font-size: 12.5px; letter-spacing: .09em;
    line-height: 1.35; gap: 8px;
  }
  .banda-texto { font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .banda-inner { gap: 20px; padding: 26px 20px; }
  .banda-llamada { padding-bottom: 90px; }
}
@media (max-width: 400px) {
  .banda-inner .btn-lg { font-size: 11.5px; letter-spacing: .06em; padding: 15px 14px; }
}