:root {
  --fondo: #f4f5f5;
  --superficie: #e7eaea;
  --tinta: #1c2427;
  --suave: #56636a;
  --acento: #b3261e;
  --acento-tinta: #ffffff;
  --oscuro: #161c1f;
  --oscuro-tinta: #eef1f1;
  --letra-titulo: "Zodiak", Georgia, serif;
  --letra-texto: "Hanken Grotesk", system-ui, sans-serif;
  --t-chico: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --t-texto: clamp(1.0625rem, 1.02rem + 0.25vw, 1.25rem);
  --t-bajada: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-titulo: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
  --t-enorme: clamp(3rem, 1rem + 9vw, 7.5rem);
  --margen: clamp(16px, 4vw, 40px);
  --separacion: clamp(96px, 14vw, 200px);
  --curva: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }          
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 var(--t-texto) / 1.5 var(--letra-texto);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
::selection { background: var(--acento); color: var(--acento-tinta); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--suave); }
main > section { padding-inline: var(--margen); }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.4rem; border: 0; border-radius: 0;
  background: var(--acento); color: var(--acento-tinta);
  font: 600 var(--t-texto) var(--letra-texto); text-decoration: none; cursor: pointer;
  transition: transform .15s var(--curva), background-color .2s;
}
.boton:hover { background: #961f18; }
.boton:active { transform: scale(.97); }
.titulo {
  margin: 0; font: 300 var(--t-titulo) / 1 var(--letra-titulo);
  letter-spacing: -0.015em; text-wrap: balance;
}
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  padding: 10px var(--margen); background: var(--fondo);
}
.barra__marca { font: 400 1.25rem var(--letra-titulo); text-decoration: none; margin-right: auto; white-space: nowrap; }
.barra__links { display: none; gap: 1.6rem; }
.barra__links a, .barra__accion { text-decoration: none; font-weight: 500; }
.barra__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.icono-wa { width: 1.1em; height: 1.1em; flex: none; }
.con-icono { display: inline-flex; align-items: center; gap: .4em; }
.contacto__numero { display: inline-flex; align-items: center; gap: .18em; }
.contacto__numero .icono-wa { width: .72em; height: .72em; color: #25d366; }
.barra__accion { display: inline-flex; align-items: center; gap: .45em; }
.barra__accion { padding: .55rem .9rem; background: var(--tinta); color: var(--fondo); transition: transform .15s var(--curva); }
.barra__accion:active { transform: scale(.96); }
@media (min-width: 760px) { .barra__links { display: flex; } .barra__marca { margin-right: 0; } .barra__links { margin-right: auto; margin-left: 1.5rem; } }
.portada { min-height: calc(100svh - 64px); display: grid; align-content: center; gap: 28px; padding-block: 24px 56px; }
.portada__frase {
  margin: 0; display: grid; gap: 12px;
  font: 300 clamp(2.5rem, 12.6vw, 6rem) / .95 var(--letra-titulo); letter-spacing: -0.02em;
}
.portada__palabras { white-space: nowrap; }
.franja { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 14px; background: var(--oscuro); }
.franja__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.franja__nombre {
  position: absolute; left: 14px; right: 14px; bottom: 10px;
  color: #fff; font: 600 clamp(1.5rem, 8vw, 2.6rem) / 1 var(--letra-texto); letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.franja::after { content: ""; position: absolute; inset: 50% 0 0; background: rgba(0, 0, 0, .42); }
.franja__nombre { z-index: 1; }
@media (min-width: 900px) {
  .portada__frase { display: flex; align-items: center; gap: .25em; font-size: clamp(3rem, 5.6vw, 6.25rem); }
  .franja { flex: 1; min-width: 2.4em; height: 1em; aspect-ratio: auto; }
  .franja__nombre { font-size: .32em; bottom: 8px; }
}
.portada__texto { margin: 0; max-width: 40ch; font-size: var(--t-bajada); line-height: 1.4; }
.portada__demos { display: none; }
@media (min-width: 900px) {
  .portada { grid-template-columns: 5fr 7fr; column-gap: 56px; align-content: center; }
  .portada__frase { grid-column: 1 / -1; }
  .portada__texto, .probar { grid-column: 1; }
  .portada__demos {
    grid-column: 2; grid-row: 2 / span 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-self: start;
  }
  .portada__demos a { display: block; border-radius: 14px; overflow: hidden; background: var(--oscuro); transition: transform .25s var(--curva); }
  .portada__demos a:hover { transform: translateY(-6px); }
  .portada__demos img { width: 100%; aspect-ratio: 390 / 640; object-fit: cover; object-position: top; }
  .portada__demos span { display: block; padding: 8px 10px; color: var(--oscuro-tinta); font-size: var(--t-chico); font-weight: 500; }
}
.probar { display: grid; gap: 10px; max-width: 640px; }
.probar__etiqueta { font-weight: 600; }
.probar__fila { display: grid; gap: 8px; }
.probar__campo {
  min-height: 52px; padding: 0 1rem; border: 0; border-radius: 0;
  background: var(--superficie); color: var(--tinta); font: 400 16px var(--letra-texto);
}
.probar__campo::placeholder { color: var(--suave); }
.probar__campo:focus { outline: 3px solid var(--tinta); outline-offset: 0; }
.probar__nota { margin: 0; font-size: var(--t-chico); color: var(--suave); }
@media (min-width: 560px) { .probar__fila { grid-template-columns: 1fr auto; } }
.aviso { display: grid; gap: 14px; padding-block: 40px; background: var(--tinta); color: var(--oscuro-tinta); }
.aviso__titulo { margin: 0; font: 300 var(--t-bajada) / 1.15 var(--letra-titulo); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); }
.aviso__texto { margin: 0; max-width: 62ch; }
@media (min-width: 900px) { .aviso { grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; padding-block: 56px; } }
.planes { padding-block: var(--separacion) 0; }
.planes__cabeza { display: grid; gap: 16px; margin-bottom: 56px; }
.planes__bajada { margin: 0; max-width: 46ch; font-size: var(--t-bajada); line-height: 1.4; }
@media (min-width: 900px) { .planes__cabeza { grid-template-columns: 5fr 7fr; align-items: end; gap: 40px; } }
.plan { display: grid; gap: 24px; padding-block: 48px; }
.plan + .plan { margin-top: 24px; }
.plan:nth-child(even) { background: var(--superficie); margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); }
.plan__captura { display: block; width: min(72%, 300px); justify-self: center; border-radius: 22px; overflow: hidden; background: var(--oscuro); transition: transform .25s var(--curva); }
.plan__captura img { width: 100%; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; }
.plan__captura:hover { transform: translateY(-4px); }
.plan__captura:active { transform: scale(.98); }
.plan__texto { display: grid; gap: 16px; align-content: start; }
.plan__nombre { margin: 0; font: 300 var(--t-titulo) / 1 var(--letra-titulo); letter-spacing: -0.015em; }
.plan__precio { white-space: nowrap; }
.plan__idea { margin: 0; max-width: 46ch; font-size: var(--t-bajada); line-height: 1.4; }
.plan__incluye { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.plan__incluye li { position: relative; padding-left: 1.5em; }
.plan__incluye li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1em; height: 1em; background: var(--acento);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M8.2 15.8 20 3M15.8 15.8 4 3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M8.2 15.8 20 3M15.8 15.8 4 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan__datos { margin: 0; font-size: var(--t-chico); color: var(--suave); }
.plan__cuotas { color: var(--tinta); font-weight: 700; }
.plan__texto .boton { justify-self: start; }
@media (max-width: 559px) { .plan__texto .boton { justify-self: stretch; } }
@media (min-width: 900px) {
  .plan { grid-template-columns: 4fr 7fr; gap: 64px; align-items: center; padding-block: 72px; }
  .plan__captura { width: 100%; max-width: 340px; }
  .plan:nth-child(even) { grid-template-columns: 7fr 4fr; }
  .plan:nth-child(even) .plan__captura { order: 2; }
  .plan__incluye { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.turno { display: grid; gap: 32px; margin-top: var(--separacion); padding-block: 56px; background: var(--oscuro); color: var(--oscuro-tinta); }
.turno__pantalla { display: grid; justify-self: center; width: min(78%, 330px); }
.turno__pantalla > * { grid-area: 1 / 1; opacity: 0; transition: opacity .2s; border-radius: 22px; overflow: hidden; }
.turno__pantalla > .activa { opacity: 1; }
.turno__captura { width: 100%; aspect-ratio: 390 / 640; object-fit: cover; object-position: 50% 18%; }
.turno__captura[data-paso="1"] { object-position: 50% 12%; }
.turno__whatsapp { display: flex; flex-direction: column; background: #0b141a; }
.wa__cabeza { margin: 0; display: grid; padding: 14px 16px; background: #1f2c34; color: #e9edef; font-weight: 600; }
.wa__cabeza small { font-weight: 400; color: #8696a0; font-size: 13px; }
.wa__burbuja {
  position: relative; margin: auto 12px 18px 48px; padding: 10px 12px 22px;
  border-radius: 10px 0 10px 10px; background: #005c4b; color: #e9edef; font-size: 15px; line-height: 1.45;
}
.wa__hora { position: absolute; right: 10px; bottom: 5px; display: flex; align-items: center; gap: 3px; font-size: 13px; color: #9fd3c7; }
.wa__hora svg, .si svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa__hora svg { color: #53bdeb; }
.turno__texto { display: grid; gap: 18px; align-content: start; }
.turno__detalle { margin: 0; max-width: 40ch; font-size: var(--t-bajada); line-height: 1.4; min-height: 4.2em; }
.deslizador input {
  --avance: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: pointer;
}
.deslizador input::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(var(--oscuro-tinta), var(--oscuro-tinta)) 0 / var(--avance) 100% no-repeat, #3a4549; } 
.deslizador input::-moz-range-track { height: 8px; background: #3a4549; }
.deslizador input::-moz-range-progress { height: 8px; background: var(--oscuro-tinta); }
.deslizador input::-webkit-slider-thumb { -webkit-appearance: none; width: 40px; height: 40px; margin-top: -16px; background: var(--acento); border: 0; }
.deslizador input::-moz-range-thumb { width: 40px; height: 40px; background: var(--acento); border: 0; border-radius: 0; }
.turno__pasos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: var(--t-chico); color: #93a1a7; }
.turno__pasos li { cursor: pointer; }
.turno__pasos li:nth-child(2) { text-align: center; }
.turno__pasos li:nth-child(3) { text-align: right; }
.turno__pasos .actual { color: var(--oscuro-tinta); font-weight: 600; }
.turno__nota { margin: 8px 0 0; max-width: 46ch; padding: 14px 16px; background: #222b2f; font-size: var(--t-chico); color: var(--oscuro-tinta); }
@media (min-width: 900px) {
  .turno { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; padding-block: 96px; }
  .turno__pantalla { width: 100%; max-width: 380px; }
}
.comparar { padding-block: var(--separacion) 0; display: grid; gap: 32px; }
.comparar__marco { overflow-x: auto; }
.tabla { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--t-chico); overflow-wrap: break-word; }
.tabla th, .tabla td { padding: 10px 5px; text-align: left; vertical-align: top; }
@media (min-width: 560px) { .tabla th, .tabla td { padding: 12px 10px; } }
@media (max-width: 559px) {
  .tabla, .tabla thead, .tabla tbody { display: block; }
  .tabla tr { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tabla thead th:first-child { display: none; }
  .tabla thead th { position: static; }
  .tabla tbody th:first-child { grid-column: 1 / -1; position: static; width: auto; padding: 12px 8px 2px; }
  .tabla td { padding: 4px 8px 12px; }
}
.tabla thead th { font: 400 clamp(.9375rem, .8rem + .5vw, 1.125rem) var(--letra-titulo); background: var(--tinta); color: var(--fondo); }
.tabla tbody tr:nth-child(odd) { background: var(--superficie); }
.tabla th:first-child { width: 31%; }
.tabla tbody th { font-weight: 500; }
.tabla th:first-child { position: sticky; left: 0; background: inherit; }
.tabla thead th:first-child { background: var(--tinta); }
.tabla tbody tr:nth-child(even) th { background: var(--fondo); }
.si { color: var(--acento); font-weight: 700; }
.no { color: #9aa5aa; }
.trabajo { display: grid; gap: 40px; padding-block: var(--separacion) 0; }
.trabajo__frase { display: grid; gap: 18px; align-content: start; }
.trabajo__texto { margin: 0; max-width: 40ch; font-size: var(--t-bajada); line-height: 1.4; }
.trabajo__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; counter-reset: paso; }
.trabajo__lista li { padding: 18px 20px; background: var(--superficie); }
.trabajo__lista li:nth-child(4) { background: var(--acento); color: var(--acento-tinta); }
.trabajo__lista strong { font-weight: 700; }
.trabajo__lista strong:first-child { display: block; font-weight: 600; }
@media (min-width: 900px) { .trabajo { grid-template-columns: 5fr 7fr; gap: 64px; } }
.quien { display: grid; gap: 28px; padding-block: var(--separacion) 0; }
.quien__texto p { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.25; max-width: 34ch; }
.quien__texto p + p { margin-top: 1.25em; font-size: var(--t-texto); line-height: 1.5; max-width: 52ch; }
.quien__foto {
  float: left; display: grid; place-items: center; width: 1.45em; height: 1.45em; margin: .06em .2em 0 0;
  background: var(--acento); color: var(--acento-tinta); font: 300 2.6em/1 var(--letra-titulo);
}
.quien__datos { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: var(--t-chico); color: var(--suave); order: 2; }
.quien__datos p { margin: 0; }
.quien__datos a { color: var(--tinta); }
@media (min-width: 900px) {
  .quien { grid-template-columns: 2fr 10fr; gap: 40px; }
  .quien__datos { order: 0; display: grid; align-content: start; gap: 6px; padding-top: .6em; }
}
.preguntas { display: grid; gap: 48px; padding-block: var(--separacion); }
.pregunta { display: grid; gap: 12px; }
.pregunta__q { margin: 0; font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem) / 1.1 var(--letra-titulo); letter-spacing: -0.01em; max-width: 22ch; }
.pregunta__a { margin: 0; max-width: 42ch; }
@media (min-width: 900px) {
  .preguntas { gap: 72px; }
  .pregunta { grid-template-columns: 6fr 1fr 5fr; }
  .pregunta__a { grid-column: 3; padding-top: .35em; }
}
.contacto {
  display: grid; gap: 28px;
  padding-block: 48px 32px; background: var(--oscuro); color: var(--oscuro-tinta);
}
.contacto__texto { margin: 0; max-width: 30ch; font-size: var(--t-bajada); line-height: 1.35; }
.contacto__numero {
  justify-self: start; font: 300 clamp(2.6rem, 11vw, 9rem) / 1 var(--letra-titulo); letter-spacing: -0.03em;
  text-decoration: none; overflow-wrap: anywhere; transition: color .2s;
}
.contacto__numero:hover { color: #ff8a80; }
.contacto__pie { display: grid; gap: 8px; font-size: var(--t-chico); color: #b7c2c6; }
.contacto__pie p { margin: 0; }
.contacto__pie a { color: var(--oscuro-tinta); }
@media (min-width: 760px) { .contacto__pie { display: flex; flex-wrap: wrap; gap: 8px 32px; } .contacto__pie p:last-child { margin-left: auto; } .contacto { padding-block: 72px 40px; } }
.pie { display: grid; gap: 8px; padding: 28px var(--margen) 36px; background: var(--oscuro); color: #9aa7ac; font-size: var(--t-chico); }
.pie p { margin: 0; max-width: 80ch; }
.franja { animation: franja-abre 1.1s .25s var(--curva) both; }
.franja__foto { animation: foto-acomoda 1.4s .25s var(--curva) both; }
@keyframes franja-abre { from { clip-path: inset(0 100% 0 0 round 14px); } to { clip-path: inset(0 0 0 0 round 14px); } }
@keyframes foto-acomoda { from { transform: scale(1.12); } }
.portada__palabras, .portada__texto, .probar { animation: sube .8s var(--curva) both; }
.portada__palabras:last-child { animation-delay: .12s; }
.portada__texto { animation-delay: .35s; }
.probar { animation-delay: .45s; }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } }
.con-entradas .titulo, .con-entradas .planes__bajada, .con-entradas .plan__captura, .con-entradas .plan__texto > *,
.con-entradas .turno__pantalla, .con-entradas .turno__texto > *, .con-entradas .comparar__marco, .con-entradas .trabajo__texto,
.con-entradas .trabajo__lista li, .con-entradas .quien__texto p, .con-entradas .quien__datos, .con-entradas .pregunta,
.con-entradas .contacto__numero, .con-entradas .aviso > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
:root.con-entradas .visto { opacity: 1; transform: none; }
.plan__captura img { transition: transform 6s ease-out; }
.plan__captura.visto img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}