/* =========================================================
   Blaze — Agencia creativa
   Hoja de estilos principal — secciones reconstruidas 1:1
   a partir de las diapositivas de la presentación de marca
   ========================================================= */

:root{
  --pink: #B3176E;
  --pink-deep: #841152;
  --pink-soft: #F6D3E4;
  --navy: #112461;
  --navy-light: #47578F;
  --sky: #AFC6EA;
  --sky-deep: #8AA6D8;
  --ink: #0A0A0C;
  --paper: #F8F1F6;
  --blush: #FBE6EC;
  --blush-deep: #F3C9DC;
  --line: rgba(10,10,12,0.12);
  --line-on-dark: rgba(247,245,241,0.16);
  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --script: 'Caveat', cursive;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
}
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
ul,ol{ list-style: none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
section{ padding: clamp(3.5rem, 8vw, 7rem) var(--pad); position:relative; overflow:hidden; }
.slide{ padding-top: clamp(5rem, 9vw, 7rem); padding-bottom: clamp(5rem, 9vw, 7rem); }
.wrap{ max-width: var(--max); margin: 0 auto; position:relative; z-index:1; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

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

/* ---------- scroll reveal (aplicado por JS al entrar en pantalla) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.partner-grid.reveal li:nth-child(2){ transition-delay: .06s; }
.partner-grid.reveal li:nth-child(3){ transition-delay: .12s; }
.partner-grid.reveal li:nth-child(4){ transition-delay: .18s; }
.btn.reveal{ transition: opacity .6s ease, transform .3s ease, background .2s ease, color .2s ease, border-color .2s ease; }

/* mask-reveal: usado en las fotos extraídas de la presentación.
   El clip-path anima la imagen hija, no el contenedor observado: si se
   clipea el propio elemento observado, algunos motores lo reportan con
   área visible 0 y el IntersectionObserver nunca dispara "in-view". */
.reveal-mask img{
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.22,.9,.3,1);
}
.reveal-mask.in-view img{ clip-path: inset(0 0 0% 0); }

/* ---------- shard motif (from the Blaze mark) ---------- */
.shard{ display:inline-block; background: var(--navy); border-radius: 0% 62% 62% 62%; }
.deco-shard{ position:absolute; border-radius: 0% 62% 62% 62%; pointer-events:none; z-index:0; }

/* ---------- palabra manuscrita (motivo decorativo, cruza el título) ---------- */
.script-word{
  font-family: var(--script);
  font-weight: 700;
  color: var(--pink);
  display: inline-block;
}
.script-word-light{ color: var(--sky); }

/* ---------- etiqueta de sección (motivo "blaze. / 0X") ---------- */
.section-tag{
  display:flex; flex-direction:column; gap:0.3rem;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--pink); margin-bottom: 1.4rem;
}
.section-tag em{ font-style:normal; color: var(--ink); opacity:.55; font-size:0.78rem; }
.section-tag.light{ color: var(--pink); }

/* ---------- texto fantasma de fondo (motivo "KEY TOPICS") ---------- */
.ghost-text{
  position:absolute; top:4%; left:-3%;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:800;
  font-size: clamp(5rem, 20vw, 17rem); line-height:1; color: var(--pink);
  opacity: 0.06; white-space:nowrap; pointer-events:none; z-index:0;
}
.ghost-text-right{ left:auto; right:-4%; top:auto; bottom:-10%; }

/* ---------- decoraciones vectoriales (ondas / ripple) ---------- */
.ripple-deco{
  position:absolute; top:-10%; right:-12%; width: min(46vw, 620px); height:auto;
  color: var(--navy); opacity:0.35; pointer-events:none; z-index:0;
  animation: rippleDrift 14s ease-in-out infinite;
}
.wave-deco{
  position:absolute; bottom:-8%; left:-10%; width: min(40vw, 480px); height:auto;
  color: var(--pink); opacity:0.3; pointer-events:none; z-index:0;
}
@keyframes rippleDrift{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(-10px, 12px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce){ .ripple-deco{ animation:none; } }

/* ---------- franjas de color en el borde (motivo de marca) ---------- */
.corner-stripes{
  position:absolute; top:0; right:0; bottom:0; display:flex; z-index:0; pointer-events:none;
}
.corner-stripes span{ width: clamp(6px, 0.8vw, 12px); height:100%; }
.corner-stripes span:nth-child(1){ background: var(--pink); }
.corner-stripes span:nth-child(2){ background: var(--blush-deep); }
.corner-stripes span:nth-child(3){ background: var(--navy); }

/* ---------- línea divisora corta ---------- */
.rule{ display:block; width: 64px; height: 3px; background: var(--pink); margin: 1.4rem 0; border-radius: 2px; }

.text-pink{ color: var(--pink); }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index: 200;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: var(--max); margin: 0 auto; padding: 1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:inline-flex; align-items:center; }
.logo img{ height: 1.7rem; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap: 2.1rem; }
.nav-links a{ font-weight:500; font-size:0.98rem; color: var(--ink); }
.nav-links a:not(.nav-cta){ position:relative; padding-bottom:2px; }
.nav-links a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background: var(--pink); transition: width .25s ease;
}
.nav-links a:not(.nav-cta):hover::after{ width:100%; }
.nav-cta{
  background: linear-gradient(135deg, var(--pink), var(--pink-deep));
  color:#fff !important;
  padding: 0.55rem 1.15rem; border-radius: 999px; font-weight:600;
  box-shadow: 0 8px 18px rgba(179,23,110,0.28);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{ background: var(--navy); box-shadow: 0 8px 18px rgba(17,36,97,0.32); transform: translateY(-1px); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding: 0.4rem; }
.nav-toggle span{ display:block; width:24px; height:2px; background: var(--ink); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 860px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition: max-height .3s ease;
  }
  .nav-links.open{ max-height: 360px; }
  .nav-links a{ width:100%; padding: 1rem var(--pad); border-top: 1px solid var(--line); }
  .nav-links a.nav-cta{ border-radius:0; text-align:center; }
  .nav-toggle{ display:block; }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0.85rem 1.6rem; border-radius: 999px; font-weight:600; font-size:0.98rem;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  border: 1.5px solid transparent; cursor:pointer;
}
.btn-primary{ background: linear-gradient(135deg, var(--pink), var(--pink-deep)); color:#fff; box-shadow: 0 10px 24px rgba(179,23,110,0.28); }
.btn-primary:hover{ background: linear-gradient(135deg, var(--pink-deep), var(--pink)); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(179,23,110,0.38); }
.btn-ghost{ border-color: var(--ink); color: var(--ink); background:none; }
.btn-ghost:hover{ background: var(--pink); border-color: var(--pink); color:#fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(179,23,110,0.28); }
.btn-ghost-light{ border-color: rgba(247,245,241,0.55); color: var(--paper); }
.btn-ghost-light:hover{ background: var(--paper); border-color: var(--paper); color: var(--navy); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-right:0.55rem; }
.btn-icon svg{ width:100%; height:100%; }

/* =========================================================
   HERO — diapositiva "02 / Misión"
   ========================================================= */
.hero{ background: var(--blush); }
.hero-inner{ padding-top: 1rem; }
.hero-slogan{ font-size: clamp(2.6rem, 8vw, 6.2rem); line-height: 0.94; color: var(--ink); }
.hero-slogan .line{ display:block; }
.w-pink{ color: var(--pink); }
.w-navy{ color: var(--navy); }
.hero-huella{
  font-size: 1.15em; margin-left: 0.12em; transform: rotate(-3deg) translateY(0.04em);
}
.hero-pillars{
  margin-top: 1.6rem; font-family:'Bricolage Grotesque',sans-serif; font-weight:700;
  font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--navy); letter-spacing:0.01em;
}
.hero-pillars i{ font-style:normal; color: var(--pink); margin: 0 0.4em; }
.hero-sub{ margin-top: 1.4rem; max-width: 52ch; font-size: clamp(1.02rem, 1.3vw, 1.15rem); color: rgba(10,10,12,0.72); }
.hero-areas{
  display:flex; flex-wrap:wrap; gap:0.6rem 1rem; margin-top: 1.5rem;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.92rem;
  letter-spacing:0.02em; color: var(--navy);
}
.hero-areas li{ position:relative; padding-right:1.1rem; }
.hero-areas li:not(:last-child)::after{ content:'·'; position:absolute; right:0; color: var(--pink); }
.hero-actions{ display:flex; gap: 0.9rem; margin-top: 2rem; flex-wrap: wrap; }

/* ---------- cinta decorativa ---------- */
.ribbon-wrap{ overflow:hidden; padding: clamp(1.2rem, 2.6vw, 1.8rem) 0; }
.ribbon{ background: var(--navy); transform: rotate(-1.4deg); box-shadow: 0 18px 40px rgba(10,10,12,0.14); }
.ribbon-track{ display:flex; width: max-content; animation: marqueeScroll var(--marquee-duration, 24s) linear infinite; will-change: transform; }
.ribbon-track span{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; font-size: clamp(1rem, 2vw, 1.35rem); color: var(--pink); white-space:nowrap; padding: 0.9rem 0; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(var(--marquee-shift, -50%)); } }

/* =========================================================
   ANÁLISIS — diapositiva "03 / Análisis"
   ========================================================= */
.analisis{ background: var(--blush); }
.analisis-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items:center; }
.analisis-text h2{ font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height:0.98; color: var(--navy); }
.analisis-sub{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.05rem; color: var(--navy); max-width:32ch; }
.analisis-photo{ border-radius: 18px; overflow:hidden; }
.analisis-photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }

@media (max-width: 860px){
  .analisis-inner{ grid-template-columns: 1fr; }
  .analisis-photo{ max-height: 420px; }
}

/* =========================================================
   MANIFIESTO (transición propia de marca)
   ========================================================= */
.manifiesto{
  text-align:center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--pink-deep) 130%);
  color: var(--paper);
}
.manifiesto::before{
  content:''; position:absolute; top:-160px; left:-120px; width:400px; height:400px; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, rgba(175,198,234,0.35), transparent 70%);
}
.manifiesto::after{
  content:''; position:absolute; bottom:-160px; right:-120px; width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, rgba(179,23,110,0.5), transparent 70%);
}
.manifiesto .section-tag{ align-items:center; color: var(--sky); }
.manifiesto .section-tag em{ color: var(--paper); opacity:.7; }
.manifiesto-line{ font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.02; color: var(--paper); }
.manifiesto-sub{ margin: 1.6rem auto 0; max-width: 46ch; font-size: 1.1rem; color: rgba(247,245,241,0.78); }

/* =========================================================
   CÓMO TRABAJAMOS — diapositiva "04 / Partner estratégico"
   ========================================================= */
.partner{ background: var(--blush); }
.partner-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items:center; }
.partner-text h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); color: var(--navy); line-height:1.15; }
.partner-text h2 em{ font-style:italic; color: var(--pink); }
.partner-tagline{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; color: var(--ink); font-size:1.05rem; }
.partner-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.5rem; }
.partner-grid li{ display:flex; flex-direction:column; gap:0.8rem; }
.step-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: 50px; height:50px; border-radius:50%; background:#fff; color: var(--pink);
  box-shadow: 0 10px 20px rgba(17,36,97,0.12);
}
.step-icon svg{ width:22px; height:22px; }
.partner-grid li:nth-child(2) .step-icon{ color: var(--navy); }
.partner-grid li:nth-child(3) .step-icon{ color: var(--pink-deep); }
.partner-grid li:nth-child(4) .step-icon{ color: var(--navy-light); }
.step-num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color: var(--ink); font-size: 0.95rem; letter-spacing:0.04em; line-height:1.3; }
.partner-grid p{ color: rgba(10,10,12,0.68); font-size:0.92rem; margin:0; }

@media (max-width: 860px){
  .partner-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .partner-grid{ grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   SERVICIOS (índice) — diapositiva "05 / Key topics"
   ========================================================= */
.keytopics{ background: var(--blush); }
.keytopics-inner{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items:start; }
.keytopics-text h2{ font-size: clamp(1.9rem, 3.6vw, 2.9rem); color: var(--ink); line-height:1.14; }
.keytopics-sub{ margin-top:1.3rem; max-width:46ch; color: rgba(10,10,12,0.7); font-size:1.02rem; }

.list-card-label{
  display:inline-flex; align-items:center; gap:0.5rem; margin-bottom:0.9rem;
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.92rem;
  color: var(--pink); letter-spacing:0.01em;
}
.list-card-label svg{ width:19px; height:19px; flex-shrink:0; }

/* ---------- tarjeta "dropdown" (motivo reutilizado en varias diapositivas) ---------- */
.list-card{
  background:#fff; border-radius: 18px; padding: 0.6rem;
  box-shadow: 0 24px 50px rgba(17,36,97,0.14);
  display:flex; flex-direction:column;
}
.list-card-item{
  display:block; padding: 0.85rem 1.1rem; border-radius: 12px; font-size:0.98rem; color: var(--ink);
  position:relative; transition: background-color .2s ease;
}
a.list-card-item:hover{ background: rgba(179,23,110,0.06); }
.list-card-item.is-cursor{ background: var(--pink-soft); font-weight:600; }
.list-card-item.is-cursor::after{
  content:''; position:absolute; right:14px; top:50%; transform: translateY(-30%);
  width:0; height:0; border-style:solid; border-width: 10px 0 0 8px; border-color: transparent transparent transparent var(--navy);
}

.ideamos-title{ margin-top: 3.5rem; display:flex; align-items:baseline; position:relative; z-index:1; }
.ideamos-bold{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--pink); letter-spacing:-0.01em; }
.ideamos-normal{ font-family: var(--script); font-weight:700; font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--navy); margin-left:0.05em; }

.chain{ margin-top: 1.4rem; display:flex; align-items:center; flex-wrap:wrap; gap: 1rem 0.6rem; position:relative; z-index:1; }
.chain li{ display:flex; flex-direction:column; align-items:center; gap:0.7rem; }
.chain-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; background:#fff; color: var(--pink);
  box-shadow: 0 10px 22px rgba(17,36,97,0.12);
}
.chain-icon svg{ width:24px; height:24px; }
.chain li span:last-child{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.9rem; color: var(--ink); }
.chain-arrow{ color: var(--pink); font-size:1.2rem; opacity:.7; }

@media (max-width: 860px){
  .keytopics-inner{ grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .chain{ flex-direction:column; align-items:flex-start; }
  .chain-arrow{ transform: rotate(90deg); align-self:center; }
}

/* =========================================================
   DIVIDER — patrón compartido por Social Media / Campañas /
   Influencers / Eventos (título grande + script cruzado)
   ========================================================= */
.divider-title{ display:flex; flex-direction:column; position:relative; z-index:1; }
.divider-title-bold{
  font-size: clamp(2.8rem, 9vw, 6.5rem); line-height:0.88; color: var(--pink);
  font-weight:800; letter-spacing:-0.01em;
}
.divider-title-navy{ color: var(--navy); }
.divider-title-cream{ color: var(--paper); }
.divider-title-md{ font-size: clamp(2.2rem, 6vw, 4rem); }
.divider-title-script{
  font-size: clamp(2rem, 5.6vw, 3.8rem); color: var(--navy);
  margin-top: -0.22em; margin-left: 0.42em; align-self:flex-start;
}
.divider-title-script-light{ color: var(--paper); }
.divider-lead{ margin-top:1.2rem; max-width:44ch; font-size:1.05rem; color: rgba(10,10,12,0.7); font-weight:600; font-family:'Bricolage Grotesque',sans-serif; }

/* -------- Social Media (page 6): foto a la derecha, lista superpuesta -------- */
.divider-social{ background: var(--navy); }
.divider-social .divider-title-script{ color: var(--paper); }
.divider-social .divider-inner{ position:relative; min-height: 62vh; }
.divider-social .divider-watermark{
  position:absolute; top:50%; right:4%; width: min(38vw, 460px); height:auto;
  transform: translateY(-50%); opacity:0.16; filter: brightness(0) invert(1);
  pointer-events:none; z-index:0;
}
.divider-social .list-card-overlap{ position:relative; margin-top: 2.4rem; max-width: 360px; z-index:1; }

@media (max-width: 900px){
  .divider-social .divider-watermark{ width: min(60vw, 320px); }
}

/* -------- Campañas Digitales & Branding (page 7): foto a la izquierda -------- */
.divider-campanas{ background: var(--navy); }
.divider-campanas .divider-inner{
  display:grid; grid-template-columns: 0.85fr 1.15fr; grid-template-areas: "photo title" "photo list"; gap: 0 2.5rem; align-items:start;
}
.divider-campanas .divider-title{ grid-area:title; }
.divider-campanas .divider-photo{ grid-area:photo; align-self:stretch; border-radius: 22px; overflow:hidden; min-height: 420px; }
.divider-campanas .divider-photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.05); }
.divider-campanas .list-card{ grid-area:list; margin-top:2rem; max-width:420px; }

@media (max-width: 900px){
  .divider-campanas .divider-inner{ grid-template-columns: 1fr; grid-template-areas: "title" "photo" "list"; }
  .divider-campanas .divider-photo{ min-height: 320px; margin-top:1rem; }
}

/* -------- Influencer Marketing (page 9 + 10) -------- */
.divider-influencers{ background: var(--blush); }
.marca-inner{ margin-top: 3.5rem; display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items:center; }
.marca-photo{ position:relative; border-radius: 22px; overflow:hidden; }
.marca-photo img{ width:100%; display:block; filter: grayscale(1) contrast(1.05); }
.chat-chip{
  position:absolute; top:14px; left:14px; background:#fff; color: var(--ink);
  font-weight:700; font-size:0.85rem; padding: 0.5rem 1rem; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(10,10,12,0.15); z-index:1;
}
.chat-caption{
  position:absolute; left:14px; bottom:14px; background:#fff; color: var(--pink-deep);
  font-weight:700; font-size:0.9rem; padding: 0.6rem 1.1rem; border-radius: 10px;
  box-shadow: 0 8px 18px rgba(10,10,12,0.15); z-index:1;
}
.marca-text h3{ display:flex; flex-direction:column; margin-bottom:1.6rem; }

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

/* -------- Eventos & BTL (page 12 + 13) -------- */
.divider-eventos{ background: linear-gradient(160deg, var(--navy) 0%, var(--navy-light) 100%); }
.divider-eventos .divider-title-script{ color: var(--paper); }
.divider-eventos .divider-inner{ position:relative; min-height: 56vh; }
.divider-eventos .divider-photo{
  position:absolute; right: 4%; bottom:0; width: 26%; max-width:280px; border-radius: 20px 20px 0 0; overflow:hidden;
}
.divider-eventos .divider-photo img{ width:100%; display:block; filter: grayscale(1) contrast(1.05); }
.divider-eventos .list-card{ margin-top: 2.2rem; max-width: 420px; }

@media (max-width: 900px){
  .divider-eventos .divider-photo{ position:relative; right:auto; bottom:auto; width:60%; max-width:240px; margin: 1.5rem 0; }
}

.chain5{ margin-top: 3.5rem; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap: 1.4rem; position:relative; z-index:1; }
.chain5 li{ display:flex; flex-direction:column; align-items:center; gap:0.6rem; flex: 1 1 100px; }
.chain5-num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:0.82rem; color: var(--paper); opacity:.7; }
.chain5-icon{
  display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%;
  background: rgba(255,255,255,0.14); border: 1.5px solid rgba(247,245,241,0.35); color: var(--paper);
}
.chain5-icon svg{ width:22px; height:22px; }
.chain5-label{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:0.9rem; color: var(--paper); }

/* =========================================================
   NOSOTROS
   ========================================================= */
.nosotros{ background: #fff; }
.nosotros::before{
  content:''; position:absolute; top:-110px; right:-90px; width:340px; height:340px; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, var(--blush), transparent 70%); opacity:.7;
}
.nosotros-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start; }
.nosotros h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); position:relative; }
.nosotros-shard{ top:-16px; left:-30px; width:24px; height:24px; background: var(--navy); opacity:.85; transform: rotate(10deg); }
.nosotros p{ font-size: 1.08rem; color: rgba(10,10,12,0.78); max-width: 46ch; }
.nosotros-tagline{ margin-top: 1.3rem; font-family: var(--script); font-size:2rem; color: var(--pink); }

@media (max-width: 860px){ .nosotros-inner{ grid-template-columns: 1fr; } }

/* =========================================================
   TRAYECTORIA — diapositiva "Trayectoria del equipo"
   ========================================================= */
.trayectoria{ background: var(--blush); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.trayectoria .divider-title-bold{ color: var(--pink); }
.trayectoria-sub{ margin-top:1.2rem; max-width:52ch; color: rgba(10,10,12,0.68); font-size:1.05rem; }
.marquee-wrap{ margin-top: 3rem; }
.marquee{ overflow:hidden; }
.marquee-track{ display:flex; width:max-content; gap: 0.9rem; animation: marqueeScroll var(--marquee-duration, 28s) linear infinite; will-change: transform; }
.marquee-set{ display:flex; gap:0.9rem; align-items:center; }
.brand-chip{
  display:flex; align-items:center; justify-content:center;
  white-space:nowrap; padding: 1rem 1.5rem; border-radius: 16px;
  background:#fff; border: 1.5px solid var(--line); height: 64px;
}
.brand-chip img{ max-height: 30px; width:auto; max-width: 130px; object-fit:contain; }

/* =========================================================
   CTA banner / Contacto / Footer (sin cambios de fondo)
   ========================================================= */
.cta-banner{
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--navy) 130%);
  color: var(--paper); text-align:center;
}
.cta-banner::before{
  content:''; position:absolute; top:-150px; left:-110px; width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, rgba(179,23,110,0.55), transparent 70%);
}
.cta-banner::after{
  content:''; position:absolute; bottom:-160px; right:-120px; width:360px; height:360px; border-radius:50%; pointer-events:none; z-index:0;
  background: radial-gradient(circle, rgba(175,198,234,0.35), transparent 70%);
}
.cta-banner h2{ font-size: clamp(2.1rem, 5vw, 3.8rem); color: var(--paper); max-width: 18ch; margin: 0 auto; line-height: 1.05; }
.cta-actions{ display:flex; flex-direction:column; align-items:center; gap: 1rem; margin-top: 2.2rem; }
.cta-banner .btn-primary:hover{ background:#fff; color: var(--navy); }
.cta-sub{ margin: 1rem auto 0; max-width: 40ch; color: rgba(247,245,241,0.75); font-size: 1.05rem; }

.contacto{ background:#fff; }
.contacto::before{
  content:''; position:absolute; bottom:-120px; left:50%; transform:translateX(-50%); width:600px; height:280px; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at center, var(--blush), transparent 70%); opacity:.5;
}
.contacto-inner{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; align-items:start; }
.contacto-intro h2{ font-size: clamp(1.8rem, 3vw, 2.5rem); margin-top:0.4rem; }
.contacto-intro p{ margin-top:1rem; color: rgba(10,10,12,0.72); font-size:1.02rem; max-width:38ch; }
.contacto-channels{ margin-top:1.8rem; display:flex; flex-direction:column; gap:0.9rem; }
.channel-link{ display:inline-flex; align-items:center; gap:0.7rem; font-weight:600; font-size:1rem; color: var(--navy); transition: color .2s ease; }
.channel-link:hover{ color: var(--pink); }
.channel-icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background: var(--paper); color: var(--pink); }
.channel-icon svg{ width:19px; height:19px; }

.contacto-form{ background: var(--paper); border-radius: 24px; padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--line); }
.form-row{ margin-bottom: 1.2rem; display:flex; flex-direction:column; gap:0.4rem; }
.form-row-split{ display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; }
.form-row-split > div{ display:flex; flex-direction:column; gap:0.4rem; }
.form-row label{ font-weight:600; font-size:0.9rem; color: var(--navy); }
.form-row input, .form-row select, .form-row textarea{
  font: inherit; padding: 0.75rem 0.95rem; border-radius: 12px; border: 1.5px solid var(--line); background:#fff; color: var(--ink); resize: vertical;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color: var(--pink); }
.form-submit{ width:100%; margin-top:0.4rem; border:none; }
.form-note{ margin-top:0.9rem; font-size:0.9rem; color: var(--navy); min-height:1.2em; }

@media (max-width: 860px){
  .contacto-inner{ grid-template-columns: 1fr; }
  .form-row-split{ grid-template-columns: 1fr; }
}

footer{ padding: 3.2rem var(--pad) 2rem; position:relative; }
footer::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--pink), var(--navy), var(--navy-light)); }
.foot-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.foot-brand .logo img{ height: 1.5rem; }
.foot-brand p{ margin-top:0.8rem; color: rgba(10,10,12,0.6); font-size:0.95rem; }
.foot-col h4{ font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--pink); margin-bottom: 0.9rem; }
.foot-col{ display:flex; flex-direction:column; gap:0.6rem; }
.foot-col a{ font-size:0.92rem; color: rgba(10,10,12,0.68); }
.foot-col a:hover{ color: var(--pink); }
.foot-copy{ max-width: var(--max); margin: 2.4rem auto 0; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: rgba(10,10,12,0.5); }

@media (max-width: 700px){
  .foot-inner{ grid-template-columns: 1fr 1fr; }
  .foot-brand{ grid-column: 1 / -1; }
}

.back-to-top{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor:pointer;
  background: var(--ink); color: var(--paper); font-size: 1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.back-to-top.show{ opacity: 1; transform: translateY(0); pointer-events:auto; }
.back-to-top:hover{ background: var(--pink); }

.whatsapp-float{
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 45;
  width: 58px; height: 58px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  box-shadow: 0 12px 28px rgba(18,140,126,0.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover, .whatsapp-float:focus-visible{ transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 34px rgba(18,140,126,0.5); }
.whatsapp-icon{ width:30px; height:30px; fill:#fff; position:relative; z-index:1; }
.whatsapp-pulse{ position:absolute; inset:0; border-radius:50%; background: rgba(37,211,102,0.55); animation: whatsappPulse 2.4s ease-out infinite; }
@keyframes whatsappPulse{
  0%{ transform:scale(1); opacity:.6; }
  70%{ transform:scale(1.7); opacity:0; }
  100%{ transform:scale(1.7); opacity:0; }
}
.whatsapp-float::after{
  content:'Cotizar por WhatsApp'; position:absolute; left: 68px; top:50%; transform: translateY(-50%);
  background: var(--ink); color:#fff; font-size:0.78rem; font-weight:600; white-space:nowrap;
  padding: 0.45rem 0.75rem; border-radius: 8px; opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.whatsapp-float:hover::after, .whatsapp-float:focus-visible::after{ opacity:1; }

@media (prefers-reduced-motion: reduce){ .whatsapp-pulse{ animation:none; display:none; } }
@media (max-width: 520px){ .whatsapp-float::after{ display:none; } }