/* =========================================================
   Maxima · Landing
   1. Tokens  2. Base  3. Componentes  4. Secciones
   ========================================================= */

/* 1. TOKENS ------------------------------------------------ */
:root{
  --naranjo:       #FF6A1A;
  --naranjo-hondo: #C43C00;
  --naranjo-suave: #FFEDDF;
  --tinta:         #171310;
  --fondo:         #FFFFFF;
  --gris:          #5E524A;
  --linea:         #EADCD1;
  --blanco:        #FFFFFF;

  --papel:         #FFFCF8;   /* papel térmico del ticket, neutro cálido */

  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-texto:   "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radio: 14px;
  --radio-sm: 8px;
  --ancho: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --sombra: 0 1px 2px rgb(23 19 16 / .06), 0 12px 32px -12px rgb(23 19 16 / .18);
}

/* 2. BASE -------------------------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body{
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden]{ display: none !important; }
img, svg{ display: block; max-width: 100%; }
h1, h2, h3{ font-family: var(--f-display); line-height: 1.05; margin: 0; letter-spacing: -.01em; }
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; }

:focus-visible{ outline: 3px solid var(--naranjo-hondo); outline-offset: 2px; border-radius: 4px; }

.wrap{ width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--blanco);
  padding: 10px 16px; border-radius: var(--radio-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus{ top: 12px; }

.sr-only{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. COMPONENTES ------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: var(--naranjo); color: var(--tinta);
  font-family: var(--f-display); font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; border: 0; border-radius: 999px; cursor: pointer;
  padding: .85em 1.4em;
  box-shadow: 0 3px 0 var(--naranjo-hondo);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{ background: #FF7A30; transform: translateY(-1px); box-shadow: 0 4px 0 var(--naranjo-hondo); }
.btn:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--naranjo-hondo); }
.btn--sm{ font-size: .9rem; padding: .6em 1.05em; box-shadow: 0 2px 0 var(--naranjo-hondo); }
.btn--lg{ font-size: 1.08rem; padding: 1em 1.7em; }
.btn--block{ width: 100%; }
.btn--tinta{ background: var(--tinta); color: var(--blanco); box-shadow: 0 3px 0 #000; }
.btn--tinta:hover{ background: #2E2520; box-shadow: 0 4px 0 #000; }
.btn--tinta:active{ box-shadow: 0 1px 0 #000; }

.eyebrow{
  font-family: var(--f-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--naranjo-hondo);
  margin-bottom: .9rem;
}

.section{ padding-block: clamp(52px, 7vw, 84px); }
.section__title{
  font-size: clamp(2rem, 5.2vw, 3.3rem); font-weight: 850;
  font-stretch: 90%; max-width: 20ch;
}
.section__lead{ color: var(--gris); font-size: 1.08rem; max-width: 56ch; margin-top: 1rem; }

/* Logo oficial: el PNG se usa como máscara para pintarlo con cualquier color (currentColor) */
.logo{
  display: block; aspect-ratio: 640 / 143; height: auto;
  background-color: currentColor;
  -webkit-mask: url("assets/logo-maxima.png") center / contain no-repeat;
          mask: url("assets/logo-maxima.png") center / contain no-repeat;
}

/* Brillo que sigue al puntero (secciones con data-brillo).
   Es una capa detrás del contenido; script.js actualiza --mx/--my y activa .is-brillo
   solo con mouse y sin "reducir movimiento". En celular no existe. */
[data-brillo]{
  --brillo-c: rgb(255 106 26 / .22);
  --brillo-r: 560px;
  position: relative; isolation: isolate;
}
[data-brillo]::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(var(--brillo-r) circle at var(--mx, 50%) var(--my, 50%), var(--brillo-c), transparent 70%);
  opacity: 0; transition: opacity .6s ease;
}
[data-brillo].is-brillo::before{ opacity: 1; }
[data-brillo="hero"]{ --brillo-c: rgb(255 106 26 / .16); --brillo-r: 640px; }
[data-brillo="claro"]{ --brillo-c: rgb(255 255 255 / .30); --brillo-r: 620px; }

/* Ticket: papel térmico con borde troquelado arriba y abajo */
.ticket{
  --diente: 10px;
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  padding: 30px 24px;
  box-shadow: var(--sombra);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--diente) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--diente) 51% repeat-x;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--diente) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--diente) 51% repeat-x;
}
.ticket__rule{ border: 0; border-top: 2px dashed var(--linea); margin: 16px 0; }
.dot{
  display: inline-block; width: .6em; height: .6em; border-radius: 50%;
  background: #1F9D55; box-shadow: 0 0 0 3px rgb(31 157 85 / .18);
}

/* 4. SECCIONES --------------------------------------------- */

/* Nav */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .96);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.is-scrolled{ border-color: var(--linea); box-shadow: 0 6px 20px -14px rgb(23 19 16 / .35); }
.nav__inner{ display: flex; align-items: center; gap: 16px; min-height: 64px; }
.nav__logo{ color: var(--naranjo-hondo); margin-right: auto; padding: 6px 0; }
.nav__logo{ display: block; }
.nav__logo .logo{ width: 124px; }
.nav__links{ display: none; gap: 28px; }
.nav__links a, .nav__tel{
  text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--gris);
}
.nav__links a:hover, .nav__tel:hover{ color: var(--naranjo-hondo); }
.nav__tel{ display: none; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.nav__tel svg{ width: 16px; height: 16px; fill: currentColor; }

@media (min-width: 900px){
  .nav__links{ display: flex; }
  .nav__logo{ margin-right: 24px; }
  .nav__links{ margin-right: auto; }
  .nav__tel{ display: inline-flex; }
}

/* Hero */
.hero{
  /* --bx/--by: posición del círculo; script.js la desplaza un poco hacia el puntero */
  background:
    radial-gradient(circle at var(--bx, 85%) var(--by, 40%), var(--naranjo-suave) 0 38%, transparent 38.2%),
    var(--fondo);
  padding-block: clamp(40px, 7vw, 88px) clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.hero__inner{ display: grid; gap: 48px; align-items: center; }
.hero__title{
  font-size: clamp(2.4rem, 7.4vw, 4.6rem); font-weight: 900; font-stretch: 88%;
  letter-spacing: -.02em; max-width: 16ch;
}
.marca{ color: var(--naranjo-hondo); }
.hero__lead{ font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--gris); margin-top: 1.25rem; max-width: 52ch; }

.hero__ticket-wrap{ display: flex; justify-content: center; padding-inline: 8px; }
.ticket--hero{
  width: min(100%, 360px);
  transform: rotate(2.5deg);
  font-family: var(--f-display); font-stretch: 80%;
}
.ticket__for{ margin-top: 0; font-size: 1rem; color: var(--gris); }
.ticket__for strong{ color: var(--tinta); }
.ticket__items{ display: grid; gap: 10px; font-size: 1.1rem; font-weight: 600; }
.ticket__items li{ display: grid; grid-template-columns: 2.2ch 1fr auto; gap: 8px; align-items: baseline; }
.qty{ color: var(--gris); font-variant-numeric: tabular-nums; }
.ok{ color: var(--naranjo-hondo); font-weight: 800; }

.ticket__total{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radio-sm);
  background: var(--naranjo); font-weight: 900; font-size: 1.45rem; text-transform: uppercase;
}
.ticket__total span:first-child{ font-size: 1rem; font-weight: 700; }

/* Portada: el ticket sale de la impresora, línea por línea */
.anima .ticket--hero{ animation: imprime 1.1s .15s cubic-bezier(.3,.7,.2,1) both; }
@keyframes imprime{
  from{ clip-path: inset(0 0 100% 0); transform: rotate(2.5deg) translateY(-30px); }
  to{ clip-path: inset(0 0 0 0); transform: rotate(2.5deg) translateY(0); }
}
.anima .ticket--hero .ticket__items li{ animation: linea .35s ease-out both; animation-delay: calc(.7s + var(--i) * .25s); }
.anima .ticket--hero .ticket__items li:nth-child(1){ --i: 0; }
.anima .ticket--hero .ticket__items li:nth-child(2){ --i: 1; }
.anima .ticket--hero .ticket__items li:nth-child(3){ --i: 2; }
.anima .ticket--hero .ticket__items li:nth-child(4){ --i: 3; }
.anima .ticket--hero .ok{ display: inline-block; animation: palomita .4s cubic-bezier(.2,.8,.3,1.8) both; animation-delay: calc(1s + var(--i) * .25s); }
/* El TOTAL entra con sello y, a partir de ahí, salta cada 4.5 s para llamar la atención */
.anima .ticket--hero .ticket__total{ animation: sello .5s 2.5s cubic-bezier(.2,.8,.3,1.5) both, saltito 4.5s ease-in-out 4s infinite; }
@keyframes linea{ from{ opacity: 0; transform: translateX(-10px); } to{ opacity: 1; transform: none; } }
@keyframes palomita{ from{ opacity: 0; transform: scale(0) rotate(-30deg); } to{ opacity: 1; transform: none; } }

@media (min-width: 900px){
  .hero__inner{ grid-template-columns: 1.25fr .9fr; }
  .ticket--hero{ width: 380px; }
}

/* Platillos 3D alrededor del ticket.
   - flotan suave (animation en transform)
   - se desplazan con el puntero (translate con --px/--py que pone script.js; --prof = cuánto se mueven) */
.hero__ticket-wrap{ position: relative; }
.flota{
  position: absolute; z-index: 2; height: auto; pointer-events: none;
  filter: drop-shadow(0 16px 18px rgb(23 19 16 / .22));
  translate: calc(var(--px, 0) * var(--prof, 1) * 16px) calc(var(--py, 0) * var(--prof, 1) * 12px);
  transition: translate .2s linear;
}
.hero__ticket-wrap{ padding-block: 40px 30px; }
.flota--hamburguesa{ width: 88px; top: -6px; left: -2px; }
.flota--taco{ width: 72px; bottom: -8px; right: -4px; }
.flota--pizza{ width: 60px; bottom: -6px; left: 10%; }
@media (min-width: 600px){
  .flota--hamburguesa{ width: 120px; top: -20px; left: 8%; }
  .flota--taco{ width: 100px; right: 8%; }
  .flota--pizza{ width: 84px; left: 4%; }
}
@media (min-width: 900px){
  /* Los platillos no deben invadir la columna de texto: se quedan sobre el ticket y su margen */
  .flota--hamburguesa{ width: 140px; top: -64px; left: -12%; }
  .flota--taco{ width: 118px; bottom: -64px; right: -14%; }
  .flota--pizza{ width: 96px; bottom: -34px; left: -6%; }
}
.anima .flota{ animation: aparece .6s cubic-bezier(.2,.8,.3,1.5) both, flotar 5s ease-in-out infinite; }
.anima .flota--hamburguesa{ animation-delay: 2.7s, 3.3s; }
.anima .flota--taco{ animation-delay: 2.9s, 3.5s; --giro: 6deg; }
.anima .flota--pizza{ animation-delay: 3.1s, 3.7s; --giro: -8deg; }
@keyframes aparece{ from{ opacity: 0; transform: scale(.3) rotate(-20deg); } to{ opacity: 1; transform: scale(1) rotate(0); } }
@keyframes flotar{
  0%, 100%{ transform: translateY(0) rotate(0); }
  50%{ transform: translateY(-10px) rotate(var(--giro, 4deg)); }
}

/* Plataformas */
.apps{ background: var(--tinta); color: var(--blanco); }
.apps__inner{ padding-block: 28px 32px; }
.apps__label{ font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #BFB3AA; margin-bottom: 14px; }
.apps__list{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px){ .apps__list{ grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } }

/* Cada plataforma: ficha del mismo tamaño con ícono de app + nombre.
   --app es el color de la marca; se usa solo en el hover. */
.app{
  --app: var(--naranjo);
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 6px 12px;
  background: #221C18; border: 1px solid #3A302A; border-radius: 16px;
  transition: transform .22s cubic-bezier(.2,.8,.3,1.3), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.app__icon{
  display: block; width: 52px; height: 52px; border-radius: 14px; object-fit: cover;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 6px 14px -6px rgb(0 0 0 / .6);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.4);
}
.app__name{
  font-family: var(--f-display); font-weight: 700; font-stretch: 90%; font-size: .82rem; line-height: 1.1;
  color: #E9E1DA; text-align: center; white-space: nowrap;
}

/* Banda: con animaciones activas, las fichas avanzan en fila sin fin (script.js duplica la lista).
   Cada ficha lleva su separación como margin-right para que -50% sea exactamente una vuelta completa.
   Sin animaciones, se queda la cuadrícula de siempre. */
.apps__banda{ margin-inline: calc(var(--gutter) * -1); }
.anima .apps{ overflow: hidden; }
.anima .apps__banda{
  /* De orilla a orilla de la pantalla, aunque el título quede alineado al contenido */
  margin-inline: calc(50% - 50vw);
  overflow: hidden; padding-block: 8px 10px; margin-block: -8px -10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.apps__banda .apps__list{ margin-inline: var(--gutter); }
.anima .apps__banda .apps__list{
  display: flex; width: max-content; gap: 0; margin-inline: 0;
  animation: banda 32s linear infinite;
}
.anima .apps__banda .app{ width: 128px; flex: none; margin-right: 12px; }
.anima .apps__banda:hover .apps__list{ animation-play-state: paused; }
@keyframes banda{ to{ transform: translateX(-50%); } }
@media (max-width: 899px){
  .anima .apps__banda .app{ width: 104px; margin-right: 10px; }
  .anima .apps__banda .apps__list{ animation-duration: 26s; }
}
@media (hover: hover){
  .app:hover{
    transform: translateY(-5px);
    background: color-mix(in srgb, var(--app) 14%, #221C18);
    border-color: var(--app);
    box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--app) 70%, transparent);
  }
  .app:hover .app__icon{ transform: scale(1.1) rotate(-4deg); }
  .app:hover .app__name{ color: var(--blanco); }}
@media (min-width: 900px){
  .app{ padding: 16px 6px 14px; }
  .app__icon{ width: 60px; height: 60px; border-radius: 16px; }
  .app__name{ font-size: .88rem; }
}

/* Qué hacemos: Maxima NO es una agencia. Lo de agencia va tachado y chico; lo de Maxima, en tarjetas. */
.diff__head{ display: grid; gap: 20px; }
.diff .section__title{ max-width: 24ch; }

.diff__grid{ display: grid; gap: 14px; margin-top: 44px; }
@media (min-width: 640px){ .diff__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px){ .diff__grid{ grid-template-columns: repeat(4, 1fr); } }
.hacer{
  position: relative; padding: 24px 22px 26px;
  background: var(--fondo); border: 1.5px solid var(--linea); border-radius: var(--radio);
  transition: transform .25s cubic-bezier(.2,.8,.3,1.3), border-color .2s ease, box-shadow .25s ease;
}
.hacer__icon{
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--naranjo-suave); color: var(--naranjo-hondo);
  transition: background-color .25s ease, color .25s ease, transform .3s cubic-bezier(.2,.8,.3,1.5);
}
.hacer__icon svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hacer h3{ font-size: 1.25rem; font-weight: 800; font-stretch: 90%; margin-top: 18px; }
.hacer p{ color: var(--gris); margin-top: 8px; font-size: .96rem; }
/* En celular: ícono a la izquierda para que las tarjetas ocupen menos alto */
@media (max-width: 639px){
  .hacer{ display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px 18px 20px; }
  .hacer__icon{ width: 44px; height: 44px; grid-row: span 2; }
  .hacer h3{ margin-top: 0; font-size: 1.15rem; align-self: center; }
  .hacer p{ grid-column: 2; margin-top: 4px; }
}
@media (hover: hover){
  .hacer:hover{ transform: translateY(-4px); border-color: var(--naranjo); box-shadow: 0 16px 30px -18px rgb(196 60 0 / .45); }
  .hacer:hover .hacer__icon{ background: var(--naranjo); color: var(--tinta); transform: rotate(-6deg) scale(1.06); }
}

/* Resultados (Casos de éxito) */
.results{ background: var(--naranjo-suave); }
.results__head{ position: relative; display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px){ .results__head{ grid-template-columns: 1fr auto; } }

.eyebrow--oro{ display: inline-flex; align-items: center; gap: 8px; }
.estrella-oro{ width: 20px; height: 20px; flex: none; filter: drop-shadow(0 1px 1px rgb(183 121 11 / .45)); }
.anima .estrella-oro{ animation: titila 2.8s ease-in-out infinite; }
@keyframes titila{
  0%, 100%{ transform: scale(1) rotate(0); }
  45%{ transform: scale(1.25) rotate(18deg); }
  55%{ transform: scale(.95) rotate(12deg); }
}

/* Medalla dorada del brochure con destello que la recorre y chispas */
.medalla{ position: absolute; top: -6px; right: -2px; width: 72px; }
@media (max-width: 759px){ .results__head > div:first-child{ padding-right: 78px; } }
@media (min-width: 760px){ .medalla{ position: relative; top: auto; right: auto; width: 150px; margin-right: 24px; } }
.medalla__img{ display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 18px rgb(150 95 10 / .3)); }
.medalla__brillo{
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("assets/ilustraciones/medalla.webp") center / contain no-repeat;
          mask: url("assets/ilustraciones/medalla.webp") center / contain no-repeat;
  background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .9) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat;
  opacity: 0;
}
.chispa{
  position: absolute; width: 16px; height: 16px; pointer-events: none;
  background: linear-gradient(135deg, #FFF6D6, #F2B01E);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.chispa--1{ top: 4%; left: -8%; }
.chispa--2{ top: 30%; right: -10%; width: 11px; height: 11px; }
.chispa--3{ bottom: 22%; left: -2%; width: 9px; height: 9px; }
.anima .medalla{ animation: flotar 5s ease-in-out infinite; --giro: 5deg; }
.anima .medalla__brillo{ animation: destello 3.6s ease-in-out 1s infinite; }
@keyframes destello{
  0%{ opacity: 1; background-position: 150% 0; }
  45%, 100%{ opacity: 1; background-position: -50% 0; }
}
.anima .chispa{ animation: chispea 2.4s ease-in-out infinite; }
.anima .chispa--2{ animation-delay: .8s; }
.anima .chispa--3{ animation-delay: 1.6s; }
@keyframes chispea{
  0%, 100%{ opacity: 0; transform: scale(.2) rotate(0); }
  40%{ opacity: 1; transform: scale(1) rotate(45deg); }
  70%{ opacity: 0; transform: scale(.4) rotate(90deg); }
}
/* Sin animaciones: chispas visibles y quietas */
html:not(.anima) .chispa{ opacity: .9; }
/* Carrusel de casos: se desliza con el dedo (scroll-snap), con flechas y puntos.
   Sin JavaScript queda como una tira que se puede arrastrar. */
.carrusel{ margin-top: 64px; }
.results__grid{ display: flex; gap: 16px; }
.carrusel__pista{
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  padding: 40px 0 8px; margin-top: -40px;   /* aire para los platillos que asoman arriba */
  scrollbar-width: none; -ms-overflow-style: none;
}
.carrusel__pista::-webkit-scrollbar{ display: none; }
.carrusel__pista:focus-visible{ outline: 3px solid var(--naranjo-hondo); outline-offset: 4px; border-radius: var(--radio); }
.carrusel__pista > .case{ flex: 0 0 100%; scroll-snap-align: center; }
@media (min-width: 640px){ .carrusel__pista > .case{ flex: 0 0 calc((100% - 16px) / 2); scroll-snap-align: start; } }
@media (min-width: 1000px){ .carrusel__pista > .case{ flex: 0 0 calc((100% - 32px) / 3); } }

.carrusel__mando{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.carrusel__flecha{
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; cursor: pointer;
  background: var(--blanco); color: var(--tinta); border: 1.5px solid var(--linea); border-radius: 50%;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.carrusel__flecha svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carrusel__flecha:hover{ background: var(--naranjo); border-color: var(--naranjo); transform: translateY(-2px); }
.carrusel__flecha[disabled]{ opacity: .35; cursor: default; transform: none; background: var(--blanco); }
.carrusel__puntos{ display: flex; align-items: center; gap: 8px; }
.carrusel__punto{
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(23 19 16 / .2); transition: background-color .25s ease, width .25s ease;
}
.carrusel__punto.is-actual{ width: 26px; border-radius: 999px; background: var(--naranjo-hondo); }

.case{
  position: relative;
  background: var(--fondo); border-radius: var(--radio); padding: 22px 22px 18px;
  display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--linea);
}
.case__top{ display: flex; flex-direction: column; gap: 2px; padding-right: 88px; }
/* Platillo 3D del tipo de comida, asomándose por la esquina de la tarjeta */
.case__img{
  position: absolute; top: -34px; right: 12px; width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 10px 12px rgb(23 19 16 / .2));
  transition: transform .35s cubic-bezier(.2,.8,.3,1.5);
  pointer-events: none;
}
@media (hover: hover){ .case:hover .case__img{ transform: translateY(-6px) rotate(-8deg) scale(1.08); } }
.case__kind{
  font-family: var(--f-display); font-weight: 900; font-stretch: 85%; font-size: 1.45rem; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .01em;
}
.case__big{
  font-family: var(--f-display); font-weight: 900; font-stretch: 80%;
  font-size: 3.2rem; line-height: 1; margin-top: 14px; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.case__big small{ font-size: 1rem; font-weight: 700; color: var(--gris); margin-left: 6px; font-stretch: 100%; }
.chart__nota{ margin-top: 4px; font-size: .72rem; color: var(--gris); font-style: italic; }

.chart{ position: relative; margin-top: auto; padding-top: 22px; }
.chart__plot{
  position: relative; height: 128px;
  display: flex; align-items: flex-end; gap: 2px;
  border-bottom: 1px solid var(--linea);
}
.chart__bar{
  position: relative; flex: 1 1 0; height: 100%;
  display: flex; align-items: flex-end;
  background: none; border: 0; padding: 0; margin: 0; cursor: default;
  font: inherit; color: inherit;
}
.chart__fill{
  display: block; width: 100%;
  min-height: 2px;
  background: var(--naranjo);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  transition: filter .15s ease, transform .7s cubic-bezier(.2,.8,.3,1.15);
  transition-delay: 0s, calc(var(--i, 0) * 80ms);
}
/* Resultados: las barras crecen mes a mes cuando la tarjeta entra en pantalla */
.anima .case:not(.is-visible) .chart__fill{ transform: scaleY(0); }
.anima .case{ transition: transform .5s ease, opacity .5s ease; }
.anima .case:not(.is-visible){ opacity: .4; transform: translateY(14px); }
.chart__bar:last-child .chart__fill{ background: var(--naranjo-hondo); }
.chart__bar:hover .chart__fill,
.chart__bar:focus-visible .chart__fill{ filter: brightness(.9); }
.chart__bar:focus-visible{ outline-offset: 0; }
.chart__axis{ display: flex; justify-content: space-between; margin-top: 6px; font-size: .75rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.chart__axis strong{ color: var(--tinta); font-weight: 600; }

.chart__tip{
  position: absolute; z-index: 5; bottom: calc(100% + 4px);
  background: var(--tinta); color: var(--blanco);
  font-size: .8rem; line-height: 1.3; padding: 6px 10px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}
.chart__tip strong{ display: block; font-size: .9rem; }

.case__table{ margin-top: 14px; font-size: .85rem; }
.case__table summary{ cursor: pointer; color: var(--naranjo-hondo); font-weight: 600; width: fit-content; }
.case__table table{ width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.case__table th, .case__table td{ text-align: left; padding: 4px 0; border-bottom: 1px solid var(--linea); }
.case__table td:last-child, .case__table th:last-child{ text-align: right; }
.case__table th{ font-weight: 600; color: var(--gris); }


/* Asesoría por segmento */
.seg .section__title{ max-width: 24ch; }
.seg__tabs{
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 36px; padding: 6px; border-radius: 18px; background: var(--naranjo-suave);
  max-width: 620px;
}
.seg__tab{
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  font: inherit; color: var(--tinta); cursor: pointer;
  background: transparent; border: 0; border-radius: 13px; padding: 12px 14px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.seg__tab strong{ font-family: var(--f-display); font-weight: 800; font-size: 1.02rem; font-stretch: 90%; line-height: 1.15; }
.seg__tab span{ font-size: .82rem; color: var(--gris); }
.seg__tab:hover{ background: rgb(255 255 255 / .6); }
.seg__tab[aria-selected="true"]{ background: var(--blanco); box-shadow: 0 1px 2px rgb(23 19 16 / .08), 0 6px 16px -8px rgb(23 19 16 / .25); }
.seg__tab[aria-selected="true"] span{ color: var(--naranjo-hondo); font-weight: 600; }

.seg__panel{ display: grid; gap: 40px; align-items: center; margin-top: 32px; }
@media (min-width: 900px){ .seg__panel{ grid-template-columns: 1.2fr .8fr; gap: 64px; } }

.seg__title{ font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 850; font-stretch: 90%; margin-top: 14px; }
.seg__lead{ color: var(--gris); font-size: 1.05rem; margin: 12px 0 26px; max-width: 46ch; }

.seg__switch{ margin-top: 18px; font-size: .92rem; color: var(--gris); }
.seg__switch button{
  font: inherit; font-weight: 600; color: var(--naranjo-hondo); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.seg__switch button:hover{ color: var(--tinta); }

.seg__visual{
  position: relative;
  justify-self: center; width: min(100%, 380px);
  filter: drop-shadow(0 1px 1px rgb(23 19 16 / .08)) drop-shadow(0 14px 22px rgb(23 19 16 / .14));
}
.seg__visual:has(.seg__img){ padding-top: 96px; }
.seg__img{
  position: absolute; z-index: 2; top: 0; left: -14px; width: 180px; height: auto;
  transform: rotate(-4deg); pointer-events: none;
}
.anima .seg__img{ animation: flotar 6s ease-in-out infinite; --giro: -6deg; }
@media (min-width: 900px){ .seg__img{ left: -48px; width: 220px; } }
.ticket--seg{ font-family: var(--f-display); font-stretch: 82%; transform: rotate(-1.5deg); }
.ticket__rows{ display: grid; gap: 12px; font-size: 1.05rem; font-weight: 600; }
.ticket__rows li{ display: flex; align-items: baseline; gap: 8px; }
.ticket__rows li::after{ content: ""; order: 1; flex: 1; border-bottom: 2px dotted var(--linea); transform: translateY(-4px); }
.ticket__rows li span:last-child{ order: 2; color: var(--naranjo-hondo); font-weight: 800; }
.ticket--seg .ticket__total{ font-size: 1.2rem; }

/* Pasos */
.steps{ background: var(--tinta); color: var(--blanco); }
.steps .eyebrow{ color: var(--naranjo); }
/* Lista de pasos como seguimiento de pedido: una barra (track) une los puntos de cada paso.
   Móvil: barra vertical a la izquierda. Escritorio: barra horizontal sobre las tarjetas.
   script.js mide los puntos, posiciona la barra y la va llenando al hacer scroll. */
.steps__list{ position: relative; display: grid; gap: 16px; margin-top: 44px; padding-left: 34px; }
/* Ícono 3D de cada paso (chat, estrategia, gráfica), saliendo por la esquina superior derecha */
.step__img{
  position: absolute; top: -26px; right: 14px; width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgb(0 0 0 / .45));
  transition: transform .45s cubic-bezier(.2,.8,.3,1.5), filter .4s ease;
  pointer-events: none;
}
.anima .step:not(.is-activo) .step__img{ transform: scale(.8); filter: grayscale(1) drop-shadow(0 10px 14px rgb(0 0 0 / .45)); }
.anima .step.is-activo .step__img{ animation: flotar 5s ease-in-out .5s infinite; }
@media (min-width: 900px){ .step__img{ width: 84px; height: 84px; top: -34px; } }
.step{
  position: relative; padding: 26px 24px;
  border-radius: var(--radio); background: #231D19; border: 1px solid #3A302A;
  transition: border-color .4s ease, opacity .4s ease, transform .4s ease;
}
.step__dot{
  --dot: 34px;
  position: absolute; display: grid; place-items: center;
  left: calc(-22px - var(--dot) / 2); top: calc(38px - var(--dot) / 2);
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--naranjo); color: var(--tinta); box-shadow: 0 0 0 4px var(--tinta);
  transition: background-color .3s ease, color .3s ease, transform .35s cubic-bezier(.2,.8,.3,1.6);
}
.step__dot svg{
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.step__state{
  display: inline-block; font-family: var(--f-display); font-weight: 800; font-stretch: 85%;
  font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta); background: var(--naranjo); padding: 4px 10px; border-radius: 6px;
  transition: background-color .3s ease, color .3s ease;
}
.step h3{ font-size: 1.45rem; font-weight: 800; font-stretch: 90%; margin-top: 16px; }
.step p{ margin-top: 10px; color: #CFC5BD; }

.track{
  position: absolute; left: 11px; top: 38px; width: 4px; height: 0;
  background: #3A302A; border-radius: 4px; overflow: hidden; list-style: none;
}
.track__fill{
  display: block; width: 100%; height: 100%; background: var(--naranjo);
  transform-origin: top; transform: scaleY(var(--p, 1));
}
.track--h .track__fill{ transform-origin: left; transform: scaleX(var(--p, 1)); }

@media (min-width: 900px){
  .steps__list{ grid-template-columns: repeat(3, 1fr); padding-left: 0; padding-top: 58px; }
  /* Ícono centrado sobre su tarjeta: así la línea del tiempo queda simétrica con las cajas */
  .step__dot{ left: calc(50% - var(--dot) / 2); top: calc(-38px - var(--dot) / 2); }
}

/* Estado "aún no llega" (solo con animaciones activas) */
.anima .step:not(.is-activo){ opacity: .55; }
.anima .step:not(.is-activo) .step__dot{ background: #3A302A; transform: scale(.75); }
.anima .step:not(.is-activo) .step__state{ background: #3A302A; color: #BFB3AA; }
.anima .step.is-activo{ border-color: rgb(255 106 26 / .45); }
.anima .step.is-activo .step__dot{ animation: latido 1.6s ease-out 1; }
@keyframes latido{
  0%{ box-shadow: 0 0 0 4px var(--tinta), 0 0 0 4px rgb(255 106 26 / .6); }
  100%{ box-shadow: 0 0 0 4px var(--tinta), 0 0 0 16px rgb(255 106 26 / 0); }
}

/* FAQ */
.faq__inner{ display: grid; gap: 32px; }
@media (min-width: 900px){ .faq__inner{ grid-template-columns: .8fr 1.2fr; gap: 64px; } }
.faq__list{ border-top: 2px solid var(--tinta); }
.faq__item{ border-bottom: 1px solid var(--linea); }
.faq__item summary{
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::after{
  content: "+"; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--naranjo-suave); color: var(--naranjo-hondo); font-size: 1.3rem; font-weight: 600;
  transition: transform .2s ease;
}
.faq__item[open] summary::after{ transform: rotate(45deg); }
.faq__item summary:hover{ color: var(--naranjo-hondo); }
.faq__item p{ padding-bottom: 20px; color: var(--gris); max-width: 62ch; }

/* Contacto */
.contact{ background: var(--naranjo); }
.contact__copy :focus-visible{ outline-color: var(--tinta); }
.contact__inner{ display: grid; gap: 40px; align-items: start; }
@media (min-width: 960px){ .contact__inner{ grid-template-columns: 1fr 1fr; gap: 64px; } }
.contact__lead{ margin-top: 1.4rem; font-weight: 600; }
.contact__gets{ display: grid; gap: 12px; margin-top: 12px; }
.contact__gets li{ display: flex; gap: 12px; align-items: flex-start; max-width: 46ch; }
.contact__gets .n{
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tinta); color: var(--naranjo); font-family: var(--f-display); font-weight: 800; font-size: .9rem;
}

.contact__repartidor{ display: none; }
@media (min-width: 960px){
  .contact__repartidor{
    display: block; width: 250px; height: auto; margin-top: 36px;
    filter: drop-shadow(0 18px 20px rgb(23 19 16 / .25));
    transition: transform .4s cubic-bezier(.2,.8,.3,1.4);
  }
  .anima .contact__repartidor{ animation: flotar 4s ease-in-out infinite; --giro: -3deg; }
}

/* Cinta oscura en movimiento: frases del servicio con su ícono.
   Fondo tinta con un resplandor naranja que recorre la cinta; con mouse, además,
   el brillo de [data-brillo="cinta"] sigue al puntero. */
.cinta{
  overflow: hidden; color: var(--papel);
  background:
    radial-gradient(38% 160% at 50% 50%, rgb(255 106 26 / .30), transparent 70%) 0 0 / 200% 100% no-repeat,
    var(--tinta);
  border-block: 3px solid var(--naranjo);
}
[data-brillo="cinta"]{ --brillo-c: rgb(255 106 26 / .75); --brillo-r: 380px; }
.anima .cinta{ animation: resplandor 12s ease-in-out infinite alternate; }
@keyframes resplandor{ to{ background-position: 100% 0, 0 0; } }
.cinta__pista{ display: flex; width: max-content; }
.cinta__grupo{ display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.cinta__grupo span{
  font-family: var(--f-display); font-weight: 900; font-stretch: 85%; font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  text-transform: uppercase; white-space: nowrap; letter-spacing: .01em;
}
.cinta__ico{
  display: grid; place-items: center; flex: none; margin-left: 26px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--naranjo); color: var(--tinta);
  box-shadow: 0 0 0 3px rgb(255 106 26 / .22), 0 6px 14px -4px rgb(255 106 26 / .6);
}
.cinta__ico svg{
  width: 27px; height: 27px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.cinta__ico .lleno{ fill: currentColor; stroke: none; }
.anima .cinta__pista{ animation: deslizar 38s linear infinite; }
.anima .cinta:hover .cinta__pista{ animation-play-state: paused; }
@keyframes deslizar{ to{ transform: translateX(-50%); } }

/* Formulario */
.ticket--form{ padding: 36px clamp(20px, 4vw, 34px); }

/* Progreso del pedido */
.form__progress{ display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.form__bar{ flex: 1; height: 8px; border-radius: 8px; background: var(--naranjo-suave); overflow: hidden; }
.form__bar span{
  display: block; height: 100%; width: 100%; border-radius: 8px; background: var(--naranjo);
  transform-origin: left; transform: scaleX(var(--p, 0));
  transition: transform .45s cubic-bezier(.2,.8,.3,1.2), background-color .3s ease;
}
.form__count{ font-size: .82rem; color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.form__count [data-paso-num]{ font-weight: 700; color: var(--tinta); }
.form__atras{
  flex: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--gris);
  background: none; border: 0; padding: 6px 8px 6px 0; cursor: pointer;
}
.form__atras:hover{ color: var(--naranjo-hondo); }
.form__atras:focus-visible{ outline: 3px solid var(--naranjo-hondo); outline-offset: 2px; border-radius: 6px; }

/* Pasos: con JavaScript se ve uno a la vez (clase .js en <html>) */
.js .paso:not(.is-actual){ display: none; }
.paso__titulo,
.field .paso__titulo{
  display: block; font-family: var(--f-display); font-weight: 800; font-stretch: 90%;
  font-size: clamp(1.3rem, 2.6vw, 1.55rem); line-height: 1.15; margin: 4px 0 16px;
}
.paso__titulo .optional{ font-family: var(--f-texto); font-size: .9rem; font-weight: 400; }
.js .paso .field input[type="text"], .js .paso .field input[type="tel"], .js .paso .field input[type="email"]{ padding-block: 14px; }
.anima.js .paso.is-actual{ animation: paso-entra .38s cubic-bezier(.2,.8,.3,1) both; }
@keyframes paso-entra{
  from{ opacity: 0; transform: translateX(calc(var(--dir, 1) * 26px)); }
  to{ opacity: 1; transform: none; }
}
.form__siguiente{ margin-top: 4px; }
.form__progress.is-completo .form__bar span{ background: #1F9D55; }
.form__progress.is-completo .form__count{ color: #17804A; font-weight: 600; }
.form__count.pop{ animation: pop .35s cubic-bezier(.2,.8,.3,1.6); }
@keyframes pop{ 0%{ transform: scale(1); } 40%{ transform: scale(1.12); } 100%{ transform: scale(1); } }

/* Envío: el ticket se "arranca" y aparece el sello */
.ticket--form.is-arrancando{ animation: arranque .7s cubic-bezier(.3,.7,.3,1) 1; }
@keyframes arranque{
  0%{ transform: translateY(0) rotate(0); }
  35%{ transform: translateY(-18px) rotate(-2.5deg); }
  65%{ transform: translateY(6px) rotate(1deg); }
  100%{ transform: translateY(0) rotate(0); }
}
/* Éxito: el repartidor llega en moto */
.form__moto{ display: block; width: 130px; height: auto; margin: 0 auto 10px; }
.anima .form__success:not([hidden]) .form__moto{ animation: llega .8s cubic-bezier(.2,.8,.3,1.15) both; }
@keyframes llega{
  0%{ opacity: 0; transform: translateX(-160%) rotate(-8deg); }
  70%{ opacity: 1; transform: translateX(8%) rotate(3deg); }
  100%{ transform: translateX(0) rotate(0); }
}
.anima .form__success:not([hidden]) .form__success-state{ animation: sello .5s .2s cubic-bezier(.2,.8,.3,1.5) both; }
@keyframes sello{ from{ opacity: 0; transform: scale(2.2) rotate(-12deg); } to{ opacity: 1; transform: scale(1) rotate(0); } }
.anima .form__success:not([hidden]) .form__success-title,
.anima .form__success:not([hidden]) .form__success-title + p{ animation: sube .5s .5s ease-out both; }
@keyframes sube{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

.field{ margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.field-row{ display: grid; gap: 0 14px; }
@media (min-width: 520px){ .field-row{ grid-template-columns: 1fr 1fr; } }
.field label, .field legend{ display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.optional{ font-weight: 400; color: var(--gris); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field textarea{
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta); resize: vertical;
  background: var(--blanco); border: 1.5px solid #D6C7BB; border-radius: var(--radio-sm);
  padding: 12px 14px; transition: border-color .15s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: #9A8B80; }
.field input:hover, .field textarea:hover{ border-color: var(--gris); }
.field input:focus-visible, .field textarea:focus-visible{ outline: 3px solid var(--naranjo-hondo); outline-offset: 1px; border-color: var(--naranjo-hondo); }
.field input[aria-invalid="true"]{ border-color: #B42318; }
.num-sucursales{ display: inline-flex; align-items: center; gap: 8px; }
.field .num-sucursales label{ margin: 0; font-size: .92rem; white-space: nowrap; }
.field .num-sucursales input{ width: 4.5rem; padding: 8px 10px; text-align: center; }
.field__error{ color: #B42318; font-size: .85rem; margin-top: 4px; min-height: 0; }
.field__error:empty{ display: none; }

/* Chips: casillas y opciones en forma de píldora */
.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.field .chip{
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0;
  border: 1.5px solid #D6C7BB; border-radius: 999px; padding: 9px 16px 9px 12px; background: var(--blanco);
  font-weight: 500; font-size: .95rem;
}
.chip input{ accent-color: var(--naranjo-hondo); width: 18px; height: 18px; margin: 0; }
.chip:hover{ border-color: var(--gris); }
.chip:has(input:checked){ border-color: var(--naranjo-hondo); background: var(--naranjo-suave); }
.chip:has(input:focus-visible){ outline: 3px solid var(--naranjo-hondo); outline-offset: 2px; }
.chips--grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.field .chips--grid .chip{ font-size: .88rem; padding: 8px 10px; gap: 7px; border-radius: 12px; }
.chips--grid .chip input{ flex: none; }
.field .chip--wide{ border-radius: 12px; align-items: flex-start; padding: 10px 14px 10px 12px; font-size: .9rem; }
.field .chip--wide input{ margin-top: 2px; flex: none; }
.field .chip--alta{ border-style: dashed; }
.field .chip--ninguna{ color: var(--gris); }
.field .chip--alta:has(input:checked){ border-style: solid; }

.field__sub{ margin-top: 12px; }
.field__sub .field__error{ margin-bottom: 0; }

.form .btn--block{ margin-top: 8px; }

/* Botón de enviar: salta cada cierto tiempo con un aro de luz para llamar la atención.
   Se queda quieto con el mouse encima o con foco; salta más seguido cuando el formulario está completo. */
.form button[type="submit"]{ position: relative; }
.anima .form button[type="submit"]{ animation: saltito 4s ease-in-out 2s infinite; }
.anima .form button[type="submit"]::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: aro 4s ease-out 2s infinite;
}
.anima .form:has(.form__progress.is-completo) button[type="submit"],
.anima .form:has(.form__progress.is-completo) button[type="submit"]::after{ animation-duration: 2.2s; animation-delay: 0s; }
.anima .form button[type="submit"]:is(:hover, :focus-visible),
.anima .form button[type="submit"]:is(:hover, :focus-visible)::after{ animation: none; }
@keyframes saltito{
  0%, 70%, 100%{ transform: translateY(0); }
  76%{ transform: translateY(-8px); }
  82%{ transform: translateY(0); }
  87%{ transform: translateY(-3px); }
  92%{ transform: translateY(0); }
}
@keyframes aro{
  0%, 72%{ box-shadow: 0 0 0 0 rgb(255 106 26 / 0); }
  78%{ box-shadow: 0 0 0 0 rgb(255 106 26 / .55); }
  100%{ box-shadow: 0 0 0 16px rgb(255 106 26 / 0); }
}
.form__fine{ font-size: .82rem; color: var(--gris); text-align: center; margin-top: 12px; }
.form__legal{ margin: 4px 0 14px; }
.field .chip--legal{ font-size: .84rem; color: var(--gris); padding: 9px 12px; }
.form__aviso{ font-size: .76rem; line-height: 1.5; color: var(--gris); text-align: center; margin-top: 10px; }
.form__aviso a, .form__error-envio a{ color: var(--naranjo-hondo); font-weight: 600; }
.form__error-envio{
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radio-sm);
  background: #FDECEA; color: #8F1D14; font-size: .88rem; text-align: center;
}
.form.is-enviando button[type="submit"]{ opacity: .7; pointer-events: none; }

.form__success{
  text-align: center; padding: 24px 8px 8px;
}
.form__success:focus{ outline: none; }
.form__success-state{
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display);
  font-weight: 800; font-stretch: 85%; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
}
.form__success-title{ font-family: var(--f-display); font-weight: 900; font-size: 2rem; margin: 10px 0 8px; line-height: 1.1; }
.form__success p:last-child{ color: var(--gris); }
.form.is-sent > :not(.form__success){ display: none; }

/* Footer */
.footer{ background: var(--tinta); color: #CFC5BD; padding-block: 48px 32px; }
.footer__inner{ display: grid; gap: 24px; }
.footer__logo{ width: 140px; color: var(--naranjo); }
.footer__brand p{ margin-top: 10px; color: var(--blanco); font-family: var(--f-display); font-weight: 700; }
.footer__data{ display: grid; gap: 6px; }
.footer__data a{ text-decoration: none; }
.footer__data a:hover{ color: var(--naranjo); text-decoration: underline; }
.footer :focus-visible{ outline-color: var(--naranjo); }
.footer__redes{ display: flex; gap: 10px; margin-top: 18px; }
.footer__redes a{
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: #2A231F; color: var(--blanco);
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.2,.8,.3,1.5);
}
.footer__redes svg{ width: 20px; height: 20px; fill: currentColor; }
.footer__redes a:hover{ background: var(--naranjo); color: var(--tinta); transform: translateY(-3px) rotate(-6deg); }
.footer__legal{ display: grid; gap: 8px; font-size: .82rem; padding-top: 20px; border-top: 1px solid #3A302A; }
.footer__legal a{ color: var(--blanco); font-weight: 600; }
.footer__legal a:hover{ color: var(--naranjo); }
.footer__terceros{ color: #9A8B80; font-size: .76rem; max-width: 90ch; }
@media (min-width: 800px){
  .footer__inner{ grid-template-columns: 1fr auto; align-items: end; }
  .footer__legal{ grid-column: 1 / -1; }
}

/* Página del aviso de privacidad */
.legal{ padding-block: clamp(40px, 7vw, 80px) clamp(56px, 8vw, 96px); }
.legal__inner{ max-width: 780px; }
.legal h1{ font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 900; font-stretch: 88%; }
.legal__fecha{ color: var(--gris); margin-top: 10px; font-size: .92rem; }
.legal__resumen{
  margin-top: 28px; padding: 20px 22px; border-radius: var(--radio);
  background: var(--naranjo-suave); border-left: 4px solid var(--naranjo);
}
.legal__resumen p + p{ margin-top: 8px; }
.legal__indice{ margin-top: 28px; display: grid; gap: 6px; counter-reset: indice; }
.legal__indice a{ color: var(--naranjo-hondo); font-weight: 600; }
.legal section{ margin-top: 44px; scroll-margin-top: 90px; }
.legal h2{ font-size: 1.45rem; font-weight: 800; font-stretch: 92%; }
.legal h3{ font-size: 1.05rem; font-weight: 700; margin-top: 18px; font-family: var(--f-display); }
.legal p, .legal li{ color: #3F352F; }
.legal section p{ margin-top: 12px; }
.legal ul.lista{ list-style: disc; padding-left: 1.3em; margin-top: 10px; display: grid; gap: 6px; }
.legal a{ color: var(--naranjo-hondo); }
.legal table{ width: 100%; border-collapse: collapse; margin-top: 14px; font-size: .92rem; }
.legal th, .legal td{ text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.legal th{ background: var(--naranjo-suave); font-weight: 700; }
.legal__tabla{ overflow-x: auto; }
.legal__volver{ display: inline-flex; margin-top: 48px; }

/* Selector de idioma (una dirección por idioma: /, /en, /pt) */
.idiomas{ display: none; gap: 2px; align-items: center; }
.idiomas a{
  text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gris); padding: 5px 7px; border-radius: 999px; line-height: 1;
}
.idiomas a:hover{ color: var(--naranjo-hondo); background: var(--naranjo-suave); }
.idiomas a.is-actual{ color: var(--tinta); background: var(--naranjo-suave); }
@media (min-width: 900px){ .nav .idiomas{ display: inline-flex; } }
.idiomas--pie{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.idiomas--pie a{ font-size: .85rem; font-weight: 600; letter-spacing: 0; color: #CFC5BD; padding: 6px 10px; border: 1px solid rgb(255 255 255 / .18); }
.idiomas--pie a:hover{ color: var(--tinta); background: var(--naranjo); border-color: var(--naranjo); }
.idiomas--pie a.is-actual{ color: var(--tinta); background: var(--naranjo); border-color: var(--naranjo); }

/* Aviso: "esta página también está en tu idioma" */
.aviso-idioma{
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--naranjo-suave); color: var(--tinta); text-align: center;
  padding: 10px 16px; font-size: .88rem;
}
.aviso-idioma a{ color: var(--naranjo-hondo); font-weight: 700; }
.aviso-idioma button{
  font: inherit; font-size: .8rem; background: none; border: 0; color: var(--gris);
  cursor: pointer; text-decoration: underline; padding: 2px 4px;
}


/* ----- Página más corta en celular (feedback del equipo, 2026-09-17) ----- */
@media (max-width: 899px){
  /* Los tickets de la sección de segmentos solo se ven en computadora */
  .seg__visual{ display: none; }
  .seg__panel{ gap: 0; margin-top: 24px; }

  /* "Qué hacemos": rejilla de 2×2 en vez de una columna */
  .diff__grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
  .hacer{ display: block; padding: 14px 13px 16px; }
  .hacer__icon{ width: 38px; height: 38px; border-radius: 11px; }
  .hacer__icon svg{ width: 20px; height: 20px; }
  .hacer h3{ margin-top: 10px; font-size: .98rem; line-height: 1.15; }
  .hacer p{ margin-top: 5px; font-size: .84rem; line-height: 1.4; }

  /* "Cómo trabajamos": pasos compactos, sin ilustración */
  .steps__list{ gap: 10px; margin-top: 32px; }
  .step{ padding: 16px 16px 18px; }
  .step__img{ display: none; }
  .step h3{ font-size: 1.15rem; margin-top: 10px; }
  .step p{ margin-top: 6px; font-size: .92rem; }
  .step__dot{ --dot: 30px; top: calc(28px - var(--dot) / 2); }
}

/* Cada tarjeta del carrusel ocupa solo su alto (sin hueco blanco al final) */
.carrusel__pista{ align-items: flex-start; }

/* Menos aire en celular: la página cabe en menos pantallas sin quitar secciones */
@media (max-width: 700px){
  .section{ padding-block: 52px; }
  .hero{ padding-block: 28px 44px; }
  .hero__inner{ gap: 30px; }
  .section__title{ font-size: clamp(1.85rem, 7.4vw, 2.4rem); }
  .seg__tabs{ margin-top: 4px; }
  .diff__grid{ margin-top: 22px; }
  .faq__item summary{ padding: 15px 0; font-size: 1.05rem; }
  .faq__inner{ gap: 20px; }
  .carrusel{ margin-top: 40px; }
  .steps__list{ margin-top: 26px; }
  .contact__gets{ gap: 10px; }
  .footer{ padding-block: 34px 26px; }
  .ticket--form{ padding: 26px 20px; }
}

/* Ticket de la portada, compacto en celular */
@media (max-width: 700px){
  .ticket--hero{ padding: 20px 18px; }
  .ticket--hero .ticket__for{ margin-top: 10px; font-size: .92rem; }
  .ticket--hero .ticket__rule{ margin: 12px 0; }
  .ticket--hero .ticket__items{ gap: 7px; font-size: .98rem; }
  .ticket--hero .ticket__total{ padding: 10px 14px; }
}

/* ----- Segunda pasada de recortes en celular (2026-09-17) ----- */
/* Aviso de marcas de terceros: desplegable, para no ocupar cinco renglones */
.footer__terceros summary{
  list-style: none; cursor: pointer; width: fit-content;
  color: #CFC5BD; font-size: .8rem; font-weight: 600; padding: 4px 0;
}
.footer__terceros summary::-webkit-details-marker{ display: none; }
.footer__terceros summary::after{ content: " +"; color: var(--naranjo); font-weight: 700; }
.footer__terceros[open] summary::after{ content: " –"; }
.footer__terceros summary:hover{ color: var(--naranjo); }
.footer__terceros p{ margin-top: 6px; }

@media (max-width: 700px){
  .section{ padding-block: 42px; }

  /* "Qué hacemos": en celular basta el ícono y el título */
  .hacer p{ display: none; }
  .hacer{ padding: 13px 12px 15px; }

  /* "Cómo trabajamos": cada paso en dos renglones, sin tanto alto */
  .steps__list{ gap: 8px; }
  .step{ display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; }
  .step__state{ font-size: .72rem; padding: 3px 7px; }
  .step h3{ margin-top: 0; font-size: 1.02rem; line-height: 1.15; }
  .step p{ grid-column: 1 / -1; margin-top: 6px; font-size: .88rem; line-height: 1.45; }
  .step__dot{ --dot: 30px; top: calc(24px - var(--dot) / 2); }
}

/* Último apretón en celular: encabezados y separaciones */
@media (max-width: 700px){
  .section{ padding-block: 36px; }
  .eyebrow{ margin-bottom: .6rem; }
  .apps__inner{ padding-block: 20px 22px; }
  .apps__label{ font-size: .76rem; margin-bottom: 10px; }
  .results__head{ gap: 12px; }
  .carrusel{ margin-top: 30px; }
  .carrusel__mando{ margin-top: 16px; }
  .contact__lead{ margin-top: 2px; }
  .faq__list{ margin-top: 2px; }
  .footer__inner{ gap: 18px; }
  .seg__title{ font-size: clamp(1.5rem, 6.2vw, 2rem); }
  .seg__lead{ margin: 10px 0 20px; font-size: 1rem; }
}

/* =========================================================
   FONDO ÚNICO OSCURO (2026-09-17)
   Toda la página comparte el mismo fondo; la separación se logra
   con tarjetas un poco más claras, no con bloques de color.
   Regla: lo que es "papel" (los tickets y el formulario) se queda claro.
   ========================================================= */
:root{
  --pagina:     #14110F;   /* fondo de toda la página */
  --superficie: #1E1A17;   /* tarjetas */
  --borde:      #2E2723;   /* líneas sobre oscuro */
  --texto:      #F4EFEA;   /* texto principal sobre oscuro */
  --texto-2:    #A99E96;   /* texto secundario sobre oscuro */
  --naranjo-luz: #FF8A47;  /* naranja legible sobre oscuro */
}

body{ background: var(--pagina); color: var(--texto); }

/* Nav */
.nav{ background: rgb(20 17 15 / .94); backdrop-filter: blur(6px); }
.nav.is-scrolled{ border-color: var(--borde); box-shadow: 0 6px 20px -14px #000; }
.nav__links a, .nav__tel{ color: var(--texto-2); }
.nav__links a:hover, .nav__tel:hover{ color: var(--naranjo-luz); }

/* Portada */
.hero{
  background:
    radial-gradient(circle at var(--bx, 85%) var(--by, 40%), rgb(255 106 26 / .16) 0 38%, transparent 38.2%),
    var(--pagina);
}
.hero__lead{ color: var(--texto-2); }
.eyebrow{ color: var(--naranjo-luz); }
.section__lead{ color: var(--texto-2); }

/* Plataformas y pie: mismo fondo, separados por una línea */
.apps{ background: var(--pagina); border-block: 1px solid var(--borde); }
.footer{ background: var(--pagina); border-top: 1px solid var(--borde); }

/* Segmentos */
.seg__tabs{ background: var(--superficie); }
.seg__tab{ color: var(--texto); }
.seg__tab span{ color: var(--texto-2); }
.seg__tab:hover{ background: rgb(255 255 255 / .05); }
.seg__tab[aria-selected="true"]{ background: #2A2320; box-shadow: none; }
.seg__tab[aria-selected="true"] span{ color: var(--naranjo-luz); }
.seg__lead{ color: var(--texto-2); }
.seg__switch{ color: var(--texto-2); }
.seg__switch button{ color: var(--naranjo-luz); }
.seg__switch button:hover{ color: var(--texto); }

/* Qué hacemos */
.hacer{ background: var(--superficie); border-color: var(--borde); }
.hacer__icon{ background: rgb(255 106 26 / .14); color: var(--naranjo-luz); }
.hacer p{ color: var(--texto-2); }
@media (hover: hover){
  .hacer:hover{ border-color: var(--naranjo); box-shadow: 0 16px 30px -18px rgb(255 106 26 / .5); }
}

/* Casos de éxito */
.results{ background: var(--pagina); }
.case{ background: var(--superficie); box-shadow: 0 1px 0 var(--borde); }
.case__kind{ color: var(--texto); }
.case__big{ color: var(--texto); }
.case__big small{ color: var(--texto-2); }
.chart__axis{ color: var(--texto-2); }
.chart__axis strong{ color: var(--texto); }
.chart__nota{ color: var(--texto-2); }
.case__table summary{ color: var(--naranjo-luz); }
.case__table th, .case__table td{ border-bottom-color: var(--borde); }
.case__table th{ color: var(--texto-2); }
.carrusel__flecha{ background: var(--superficie); border-color: var(--borde); color: var(--texto); }
.carrusel__flecha:hover{ background: var(--naranjo); border-color: var(--naranjo); color: var(--tinta); }
.carrusel__flecha[disabled]{ background: var(--superficie); }
.carrusel__punto{ background: rgb(255 255 255 / .22); }
.carrusel__punto.is-actual{ background: var(--naranjo); }

/* Cómo trabajamos (ahora dentro de "Qué hacemos") */
.steps{ background: transparent; color: inherit; }
.steps--dentro{ margin-top: clamp(40px, 7vw, 72px); }
.step{ background: var(--superficie); border-color: var(--borde); }
.step p{ color: var(--texto-2); }
.track{ background: var(--borde); }
.step__dot{ box-shadow: 0 0 0 4px var(--pagina); }
.anima .step:not(.is-activo) .step__dot{ background: var(--borde); color: var(--texto-2); }
.anima .step:not(.is-activo) .step__state{ background: var(--borde); color: var(--texto-2); }
@keyframes latido{
  0%{ box-shadow: 0 0 0 4px var(--pagina), 0 0 0 4px rgb(255 106 26 / .6); }
  100%{ box-shadow: 0 0 0 4px var(--pagina), 0 0 0 16px rgb(255 106 26 / 0); }
}

/* Preguntas */
.faq__list{ border-top-color: var(--texto); }
.faq__item{ border-bottom-color: var(--borde); }
.faq__item summary{ color: var(--texto); }
.faq__item summary::after{ background: rgb(255 106 26 / .16); color: var(--naranjo-luz); }
.faq__item summary:hover{ color: var(--naranjo-luz); }
.faq__item p{ color: var(--texto-2); }

/* Contacto: se queda en naranjo, como antes. Es el único bloque de color de la página
   y marca dónde se agenda; todo el texto de ahí va en tinta. */
.contact{ background: var(--naranjo); color: var(--tinta); }
.contact .section__title,
.contact .contact__lead,
.contact .contact__gets li{ color: var(--tinta); }
.contact .contact__gets .n{ background: var(--tinta); color: var(--naranjo); }
[data-brillo="claro"]{ --brillo-c: rgb(255 255 255 / .30); }
.contact__copy :focus-visible{ outline-color: var(--tinta); }

/* Selector de idioma */
.idiomas a{ color: var(--texto-2); }
.idiomas a:hover{ color: var(--naranjo-luz); background: rgb(255 106 26 / .14); }
.idiomas a.is-actual{ color: var(--texto); background: rgb(255 106 26 / .18); }

/* Aviso de idioma automático */
.aviso-idioma{ background: #2A1D14; color: var(--texto); }
.aviso-idioma a{ color: var(--naranjo-luz); }
.aviso-idioma button{ color: var(--texto-2); }

/* Aviso de privacidad */
.legal__fecha{ color: var(--texto-2); }
.legal__resumen{ background: rgb(255 106 26 / .10); border-left-color: var(--naranjo); }
.legal__indice a{ color: var(--naranjo-luz); }
.legal th{ background: rgb(255 106 26 / .12); color: var(--texto); }
.legal th, .legal td{ border-bottom-color: var(--borde); }
.legal p, .legal li{ color: var(--texto-2); }
.legal strong{ color: var(--texto); }

/* Botón secundario sobre fondo oscuro (antes era negro sobre blanco) */
.btn--tinta{ background: #2A2320; color: var(--texto); box-shadow: 0 3px 0 #0B0908; }
.btn--tinta:hover{ background: #362D28; box-shadow: 0 4px 0 #0B0908; }
.btn--tinta:active{ box-shadow: 0 1px 0 #0B0908; }

/* =========================================================
   PÁGINA CORTA (2026-09-17): 6 bloques, la prueba antes de la explicación
   ========================================================= */
@media (max-width: 899px){
  /* El ticket de la portada se queda solo en computadora: en celular costaba 400 px de scroll */
  .hero__ticket-wrap{ display: none; }
  .hero__inner{ gap: 0; }
  .hero{ padding-block: 24px 32px; }

  /* Pasos aún más compactos */
  .steps--dentro{ margin-top: 30px; }
  .step{ padding: 11px 13px; }
  .step p{ margin-top: 4px; }

  /* Gráfica de los casos un poco más baja */
  .chart__plot{ height: 92px; }
  .case{ padding: 18px 18px 14px; }

  /* Pie más corto */
  .footer{ padding-block: 28px 22px; }
  .footer__inner{ gap: 14px; }
}

.diff__head{ gap: 14px; }

/* Las cápsulas de los pasos (Mes 1, Mes 2, Mes 3) brincan con el mouse encima */
@keyframes brinco{
  0%{ transform: translateY(0); }
  28%{ transform: translateY(-7px); }
  52%{ transform: translateY(0); }
  72%{ transform: translateY(-3px); }
  100%{ transform: translateY(0); }
}
.step__state{ will-change: transform; }
@media (hover: hover){
  .anima .step:hover .step__state,
  .anima .step__state:hover{ animation: brinco .6s cubic-bezier(.2,.8,.3,1.4); }
  .step:hover .step__state{ box-shadow: 0 7px 16px -7px rgb(255 106 26 / .75); }
  /* Sin animaciones (reducir movimiento): al menos se levanta un poco */
  html:not(.anima) .step:hover .step__state{ transform: translateY(-3px); }
}