/* ==========================================================================
   PixelToCode — el celular de Publicidad (la historia
   "del anuncio al WhatsApp"), pasado al fondo negro y con más personalidad:
   los textos van gigantes, el celular se inclina con el mouse y, con cada consulta
   que llega, vibra, larga un anillo de luz y el brillo de atrás crece.
   Un celular de 360×740 (escalado por JS con --s). Solo se animan opacity y transform
   (los maneja telefono.js). Sin JS o con menos animaciones se ve el final: el celular
   lleno de consultas y el botón.
   ========================================================================== */

/* Una sola pantalla; la barra de arriba va encima, transparente */
.story { position: relative; }
.story-sticky {
  position: relative;
  height: 100vh;
  height: 100svh;
  padding-top: 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 54%, rgba(6, 182, 212, .12), transparent 42%),
    var(--fondo);
}
/* Compu: a la izquierda los textos y, debajo, el botón (centrados juntos en el alto); a la derecha el celular */
.story-grid {
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". phone" "copy phone" "cta phone" ". phone";
  column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.story-grid > * { min-width: 0; }
.story-copy { grid-area: copy; }

/* ---- Botón de WhatsApp: a la vista desde el principio, sin esperar al final del video ---- */
.story-cta { grid-area: cta; max-width: 520px; margin-top: clamp(16px, 3vh, 32px); container-type: inline-size; }
.story-cta .boton-wa { width: 100%; justify-content: center; text-align: center; }
/* Si el botón es angosto el texto entero no entra en un renglón: queda "Cotizar por WhatsApp" */
@container (max-width: 389px) {
  .story-cta-more { display: none; }
}

/* ---- Título de la página (h1): una etiqueta fija arriba de los textos que van cambiando ---- */
.story-title {
  margin-bottom: clamp(20px, 3vh, 32px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* ---- Textos de la izquierda (uno encima del otro, aparecen según avanza el video) ---- */
.story-steps { position: relative; height: clamp(250px, 38vh, 380px); }
.story-step { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
html.motion .story-step { opacity: 0; will-change: opacity, transform; }
html:not(.motion) .story-step:not(.story-final) { display: none; }
html.motion .story-step:not(.is-live) { pointer-events: none; }
.story-num {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font: 800 16px/1 var(--titulo);
  letter-spacing: .12em;
  color: var(--cian);
}
.story-num::before { content: ""; width: 32px; height: 2px; background: currentColor; }
.story-step p {
  max-width: 11ch;
  font-family: var(--titulo);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 5.2vw, 88px);
  line-height: .95;
  color: var(--texto);
}
.story-final h2 { font-size: clamp(38px, 4.4vw, 76px); max-width: 12ch; margin-bottom: 20px; }
.story-final p {
  max-width: 38ch;
  font: 500 clamp(18px, 1.5vw, 21px)/1.5 var(--cuerpo);
  text-transform: none;
  color: var(--texto-suave);
}
.story-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 0;
  border: 0;
  background: none;
  font: 700 16px var(--cuerpo);
  color: var(--tenue);
  cursor: pointer;
  transition: color .2s;
}
.story-replay svg { width: 18px; height: 18px; }
.story-replay:hover { color: var(--cian); }
html:not(.motion) .story-replay { display: none; }

/* ---- Celular. isolation deja el brillo de atrás (z-index -1) detrás del celular sin cambiar
   desde dónde se miden las posiciones (una transformación acá rompe las cuentas del cierre en celular) ---- */
.story-phone-area {
  grid-area: phone;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}
/* En la compu se inclina apenas con el mouse (--rx y --ry, de sitio.css) */
@media (min-width: 761px) {
  .story-phone-area {
    transform: perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: --rx .6s ease-out, --ry .6s ease-out;
  }
}
.phone-wrap { --s: 1; position: relative; transform-origin: 50% 0; }
/* El brillo de atrás: crece con cada consulta que llega (--brillo, de 0 a 1) */
.phone-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 180%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(6, 182, 212, .36), rgba(37, 211, 102, .1) 60%, transparent);
  opacity: calc(.3 + var(--brillo, 0) * .7);
  transform: translate(-50%, -50%) scale(calc(.75 + var(--brillo, 0) * .4));
  pointer-events: none;
}
/* El anillo que sale del celular cuando llega una consulta */
.phone-ping {
  position: absolute;
  inset: 0;
  border-radius: calc(52px * var(--s));
  border: 2px solid var(--cian);
  opacity: 0;
  pointer-events: none;
}
.phone {
  --s: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 360px;
  height: 740px;
  /* --vibra: el temblor de cada consulta que llega */
  transform: translateX(var(--vibra, 0px)) scale(var(--s));
  transform-origin: 0 0;
  border-radius: 52px;
  padding: 11px;
  background: linear-gradient(145deg, #2a2a2a, #111 55%, #232323);
  box-shadow:
    0 0 0 1.5px #343434,
    0 50px 90px -24px rgba(0, 0, 0, .85);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.phone-island {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 5;
  width: 104px;
  height: 30px;
  margin-left: -52px;
  border-radius: 20px;
  background: #000;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 42px;
  background: #fff;
  color: #202124;
}
.ph-status {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 30px 0 34px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
  transition: color .3s ease;
}
.ph-icons { display: flex; gap: 6px; font-size: 13px; }
.phone.is-dark .ph-status { color: #fff; }

/* Cada escena ocupa toda la pantalla; el JS maneja cuál se ve */
.scr { position: absolute; inset: 0; padding-top: 50px; }
html:not(.motion) .scr:not(.scr-lock) { display: none; }
/* Estado inicial con animación (antes de que corra el JS): solo la búsqueda, sin resultados */
html.motion .scr { opacity: 0; visibility: hidden; }
html.motion .scr-search { opacity: 1; visibility: visible; }
html.motion .g-top,
html.motion .g-org,
html.motion .wa-msg,
html.motion .nt { opacity: 0; }
.tap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(32, 33, 36, .18);
  opacity: 0;
  pointer-events: none;
}

/* Escena 1: Google */
.scr-search { background: #fff; }
.g-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; }
.g-mark { font-size: 22px; color: #4285f4; }
.g-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  background: #f1f3f4;
  font-size: 15px;
  color: #202124;
}
.g-box > i { font-size: 14px; color: #5f6368; }
.g-query { display: inline-flex; align-items: center; white-space: nowrap; }
.g-caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 1px; background: #1a73e8; }
.g-tabs { display: flex; gap: 20px; padding: 6px 20px 0; border-bottom: 1px solid #ebebeb; font-size: 13px; color: #5f6368; }
.g-tabs span { padding-bottom: 9px; }
.g-tabs .is-on { color: #1a73e8; border-bottom: 3px solid #1a73e8; font-weight: 600; }
.g-results { padding: 12px 16px; }
.g-top { position: relative; padding: 14px 14px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, .12); }
.g-top::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 17px;
  border: 2px solid var(--cian);
  box-shadow: 0 0 18px rgba(6, 182, 212, .45);
  opacity: 0;
  transition: opacity .3s ease;
}
.g-top.is-glow::after { opacity: 1; }
.g-label { font-size: 12px; font-weight: 700; color: #202124; margin-bottom: 8px; }
.g-site { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.g-fav { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e0f7fb; color: #0891b2; font-size: 13px; }
.g-site-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.g-site-txt strong { font-size: 13px; font-weight: 500; color: #202124; }
.g-site-txt small { font-size: 12px; color: #4d5156; }
.g-more { color: #70757a; font-size: 13px; }
.g-top .g-title { display: block; margin: 0 0 6px; font-size: 18px; font-weight: 400; line-height: 1.3; color: #1a0dab; }
.g-top p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: #4d5156; }
.g-links { display: flex; gap: 8px; flex-wrap: wrap; }
.g-links span { padding: 6px 12px; border: 1px solid #dadce0; border-radius: 16px; font-size: 12px; color: #1a0dab; }
.g-org { margin-top: 18px; display: grid; gap: 22px; }
.g-sk { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 7px; align-items: center; }
.g-sk i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: #eceff1; }
.g-sk b { height: 9px; width: 45%; border-radius: 5px; background: #eceff1; }
.g-sk span { grid-column: 1 / -1; height: 12px; border-radius: 6px; background: #f1f3f4; }
.g-sk span.short { width: 70%; }

/* Escena 2: la página del consultorio */
.scr-site { background: #fff; }
.br-bar {
  position: relative;
  margin: 6px 14px 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  background: #f1f3f4;
  font-size: 13px;
  color: #3c4043;
  overflow: hidden;
}
.br-bar i { font-size: 10px; color: #5f6368; }
.br-load { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #1a73e8; transform: scaleX(0); transform-origin: 0 50%; }
.site-hero {
  margin: 12px 14px 0;
  padding: 28px 20px 26px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(140deg, #0e7490, #06b6d4 55%, #34d399);
}
.site-badge { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .22); font-size: 24px; }
.site-hero .site-name { display: block; margin: 0 0 4px; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.site-hero p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .9); }
.site-body { padding: 18px 22px; }
.site-body ul { display: grid; gap: 10px; margin-bottom: 20px; list-style: none; }
.site-body li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: #334155; }
.site-body li i { color: #10b981; font-size: 12px; }
.site-wa {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  border-radius: 14px;
  background: #25d366;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
}
.site-wa .tap { background: rgba(255, 255, 255, .45); }
.site-sk { margin-top: 22px; display: grid; gap: 9px; }
.site-sk span { height: 11px; border-radius: 6px; background: #f1f5f9; }
.site-sk span.short { width: 60%; }

/* Escena 3: WhatsApp */
.scr-chat { display: flex; flex-direction: column; background: #efeae2; }
.wa-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -50px;
  padding: 58px 16px 12px;
  background: #008069;
  color: #fff;
  font-size: 15px;
}
.wa-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e0f7fb; color: #0891b2; font-size: 15px; }
.wa-name { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.wa-name strong { font-size: 15px; font-weight: 600; }
.wa-name small { font-size: 12px; opacity: .85; }
.wa-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; }
.wa-day { align-self: center; padding: 4px 10px; border-radius: 8px; background: #fff; font-size: 11px; color: #54656f; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); margin-bottom: 6px; }
.wa-msg {
  position: relative;
  max-width: 80%;
  padding: 7px 10px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.wa-msg.out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; }
.wa-msg.in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.wa-meta { position: absolute; right: 8px; bottom: 4px; font-size: 10.5px; color: #667781; }
.wa-meta i { margin-left: 3px; color: #8696a0; transition: color .3s ease; }
.wa-meta i.is-read { color: #53bdeb; }
.wa-input { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 26px; height: 46px; padding: 0 16px; border-radius: 23px; background: #fff; font-size: 15px; color: #8696a0; }
.wa-input i { color: #54656f; }

/* Escena 4: pantalla bloqueada del dueño */
.scr-lock {
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(6, 182, 212, .55), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(16, 185, 129, .45), transparent 50%),
    linear-gradient(180deg, #0b1329, #10233a);
}
.lk-clock { text-align: center; padding-top: 26px; }
.lk-clock span { display: block; font-size: 76px; font-weight: 600; letter-spacing: -2px; line-height: 1; }
.lk-clock small { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; opacity: .85; }
.lk-count {
  width: max-content;
  margin: 16px auto 0;
  padding: 7px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 600;
}
.lk-count i { color: #25d366; }
.lk-list {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  color: #111;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.nt-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #25d366; color: #fff; font-size: 17px; }
.nt-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.nt-txt b { font-size: 13.5px; font-weight: 600; }
.nt-txt em { font-style: normal; font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt small { font-size: 11px; color: #6b7280; }
.nt-more { justify-content: center; padding: 7px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .22); box-shadow: none; }

.story-note { margin-top: 14px; font: 600 13px var(--cuerpo); letter-spacing: .04em; color: var(--tenue); text-align: center; }

.story-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); }
.story-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--cian), var(--verde)); transform: scaleX(0); transform-origin: 0 50%; }

/* Sin animación: una sola pantalla con el final */
html:not(.motion) .story-sticky { height: auto; min-height: 100vh; padding-bottom: 48px; }
html:not(.motion) .story-progress { display: none; }

/* ---- Celulares: título y texto arriba; el celular en el medio; el botón abajo de todo y, al
   final del video, el cierre justo arriba del botón. Los textos se posicionan contra la grilla
   para que el cierre pueda ir abajo sin quedar fijo en la pantalla al seguir bajando ---- */
@media (max-width: 760px) {
  .story-grid {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "copy" "phone" "cta";
    gap: 10px;
    align-items: start;
    padding-top: 14px;
    padding-bottom: 16px;
  }
  .story-cta { max-width: none; margin-top: 0; }
  .story-cta .boton-wa { min-height: 58px; padding: 0 16px; font-size: 18px; }
  .story-cta .confianza { margin-top: 10px; font-size: 13px; text-align: center; }
  .story-title { margin-bottom: 10px; font-size: 12px; }
  .story-steps { position: static; height: 96px; }
  /* --steps-top: lo que ocupa el título; lo calcula telefono.js */
  .story-step { top: var(--steps-top, 40px); left: var(--gutter); right: var(--gutter); transform: none; }
  .story-num { margin-bottom: 8px; font-size: 13px; }
  .story-num::before { width: 20px; }
  .story-step p { max-width: none; font-size: clamp(26px, 8vw, 34px); }
  /* --cta-h: alto del botón y su renglón de confianza (lo mide telefono.js) */
  .story-final {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: calc(var(--cta-h, 100px) + 30px);
    transform: none;
  }
  .story-final h2 { max-width: none; font-size: clamp(30px, 9vw, 40px); margin-bottom: 10px; }
  .story-final p { font-size: 18px; }
  .story-replay { margin-top: 4px; }
  .story-note { margin-top: 8px; }
  html:not(.motion) .story-final { position: relative; top: 0; left: 0; right: 0; bottom: auto; margin-bottom: 24px; }
  html:not(.motion) .story-steps { height: auto; }
  html:not(.motion) .story-sticky { min-height: 0; padding-bottom: 24px; }
}

/* ---------- Campañas: tres renglones que crecen, más grandes y más blancos ----------
   Los tamaños salen del ancho para que "MÁS CONSULTAS." entre en un renglón también en el celular */

.crece { border-top: 1px solid var(--linea); }
.crece > span { display: block; padding: clamp(18px, 3.5vh, 36px) 0; border-bottom: 1px solid var(--linea); }
.crece > span:nth-child(1) { font-size: clamp(28px, 7vw, 100px); color: #6b6b6b; }
.crece > span:nth-child(2) { font-size: clamp(34px, 9.2vw, 132px); color: #b5b1a9; }
.crece > span:nth-child(3) { font-size: clamp(42px, 12vw, 172px); }
.crece + .texto { margin-top: clamp(32px, 6vh, 56px); }

/* ---------- Lo que te va a llegar: mensajes que cruzan la pantalla ---------- */

.llegan .cinta { margin: 0 calc(var(--gutter) * -1); padding: 8px 0; }
.llegan .cinta + .cinta { margin-top: 8px; }
.burbuja {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: max-content;
  max-width: 420px;
  padding: 14px 18px 14px 14px;
  border-radius: 20px;
  background: rgba(250, 250, 250, .94);
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.burbuja-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--verde);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.burbuja-ico svg { width: 21px; height: 21px; }
.burbuja b { display: flex; gap: 12px; justify-content: space-between; font-size: 15px; }
.burbuja b small { font-weight: 400; color: #8a8a8a; }
.burbuja p { font-size: 18px; line-height: 1.35; color: #222; }