/* =========================================================
   OZADO LANDING — STYLES
   Paleta: azul oscuro #07172E / #0A1A33, acento #75FEB0 -> #0063FE
   ========================================================= */

@font-face{
  font-family:'Moderniz';
  src: url('../fonts/Moderniz.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg-dark:#07172E;
  --bg-dark-2:#0A1A33;
  --bg-dark-3:#0E2244;
  --text:#0E1B2C;
  --text-soft:#5B6878;
  --muted:#8C97A6;
  --white:#ffffff;
  --line:#E6EAF0;
  --grad: linear-gradient(90deg,#75FEB0 0%,#0063FE 100%);
  --grad-soft: linear-gradient(90deg,#75FEB0 0%,#3BB4FF 50%,#0063FE 100%);
  --green:#22C55E;
  --shadow-card: 0 12px 40px rgba(7,23,46,.08);
  --shadow-hero: 0 30px 80px rgba(0,0,0,.45);
  --radius: 18px;
}

/* WordPress por defecto deja que los SVGs sin width/height se estiren al 100%.
   Esta regla evita que cualquier SVG dentro del contenido del tema desborde
   su contenedor: nunca puede crecer más allá de su caja. */
svg{
  max-width:100%;
  max-height:100%;
}
/* Iconos dentro de los contenedores circulares/cuadrados: usar el tamaño del padre. */
.process-icon > svg,
.tool-icon > svg,
.quote-mark > svg,
.video-mute > svg{
  width:auto;
  height:auto;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{
  width:min(1200px, 92%);
  margin:0 auto;
}

/* ---- shared ---- */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.kicker{
  display:inline-block;
  font-size:11px;
  letter-spacing:.25em;
  font-weight:700;
  color:#6B7B90;
  padding:6px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  margin-bottom:18px;
}
.section-title{
  font-family:'Moderniz', 'Inter', sans-serif;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 40px;
  text-align:center;
  text-transform:uppercase;
}

/* ---- buttons ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  border:none;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, opacity .25s;
}
.btn-wa{
  background:var(--green);
  color:#0A0A0A;
  box-shadow:none;
}
.btn-wa svg{ color:#0A0A0A; fill:#0A0A0A; }
.btn-wa:hover{transform:translateY(-2px);box-shadow:none}
.btn-wa-sm{
  background:var(--green);
  color:#0A0A0A;
  font-weight:700;
  padding:8px 16px;
  font-size:13px;
}
.wa-icon{
  width:18px; height:18px; display:block;
}
.wa-dot{
  width:8px;height:8px;background:#fff;border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.25);
  animation:pulse 1.6s infinite ease-in-out;
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.6}
}
.btn-grad{
  background:var(--grad);
  color:#fff;
  font-weight:600;
  padding:12px 28px;
}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(61,169,252,.35)}

/* ---- header ---- */
.site-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:50;
  padding:18px 0;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;align-items:center;gap:8px;
}
.logo-mark{width:28px;height:28px}
.logo-img{
  height:44px; width:auto; display:block;
}
.logo-img-lg{ height:56px; }
.logo-text{
  color:#fff;font-weight:700;letter-spacing:.04em;font-size:17px;
}
.logo-text sup{font-size:9px;color:#75FEB0;margin-left:2px}

/* ===========================================================
   HERO
   =========================================================== */
.hero{
  position:relative;
  padding:180px 0 0;
  background:#03070E;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
/* capa 1: base oscura del hero */
.hero-bg{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 50%, #061122 0%, #03070E 70%);
  pointer-events:none;
  z-index:0;
}
/* capa 1b: blob verde-teal flotando (izquierda) */
.hero-bg::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(58,180,140,.65) 0%, rgba(58,180,140,.22) 28%, transparent 55%),
    radial-gradient(circle at 30% 70%, rgba(80,200,180,.40) 0%, transparent 45%);
  filter: blur(40px);
  mix-blend-mode: screen;
  animation: auraMoveA 14s ease-in-out infinite;
  will-change: transform;
}
/* capa 1c: blob azul brillante flotando (derecha) */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,110,255,.85) 0%, rgba(0,99,254,.30) 28%, transparent 55%),
    radial-gradient(circle at 70% 30%, rgba(59,180,255,.45) 0%, transparent 45%);
  filter: blur(50px);
  mix-blend-mode: screen;
  animation: auraMoveB 18s ease-in-out infinite;
  will-change: transform;
}
@keyframes auraMoveA{
  0%   { transform: translate(-20%, -10%) scale(1)    rotate(0deg); }
  33%  { transform: translate(-10%,  5%)  scale(1.15) rotate(8deg); }
  66%  { transform: translate(-25%, 15%)  scale(.95)  rotate(-6deg); }
  100% { transform: translate(-20%, -10%) scale(1)    rotate(0deg); }
}
@keyframes auraMoveB{
  0%   { transform: translate(25%, 20%)  scale(1)    rotate(0deg); }
  33%  { transform: translate(15%, 10%)  scale(1.1)  rotate(-7deg); }
  66%  { transform: translate(30%, 25%)  scale(.92)  rotate(5deg); }
  100% { transform: translate(25%, 20%)  scale(1)    rotate(0deg); }
}
/* capa 2: lluvia / líneas verticales sutiles */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.025) 0 1px,
    transparent 1px 60px
  );
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
}
/* capa 3: viñeta para oscurecer bordes */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
  z-index:1;
}
/* el hero usa un container más ancho para que la mascota no se desborde */
.hero .container{
  width:min(1560px, 92%);
}
.hero-grid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap:160px;
  align-items:start;
  min-height:auto;
  padding-top:0;
}
.hero-copy{
  padding-bottom:70px;
  padding-left:0;
  padding-top:0;
  margin-top:0;
  position:relative;
  z-index:3;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.12em;
  color:#9FC9FF;
  padding:6px 14px;
  border:1px solid rgba(159,201,255,.25);
  border-radius:999px;
  margin-bottom:22px;
  background:rgba(255,255,255,.03);
  animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) .1s both;
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:#75FEB0;
  box-shadow:0 0 0 4px rgba(63,224,197,.18);
}
.hero-title{
  font-family:'Moderniz', 'Inter', sans-serif;
  margin:0 0 22px;
  text-transform:uppercase;
  display:flex;flex-direction:column;
  font-weight:900;
  letter-spacing:-.01em;
  line-height:1;
}
.hero-title-bottom{
  font-family:'Montserrat', 'Inter', sans-serif;
  font-size:clamp(17px, 1.8vw, 31px);
  font-weight:700;
  color:#FFFFFF;
  letter-spacing:.01em;
  line-height:1.15;
  margin-top:16px;
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .55s both;
}
.hero-title-big{
  font-family:'Montserrat', 'Inter', sans-serif;
  font-size:clamp(34px, 3.6vw, 62px);
  line-height:1.08;
  padding:0.05em 0;
  font-weight:900;
  letter-spacing:-.015em;
  background:linear-gradient(90deg,#75FEB0 0%,#3BB4FF 50%,#0063FE 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: fadeUp 1s cubic-bezier(.2,.7,.2,1) .4s both,
             gradShift 8s ease-in-out infinite;
}

@keyframes fadeUp{
  0%{opacity:0; transform:translateY(24px)}
  100%{opacity:1; transform:translateY(0)}
}
@keyframes gradShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.hero-sub{
  font-size:16px;
  line-height:1.6;
  color:#B7C4D6;
  max-width:540px;
  margin:18px 0 32px;
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .6s both;
}
.hero-copy .btn-wa{
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .75s both;
}
.hero-art{
  position:relative;
  display:flex;justify-content:flex-end;align-items:flex-start;
  align-self:stretch;              /* ocupa todo el alto de la fila del hero */
  margin-bottom:-2px;
  overflow:visible;
}
/* el stage desborda hacia la izquierda (dentro del gap) y reserva
   el 22% derecho para la mascota, que queda dentro del container.
   Se estira hasta abajo para que la mascota quede pegada al borde
   inferior del hero, sin mover la ficha (que queda arriba). */
.hero-art-stage{
  position:relative;
  flex:0 0 auto;                   /* sin esto el flex lo encoge y anula el 117% */
  width:117%;
  max-width:none;
  padding-right:22%;
  padding-bottom:90px;             /* aire debajo de la ficha; la mascota va
                                      anclada a este borde, así queda pegada abajo */
  margin-right:0;
  align-self:stretch;
}
/* ficha de producto — fondo */
.hero-shop{
  display:block;
  width:80%;
  margin-left:auto;                /* crece por la izquierda: el borde derecho
                                      (donde va la mascota) no se mueve */
  margin-top:-60px;                /* sube solo la ficha; la mascota sigue
                                      anclada al borde inferior del stage */
  height:auto;
  border-radius:10px;
  z-index:1;
  --mx:0px; --my:0px; --sy:0px;
  filter:
    drop-shadow(0 0 16px rgba(59,180,255,.40))
    drop-shadow(0 0 40px rgba(0,99,254,.30))
    drop-shadow(0 22px 40px rgba(0,0,0,.55));
  will-change: transform;
  animation: fadeOnly 1.6s ease-out .25s both,
             floatShop 9s ease-in-out 0s infinite;
}

@keyframes fadeOnly{
  0%  { opacity:0; }
  100%{ opacity:1; }
}
@keyframes floatShop{
  0%,100%{ transform: translate(var(--mx), calc(var(--my) + var(--sy))); }
  50%    { transform: translate(var(--mx), calc(var(--my) + var(--sy) - 12px)); }
}
/* mascota - derecha, delante de la ficha, fija y pegada abajo */
.hero-mascot{
  position:absolute;
  right:-8%;
  bottom:0;
  width:42%;
  height:auto;
  z-index:3;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.7));
  animation: fadeOnly 1.6s ease-out .45s both;
}

/* metrics */
.metrics-wrap{
  position:relative; z-index:5;
  margin-top:0;
  padding:64px 0;
  border-top:1px solid rgba(255,255,255,.08);
  background:#03070E;
}
.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.metric{
  display:flex;align-items:baseline;gap:10px;justify-content:center;
}
.metric-num{
  font-size:clamp(40px,4vw,64px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
}
.metric-label{
  font-size:13px;letter-spacing:.18em;color:#9FB0C7;font-weight:600;
}

/* fade del hero ya no se usa — el video aparece detrás del propio fondo del hero */

/* ===========================================================
   VIDEO SECTION — efecto Linearity (full-bleed -> contenido)
   El video empieza a 100% ancho sin radius; al hacer scroll se
   encoge y aparecen bordes redondeados. Hecho con scroll-driven
   variables actualizadas por JS.
   =========================================================== */
.video-section{
  background:#03070E;
  position:relative;
  margin-top:0;
  /* la sección es alta para que haya recorrido de scroll */
  height: 220vh;
  --vw: 100;       /* 100 = full bleed, 75 = encogido al container */
  --vr: 0;         /* radius en px */
}
/* fondo blanco que aparece detrás del video conforme se encoge */
.video-section::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity: var(--vp, 0);
  z-index:0;
  pointer-events:none;
}
.video-pin{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  z-index:1;
}
.video-card{
  /* margen superior dinámico: 0 al inicio (pegado a métricas), ~7vh al final */
  margin-top: calc(var(--vp, 0) * 7vh);
}
/* degradado oscuro que se funde encima del video al inicio */
.video-pin::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:22%;
  background:linear-gradient(180deg, #03070E 0%, rgba(3,7,14,.7) 45%, rgba(3,7,14,0) 100%);
  z-index:2;
  pointer-events:none;
  opacity: calc(1 - var(--vp, 0) * 2);
  transition: opacity .05s linear;
}
.video-card{
  position:relative;
  width: calc(var(--vw) * 1%);
  max-width: 100vw;
  aspect-ratio: 16 / 9;
  max-height: 86vh;
  border-radius: calc(var(--vr) * 1px);
  overflow:hidden;
  background:#000;
  /* el borde aparece solo cuando el video se ha encogido */
  outline: 1px solid rgba(0,0,0, calc(var(--vp, 0)));
  outline-offset: -1px;
  transition: border-radius .05s linear;
}
.video-card video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.video-mute{
  position:absolute;
  right:16px; bottom:16px;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: background .2s, transform .2s;
  z-index:3;
}
.video-mute:hover{ background:rgba(0,0,0,.75); transform:scale(1.05); }
.video-mute .ic-unmuted{ display:none; }
.video-mute.is-on .ic-muted{ display:none; }
.video-mute.is-on .ic-unmuted{ display:inline; }

/* ===========================================================
   TOOLS
   =========================================================== */
.tools{
  padding:60px 0 100px;
  background:#fff;
  text-align:center;
}
.tools-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:10px;
}
.tool-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px 20px;
  text-align:left;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.tool-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:var(--shadow-card);
}
.tool-icon{
  width:36px;height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#EFFBF7,#EAF4FF);
  color:#2E8FE0;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.tool-icon > svg{ width:20px !important; height:20px !important; display:block; }
.tool-card h3{
  margin:0 0 6px;
  font-size:14px;font-weight:700;
}
.tool-card p{
  margin:0;
  font-size:13px;color:var(--text-soft);line-height:1.5;
}

/* ===========================================================
   LO HICIMOS PRIMERO
   =========================================================== */
.first-case{
  background:linear-gradient(180deg,#0A1A33 0%,#0E2244 100%);
  color:#fff;
  padding:110px 0 120px;
  position:relative;
}
.first-case-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  align-items:center;
}
.first-case .kicker{
  background:rgba(255,255,255,.04);
  color:#75FEB0;
  border-color:rgba(117,254,176,.35);
}
.first-case-title{
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 26px;
}
.first-case-text{
  margin:0 0 28px;
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.72);
  max-width:52ch;
}
.first-case-text strong{color:#fff;font-weight:700}
.first-case-brands{
  list-style:none;
  margin:0 0 36px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  font-weight:700;
  font-size:19px;
  color:#fff;
}
.first-case-brands li{display:flex;align-items:center;gap:22px}
.first-case-brands li:not(:last-child)::after{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.45);
}
.first-case-art{
  display:flex;
  justify-content:center;
}
/* width:auto + los dos topes deja que funcione igual con una captura
   apaisada (llena la columna) o vertical (la limita por alto) */
.first-case-art img{
  width:auto;
  max-width:100%;
  max-height:600px;
  height:auto;
  border-radius:22px;
  background:#0A1A33;
  box-shadow:0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
}

/* ===========================================================
   PRECIOS (fondo blanco)
   =========================================================== */
.pricing{
  background:#fff;
  color:#0A1A33;
  padding:110px 0 0;
}
.pricing-title{
  font-size:clamp(30px,3.6vw,48px);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
  text-align:center;
  margin:0 0 52px;
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:start;
}
.price-card{
  background:#fff;
  border:1px solid #CFE0F5;
  border-radius:16px;
  padding:30px 28px 34px;
}
.price-badge{
  display:inline-block;
  background:#22C55E;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  padding:6px 14px;
  border-radius:8px;
  margin-bottom:16px;
}
.price-name{
  margin:0 0 4px;
  font-size:21px;
  font-weight:800;
  color:#0A1A33;
}
.price-name-lg{font-size:22px}
.price-scope{
  margin:0 0 18px;
  font-size:15px;
  color:#5B6878;
}
.price-amount{
  margin:0 0 22px;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.price-num{
  font-size:42px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#0A1A33;
  line-height:1;
}
.price-unit{
  font-size:16px;
  color:#5B6878;
}
.price-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.price-list li{
  position:relative;
  padding-left:30px;
  font-size:15px;
  line-height:1.45;
  color:#28374A;
}
.price-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:19px;
  height:19px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2322C55E'/%3E%3Cpath d='m5.9 10.3 2.6 2.6 5.5-5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.price-list li strong{color:#0A1A33;font-weight:700}
.price-list li.is-plus{color:#16A34A;font-weight:600}

/* franja de paquetes cerrados */
/* nota aclaratoria bajo los planes */
.pricing-note{
  margin:34px auto 0;
  max-width:820px;
  padding:16px 22px;
  border:1px solid #CFE0F5;
  border-left:3px solid #22C55E;
  border-radius:12px;
  background:#F7FAFD;
  font-size:15px;
  line-height:1.6;
  color:#28374A;
  text-align:left;
}
.pricing-note strong{color:#0A1A33;font-weight:800}

.pricing-strip{
  background:#F5F8FC;
  margin-top:70px;
  padding:34px 0;
}
/* CTA de WhatsApp entre los planes y la nota */
.pricing-cta{
  text-align:center;
  padding:34px 0 0;
}
.pricing-strip-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.pack{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:6px 18px;
}
.pack + .pack{border-left:1px solid #D5E1EF}
.pack-icon{
  width:46px;height:46px;
  color:#123C7A;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.pack-icon > svg{width:46px;height:46px}
.pack-copy{display:flex;flex-direction:column;line-height:1.25}
.pack-copy strong{font-size:23px;font-weight:800;color:#0A1A33}
.pack-copy small{font-size:14px;color:#5B6878}

/* ===========================================================
   PROCESO (fondo claro, tarjetas con icono)
   =========================================================== */
.process{
  background:#fff;
  color:#0A1A33;
  padding:120px 0 60px;
  text-align:center;
}
.kicker-light{
  background:#fff !important;
  color:#0063FE !important;
  border-color:rgba(0,99,254,.2) !important;
}
.process-title{
  color:#0A1A33;
  margin-bottom:60px;
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.process-card{
  background:#fff;
  border:1px solid rgba(10,26,51,.06);
  border-radius:14px;
  padding:36px 26px 32px;
  text-align:center;
  box-shadow:0 1px 2px rgba(10,26,51,.04);
  transition:transform .35s ease, box-shadow .35s ease;
}
.process-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,99,254,.12);
}
.process-icon{
  width:72px;height:72px;
  border-radius:50%;
  background:#E7EEFB;
  color:#0063FE;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;
  flex-shrink:0;
}
.process-icon > svg{
  width:34px !important;
  height:34px !important;
  display:block;
}
.process-card h3{
  font-size:18px;
  font-weight:700;
  margin:0 0 12px;
  letter-spacing:-.01em;
  color:#0A1A33;
}
.process-sep{
  display:block;
  width:34px;height:3px;
  background:#0063FE;
  border-radius:2px;
  margin:6px auto 18px;
}
.process-card p{
  font-size:14px;
  line-height:1.6;
  color:#465A78;
  margin:0;
}

/* ===========================================================
   QUOTE (frase con cita)
   =========================================================== */
.quote-section{
  background:#fff;
  color:#0A1A33;
  padding:40px 0 60px;
  text-align:center;
}
.quote-mark{
  color:#0063FE;
  width:40px;height:40px;
  margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
}
.quote-mark > svg{
  width:40px !important;
  height:40px !important;
  display:block;
}
.quote-text{
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1.45;
  font-weight:700;
  letter-spacing:-.01em;
  color:#0A1A33;
  margin:0 auto;
  max-width:1000px;
}
.q-grad-1{
  background:linear-gradient(90deg,#3BD988 0%, #25C088 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.q-grad-2{
  background:linear-gradient(90deg,#25C0A8 0%, #3BB4FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.q-grad-3{
  background:linear-gradient(90deg,#3BB4FF 0%, #0063FE 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===========================================================
   BRANDS
   =========================================================== */
.brands{
  background:#fff;
  color:#0A0A0A;
  padding:120px 0 140px;
  text-align:center;
}
.brands .section-title{ color:#0A0A0A; }
.brands .kicker{
  background:#fff;
  color:#1F6BFF;
  border-color:rgba(31,107,255,.35);
}
.brands-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:30px;
  perspective:1000px;              /* da profundidad al giro de entrada */
}
/* Entrada: cada logo se abre como una carta que gira sobre su borde
   izquierdo, con un ligero rebote al final. El retardo (--d) lo calcula el
   JS según la posición real de la tarjeta, así la ola recorre la grilla en
   diagonal sin importar cuántas columnas haya en ese breakpoint. */
.brand{
  background:transparent;
  height:auto;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  text-decoration:none;
  color:inherit;
  opacity:0;
  transform-origin:0% 50%;
  transform: rotateY(-78deg) translateZ(-30px) scale(.94);
  transition: opacity .5s ease,
              transform .85s cubic-bezier(.18,.9,.28,1.06);
  transition-delay: var(--d, 0ms);
}
.brand.in{
  opacity:1;
  transform: rotateY(0deg) translateZ(0) scale(1);
}
/* terminada la cascada: sin retardo heredado, para que el hover responda al instante */
.brand.done{ transition-delay:0ms; }
.brand.done img{ animation:none; }
.brand.in:hover{
  transform: translateY(-6px) scale(1.06);
}
.brand img{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  transition: transform .4s ease;
}
/* al aterrizar, cada logo se asienta con un pequeño rebote de escala */
.brand.in img{
  animation: brandSettle 1s ease-out backwards;
  animation-delay: calc(var(--d, 0ms) + 260ms);
}
@keyframes brandSettle{
  0%   { transform:scale(1.06); }
  100% { transform:scale(1); }
}
/* accesibilidad: sin movimiento, solo un fundido */
@media (prefers-reduced-motion: reduce){
  .brand{
    transform:none;
    transition: opacity .4s ease;
    transition-delay:0ms;
  }
  .brand.in img{ animation:none; }
  .brand.in:hover{ transform:none; }
}

/* ===========================================================
   CTA / FOOTER
   =========================================================== */
.cta{
  background:linear-gradient(180deg,#07142A 0%, #061128 100%);
  color:#fff;
  padding:70px 0 30px;
  text-align:center;
}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.logo-center{justify-content:center}
.cta-title{
  font-family:'Moderniz', 'Inter', sans-serif;
  font-size:clamp(28px,3vw,40px);
  font-weight:800;margin:8px 0 0;
  letter-spacing:-.01em;
}
.cta-sub{color:#9FB0C7;margin:0 0 8px;font-size:14px}
.cta-foot{color:#7E92AC;font-size:12px;margin-top:8px}
.footer-line{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:40px;
  padding-top:18px;
  text-align:center;
  color:#6B7E97;
  font-size:12px;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* laptops (~1280-1500px): el header ocupa lo mismo pero el alto útil es
   menor, así que los 180px de aire sobre el hero sobran */
@media (max-width: 1500px){
  .hero{ padding-top:120px; }
}

@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; gap:40px; text-align:center; min-height:auto; padding-top:20px; align-items:center}
  .hero-copy{padding-bottom:20px; margin-top:0}
  .hero-title{align-items:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  /* apilado: el stage recupera su alto natural (el stretch del desktop
     rompe el alto de la ficha al ser una imagen) */
  .hero-art{order:-1; margin-bottom:0; justify-content:center; align-self:auto}
  .hero-art-stage{width:min(660px,100%); max-width:none; margin-right:0; padding-right:20%; padding-bottom:0; align-self:auto}
  .hero-shop{width:100%; margin-top:0}
  .hero-mascot{width:40%; right:-5%; bottom:0}
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr; gap:20px; max-width:620px; margin:0 auto}
  .pricing-strip-grid{grid-template-columns:repeat(2,1fr); gap:22px 0}
  .pack:nth-child(3){border-left:none}
  .brands-grid{grid-template-columns:repeat(3,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .first-case-grid{grid-template-columns:1fr; gap:40px}
  .first-case-text{max-width:none}
}

/* =========================
   MÓVIL ≤ 640px
   ========================= */
@media (max-width: 640px){
  /* anti-desborde global */
  html, body{ overflow-x:hidden; }
  .container{ width:min(1200px, 100%); padding:0 18px; }

  /* HEADER */
  .site-header{ padding:12px 0; }
  .header-inner{ gap:10px; }
  .logo-img{ height:34px; }
  .btn-wa-sm{ padding:8px 14px; font-size:12px; }

  /* HERO */
  .hero{ padding:90px 0 30px; }
  .hero-grid{ gap:30px; padding-top:0; }
  .hero-title-top{ font-size:14px; margin-bottom:6px; }
  .hero-title-big{ font-size:34px; line-height:1.05; }
  .hero-sub{ font-size:14px; margin:14px auto 22px; max-width:100%; }
  .hero-copy{ padding-bottom:0; padding-top:0; order:1; }
  .hero-copy .btn-wa{ margin:0 auto; }

  /* HERO ART — caja contenida sin desborde, debajo del copy en móvil */
  .hero-art{ justify-content:center; order:2; }
  .hero-art-stage{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding-right:22%;
    padding-bottom:26px;   /* la ficha no queda al ras de la banda de métricas */
    overflow:visible;
  }
  .hero-mascot{ width:40%; right:-2%; bottom:0; }

  /* METRICS */
  .metrics-wrap{ padding:36px 0; margin-bottom:0; }
  .hero{ padding-bottom:0 !important; overflow:hidden; }
  .hero-bg{ overflow:hidden; }
  .video-section{ margin-top:0 !important; }
  .metrics{ grid-template-columns:repeat(2,1fr); gap:22px 14px; }
  .metric{ justify-content:center; flex-direction:column; align-items:center; gap:4px; text-align:center; }
  .metric-num{ font-size:32px; }
  .metric-label{ font-size:11px; letter-spacing:.12em; }

  /* TOOLS */
  .tools{ padding:50px 0 60px; }
  .tools-grid{ grid-template-columns:1fr; gap:14px; }

  /* LO HICIMOS PRIMERO */
  .first-case{ padding:60px 0 70px; }
  .first-case-grid{ gap:34px; }
  .first-case-title{ margin-bottom:18px; }
  .first-case-brands{ font-size:16px; gap:8px 16px; margin-bottom:28px; }
  .first-case-brands li{ gap:16px; }
  .first-case-art img{ border-radius:16px; }

  /* PRECIOS */
  .pricing{ padding:60px 0 0; }
  .pricing-title{ margin-bottom:32px; }
  .price-card{ padding:24px 20px 26px; }
  .price-num{ font-size:36px; }
  .price-list li{ font-size:14px; }
  .pricing-note{ margin-top:26px; padding:14px 16px; font-size:14px; }
  .pricing-cta{ padding:24px 0 0; }
  .pricing-strip{ margin-top:50px; padding:26px 0; }
  .pricing-strip-grid{ grid-template-columns:1fr; gap:18px; }
  .pack{ justify-content:flex-start; padding:0; }
  .pack + .pack{ border-left:none; border-top:1px solid #D5E1EF; padding-top:18px; }
  .pack-icon, .pack-icon > svg{ width:38px; height:38px; }

  /* PROCESO */
  .process{ padding:60px 0 70px; }
  .process-title{ margin-bottom:36px; }
  .process-grid{ grid-template-columns:1fr; gap:16px; }
  .process-card{ padding:28px 22px 24px; }
  .process-icon{ width:60px; height:60px; margin-bottom:16px; }
  .process-icon svg{ width:28px; height:28px; }

  /* QUOTE */
  .quote-section{ padding:60px 0 70px; }
  .quote-text{ font-size:18px; }
  .quote-text br{ display:none; }

  /* BRANDS */
  .brands{ padding:80px 0 70px; }
  .brands-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }

  /* VIDEO — desactivar efecto Linearity en móvil: video estático, sin sticky, sin shrink */
  .video-section{
    height:auto !important;
    padding:40px 0;
    background:#03070E;
    --vp:0 !important;
    --vw:100 !important;
    --vr:0 !important;
  }
  .video-section::after{ display:none !important; }   /* sin fondo blanco */
  .video-pin::before{ display:none !important; }     /* sin degradado superior */
  .video-pin{
    position:relative;
    top:auto;
    height:auto;
    overflow:visible;
  }
  .video-card{
    width:calc(100% - 36px) !important;
    max-width:100%;
    margin:0 auto !important;
    margin-top:0 !important;
    border-radius:14px !important;
    aspect-ratio:16/9;
    max-height:none;
    outline:none !important;
  }
  .video-mute{
    right:10px; bottom:10px;
    width:36px; height:36px;
  }
  .video-mute svg{ width:18px; height:18px; }

  /* CTA */
  .cta{ padding:50px 0 24px; }
  .cta-title{ font-size:26px; }
  .footer-line{ margin-top:28px; font-size:11px; }
  .footer-line small{ display:block; line-height:1.6; }

  /* TITULARES */
  .section-title{ font-size:26px; margin:0 0 28px; }
  .kicker{ font-size:11px; }

  .btn{ padding:11px 18px; font-size:13px; }
  .logo-text{ font-size:15px; }
}

@media (max-width: 420px){
  .hero-title-big{ font-size:28px; }
  .hero-sub{ font-size:13px; }
  .metric-num{ font-size:26px; }
  .metric-label{ font-size:10px; letter-spacing:.10em; }
  .section-title{ font-size:22px; }
  .pricing-title{ font-size:26px; }
  .price-num{ font-size:32px; }
}