/* BOCETO DESECHABLE — Diagnóstico (15/10/2026). Concepto: el formulario es la página. */

/* Curvas de movimiento: en tokens.css solo existen dentro del Hub ([data-registro="producto"]), no en la web.
   Sin ellas, todo lo que las usaba cambiaba de golpe, sin animación (dossier W-04). Mismos valores que el Hub. */
:root {
  --z-ease-rodillo: cubic-bezier(0.16, 1, 0.3, 1);
  --z-ease-resorte: cubic-bezier(0.22, 1, 0.36, 1);
  --z-ease-rebote: cubic-bezier(0.22, 1, 0.36, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --z-ease-resorte: linear(0, 0.035, 0.12, 0.234, 0.359, 0.484, 0.601, 0.705, 0.793, 0.865, 0.922, 0.965, 0.996, 1.017, 1.03, 1.036, 1.038, 1.037, 1.034, 1.03, 1.025, 1.02, 1.016, 1.012, 1.008, 1.005, 1.003, 1.002, 1, 0.999, 0.999, 0.999, 1);
    --z-ease-rebote: linear(0, 0.034, 0.121, 0.24, 0.376, 0.515, 0.647, 0.766, 0.867, 0.95, 1.013, 1.058, 1.087, 1.102, 1.107, 1.103, 1.094, 1.081, 1.067, 1.052, 1.038, 1.025, 1.014, 1.006, 0.999, 0.994, 0.991, 0.989, 0.989, 0.989, 0.99, 0.991, 0.993, 0.994, 0.996, 0.997, 0.998, 0.999, 1, 1.001, 1);
  }
}

/* ---------- Barra solo con el logo ---------- */
/* La misma barra de cristal, ceñida al logo y alineada con el borde del contenido */
.menu--solo { width: auto; left: max(16px, calc((100% - var(--ancho)) / 2)); translate: none; min-height: 66px; padding: 0 22px; }
/* Misma altura y mismo borde que el menú de las demás páginas: el logo cae exactamente en el mismo sitio (medido: x 122, y 36) */
@media (max-width: 720px) { .menu--solo { left: 16px; min-height: 56px; padding: 0 18px; } }

/* ---------- 1 · Título + formulario ---------- */
.pedir__dentro { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; min-height: 100svh; padding: 112px 24px 56px;
  display: grid; grid-template-columns: 1fr 470px; gap: 72px; align-items: center; }
.pedir h1 { font-size: clamp(48px, 6.4vw, 100px); max-width: 9ch; margin-bottom: 28px; }
.pedir__entradilla { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 44ch; margin-bottom: 28px; }
.pedir .persona { margin: 0; }
.pedir .persona img { width: 52px; height: 52px; }

/* La tarjeta: cristal oscuro por el que se ve, desenfocado, el anillo de luz que tiene detrás */
.hoja-form { position: relative; border-radius: 28px; padding: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid var(--z-cristal-borde);
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 40px 90px -30px rgba(0,0,0,.7); color: #fff; }
.form { display: grid; gap: 14px; }
.form[hidden] { display: none; }   /* display: grid pisaría el hidden del navegador */

.campo { display: grid; gap: 7px; }
.campo__etiqueta { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.78); }
/* Campos claros sobre el cristal oscuro: se ven como lo que hay que rellenar */
.campo__control, .z-tel__caja { width: 100%; min-height: 46px; border-radius: 999px; border: 1px solid transparent; background: rgba(255,255,255,.94);
  font: 16px/1.2 'Chivo', system-ui, sans-serif; color: var(--z-tinta);
  transition: box-shadow 150ms var(--z-ease-mueve), background-color 150ms var(--z-ease-mueve); }
.campo__control { padding: 0 22px; }
.campo__control:focus-visible, .z-tel__caja:focus-within { outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(245,108,77,.75); }

/* Selector de prefijo: mismo marcado y mismo JS que la landing; aquí solo cambia la piel */
.z-tel { position: relative; }
.z-tel__caja { display: flex; align-items: stretch; overflow: hidden; }
.z-tel__prefijo { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 20px; border-right: 1px solid var(--z-linea); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.z-tel__prefijo:focus-visible { outline: 3px solid var(--z-foco); outline-offset: -3px; }
.z-tel__prefijo[aria-expanded="true"] { background: var(--z-papel); }
.z-tel__prefijo-flecha { width: 14px; height: 14px; color: var(--z-gris-medio); transition: transform 150ms var(--z-ease-mueve); }
.z-tel__prefijo[aria-expanded="true"] .z-tel__prefijo-flecha { transform: rotate(180deg); }
.z-tel__numero { flex: 1; min-width: 0; border: 0; background: none; padding: 0 22px 0 14px; font: inherit; color: inherit; }
.z-tel__numero:focus { outline: none; }
.z-tel__numero::placeholder { color: var(--z-gris-medio); }
.z-tel__listbox { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 260px; max-height: 260px; overflow-y: auto; list-style: none; margin: 0; padding: 8px;
  background: #fff; color: var(--z-tinta); border-radius: 20px; box-shadow: 0 8px 24px rgba(27,25,23,.2), 0 24px 64px rgba(27,25,23,.2); }
.z-tel__listbox[hidden] { display: none; }
.z-tel__opcion { display: flex; gap: 12px; padding: 8px 12px; border-radius: 12px; cursor: pointer; font-size: 15px; }
.z-tel__opcion-prefijo { color: var(--z-gris-medio); font-variant-numeric: tabular-nums; min-width: 3.5em; }
.z-tel__opcion[aria-selected="true"] { font-weight: 700; }
.z-tel__opcion--activa { background: var(--z-papel); }

/* Franjas: tres opciones a la vista, un toque cada una (antes, un desplegable) */
.franjas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.franja { position: relative; cursor: pointer; }
.franja input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.franja span { position: relative; display: grid; gap: 1px; height: 100%; padding: 10px 14px; border-radius: 16px; font-size: 12px; line-height: 1.3; color: rgba(255,255,255,.7);
  background: var(--z-cristal); border: 1px solid var(--z-cristal-borde);
  transition: background-color 200ms var(--z-ease-mueve), color 200ms var(--z-ease-mueve), border-color 200ms var(--z-ease-mueve), transform 150ms var(--z-ease-mueve); }
.franja:active span { transform: scale(.96); }
/* Marca roja con un check, arriba a la derecha: aparece con rebote al elegir la franja */
.franja span::after { content: ""; position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--z-accion-fondo-activo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
  transform: scale(0); transition: transform 380ms var(--z-ease-rebote); }
.franja input:checked + span::after { transform: scale(1); }
.franja input:checked + span { animation: elegida 420ms var(--z-ease-rebote); }
@keyframes elegida { 0% { transform: scale(.95); } 100% { transform: none; } }
.franja b { font-family: 'Switzer'; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: #fff; }
.franja:hover span { background: var(--z-cristal-fuerte); }
.franja input:checked + span { background: #fff; border-color: #fff; color: var(--z-gris-medio); }
.franja input:checked + span b { color: var(--z-tinta); }
.franja input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.78); cursor: pointer; }
.casilla input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: -1px 0 0; flex: none; cursor: pointer; display: grid; place-items: center;
  border-radius: 7px; border: 1.5px solid rgba(255,255,255,.6); background: rgba(255,255,255,.06);
  transition: background-color 200ms var(--z-ease-mueve), border-color 200ms var(--z-ease-mueve), transform 150ms var(--z-ease-mueve); }
.casilla input::after { content: ""; width: 10px; height: 5px; border-left: 2.2px solid #fff; border-bottom: 2.2px solid #fff; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 320ms var(--z-ease-rebote); }
.casilla:hover input { border-color: #fff; }
.casilla input:active { transform: scale(.9); }
.casilla input:checked { background: var(--z-accion-fondo-activo); border-color: var(--z-accion-fondo-activo); }
.casilla input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.casilla input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.casilla a, .form__error a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.form__enviar { width: 100%; justify-content: center; margin-top: 4px; border: 0; cursor: pointer; font-family: inherit; }
.form__enviar[disabled] { opacity: .6; cursor: progress; transform: none; }
.form__nota { text-align: center; font-size: 13px; color: rgba(255,255,255,.66); margin-top: -6px; }
.form__error { font-size: 14px; line-height: 1.5; color: #fff; padding: 12px 16px; border-radius: 14px; background: rgba(207,48,12,.35); border: 1px solid rgba(245,108,77,.6); }

.garantia { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--z-cristal-borde); max-width: 44ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78); }
.garantia b { color: #fff; font-weight: 700; }

/* Estado enviado: ocupa el sitio del formulario */
.gracias { display: grid; justify-items: start; gap: 14px; padding: 24px 0 8px; outline: none; }
.gracias[hidden] { display: none; }
.gracias__marca { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--z-accion-fondo-activo); }
.gracias h2 { font-size: clamp(32px, 3vw, 44px); }
.gracias p { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.84); }
.visible-ya .gracias__marca { animation: marca 520ms var(--z-ease-rebote) both; }
@keyframes marca { from { transform: scale(.4); opacity: 0; } }

.campo-oculto, .oculto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* ---------- 2 · El camino: tres momentos unidos por una línea ---------- */
.camino h2 { font-size: clamp(36px, 4.4vw, 60px); max-width: 20ch; margin-bottom: 80px; }
.camino__lista { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.camino__lista.revela { opacity: 1; transform: none; }
/* La línea vive en la lista (::before pista gris, ::after trazo rojo que se dibuja al llegar) */
.camino__lista::before, .camino__lista::after { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px; border-radius: 2px; }
.camino__lista::before { background: var(--z-linea); }
.camino__lista::after { background: linear-gradient(to right, var(--z-rojo), #F79078); transform-origin: left; transform: scaleX(0); transition: transform 1400ms var(--z-ease-entra) 200ms; }
.camino__lista.visible::after { transform: scaleX(1); }
.tramo { position: relative; z-index: 1; opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--z-ease-entra), transform 600ms var(--z-ease-entra); }
.camino__lista.visible .tramo { opacity: 1; transform: none; }
.camino__lista.visible .tramo:nth-child(2) { transition-delay: 450ms; }
.camino__lista.visible .tramo:nth-child(3) { transition-delay: 900ms; }
.tramo__punto { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--z-tinta); margin-bottom: 36px; }
.tramo h3 { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 14px; }
.tramo p { font-size: 18px; line-height: 1.6; color: var(--z-gris-oscuro); }

/* ---------- 3 · Por qué no es un bot más ---------- */
.bot { padding-top: 0; }
.bot h2 { font-size: clamp(36px, 4.4vw, 60px); margin-bottom: 48px; }
.bot__lista { list-style: none; padding: 0; border-top: 1px solid #E4E1DD; }
.razon { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 56px; align-items: start; padding: 40px 0; border-bottom: 1px solid #E4E1DD; }
.razon.revela:nth-child(2) { transition-delay: 100ms; } .razon.revela:nth-child(3) { transition-delay: 200ms; }
/* 16/10, Mario: el título algo más abajo, a la altura de la primera línea del texto */
.razon h3 { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(26px, 2.4vw, 34px); padding-top: 10px; }
.razon p { font-size: 18px; line-height: 1.6; color: var(--z-gris-oscuro); padding-top: 10px; }

/* El dibujo de cada razón: tesela oscura de marca; el rojo solo en las formas */
.razon__icono { position: relative; width: 112px; aspect-ratio: 1; border-radius: 24px; background: var(--z-tinta); overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: transform 250ms var(--z-ease-mueve); }
.razon__icono::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 80% 0%, rgba(242,71,32,.35), transparent 70%); }
.razon:hover .razon__icono { transform: translateY(-3px) rotate(-2deg); }
.razon__num { position: absolute; left: 14px; top: 11px; font-family: 'Switzer'; font-weight: 700; font-size: 13px; color: rgba(255,255,255,.55); }
.razon__icono svg { width: 100%; height: 100%; display: block; }

/* 01 · agenda: el hueco se reserva */
.agenda__huecos rect { fill: rgba(255,255,255,.13); }
.agenda__reserva rect { fill: rgba(255,255,255,.13); transition: fill 300ms var(--z-ease-mueve) 500ms; }
.agenda__reserva path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset 300ms var(--z-ease-entra) 750ms; }
.agenda__reserva { transform-box: fill-box; transform-origin: center; }
.razon.visible .agenda__reserva rect { fill: var(--z-rojo); }
.razon.visible .agenda__reserva path { stroke-dashoffset: 0; }
.razon.visible .agenda__reserva { animation: reserva 520ms var(--z-ease-rebote) 450ms both; }
@keyframes reserva { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* 02 · camino: la línea avanza y cada momento se enciende al llegar */
.icono-camino line { stroke-width: 3; stroke-linecap: round; }
.camino__pista { stroke: rgba(255,255,255,.14); }
.camino__trazo { stroke: var(--z-rojo); stroke-dasharray: 68; stroke-dashoffset: 68; transition: stroke-dashoffset 1100ms var(--z-ease-mueve) 300ms; }
.camino__paso { fill: var(--z-tinta); stroke: rgba(255,255,255,.3); stroke-width: 2.5; transition: fill 250ms var(--z-ease-mueve), stroke 250ms var(--z-ease-mueve); }
.razon.visible .camino__trazo { stroke-dashoffset: 0; }
.razon.visible .camino__paso { fill: var(--z-rojo); stroke: var(--z-rojo); }
.razon.visible .camino__paso:nth-of-type(1) { transition-delay: 300ms; }
.razon.visible .camino__paso:nth-of-type(2) { transition-delay: 850ms; }
.razon.visible .camino__paso:nth-of-type(3) { transition-delay: 1400ms; }

/* 03 · ajuste: cada barra se coloca en su sitio */
.icono-ajuste line { stroke-width: 4; stroke-linecap: round; }
.ajuste__pista { stroke: rgba(255,255,255,.14); }
.ajuste__valor { stroke: var(--z-rojo); stroke-dasharray: 68; stroke-dashoffset: 68; transition: stroke-dashoffset 900ms var(--z-ease-resorte) 400ms; }
.ajuste__mando { fill: #fff; transition: transform 900ms var(--z-ease-resorte) 400ms; }
.razon.visible .ajuste__valor { stroke-dashoffset: calc(68 * (1 - var(--l))); }
.razon.visible .ajuste__mando { transform: translateX(var(--x)); }
.razon.visible .ajuste__valor:nth-of-type(5), .razon.visible .ajuste__mando:nth-of-type(2) { transition-delay: 550ms; }
.razon.visible .ajuste__valor:nth-of-type(6), .razon.visible .ajuste__mando:nth-of-type(3) { transition-delay: 700ms; }

/* ---------- 4 · Cierre: el anillo de marca hecho botón ---------- */
.cierre--corto .modulo__dentro { min-height: 480px; grid-template-columns: 1fr auto; align-items: center; }
.sello { position: relative; display: grid; place-items: center; width: 240px; aspect-ratio: 1; border-radius: 50%; margin-right: 24px; }
.sello__texto { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }   /* el giro lo lleva pagina.js, con la velocidad suavizada */
.sello__texto text { fill: rgba(255,255,255,.88); font-family: 'Chivo', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .14em; }
.sello__centro { position: relative; width: 136px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: var(--z-accion-fondo-activo); box-shadow: 0 20px 50px -14px rgba(207,48,12,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform 450ms var(--z-ease-rebote), background-color 200ms var(--z-ease-mueve); }
.sello__centro svg { transition: transform 300ms var(--z-ease-mueve); }
.sello:hover .sello__centro { transform: scale(1.08); background: #B82A0A; }
.sello:hover .sello__centro svg { transform: translateY(-5px); }
.sello:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* ---------- Móvil ---------- */
@media (max-width: 960px) {
  /* En móvil el formulario sube: título → entradilla → formulario → Mario y la garantía */
  .pedir__dentro { grid-template-columns: 1fr; gap: 0; padding: 104px 20px 48px; align-items: start; }
  .pedir__texto { display: contents; }
  .pedir h1 { order: 1; margin-bottom: 16px; }
  .pedir__entradilla { order: 2; font-size: 16px; margin-bottom: 28px; }
  .hoja-form { order: 3; }
  .pedir .persona { order: 4; margin-top: 32px; }
  .garantia { order: 5; margin-top: 20px; }
  .camino__lista { grid-template-columns: 1fr; gap: 56px; padding-left: 40px; }
  .camino__lista::before, .camino__lista::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .camino__lista::after { transform-origin: top; transform: scaleY(0); background: linear-gradient(to bottom, var(--z-rojo), #F79078); }
  .camino__lista.visible::after { transform: scaleY(1); }
  .tramo__punto { position: absolute; left: -40px; top: 6px; margin: 0; }
  .camino h2 { margin-bottom: 56px; }
  .razon { grid-template-columns: 72px 1fr; gap: 14px 20px; padding: 32px 0; }
  .razon__icono { width: 72px; border-radius: 18px; grid-row: span 2; }
  .razon__num { display: none; }
  .razon h3, .razon p { padding-top: 0; }
  .cierre--corto .modulo__dentro { grid-template-columns: 1fr; min-height: 0; gap: 40px; }
  .sello { width: 190px; margin: 0; }
  .sello__centro { width: 108px; }
}
@media (max-width: 520px) {
  .hoja-form { padding: 22px 18px; border-radius: 24px; margin: 0 -4px; }
  .franjas { gap: 6px; }
  .franja span { padding: 10px; }
  .franja b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tramo, .camino__lista::after { transition: none !important; opacity: 1 !important; transform: none !important; }
  .visible-ya .gracias__marca { animation: none; }
  .franja span, .franja span::after, .casilla input, .casilla input::after { transition: none !important; animation: none !important; }
  .razon__icono *, .sello__texto, .sello__centro { transition: none !important; animation: none !important; }
}

/* =====================================================================
   VARIANTE v2 (16/10/2026): lo de arriba es la v1 tal cual; esto se suma
   ===================================================================== */

/* ---------- 1 · Progreso del formulario ---------- */
.progreso { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.progreso__barra { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.progreso__barra::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to right, var(--z-rojo-claro), #F79078);
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 500ms var(--z-ease-resorte); }
.progreso__texto { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; min-width: 4.2em; text-align: right; transition: color 300ms var(--z-ease-mueve); }
.hoja-form.listo .progreso__texto { color: #fff; }
/* Todo relleno: el botón se enciende con un destello que lo cruza y un halo que late una vez */
.form__enviar { position: relative; overflow: hidden; isolation: isolate; }
.form__enviar::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.hoja-form.listo .form__enviar { animation: halo 1100ms var(--z-ease-entra) 1; box-shadow: 0 14px 36px -12px rgba(207,48,12,.8); }
.hoja-form.listo .form__enviar::after { animation: destello 900ms var(--z-ease-mueve) 150ms 1 both; }
@keyframes destello { to { transform: translateX(120%) skewX(-20deg); } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(245,108,77,.7); } 100% { box-shadow: 0 0 0 16px rgba(245,108,77,0), 0 14px 36px -12px rgba(207,48,12,.8); } }

/* ---------- 4 · Brillo que sigue al cursor por la tarjeta (el de «Cómo funciona») ---------- */
.hoja-form.brillo::before { background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(255,255,255,.09), transparent 55%); }
/* El desplegable de prefijos tiene que poder salir por encima del brillo */
.hoja-form.brillo > .form { z-index: 2; }

/* Título que entra palabra a palabra al cargar (pagina.js parte el h1 en palabras) */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.palabra > span { display: inline-block; transform: translateY(105%); animation: sube-palabra 900ms var(--z-ease-rodillo) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes sube-palabra { to { transform: none; } }

/* ---------- 2 · Mensajes de ejemplo en cada momento ---------- */
.chat { display: grid; align-content: start; gap: 8px; margin-top: 26px; padding: 18px; border-radius: 22px; background: var(--z-papel); position: relative; }
.chat__etiqueta { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--z-gris-medio);
  padding: 4px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--z-linea); margin-bottom: 4px; }
.burbuja { max-width: 88%; padding: 10px 14px 8px; font-size: 15px; line-height: 1.45; border-radius: 18px; display: grid; gap: 4px;
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 400ms var(--z-ease-entra), transform 500ms var(--z-ease-rebote); }
.burbuja time { justify-self: end; font-size: 11px; opacity: .6; }
.burbuja--paciente { justify-self: start; background: #fff; color: var(--z-tinta); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(27,25,23,.06); transform-origin: bottom left; }
.burbuja--clinica { justify-self: end; background: var(--z-tinta); color: #fff; border-bottom-right-radius: 6px; transform-origin: bottom right; }
/* Aparecen cuando su momento ya se ha mostrado: la primera burbuja tras el texto, la segunda como respuesta */
.camino__lista.visible .burbuja { opacity: 1; transform: none; }
.camino__lista.visible .tramo:nth-child(1) .burbuja:nth-of-type(1) { transition-delay: 500ms; }
.camino__lista.visible .tramo:nth-child(1) .burbuja:nth-of-type(2) { transition-delay: 1100ms; }
.camino__lista.visible .tramo:nth-child(2) .burbuja:nth-of-type(1) { transition-delay: 950ms; }
.camino__lista.visible .tramo:nth-child(2) .burbuja:nth-of-type(2) { transition-delay: 1550ms; }
.camino__lista.visible .tramo:nth-child(3) .burbuja:nth-of-type(1) { transition-delay: 1400ms; }
.camino__lista.visible .tramo:nth-child(3) .burbuja:nth-of-type(2) { transition-delay: 2000ms; }

/* ---------- 3 · Botón flotante en móvil ---------- */
.flotante { display: none; }
@media (max-width: 720px) {
  .flotante { display: inline-flex; position: fixed; z-index: 55; left: 16px; right: 68px; bottom: calc(16px + env(safe-area-inset-bottom)); justify-content: center;
    box-shadow: 0 16px 40px -12px rgba(207,48,12,.7); transform: translateY(140%); opacity: 0; pointer-events: none;
    transition: transform 450ms var(--z-ease-rodillo), opacity 250ms var(--z-ease-mueve); }
  .flotante.ver { transform: none; opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .palabra > span { animation: none; transform: none; }
  .burbuja, .progreso__barra::after, .flotante { transition: none !important; }
  .burbuja { opacity: 1; transform: none; }
  .hoja-form.listo .form__enviar, .hoja-form.listo .form__enviar::after { animation: none; }
}

/* Las tres columnas comparten filas (punto, título, texto, conversación): todo empieza a la misma altura aunque un título ocupe dos líneas */
@media (min-width: 961px) {
  .camino__lista { grid-template-rows: auto auto auto auto; row-gap: 0; }
  .tramo { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
  .tramo h3 { align-self: start; }
}

/* ---------- Teléfono: solo números y los dígitos de cada país ---------- */
.campo__aviso { min-height: 0; max-height: 0; overflow: hidden; margin-top: -4px; font-size: 13px; font-weight: 500; color: #FFB4A3;
  opacity: 0; transition: max-height 250ms var(--z-ease-mueve), opacity 200ms var(--z-ease-mueve), margin 250ms var(--z-ease-mueve); }
.campo__aviso.ver { max-height: 40px; opacity: 1; margin-top: 2px; }
.z-tel__caja.mal { box-shadow: 0 0 0 3px rgba(242,71,32,.85); background: #FFF1EE; }
.z-tel__caja.temblor { animation: temblor 420ms var(--z-ease-mueve); }
@keyframes temblor { 0%, 100% { transform: none; } 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .z-tel__caja.temblor { animation: none; } }

/* ---------- Tecnología con la que trabajamos: «pantalla de inicio» (18/10/2026, dirección 1, elegida por Mario) ----------
   Teselas de tinta como las de «Por qué no es un bot más». Apagadas: el logo en negativo tenue (gris e invertido, así se ven
   también los detalles interiores de Notion o WhatsApp). Encendidas: la tesela pasa a blanco y el logo sale con su color. */
.apps-tec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; align-items: center; --sombra-app: 0 1px 2px rgba(66,63,60,.08), 0 10px 24px -6px rgba(66,63,60,.12), 0 24px 48px -16px rgba(242,71,32,.12); }
.apps-tec__cabeza h2 { font-size: clamp(30px, 3.4vw, 46px); max-width: 16ch; }
.apps-tec__cabeza p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--z-gris-medio); max-width: 40ch; }
.apps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 14px; }
.app { display: grid; justify-items: center; align-content: start; gap: 10px; }
.app__icono { position: relative; width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 22px; background: var(--z-tinta); overflow: hidden; isolation: isolate; display: grid; place-items: center;
  transition: background-color 420ms var(--z-ease-mueve), transform 520ms var(--z-ease-rebote), box-shadow 420ms var(--z-ease-mueve); }
.app__icono::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 80% 0%, rgba(242,71,32,.35), transparent 70%); transition: opacity 420ms var(--z-ease-mueve); }
.app__logo { width: 28px; height: 28px; object-fit: contain; display: block; filter: grayscale(1) invert(1) opacity(.55); transition: filter 420ms var(--z-ease-mueve), transform 520ms var(--z-ease-rebote); }
.app__logo--ancho { width: 50px; height: 12px; }
.app__nombre { font-size: 12px; font-weight: 500; color: var(--z-gris-medio); text-align: center; line-height: 1.25; transition: color 300ms var(--z-ease-mueve); }
.app.encendida .app__icono { background: #fff; transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--z-linea), var(--sombra-app); }
.app.encendida .app__icono::before { opacity: 0; }
.app.encendida .app__logo { filter: none; transform: scale(1.08); }
.app.encendida .app__nombre { color: var(--z-tinta); }
@media (max-width: 720px) {
  .apps-tec { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; }
  .app__icono { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) { .app__icono, .app__logo { transition: none; } }