/* demo-perfil.css — «Prueba tu demo gratis» (js/demo-perfil.js) y la pantalla «Mira tu teléfono».
   Se viste solo con las variables del sector (--dv-* y --s-fuente-titulo en los sectores; --d-* en /demo).
   Los valores por defecto de las variables van en @layer base: el estilo.css de un sector (@layer sector) las cambia con
   body[data-sector="x"] .dp { --dp-acento: …; }. Las reglas van sin capa (como demo-vivo.css) para que no las pisen las
   reglas generales del sector (h3, p, button…).
   Lectura fácil: texto de 18 px o más, líneas cortas, un paso cada vez, foco siempre visible. Sin cristal ni brillos. */
@layer base {
.dp {
  --dp-fondo: var(--dv-fondo, #ffffff);
  --dp-sup: var(--dv-superficie, #f1efe9);
  --dp-texto: var(--dv-texto, #1b1f1d);
  --dp-suave: var(--dv-texto-suave, #4b524f);
  --dp-borde: var(--dv-borde, #1b1f1d);
  --dp-acento: var(--dv-acento, #1f6f5c);
  --dp-sobre: var(--dv-acento-texto, #ffffff);
  --dp-radio: var(--dv-radio, 4px);
  --dp-sombra: var(--dv-sombra, none);
  --dp-fuente: var(--dv-fuente, system-ui, sans-serif);
  --dp-titulo: var(--s-fuente-titulo, var(--dp-fuente));
  --dp-foco: var(--dv-texto, #0b5cad);
}
}
.dp {
  container-type: inline-size;
  box-sizing: border-box;
  margin: 28px 0;
  padding: clamp(18px, 4vw, 30px);
  background: var(--dp-fondo);
  color: var(--dp-texto);
  border: 2px solid var(--dp-borde);
  border-radius: var(--dp-radio);
  box-shadow: var(--dp-sombra);
  font: 400 1.125rem/1.6 var(--dp-fuente);
  text-align: left;
}
/* /demo: mismas piezas con las variables de la página */
.d-main .dp {
  --dp-fondo: var(--d-fondo); --dp-sup: var(--d-sup); --dp-texto: var(--d-texto); --dp-suave: var(--d-suave); --dp-borde: var(--d-borde);
  --dp-acento: var(--d-acento); --dp-sobre: var(--d-sobre); --dp-radio: var(--d-radio); --dp-fuente: var(--d-fuente); --dp-titulo: var(--d-titulo);
  --dp-sombra: none; --dp-foco: var(--d-enlace);
}
.dp *, .dp *::before, .dp *::after { box-sizing: border-box; }
.dp [hidden] { display: none !important; }
.dp :focus-visible { outline: 3px solid var(--dp-foco); outline-offset: 3px; }
.dp p { margin: 0 0 12px; max-width: 36em; }
.dp a { color: var(--dp-texto); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }

/* cabecera */
.dp-et { display: inline-block; margin: 0 0 6px !important; font-weight: 700; font-size: 1.125rem; letter-spacing: .02em; color: var(--dp-suave); }
.dp-t { margin: 0 0 8px; font: 700 clamp(1.6rem, 5cqi, 2.2rem)/1.15 var(--dp-titulo); letter-spacing: -.01em; max-width: 20ch; color: var(--dp-texto); }
.dp-intro { color: var(--dp-suave); }
/* 4B-halo en la cabecera (sectores): una ventana de grafito con luz cobalto, igual sobre fondo claro u oscuro */
.dp-cab--halo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(14px, 3cqi, 28px); align-items: start; }
.dp-cab--halo > :not(.dp-halo) { grid-column: 1; }
.dp-halo { grid-column: 2; grid-row: 1 / span 3; margin: 0; width: clamp(104px, 24cqi, 168px); text-align: center; }
.dp-halo-fig { position: relative; aspect-ratio: 5 / 6; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 70% 0%, rgba(79, 123, 255, .34), rgba(79, 123, 255, 0) 60%), radial-gradient(90% 70% at 50% 100%, #1b2140, #0d0e15 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(160, 185, 255, .16), 0 14px 30px -14px rgba(10, 14, 40, .55); }
.dp-halo-fig .halo { position: absolute; left: 50%; top: 50%; width: 102%; transform: translate(-50%, -46%); }
.dp .dp-halo-n { margin: 8px 0 0; font-size: 1rem; line-height: 1.25; font-weight: 700; color: var(--dp-texto); }
@container (max-width: 460px) {
  .dp-halo { grid-row: 1 / span 2; width: 96px; }
  .dp-cab--halo .dp-intro { grid-column: 1 / -1; }
  .dp .dp-halo-n { font-size: .9375rem; }
}

/* índice de pasos */
.dp-pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 18px 0 22px; padding: 0; list-style: none; counter-reset: none; }
.dp-paso-i { margin: 0; padding: 0; }
.dp-paso-b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 8px; font: 600 1.125rem/1.2 var(--dp-fuente);
  color: var(--dp-texto); background: transparent; border: 0; border-top: 4px solid var(--dp-sup); cursor: pointer; text-align: left; }
.dp-paso-b:disabled { cursor: default; color: var(--dp-suave); }
.dp-paso-n { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid currentColor; border-radius: 50%; font-weight: 800; }
.dp-paso-b.hecho { border-top-color: var(--dp-suave); }
.dp-paso-b.hecho .dp-paso-n { background: var(--dp-texto); color: var(--dp-fondo); border-color: var(--dp-texto); }
.dp-paso-b.ahora { border-top-color: var(--dp-acento); }
.dp-paso-b.ahora .dp-paso-n { background: var(--dp-acento); color: var(--dp-sobre); border-color: var(--dp-acento); }
@container (max-width: 620px) {
  .dp-paso-b { justify-content: center; padding: 6px 2px; }
  .dp-paso-t { display: none; }   /* el nombre del paso va en el aria-label del botón */
}

/* cada paso */
.dp-h { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; font: 700 clamp(1.4rem, 4.4cqi, 1.75rem)/1.2 var(--dp-titulo); color: var(--dp-texto); }
.dp-h:focus { outline: none; }
.dp-h:focus-visible { outline: 3px solid var(--dp-foco); outline-offset: 4px; }
.dp-h-n { font: 700 1.125rem/1.3 var(--dp-fuente); color: var(--dp-suave); }
.dp-ayuda { color: var(--dp-suave); }
.dp-lab { display: block; margin: 16px 0 6px; font-weight: 700; font-size: 1.125rem; color: var(--dp-texto); }
.dp-in { display: block; width: 100%; max-width: 30rem; min-height: 54px; padding: 10px 14px; font: 400 1.125rem/1.4 var(--dp-fuente);
  color: var(--dp-texto); background: var(--dp-fondo); border: 2px solid var(--dp-borde); border-radius: var(--dp-radio); }
textarea.dp-in { min-height: 120px; resize: vertical; line-height: 1.6; }
.dp-in::placeholder { color: var(--dp-suave); opacity: 1; }
.dp-in[aria-invalid="true"] { border-color: #b42318; box-shadow: inset 0 0 0 1px #b42318; }
.dp-in[type="file"] { min-height: 0; padding: 10px; }
.dp-nota { margin: 6px 0 0 !important; font-size: 1.125rem; color: var(--dp-suave); }
.dp-fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; align-items: center; }
.dp-fila-fin { padding-top: 18px; border-top: 2px solid var(--dp-sup); margin-top: 26px; }

/* botones */
.dp-b { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 22px; font: 700 1.125rem/1.25 var(--dp-fuente); text-align: center;
  border-radius: var(--dp-radio); border: 2px solid var(--dp-texto); cursor: pointer; text-decoration: none !important; }
.dp-lleno { background: var(--dp-acento); color: var(--dp-sobre) !important; border-color: var(--dp-acento); }
.dp-hueco { background: transparent; color: var(--dp-texto); }
.dp-texto { background: transparent; border-color: transparent; color: var(--dp-texto); text-decoration: underline !important; text-underline-offset: .2em; padding: 0 6px; }
.dp-lleno:hover { filter: brightness(.94); }
.dp-hueco:hover { background: var(--dp-sup); }
.dp-b:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.dp-grande { min-height: 58px; padding: 0 30px; font-size: 1.25rem; }

/* mensajes: piezas opacas con su propio color, valen en cualquier sector */
.dp-error, .dp-aviso, .dp-ok { margin: 16px 0 0 !important; padding: 10px 14px; border-left: 6px solid; font-weight: 600; max-width: 34rem; }
.dp-error { background: #fff1ee; color: #7a1a0c; border-color: #b42318; }
.dp-aviso { background: #fff3c4; color: #3d3200; border-color: #8a6d00; }
.dp-ok { background: #e7f3ea; color: #15462b; border-color: #2d7a4b; }
.dp-ok:focus { outline: none; }
/* al renovar: dato que era de ejemplo (22-oct-2026) */
.dp-ejemplo { margin: 6px 0 0 !important; padding: 6px 12px; border-left: 6px solid #8a6d00; background: #fff3c4; color: #3d3200; font-weight: 600; font-size: 1.125rem; max-width: 34rem; }

/* paso 2 */
.dp-leido { margin-top: 18px; }
/* «Más detalles (opcional)»: plegado por defecto para no cargar el formulario */
.dp-mas { margin-top: 18px; max-width: 34rem; border-top: 2px solid var(--dp-borde); padding-top: 4px; }
.dp-mas-t { display: list-item; padding: 12px 0; cursor: pointer; font-weight: 700; list-style-position: inside; }
.dp-mas-t:focus-visible { outline: 3px solid var(--dp-foco); outline-offset: 2px; }
.dp-mas-c { padding-bottom: 6px; }

/* paso 3: ubicación y mapa */
.dp-ubic-dir { margin-top: 4px; }
.dp-mapa { position: relative; overflow: hidden; width: 100%; max-width: 30rem; height: 180px; margin: 6px 0 8px; background: #e9e5dc; border: 2px solid var(--dp-borde); border-radius: var(--dp-radio); }
.dp-mapa-teselas { position: absolute; inset: 0; }
.dp-mapa-teselas img { position: absolute; width: 256px !important; height: 256px !important; max-width: none !important; display: block; filter: saturate(.75); }
.dp-mapa-pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -30px 0 0 -11px; background: var(--dp-acento); border: 3px solid #14181a; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.dp-mapa-pin::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.dp-mapa-atr { position: absolute; right: 0; bottom: 0; padding: 2px 8px; font-size: 1rem; line-height: 1.4; background: #ffffff; color: #1b1f1d !important; }
.dp-enlace { display: inline-block; min-height: 44px; padding-top: 8px; }
.dp-cands { margin-top: 10px; }
.dp-cand { display: flex; gap: 12px; align-items: flex-start; max-width: 30rem; margin: 8px 0 0; padding: 12px 14px; border: 2px solid var(--dp-sup); border-radius: var(--dp-radio); cursor: pointer; }
.dp-cand:has(input:checked) { border-color: var(--dp-texto); }
.dp-cand input, .dp-op input, .dp-casilla input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--dp-texto); }

/* paso 4: interruptores */
.dp-fun { margin: 8px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--dp-sup); }
.dp-fun-i { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; padding: 12px 0; border-bottom: 2px solid var(--dp-sup); }
.dp-fun-l { cursor: pointer; }
.dp-fun-l b { display: block; font-weight: 700; }
.dp-fun-l span { display: block; color: var(--dp-suave); }
.dp-fun-extra { grid-column: 2; }
.dp-fun-extra .dp-lab { margin-top: 8px; }
.dp-sw { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 56px; height: 32px; margin: 0; border: 2px solid var(--dp-texto); border-radius: 16px; background: var(--dp-fondo); cursor: pointer; }
.dp-sw::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--dp-texto); transition: transform .15s; }
.dp-sw:checked { background: var(--dp-acento); border-color: var(--dp-acento); }
.dp-sw:checked::before { transform: translateX(24px); background: var(--dp-sobre); }
.dp-grupo { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.dp-grupo .dp-lab { margin: 0 0 8px; padding: 0; }
.dp-opc { display: flex; flex-wrap: wrap; gap: 10px; }
.dp-op { display: inline-flex; gap: 10px; align-items: center; min-height: 52px; padding: 8px 16px; border: 2px solid var(--dp-sup); border-radius: var(--dp-radio); cursor: pointer; }
.dp-op:has(input:checked) { border-color: var(--dp-texto); font-weight: 700; }
.dp-op input { margin: 0; }

/* paso 5 */
.dp-resumen { font-size: 1.2rem; }
.dp-saludo { margin: 14px 0 0; padding: 14px 18px; background: var(--dp-sup); border-left: 6px solid var(--dp-acento); max-width: 34rem; }
.dp-saludo figcaption { font-weight: 700; color: var(--dp-suave); margin-bottom: 4px; }
.dp-saludo blockquote { margin: 0; font-size: 1.2rem; line-height: 1.55; }
.dp-llama { margin: 26px 0 0; padding: 20px 0 0; border-top: 2px solid var(--dp-borde); }
.dp-llama-t { margin: 0 0 6px; font: 700 1.6rem/1.2 var(--dp-titulo); }
.dp-tel { display: flex; max-width: 22rem; }
.dp-tel-pre { flex: none; white-space: nowrap; display: inline-flex; align-items: center; padding: 0 12px; font-weight: 700; border: 2px solid var(--dp-borde); border-right: 0; border-radius: var(--dp-radio) 0 0 var(--dp-radio); background: var(--dp-sup); }
.dp-tel .dp-in { border-radius: 0 var(--dp-radio) var(--dp-radio) 0; letter-spacing: .04em; }
.dp-casilla { display: flex; gap: 12px; align-items: flex-start; max-width: 34rem; margin: 14px 0 0; cursor: pointer; }
.dp-oblig { color: var(--dp-suave); font-weight: 400; }
.dp-turnstile { margin-top: 18px; min-height: 0; max-width: 30rem; }

/* ───────── «Mira tu teléfono» ───────── */
.dp-llamada { display: grid; gap: 22px 28px; grid-template-columns: 1fr; align-items: start; }
@container (min-width: 600px) { .dp-llamada { grid-template-columns: 240px 1fr; } .dp-fin { grid-column: 1 / -1; } }
.dp-movil { justify-self: center; width: 230px; padding: 12px; background: #14171a; border-radius: 34px; border: 2px solid #3a4046; }
.dp-movil-p { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 400px; padding: 22px 14px 18px; border-radius: 24px; background: #20262b; color: #f2f4f3; text-align: center; }
.dp-movil-arriba { font-size: 1.125rem; color: #c9d1d6; }
.dp-movil-num { font: 700 1.6rem/1.2 var(--dp-fuente); letter-spacing: .02em; }
.dp-movil-de { font-size: 1.125rem; line-height: 1.35; color: #c9d1d6; }
.dp-movil-halo { width: 150px; margin: 6px 0; }
.dp-movil-est { font-weight: 700; font-size: 1.125rem; color: #f2f4f3; }
.dp-movil-bot { display: flex; gap: 46px; margin-top: auto; padding-top: 12px; }
.dp-movil-bot i { display: block; width: 52px; height: 52px; border-radius: 50%; }
.dp-movil-no { background: #c4321f; }
.dp-movil-si { background: #2e9a55; }
.dp-movil.dp-suena { animation: dp-suena 1.1s ease-in-out infinite; }
.dp-movil.dp-suena .dp-movil-si { animation: dp-late 1.1s ease-in-out infinite; }
@keyframes dp-suena { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-2.5deg); } 20%, 40% { transform: rotate(2.5deg); } }
@keyframes dp-late { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 154, 85, .6); } 50% { box-shadow: 0 0 0 12px rgba(46, 154, 85, 0); } }
@media (prefers-reduced-motion: reduce) { .dp-movil.dp-suena, .dp-movil.dp-suena .dp-movil-si { animation: none; } }
.dp-mira { font-size: clamp(1.9rem, 6cqi, 2.6rem); }
.dp-mira-p { font-size: 1.2rem; }
.dp-fases { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 16px 0 10px; padding: 0; list-style: none; }
.dp-fase { position: relative; padding: 6px 14px 6px 0; margin-right: 10px; color: var(--dp-suave); font-size: 1.125rem; border-bottom: 4px solid var(--dp-sup); }
.dp-fase.hecha { color: var(--dp-texto); border-bottom-color: var(--dp-suave); }
.dp-fase.hecha::before { content: ""; display: inline-block; width: .42em; height: .78em; margin: 0 .45em 0 .1em; border: solid currentColor; border-width: 0 3px 3px 0; transform: translateY(-.1em) rotate(40deg); }
.dp-fase.ahora { color: var(--dp-texto); font-weight: 800; border-bottom-color: var(--dp-acento); }
/* final sin conversación (buzón, no lo cogió…): sin ✓, con una raya y el borde de aviso */
.dp-fase.corta { color: var(--dp-texto); font-weight: 800; border-bottom-color: #8a6d00; }
.dp-fase.corta::before { content: ""; display: inline-block; width: .7em; height: 0; margin: 0 .4em .25em .1em; border-top: 3px solid currentColor; vertical-align: middle; }
@container (max-width: 599px) {
  .dp-llamada { gap: 12px; }
  .dp-movil { width: min(100%, 250px); padding: 8px; border-radius: 28px; }
  .dp-movil-p { min-height: 0; gap: 2px; padding: 12px 12px 12px; border-radius: 20px; }
  .dp-movil-arriba { display: none; }
  .dp-movil-num { font-size: 1.3rem; }
  .dp-movil-de { font-size: 1rem; line-height: 1.25; }
  .dp-movil-halo { width: 76px; margin: 2px 0; }
  .dp-movil-bot { gap: 36px; padding-top: 6px; margin-top: 4px; }
  .dp-movil-bot i { width: 44px; height: 44px; }
  .dp-mira { font-size: 1.7rem; margin-top: 0; }
  .dp-fases { gap: 6px 8px; margin: 12px 0 8px; }
  .dp-fase { flex: 1 1 auto; margin: 0; padding: 4px 4px; font-size: 1rem; text-align: center; white-space: nowrap; }
  .dp-fase.hecha::before { margin: 0 .3em 0 0; }
  .dp-llamada .dp-estado { min-height: 0; }
}
.dp-fila-otra { margin-top: 8px; }
.dp-fila-otra + .dp-nota { margin-bottom: 4px !important; }
.dp-estado { font-size: 1.25rem; font-weight: 700; min-height: 2.6em; }
.dp-correo .dp-ok { margin-top: 8px !important; }
.dp-fin { padding-top: 20px; border-top: 2px solid var(--dp-borde); }
.dp-fin-c { font-size: 1.125rem; }
.dp-paq { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
@container (min-width: 600px) { .dp-paq { grid-template-columns: repeat(3, 1fr); } }
.dp-paq-i { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 2px solid var(--dp-sup); border-radius: var(--dp-radio); }
.dp-paq-n { font: 700 1.25rem/1.2 var(--dp-titulo); }
.dp-paq-p { font-weight: 800; font-size: 1.2rem; }
.dp-paq-t { color: var(--dp-suave); }
.dp-fin .dp-b { margin-top: 16px; }

/* en /demo la llamada ocupa el sitio del móvil grande */
.dp-en-escenario > .dp-llamada { container-type: inline-size; padding: clamp(18px, 3vw, 28px); background: var(--d-fondo); color: var(--d-texto); border: 2px solid var(--d-borde); border-radius: var(--d-radio);
  --dp-fondo: var(--d-fondo); --dp-sup: var(--d-sup); --dp-texto: var(--d-texto); --dp-suave: var(--d-suave); --dp-borde: var(--d-borde);
  --dp-acento: var(--d-acento); --dp-sobre: var(--d-sobre); --dp-radio: var(--d-radio); --dp-fuente: var(--d-fuente); --dp-titulo: var(--d-titulo); --dp-foco: var(--d-enlace);
  font: 400 1.125rem/1.6 var(--d-fuente); }
.dp-en-escenario .dp-llamada * { box-sizing: border-box; }
.dp-en-escenario .dp-llamada [hidden] { display: none !important; }
.dp-en-escenario .dp-llamada p { margin: 0 0 12px; }
.dp-en-escenario .dp-llamada a { color: var(--d-texto); }
.dp-en-escenario .dp-llamada :focus-visible { outline: 3px solid var(--d-enlace); outline-offset: 3px; }

/* Sin salto de página (CLS): el hueco del formulario ya tiene su altura antes de que el guion lo pinte */
[data-demo-perfil]:not(.dp) { min-height: 34rem; }

/* Móvil (equipos Q y R, 23-oct-2026): en los sectores el bloque iba dentro de 2-3 cajas con margen, borde y relleno y el texto se
   quedaba en ~236 px de 360. En pantallas estrechas la caja del sector que lo envuelve pierde el relleno y el borde laterales,
   y la demo usa un relleno corto: el texto pasa a ~300 px. */
@media (max-width: 520px) {
  :has(> .s-demo) { padding-left: 0 !important; padding-right: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important; box-shadow: none !important; }
  .s-demo.dp { padding: 18px 14px; margin-left: 0; margin-right: 0; }
}