/* Medsavia · sitio público. Marca: azul #0D47A1, turquesa #14B8A6, verde profundo #2E7D76, tipografía Inter.
   Los fragmentos del producto (raíz con data-ui) conservan las convenciones de la interfaz de Medsavia: bordes de 1px,
   radios pequeños y sombra de panel; fuera de ellos no hay líneas ni sombras. */

:root {
  --bg: #F8FAFC;
  --surface: #EEF3FA;
  --ink: #0F172A;
  --muted: #475569;
  --accent: #0D47A1;
  --accent-strong: #0A3A85;
  --accent-ink: #FFFFFF;
  --teal: #14B8A6;
  --deep: #2E7D76;
  --navy: #0A2F6B;
  --paper: #FFFFFF;
  --ui-line: #E2E8F0;
  --ui-control: #CBD5E1;

  --font: "Inter", system-ui, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --step-head: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --step-display: clamp(2.75rem, 5.2vw, 5rem);

  --margin: clamp(1rem, 2.8vw, 2.5rem);
  --section: clamp(6rem, 12vw, 12rem);
  --round: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 5rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2 { font-weight: 500; text-wrap: balance; letter-spacing: -0.03em; line-height: 1.02; }
p { text-wrap: pretty; max-width: 62ch; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--margin); top: -4rem; z-index: 10; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: var(--round); }
.saltar:focus { top: 1rem; }

/* ---------- controles de la página ---------- */
.boton { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 1rem; padding: 0.85rem 1.4rem; border-radius: var(--round); transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.boton:active { transform: scale(0.97); }
.boton-chico { padding: 0.55rem 1.05rem; font-size: 1rem; }
.enlace { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--accent-strong); }
  .enlace:hover { text-decoration-color: currentColor; }
}

/* ---------- barra ---------- */
.anuncio { margin: 0; max-width: none; background: var(--navy); color: #fff; text-align: center; font-size: 0.9375rem; padding: 0.7rem var(--margin); }
.anuncio a { color: #fff; font-weight: 600; margin-left: 0.5rem; text-underline-offset: 0.2em; }
.barra { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--margin); background: var(--bg); }
.marca { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 800; font-size: 1.375rem; letter-spacing: -0.03em; color: var(--accent); }
.marca-m { width: 30px; height: 30px; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); font-size: 1rem; font-weight: 500; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: max(100svh, 760px); overflow: hidden; background: var(--bg); }
.hero-foto { position: absolute; inset: 0; transform: scaleX(-1); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 45%; }
.hero::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 1; width: min(62%, 900px); background: linear-gradient(90deg, rgba(248, 250, 252, 0.94) 0%, rgba(248, 250, 252, 0.86) 55%, rgba(248, 250, 252, 0) 100%); } /* taste-skill-ignore: velo neutro bajo el texto sobre la foto */
.recorrido-seccion { position: relative; min-height: max(100svh, 900px); overflow: hidden; }
.recorrido-texto { position: relative; z-index: 2; padding: clamp(5rem, 9vw, 8rem) var(--margin) 0; max-width: calc(33.33vw + 2rem); min-width: 22rem; }
.recorrido-texto p { margin-top: 1.25rem; font-size: var(--step-body); max-width: 40ch; }
.hero-texto { position: relative; z-index: 2; padding: clamp(5rem, 9vw, 8.5rem) var(--margin) 7rem; max-width: calc(33.33vw + 2rem); min-width: 22rem; }
.titulo-hero { font-size: var(--step-display); max-width: 9.2em; }
.hero-frase { margin-top: 1.5rem; font-size: var(--step-body); max-width: 40ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.boton-secundario { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: botón secundario con contorno de 2px */
@media (hover: hover) and (pointer: fine) { .boton-secundario:hover { background: var(--accent); color: #fff; } }

/* fragmentos del producto que flotan sobre la foto */
.flotantes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.flotante { position: absolute; width: 270px; background: #fff; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.4; color: var(--ink); }
.flotante { box-shadow: 0 18px 44px -18px rgba(2, 18, 54, 0.45); } /* taste-skill-ignore: tarjetas flotantes del producto (data-ui) */
.flotante-titulo { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.flotante-texto { color: #475569; margin-top: 2px; }
.flotante-llamada { right: 30%; top: 14%; }
.flotante-cita { right: 4%; top: 30%; }
.flotante-factura { right: 12%; bottom: 9%; }
.flotante-cita .flotante-titulo::before, .flotante-factura .flotante-titulo::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--deep); flex: none; }
.punto-vivo.encendido { background: #16A34A; }
.onda.viva { margin-top: 8px; height: 22px; }
.onda.viva i { transform-origin: center; }
.escenario { position: absolute; left: 41.66%; right: 0; top: 42%; bottom: 0; background: var(--accent);
  clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%, 0 120px); }
.escenario .recorrido { position: absolute; left: 56px; top: 56px; }

/* ---------- fragmento: la llamada ---------- */
.llamada { width: 620px; max-width: calc(100vw - 2rem); background: var(--paper); color: var(--ink); border-radius: 14px; font-size: 14px; line-height: 1.45; overflow: hidden; }
.llamada { box-shadow: 0 24px 60px -24px rgba(2, 18, 54, 0.55); } /* taste-skill-ignore: panel del producto (data-ui) */
.llamada-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px 18px; }
.llamada-cabeza, .llamada-escenas { border-bottom: 1px solid var(--ui-line); } /* taste-skill-ignore: divisiones del panel (data-ui) */
.llamada-pie { border-top: 1px solid var(--ui-line); } /* taste-skill-ignore: divisiones del panel (data-ui) */
.llamada-estado { display: flex; align-items: center; gap: 12px; }
.punto-vivo { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-control); flex: none; }
.llamada.en-curso .punto-vivo { background: #16A34A; }
.llamada-linea { font-weight: 600; font-size: 15px; }
.llamada-meta { color: #64748B; font-size: 13px; font-variant-numeric: tabular-nums; }
.onda { display: flex; align-items: center; gap: 3px; height: 28px; }
.onda i { width: 3px; height: 6px; border-radius: 2px; background: var(--teal); }
.llamada-escenas { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; background: #F8FAFC; }
.llamada-escenas button { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; background: #fff; color: #334155; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.llamada-escenas button { border: 1px solid var(--ui-control); } /* taste-skill-ignore: botones del producto (data-ui) */
.llamada-escenas button[aria-checked="true"] { background: #E8F0FB; border-color: var(--accent); color: var(--accent); }
.llamada-escenas button:active { transform: scale(0.97); }
.conversacion { height: 330px; overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 10px; }
.turno { display: grid; gap: 2px; max-width: 86%; }
.turno .quien { font-size: 12px; font-weight: 600; color: #64748B; }
.turno p { padding: 9px 12px; border-radius: 12px; font-size: 14px; }
.turno.asistente p { background: #E8F0FB; color: #0B2A5B; border-top-left-radius: 4px; }
.turno.paciente { align-self: flex-end; text-align: right; }
.turno.paciente p { background: var(--accent); color: #fff; border-top-right-radius: 4px; text-align: left; }
.turno.asesor p { background: #E6F6F4; color: #134E4A; border-top-left-radius: 4px; }
.control-medsavia { align-self: center; font-size: 13px; font-weight: 500; color: #1F5F59; background: #EAF6F4; padding: 5px 12px; border-radius: 999px; }
.control-medsavia span::before { content: ""; display: inline-block; width: 0.36em; height: 0.68em; margin: 0 0.55em 0.14em 0.1em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); vertical-align: middle; }
.control-medsavia.aviso { color: #9A3412; background: #FFF1E6; }
.control-medsavia.aviso span::before { width: 0.5em; height: 0.5em; border-width: 2px 2px 0 0; margin-bottom: 0.05em; }
.llamada-pie { display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.llamada-boton { background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 8px; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.llamada-boton:active { transform: scale(0.97); }
.llamada-reiniciar { font-size: 13px; color: #475569; margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.interruptor { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; cursor: pointer; }
.interruptor input { accent-color: var(--accent); width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .llamada-escenas button:hover { border-color: var(--accent); }
  .llamada-boton:hover { background: var(--accent-strong); }
}


/* ---------- fragmento: recorrido del paciente ---------- */
.recorrido { width: 620px; max-width: calc(100vw - 2rem); background: var(--paper); color: var(--ink); border-radius: 14px; font-size: 14px; line-height: 1.45; overflow: hidden; }
.recorrido { box-shadow: 0 24px 60px -24px rgba(2, 18, 54, 0.55); } /* taste-skill-ignore: panel del producto (data-ui) */
.recorrido-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px 18px; }
.recorrido-cabeza, .recorrido-tipos { border-bottom: 1px solid var(--ui-line); } /* taste-skill-ignore: divisiones del panel (data-ui) */
.recorrido-titulo { font-weight: 600; font-size: 15px; }
.recorrido-meta { color: #64748B; font-size: 13px; font-variant-numeric: tabular-nums; }
.recorrido-acciones { display: flex; gap: 8px; flex: none; }
.recorrido-boton { background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.recorrido-sig { font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 8px; background: #F1F5F9; color: #334155; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.recorrido-boton:active, .recorrido-sig:active { transform: scale(0.97); }
.recorrido-tipos { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; background: #F8FAFC; }
.recorrido-tipos button { font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; background: #fff; color: #334155; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.recorrido-tipos button { border: 1px solid var(--ui-control); } /* taste-skill-ignore: botones del producto (data-ui) */
.recorrido-tipos button[aria-checked="true"] { background: #E8F0FB; border-color: var(--accent); color: var(--accent); }
.recorrido-tipos button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .recorrido-tipos button:hover { border-color: var(--accent); }
  .recorrido-boton:hover { background: var(--accent-strong); }
  .recorrido-sig:hover { background: #E2E8F0; }
}
.pasos { padding: 14px 18px 22px; display: grid; gap: 4px; height: 400px; overflow-y: auto; }
.paso { position: relative; display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; padding: 8px 10px 10px; border-radius: 10px; transition: background-color 300ms ease, opacity 300ms ease; }
.paso-modulo { grid-row: span 2; align-self: start; justify-self: start; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--modulo); background: color-mix(in srgb, var(--modulo) 12%, white); }
.paso-accion { font-size: 14px; color: var(--ink); }
.paso-efecto { font-size: 12.5px; color: #475569; margin-top: 2px; }
.paso-efecto::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--modulo); margin: 0 7px 1px 0; vertical-align: middle; }
.pasos.reproduciendo .paso { opacity: 0.32; }
.pasos.reproduciendo .paso.hecho { opacity: 1; }
.pasos .paso.actual { background: #F1F5F9; }

/* ---------- fragmento: un ingreso visto por todas las áreas ---------- */
.registro { width: 440px; max-width: 100%; background: #fff; border-radius: 14px; padding: 22px 24px; font-size: 14px; line-height: 1.5; }
.registro { box-shadow: 0 24px 60px -30px rgba(2, 18, 54, 0.45); } /* taste-skill-ignore: panel del producto (data-ui) */
.registro-cabeza { font-size: 16px; font-weight: 600; }
.registro-origen { color: #475569; font-size: 13.5px; margin: 4px 0 16px; }
.registro-areas { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; padding-top: 16px; }
.registro-areas { border-top: 1px solid var(--ui-line); } /* taste-skill-ignore: división del panel (data-ui) */
.registro-areas dt { color: #64748B; }
.registro-areas dd { font-weight: 500; font-variant-numeric: tabular-nums; transition: color 400ms ease; }
.registro-areas dd.cambio, .registro-origen .cambio { color: var(--deep); }
.deslizador { display: grid; gap: 10px; font-size: 15px; max-width: 360px; }
.deslizador input { width: 100%; accent-color: var(--deep); height: 28px; }

/* ---------- asistente de voz ---------- */
.seccion-asistente { margin-top: var(--section); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); background: var(--deep); color: #fff; }
.asistente-texto { grid-column: 1 / 6; padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 7rem) var(--margin); }
.asistente-texto p { margin-top: 1.25rem; font-size: var(--step-body); max-width: 44ch; }
.asistente-escenario { grid-column: 7 / 13; padding: clamp(4rem, 8vw, 7rem) var(--margin) clamp(4rem, 8vw, 7rem) 0; display: flex; align-items: center; }

/* ---------- campo: la misma IPS por área ---------- */
.campo { position: relative; height: 92svh; min-height: 640px; overflow: hidden; background: var(--accent); color: #fff; transition: background-color 420ms var(--ease-in-out); }
.campo[data-campo="administracion"] { background: var(--navy); }
.campo[data-campo="finanzas"] { background: var(--deep); }
.campo-texto { position: relative; z-index: 2; padding: clamp(4rem, 9vw, 7rem) var(--margin) 0; max-width: 34rem; }
.titulo-seccion { font-size: var(--step-head); font-weight: 600; }
.campo-frase { margin-top: 1rem; font-size: var(--step-body); max-width: 38ch; }
.selector { position: absolute; right: var(--margin); bottom: 12vh; display: inline-grid; grid-template-columns: repeat(3, 1fr); padding: 0.12em; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: clamp(36px, 4.4vw, 84px); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.selector button { position: relative; z-index: 1; padding: 0.42em 0.8em; border-radius: 999px; color: rgba(255, 255, 255, 0.82); transition: color 300ms ease; }
.selector button[aria-checked="true"] { color: var(--ink); }
.selector-pulgar { position: absolute; z-index: 0; top: 0.12em; bottom: 0.12em; left: 0.12em; width: calc((100% - 0.24em) / 3); border-radius: 999px; background: #fff; transition: transform 420ms var(--ease-in-out); }
.campo[data-campo="administracion"] .selector-pulgar { transform: translateX(100%); }
.campo[data-campo="finanzas"] .selector-pulgar { transform: translateX(200%); }

/* ---------- franjas: cómo atiende ---------- */
.franjas { display: grid; grid-template-columns: repeat(4, 1fr); }
.franja { position: relative; height: 84svh; min-height: 620px; padding: clamp(2.5rem, 5vw, 4rem) 28px 28px; display: flex; flex-direction: column; color: #fff; }
.f1 { background: var(--navy); }
.f2 { background: var(--accent); }
.f3 { background: var(--deep); }
.f4 { background: var(--teal); color: var(--ink); }
.franja-titulo { font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.02em; }
.franja .ficha { position: absolute; left: 50%; top: 38%; translate: -50% 0; transition: transform 150ms var(--ease-out); }
.franja-frase { margin-top: auto; font-size: var(--step-lead); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; max-width: 12em; }
@media (hover: hover) and (pointer: fine) { .franja:hover .ficha { transform: translateY(-6px); } }

.ficha { width: 260px; background: #fff; color: var(--ink); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; }
.ficha { box-shadow: 0 18px 40px -22px rgba(2, 18, 54, 0.6); } /* taste-skill-ignore: tarjeta del producto (data-ui) */
.ficha-tipo { font-weight: 600; font-size: 14px; }
.ficha-hora { color: #64748B; font-size: 13px; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.ficha dl, .ficha-lista, .ficha-total { border-top: 1px solid var(--ui-line); padding-top: 10px; } /* taste-skill-ignore: divisiones de la tarjeta (data-ui) */
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.ficha dt { color: #64748B; }
.ficha dd { font-weight: 500; }
.ficha dd.vacio { color: #64748B; font-weight: 400; }
.ficha-lista { display: grid; gap: 6px; }
.ficha-lista li { padding-left: 22px; position: relative; color: #475569; }
.ficha-lista li::before { content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 4px; background: #E2E8F0; }
.ficha-lista li.hecho { color: var(--ink); }
.ficha-lista li.hecho::before { background: var(--deep); }
.ficha-lista li.hecho::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ficha-total { margin-top: 10px; font-weight: 600; color: var(--deep); }

/* ---------- configurar ---------- */
.configurar { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); margin-top: var(--section); }
.configurar-salida { grid-column: 1 / 7; position: sticky; top: 0; height: 100svh; background: var(--surface); display: grid; place-items: center; padding: 2rem; }
.configurar-controles { grid-column: 8 / 12; padding: 72px 0 30vh; }
.configurar-controles .titulo-seccion { margin-bottom: 18vh; }
.bloque { margin-bottom: 30vh; max-width: 44ch; }
.bloque:last-child { margin-bottom: 0; }
.bloque-frase { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.75rem; }
.bloque > p:not(.bloque-frase) { font-size: var(--step-body); margin-bottom: 1.25rem; }

.guion { width: 420px; max-width: 100%; background: #fff; border-radius: 14px; padding: 22px 24px; font-size: 14px; line-height: 1.5; }
.guion { box-shadow: 0 24px 60px -30px rgba(2, 18, 54, 0.45); } /* taste-skill-ignore: panel del producto (data-ui) */
.guion-cabeza { font-size: 13px; font-weight: 600; color: #64748B; }
.guion-saludo { margin: 10px 0 18px; font-size: 18px; line-height: 1.4; color: #0B2A5B; }
.guion-reglas { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; padding-top: 16px; }
.guion-reglas { border-top: 1px solid var(--ui-line); } /* taste-skill-ignore: división del panel (data-ui) */
.guion-reglas dt { color: #64748B; }
.guion-reglas dd { font-weight: 500; transition: color 400ms ease; }
.guion-reglas dd.cambio { color: var(--deep); }

.campo-texto-ui, .lista-ui { display: grid; gap: 6px; font-size: 14px; color: #334155; max-width: 360px; }
.campo-texto-ui input, .lista-ui select { height: 44px; padding: 0 12px; border-radius: 8px; background: #fff; font-size: 15px; color: var(--ink); }
.campo-texto-ui input, .lista-ui select, .segmentos { border: 1px solid var(--ui-control); } /* taste-skill-ignore: campos de formulario del producto (data-ui) */
.campo-texto-ui input:focus, .lista-ui select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.segmentos { display: inline-flex; flex-wrap: wrap; border-radius: 8px; overflow: hidden; background: #fff; }
.segmentos button { padding: 10px 14px; font-size: 14px; color: #334155; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.segmentos button + button { border-left: 1px solid var(--ui-control); } /* taste-skill-ignore: control segmentado del producto (data-ui) */
.segmentos button[aria-checked="true"] { background: var(--accent); color: #fff; }
.conmutador { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; min-height: 44px; }
.conmutador input { appearance: none; margin: 0; width: 44px; height: 26px; border-radius: 999px; background: var(--ui-control); position: relative; cursor: pointer; transition: background-color 200ms ease; flex: none; }
.conmutador input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 200ms var(--ease-out); }
.conmutador input:checked { background: var(--deep); }
.conmutador input:checked::after { transform: translateX(18px); }

/* ---------- áreas: pestañas con pantallas reales ---------- */
.areas { margin-top: var(--section); padding: 0 var(--margin); }
.areas-cabeza { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); align-items: end; }
.areas-cabeza .titulo-seccion { grid-column: 1 / 6; }
.areas-cabeza p { grid-column: 7 / 12; font-size: var(--step-body); }
.areas-pestanas { margin-top: clamp(2.5rem, 4vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.areas-pestanas [role="tab"] { padding: 0.7rem 1.15rem; border-radius: var(--round); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 1rem; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.areas-pestanas [role="tab"][aria-selected="true"] { background: var(--accent); color: #fff; }
.areas-pestanas [role="tab"]:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .areas-pestanas [role="tab"]:not([aria-selected="true"]):hover { color: var(--ink); background: #E2EAF5; } }
.areas-paneles { margin-top: 2rem; }
.area-panel { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; background: var(--surface); padding: clamp(1.5rem, 3vw, 2.5rem); }
.area-panel + .area-panel { margin-top: 1.5rem; }
.js .area-panel + .area-panel { margin-top: 0; }
.area-panel[hidden] { display: none; }
.area-texto { grid-column: 1 / 5; padding-top: 0.5rem; }
.area-texto h3 { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
.area-texto p { margin-top: 1rem; font-size: var(--step-body); }
.area-lista { margin-top: 1.25rem; display: grid; gap: 0.6rem; }
.area-lista li { position: relative; padding-left: 1.6rem; font-size: var(--step-body); }
.area-lista li::before { content: ""; position: absolute; left: 0.15rem; top: 0.4em; width: 0.4em; height: 0.75em; border: solid var(--deep); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.area-foto { grid-column: 5 / 13; overflow: hidden; background: #fff; }
.area-foto img { width: 100%; aspect-ratio: 16 / 9.2; object-fit: cover; object-position: top left; }
.js .area-panel:not([hidden]) .area-foto img { animation: entra 500ms var(--ease-out) both; }

/* ---------- prueba ---------- */
.prueba { padding: clamp(7rem, 10vw, 9.5rem) var(--margin); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.prueba-intro { font-size: var(--step-body); color: var(--muted); }
.prueba-nombres { display: flex; flex-wrap: wrap; flex: 1; justify-content: space-between; gap: 1rem 2rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; }
.prueba-dato { flex-basis: 100%; font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; margin-top: clamp(3rem, 6vw, 5rem); font-weight: 500; letter-spacing: -0.02em; }

/* ---------- carta ---------- */
.carta { padding: 160px var(--margin); background: var(--surface); }
.carta-hoja { max-width: 520px; margin: 0 auto; }
.carta-m { width: 44px; height: 44px; margin-bottom: 28px; }
.carta-hoja p { font-size: var(--step-body); line-height: 1.6; margin-bottom: 1.4em; }
.carta-hoja mark { background: #CDEFEA; color: var(--ink); padding: 0 0.15em; }
.carta-hoja .firma { font-style: italic; font-weight: 500; font-size: 1.375rem; margin: 2rem 0 0; }
.carta-hoja .firma-rol { font-size: 0.875rem; color: var(--muted); }

/* ---------- preguntas ---------- */
.preguntas { margin-top: var(--section); padding: 0 var(--margin); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.preguntas-lista { grid-column: 1 / 6; display: grid; gap: 18px; justify-items: start; }
.preguntas-titulo { font-size: var(--step-body); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.preguntas-lista [role="tab"] { display: flex; align-items: baseline; gap: 12px; text-align: left; font-size: var(--step-body); color: var(--muted); transition: color var(--t-hover) ease; }
.preguntas-lista [role="tab"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #94A3B8; flex: none; translate: 0 -2px; transition: background-color var(--t-hover) ease; }
.preguntas-lista [role="tab"][aria-selected="true"] { color: var(--ink); }
.preguntas-lista [role="tab"][aria-selected="true"]::before { background: var(--accent); }
.preguntas-panel { grid-column: 7 / 13; position: sticky; top: 120px; }
.preguntas-panel [role="tabpanel"] p { font-size: 1.375rem; line-height: 1.35; max-width: 40ch; letter-spacing: -0.01em; }
.preguntas-panel [role="tabpanel"] { animation: aparece 150ms ease both; }
.respuesta-inline { display: none; }

/* ---------- contacto ---------- */
.contacto { margin-top: var(--section); padding: 140px max(var(--margin), calc((100% - 520px) / 2)) 120px; background: var(--accent); color: #fff; }
.contacto .contacto-titulo span, .contacto .contacto-nota, .contacto .contacto-datos dt { color: rgba(255, 255, 255, 0.82); }
.contacto .contacto-form button { background: var(--navy); }
.contacto .enlace { color: #fff; }
.contacto-titulo { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.contacto-titulo span { display: block; color: var(--muted); }
.contacto-form { position: relative; margin-top: 28px; }
.contacto-form input { width: 100%; height: 64px; border: 0; border-radius: var(--round); background: var(--paper); padding: 0 64px 0 24px; font-size: var(--step-body); }
.contacto-form input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } /* taste-skill-ignore: anillo de foco del campo */
.contacto-form button { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.contacto-form button svg { width: 20px; height: 20px; }
.contacto-form button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .contacto-form button:hover { background: var(--accent-strong); } }
.contacto-nota { margin-top: 16px; font-size: 0.875rem; color: var(--muted); }
.contacto-datos { margin-top: 72px; display: grid; gap: 12px; font-size: 0.875rem; }
.contacto-datos div { display: grid; grid-template-columns: 6rem 1fr; }
.contacto-datos dt { color: var(--muted); }

/* ---------- pie ---------- */
.pie { padding: clamp(4rem, 7vw, 6rem) var(--margin) 28px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 2.5rem; background: var(--navy); color: rgba(255, 255, 255, 0.8); font-size: var(--step-small); }
.pie-marca { grid-column: 1 / 5; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; }
.pie-columnas { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pie-titulo { color: #fff; font-weight: 600; margin-bottom: 0.75rem; font-size: 0.9375rem; }
.pie-columnas ul { display: grid; gap: 0.5rem; }
.pie a { color: #fff; }
.pie-legal { grid-column: 1 / 7; }
.pie-credito { grid-column: 7 / 13; max-width: none; }

/* ---------- movimiento ---------- */
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes onda { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(4.2); } }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.llamada.hablando .onda i { animation: onda 900ms ease-in-out infinite; }
.llamada.hablando .onda i:nth-child(2) { animation-delay: -120ms; }
.llamada.hablando .onda i:nth-child(3) { animation-delay: -260ms; }
.llamada.hablando .onda i:nth-child(4) { animation-delay: -400ms; }
.llamada.hablando .onda i:nth-child(5) { animation-delay: -540ms; }
.llamada.hablando .onda i:nth-child(6) { animation-delay: -680ms; }
.llamada.hablando .onda i:nth-child(7) { animation-delay: -820ms; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: no-preference) {
  .flotante { animation: flota 6s ease-in-out infinite; }
  .flotante-cita { animation-delay: -2s; }
  .flotante-factura { animation-delay: -4s; }
  .onda.viva i { animation: onda 900ms ease-in-out infinite; }
  .onda.viva i:nth-child(2n) { animation-delay: -300ms; }
  .onda.viva i:nth-child(3n) { animation-delay: -600ms; }
  .js [data-aparece] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--orden, 0) * 80ms); }
  .js [data-aparece].visto { opacity: 1; transform: none; }
  .js .cortina { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .cortina img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .cortina.visto { clip-path: inset(0); }
  .js .cortina.visto img { transform: none; }
  .js .escenario { clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%, 0 120px); }
  .js .escenario .recorrido { animation: sube 1100ms var(--ease-out) 300ms both; }
  @keyframes sube { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
  .turno-nuevo { animation: entra 360ms var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) {
  .llamada.hablando .onda i { animation: none; transform: scaleY(2.2); }
  .campo, .selector-pulgar { transition: none; }
}

/* ---------- tableta y teléfono ---------- */
@media (max-width: 1100px) {
  .escenario { left: 30%; }
  .franjas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav li:not(:last-child) { display: none; }
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero::before { display: none; }
  .flotantes { display: none; }
  .anuncio { font-size: 0.875rem; }
  .areas-cabeza { display: block; }
  .areas-cabeza p { margin-top: 1rem; }
  .area-panel { display: block; padding: 1.25rem; }
  .area-foto { margin-top: 1.5rem; }
  .pie { display: block; }
  .pie-columnas { grid-template-columns: 1fr 1fr; margin: 2rem 0; }
  .pie-legal, .pie-credito { margin-top: 1rem; }
  .hero-foto { position: relative; order: 2; height: 48svh; }
  .recorrido-seccion { min-height: 0; overflow: visible; }
  .recorrido-texto { max-width: none; min-width: 0; padding-top: 4rem; }
  .hero-texto { max-width: none; min-width: 0; padding: 104px var(--margin) 2.5rem; }
  .titulo-hero { font-size: 10vw; }
  .hero-frase { font-size: 1rem; }
  .escenario, .js .escenario { position: relative; left: auto; top: auto; margin-top: 2.5rem; padding: 72px 16px 0; height: 640px; overflow: hidden; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); }
  .escenario .recorrido { position: static; width: 100%; max-width: none; }
  .seccion-asistente { display: block; }
  .asistente-texto { padding: 4rem var(--margin) 0; }
  .paso { grid-template-columns: 1fr; row-gap: 4px; }
  .paso-modulo { grid-row: auto; }
  .pasos { height: 420px; }
  .recorrido-cabeza { flex-wrap: wrap; }
  .asistente-escenario { padding: 2rem 16px 3rem; }
  .seccion-asistente .llamada { width: 100%; }
  .conversacion { height: 300px; }
  .llamada-reiniciar { margin-left: 0; }
  .llamada-pie { flex-wrap: wrap; }
  .campo { height: 86svh; min-height: 560px; }
  .campo-texto { padding-top: 3rem; }
  .titulo-seccion { font-size: 1.625rem; }
  .campo-frase { font-size: 1rem; }
  .selector { left: var(--margin); right: auto; bottom: 2.5rem; font-size: 6.4vw; }
  .franjas { grid-template-columns: 1fr; }
  .franja { height: auto; min-height: 64svh; padding: 28px 20px; gap: 32px; }
  .franja .ficha { position: static; translate: none; order: 3; }
  .franja-frase { margin-top: 0; font-size: 1.5rem; order: 2; }
  .franja-titulo { order: 1; font-size: 1.5rem; }
  .configurar { display: block; }
  .configurar-salida { position: static; height: auto; padding: 2rem 1rem; }
  .configurar-controles { display: flex; flex-direction: column; }
  .guion { width: 100%; font-size: 13px; }
  .configurar-salida { display: block; }
  .guion-saludo { font-size: 16px; margin: 6px 0 10px; }
  .configurar-controles { padding: 2.5rem var(--margin) 4rem; }
  .configurar-controles .titulo-seccion { margin-bottom: 3rem; }
  .bloque { margin-bottom: 4rem; }
  .bloque-frase { font-size: 1.375rem; }
  .bloque > p:not(.bloque-frase) { font-size: 1rem; }
  .prueba-nombres { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; font-size: 1.0625rem; flex-basis: 100%; }
  .prueba-intro { flex-basis: 100%; font-size: 1.0625rem; }
  .carta { padding: 96px 24px; }
  .preguntas { display: block; }
  .preguntas-panel { display: none; }
  .respuesta-inline { display: block; padding-left: 20px; font-size: 1.1875rem; line-height: 1.4; }
  .contacto { padding: 96px 20px 80px; }
  .contacto-form input { height: 60px; }
  .contacto-form button { top: 8px; }
  .contacto-datos div { grid-template-columns: 1fr; gap: 2px; }
  .contacto-datos { gap: 20px; }
}
@media (max-width: 360px) {
  .marca { font-size: 1.125rem; gap: 0.4rem; }
  .marca-m { width: 24px; height: 24px; }
  .boton-chico { padding: 0.5rem 0.85rem; font-size: 0.875rem; }
}