/* Landing: lo propio de la página de inicio sobre la base «papel» (papel.css,
   que se carga antes): primer plano con marcas y resaltado, maqueta del
   producto, cifras, demo, bloques de color por módulo, mosaico, roles,
   recorrido, pasos, la isla oscura de seguridad, planes, preguntas y cierre.
   La demo (clases demo- de aliviado.css) se adapta con las variables de :root. */

/* Primer plano: pila centrada sobre el lienzo. */
.pa-hero { position: relative; padding: 8.5rem 0 5.5rem; text-align: center; }
.pa-hero__titulo { position: relative; max-width: 58rem; margin: 1.5rem auto 0; color: #000; font-size: clamp(2.6rem, 6.6vw, 4.5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; text-wrap: balance; }
.pa-hero__texto { max-width: 40rem; margin: 1.5rem auto 0; color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.2rem; line-height: 1.56; text-wrap: pretty; }
.pa-confianza { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.5rem 0 0; padding: 0; color: var(--pa-tinta-54); font-size: .84rem; }
.pa-confianza li { display: inline-flex; align-items: center; gap: .35rem; }
.pa-confianza .icono { width: 1rem; height: 1rem; color: #2f6136; }

/* Maqueta del producto: la única pieza con sombra, para separarla del lienzo. */
.pa-producto { position: relative; max-width: 66rem; margin: 4rem auto 0; text-align: left; }
.pa-garabato { position: absolute; left: -1rem; top: -2.4rem; width: 7rem; color: var(--pa-coral); transform: rotate(-8deg); }
.pa-garabato svg { display: block; width: 100%; }
.pa-ventana { overflow: hidden; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); }
.pa-ventana__barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 2.4rem; padding: 0 1rem; border-bottom: 1px solid var(--pa-borde); background: #fbfaf9; }
.lp-ventana__puntos i { background: #e3e1dd; }
.pa-ventana__url { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .8rem; border-radius: 6px; background: var(--pa-lienzo); color: var(--pa-tinta-54); font-size: .72rem; font-weight: 500; }
.pa-ventana__url .icono { width: .75rem; height: .75rem; }
.pa-app { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); color: var(--pa-tinta); font-size: .8125rem; }
.pa-app__lateral { display: flex; flex-direction: column; gap: .1rem; padding: .85rem .6rem; border-right: 1px solid var(--pa-borde); background: #f7f6f3; }
.pa-app__logo { display: block; width: 1.75rem; height: 1.75rem; margin: 0 0 .9rem .45rem; }
.pa-app__logo-svg { display: block; width: 100%; height: 100%; }
.pa-app__nav { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: 6px; color: var(--pa-tinta-60); font-size: .8rem; font-weight: 500; }
.pa-app__nav .icono { width: 1rem; height: 1rem; }
.pa-app__nav--activo { background: rgba(0, 0, 0, .05); color: var(--pa-tinta); }
.pa-app__nav--abajo { margin-top: auto; }
.pa-app__main { min-width: 0; }
.pa-app__cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--pa-borde); }
.pa-paciente { display: flex; align-items: center; gap: .65rem; }
.pa-paciente strong { display: block; font-size: .95rem; font-weight: 600; }
.pa-paciente div span { display: block; color: var(--pa-tinta-54); font-size: .72rem; }
.pa-avatar, .lp-avatar { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 2px solid var(--pa-azul-senal); border-radius: 9999px; background: var(--pa-blanco); color: var(--pa-azul-senal); font-size: .72rem; font-weight: 700; }
.pa-etiquetas { display: flex; flex-wrap: wrap; gap: .35rem; }
.pa-app__cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; padding: 1.1rem 1.25rem 1.25rem; }
.pa-panel { padding: 1rem; border: 1px solid var(--pa-borde); border-radius: 10px; background: var(--pa-blanco); }
.pa-panel__titulo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.pa-panel__titulo strong { font-weight: 600; }
.pa-panel__titulo span { color: var(--pa-tinta-54); font-size: .72rem; }
.pa-buscar { display: flex; align-items: center; gap: .5rem; height: 2.15rem; margin-bottom: .6rem; padding: 0 .7rem; border-radius: 6px; background: var(--pa-lienzo); color: var(--pa-tinta-40); font-size: .75rem; }
.pa-buscar .icono { width: .9rem; height: .9rem; }
.pa-med { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .55rem; border: 1px solid var(--pa-borde); border-radius: 8px; }
.pa-med + .pa-med { margin-top: .4rem; }
.pa-med__icono { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 6px; background: #fff4dc; color: var(--pa-azafran); }
.pa-med__icono .icono { width: 1rem; height: 1rem; }
.pa-med strong { display: block; font-weight: 600; }
.pa-med div > span { display: block; color: var(--pa-tinta-54); font-size: .7rem; }
.pa-med__ok { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 9999px; background: #edf3ec; color: #2f6136; }
.pa-med__ok .icono { width: .75rem; height: .75rem; stroke-width: 2.6; }
.pa-chequeo { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; padding: .6rem .6rem .6rem .75rem; border-radius: 8px; background: #edf3ec; }
.pa-chequeo > .icono { width: 1.1rem; height: 1.1rem; color: #2f6136; }
.pa-chequeo > div { flex: 1; min-width: 0; }
.pa-chequeo strong { display: block; color: #1f4a26; font-size: .76rem; font-weight: 600; }
.pa-chequeo div span { display: block; color: #3d6b45; font-size: .7rem; }
.pa-chequeo__boton { display: inline-flex; align-items: center; gap: .3rem; height: 1.85rem; padding: 0 .7rem; border-radius: 6px; background: var(--pa-azul); color: #fff; font-size: .7rem; font-weight: 500; white-space: nowrap; }
.pa-chequeo__boton .icono { width: .85rem; height: .85rem; }
.pa-lado { display: grid; gap: 1rem; align-content: start; }
.pa-cita { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .4rem .45rem; border-radius: 6px; font-size: .75rem; }
.pa-cita + .pa-cita { margin-top: .2rem; }
.pa-cita b { font-weight: 600; }
.pa-cita > span:not(.pa-tag) { overflow: hidden; color: var(--pa-tinta-60); text-overflow: ellipsis; white-space: nowrap; }
.pa-cita--actual { background: var(--pa-celeste); }
.pa-qr { display: flex; align-items: center; gap: .75rem; }
.pa-qr__codigo { flex: none; width: 3.1rem; height: 3.1rem; padding: .25rem; border: 1px solid var(--pa-borde); border-radius: 6px; color: #000; }
.pa-qr__codigo svg { display: block; width: 100%; height: 100%; }
.pa-qr strong { display: block; font-weight: 600; }
.pa-qr div span { display: block; margin-top: .1rem; color: var(--pa-tinta-54); font-size: .7rem; line-height: 1.45; }
.pa-flotante { position: absolute; z-index: 1; display: grid; gap: .2rem; padding: .7rem .85rem; border: 1px solid var(--pa-borde); border-radius: 8px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); font-size: .76rem; color: var(--pa-tinta-54); animation: pa-flotar 6s ease-in-out infinite; }
.pa-flotante strong { color: var(--pa-tinta); font-size: .85rem; font-weight: 600; }
.pa-flotante--izq { left: -2.25rem; top: 46%; transform: rotate(-2deg); }
.pa-flotante--der { right: -1.5rem; bottom: -4.25rem; transform: rotate(2deg); animation-delay: -3s; }
@keyframes pa-flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* Demostración: misma lógica (demo.js), ahora en el lienzo de papel. */
.demo__pestanas { border: 1px solid var(--pa-borde); border-radius: 10px; box-shadow: none; }
.demo__pestana { height: 2.35rem; border-radius: 7px; font-weight: 500; }
.demo__pestana:hover { background: rgba(0, 0, 0, .04); }
.demo__pestana[aria-selected="true"] { background: #000; color: #fff; box-shadow: none; }
.demo__guia > .icono { color: var(--pa-azafran); }
.demo__ventana { border: 1px solid var(--pa-borde); border-radius: 12px; box-shadow: var(--pa-sombra-maqueta); }
.demo__barra { background: #fbfaf9; }
.demo__url { border: 0; border-radius: 6px; background: var(--pa-lienzo); }
.demo__panel { background: var(--pa-lienzo); }
.demo-caja { border-color: var(--pa-borde); border-radius: 10px; }
.demo .form-input { border-color: var(--pa-borde-fuerte); border-radius: 6px; }
.demo .btn--primario kbd { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .15); color: #fff; }

/* Funcionalidades: índice en píldoras, bloques alternos y mosaico. */
.pa-indice { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; max-width: 62rem; margin: -1rem auto 4rem; }
.pa-indice a { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 9999px; background: var(--pa-blanco); box-shadow: inset 0 0 0 1px var(--pa-borde); color: var(--pa-tinta-60); font-size: .84rem; font-weight: 500; text-decoration: none; transition: color 200ms ease, box-shadow 200ms ease; }
.pa-indice a:hover { color: var(--pa-tinta); box-shadow: inset 0 0 0 1px var(--pa-borde-fuerte); }
.pa-indice .icono { width: .95rem; height: .95rem; color: var(--pa-azul); }

.pa-bloques { display: grid; gap: 5rem; }
.pa-bloque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; scroll-margin-top: 6rem; }
.pa-bloque--invertido .pa-bloque__texto { order: 2; }
.pa-bloque h3 { color: #000; font-size: clamp(1.9rem, 3.3vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.pa-bloque__resumen { margin: .9rem 0 1.5rem; color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.15rem; line-height: 1.56; }
.pa-bloque__probar { margin-top: 1.5rem; }

/* Al aparecer, las tarjetas caen en cascada con un rebote corto. */
.con-revelar .pa-bloque .pa-tarea { opacity: 0; transform: translateY(16px) rotate(-1.5deg); transition: opacity 400ms ease, transform 650ms var(--pa-resorte); transition-delay: calc(var(--i) * 110ms + 200ms); }
.con-revelar .pa-bloque.revelado .pa-tarea { opacity: 1; transform: none; }

.pa-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 5rem; }
.pa-tarjeta--ancha { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.pa-tarjeta--ancha h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -.03em; }

/* Hoja de receta impresa (dibujo). */
.pa-hoja { position: relative; display: grid; gap: .55rem; padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--pa-borde); border-radius: 4px; background: #fffdf8; box-shadow: var(--pa-sombra-maqueta); transform: rotate(1.5deg); color: #000; font-size: .78rem; }
.pa-hoja__cabecera { padding-bottom: .6rem; border-bottom: 1px solid var(--pa-borde); }
.pa-hoja__cabecera strong { display: block; font-size: .95rem; font-weight: 600; }
.pa-hoja__cabecera span { color: var(--pa-tinta-54); }
.pa-hoja__alergia { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; padding: 0 .5rem; border-radius: 4px; background: #fdebec; color: #9f2f2d; font-weight: 500; line-height: 1.5rem; }
.pa-hoja__alergia .icono { width: .85rem; height: .85rem; }
.pa-hoja__rx { font-family: var(--pa-serif); font-size: 1.6rem; line-height: 1; }
.pa-hoja__linea { height: .5rem; border-radius: 9999px; background: #ece9e4; }
.pa-hoja__linea--corta { width: 60%; }
.pa-hoja__cierre { margin-top: .25rem; color: var(--pa-tinta-54); font-size: .72rem; }
.pa-hoja__qrs { display: flex; gap: 1.25rem; margin-top: .35rem; }
.pa-hoja__qrs > span { display: grid; justify-items: center; gap: .3rem; color: var(--pa-tinta-60); font-size: .7rem; font-weight: 500; }
.pa-hoja__qr { width: 3.5rem; height: 3.5rem; padding: .2rem; border: 1px solid var(--pa-borde); border-radius: 4px; background: #fff; }
.pa-hoja__qr svg { display: block; width: 100%; height: 100%; }
.pa-hoja__corte { margin-top: .5rem; padding-top: .5rem; border-top: 1.5px dashed rgba(0, 0, 0, .2); color: var(--pa-tinta-40); font-size: .7rem; }

/* Roles: a la izquierda se elige el rol; a la derecha, cómo le aparece Aliviado.
   Cada radio (oculto) muestra su panel con el selector de hermanos (~). */
.pa-roles { margin-top: 5rem; }
.pa-roles__cabecera { max-width: 44rem; margin-bottom: 2rem; }
.pa-roles__cabecera h3 { color: #000; font-size: clamp(1.9rem, 3.3vw, 2.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.pa-roles__cabecera > p:last-child { margin-top: .75rem; color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.15rem; line-height: 1.56; }
.pa-roles__radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pa-roles__cuerpo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.25rem; align-items: stretch; }
.pa-roles__selector { display: grid; align-content: start; gap: .5rem; }
.pa-roles__pregunta { margin: 0 0 .25rem; color: var(--pa-tinta-54); font-size: .875rem; font-weight: 500; }
.pa-rol { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: transparent; cursor: pointer; transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.pa-rol:hover { border-color: var(--pa-borde-fuerte); background: rgba(255, 255, 255, .6); }
.pa-rol .pa-marca { transition: transform 300ms var(--pa-resorte); }
.pa-rol__texto strong { display: block; color: #000; font-size: 1.02rem; font-weight: 600; }
.pa-rol__texto span { display: block; margin-top: .15rem; color: var(--pa-grafito); font-size: .86rem; line-height: 1.45; }
.pa-rol__flecha { width: 1rem; height: 1rem; color: var(--pa-tinta-40); opacity: 0; transform: translateX(-4px); transition: opacity 200ms ease, transform 200ms ease; }

/* Rol elegido: tarjeta blanca con borde azul y su panel a la vista. */
#pa-rol-propietario:checked ~ .pa-roles__cuerpo .pa-rol--propietario,
#pa-rol-doctor:checked ~ .pa-roles__cuerpo .pa-rol--doctor,
#pa-rol-secretaria:checked ~ .pa-roles__cuerpo .pa-rol--secretaria,
#pa-rol-lectura:checked ~ .pa-roles__cuerpo .pa-rol--lectura { border-color: var(--pa-azul); background: var(--pa-blanco); box-shadow: inset 0 0 0 1px var(--pa-azul); }
#pa-rol-propietario:checked ~ .pa-roles__cuerpo .pa-rol--propietario .pa-marca,
#pa-rol-doctor:checked ~ .pa-roles__cuerpo .pa-rol--doctor .pa-marca,
#pa-rol-secretaria:checked ~ .pa-roles__cuerpo .pa-rol--secretaria .pa-marca,
#pa-rol-lectura:checked ~ .pa-roles__cuerpo .pa-rol--lectura .pa-marca { transform: rotate(-8deg) scale(1.06); }
#pa-rol-propietario:checked ~ .pa-roles__cuerpo .pa-rol--propietario .pa-rol__flecha,
#pa-rol-doctor:checked ~ .pa-roles__cuerpo .pa-rol--doctor .pa-rol__flecha,
#pa-rol-secretaria:checked ~ .pa-roles__cuerpo .pa-rol--secretaria .pa-rol__flecha,
#pa-rol-lectura:checked ~ .pa-roles__cuerpo .pa-rol--lectura .pa-rol__flecha { opacity: 1; transform: none; color: var(--pa-azul); }
#pa-rol-propietario:focus-visible ~ .pa-roles__cuerpo .pa-rol--propietario,
#pa-rol-doctor:focus-visible ~ .pa-roles__cuerpo .pa-rol--doctor,
#pa-rol-secretaria:focus-visible ~ .pa-roles__cuerpo .pa-rol--secretaria,
#pa-rol-lectura:focus-visible ~ .pa-roles__cuerpo .pa-rol--lectura { box-shadow: inset 0 0 0 1px var(--pa-azul), var(--anillo); }

.pa-roles__paneles { display: grid; }
.pa-permiso { display: none; min-height: 0; padding: 2rem; }
#pa-rol-propietario:checked ~ .pa-roles__cuerpo .pa-permiso--propietario,
#pa-rol-doctor:checked ~ .pa-roles__cuerpo .pa-permiso--doctor,
#pa-rol-secretaria:checked ~ .pa-roles__cuerpo .pa-permiso--secretaria,
#pa-rol-lectura:checked ~ .pa-roles__cuerpo .pa-permiso--lectura { display: grid; animation: pa-panel 420ms var(--pa-resorte); }
@keyframes pa-panel { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.pa-permiso__app { width: 100%; max-width: 30rem; margin: 0 auto; padding: 1.25rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); }
.pa-permiso__cabecera { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--pa-borde); }
.pa-permiso__cabecera .pa-marca { width: 2.4rem; height: 2.4rem; }
.pa-permiso__cabecera strong { display: block; color: #000; font-size: 1rem; font-weight: 600; }
.pa-permiso__cabecera div span { display: block; color: var(--pa-tinta-54); font-size: .78rem; }

/* El expediente de ejemplo: lo clínico se difumina y se cierra para quien no lo ve. */
.pa-permiso__expediente { position: relative; margin: 1rem 0; padding: .9rem; border-radius: 10px; background: #fbfaf9; box-shadow: inset 0 0 0 1px var(--pa-borde); }
.pa-permiso__paciente { display: flex; align-items: center; gap: .6rem; }
.pa-permiso__paciente strong { display: block; font-size: .9rem; font-weight: 600; }
.pa-permiso__paciente span:not(.pa-avatar) { display: block; color: var(--pa-tinta-54); font-size: .74rem; }
.pa-permiso__paciente .pa-avatar { width: 2rem; height: 2rem; font-size: .66rem; }
.pa-permiso__clinico { display: grid; gap: .5rem; margin-top: .75rem; }
.pa-permiso__clinico p { display: grid; gap: .3rem; margin: 0; padding: .55rem .65rem; border-radius: 8px; background: var(--pa-blanco); box-shadow: inset 0 0 0 1px var(--pa-borde); }
.pa-permiso__clinico b { font-size: .78rem; font-weight: 600; }
.pa-permiso__clinico i { height: .4rem; border-radius: 9999px; background: #ece9e4; }
.pa-permiso__clinico i + i { width: 65%; }
.pa-permiso__expediente--oculto .pa-permiso__clinico { filter: blur(5px); opacity: .55; user-select: none; }
.pa-permiso__candado { position: absolute; left: 50%; top: 62%; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 9999px; background: var(--pa-noche); color: #fff; font-size: .78rem; font-weight: 500; white-space: nowrap; transform: translate(-50%, -50%); }
.pa-permiso__candado .icono { width: .95rem; height: .95rem; color: var(--pa-cielo); }

.pa-permiso__lista { list-style: none; display: grid; margin: 0; padding: 0; }
.pa-permiso__lista li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--pa-borde); font-size: .86rem; animation: pa-fila 380ms ease both; animation-delay: calc(var(--i) * 40ms + 120ms); }
.pa-permiso__lista li:first-child { border-top: 0; }
.pa-permiso__lista li > span:first-child { color: var(--pa-tinta-90); }
.pa-permiso__lista .pa-tag { flex: none; }
.pa-permiso__lista .pa-tag .icono { width: .75rem; height: .75rem; stroke-width: 2.6; }
.pa-permiso__lista .pa-permiso__fila--no > span:first-child { color: var(--pa-tinta-40); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .2); }
@keyframes pa-fila { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* Recorrido del paciente y primeros pasos. */
.pa-recorrido { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; }
.pa-toque { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); transition: border-color 200ms ease; }
.pa-toque:hover { border-color: var(--pa-borde-fuerte); }
.pa-toque__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.pa-toque__numero { color: rgba(0, 0, 0, .12); font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.pa-toque h3 { color: #000; font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.pa-toque p { margin-top: .4rem; color: var(--pa-grafito); font-size: .9rem; line-height: 1.55; }
.pa-toque__via { margin-top: auto; padding-top: 1rem; color: var(--pa-azul); font-size: .8rem; font-weight: 500; }

.pa-pasos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); }
.pa-paso { position: relative; padding: 1.75rem 1.5rem; }
.pa-paso + .pa-paso { border-left: 1px solid var(--pa-borde); }
.pa-paso__numero { position: absolute; top: 1.4rem; right: 1.4rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 9999px; background: var(--pa-lienzo); color: var(--pa-tinta-60); font-size: .76rem; font-weight: 600; }
.pa-paso__icono { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; margin-bottom: 1.25rem; border-radius: 8px; background: var(--pa-celeste); color: var(--pa-azul); }
.pa-paso:nth-child(2) .pa-paso__icono { background: #fff1d6; color: var(--pa-azafran); }
.pa-paso:nth-child(3) .pa-paso__icono { background: #fee4df; color: #c4321d; }
.pa-paso:nth-child(4) .pa-paso__icono { background: #f3ebe5; color: #8a5d43; }
.pa-paso__icono .icono { width: 1.3rem; height: 1.3rem; }
.pa-paso h3 { color: #000; font-size: 1.1rem; font-weight: 600; letter-spacing: -.015em; }
.pa-paso p { margin-top: .45rem; color: var(--pa-grafito); font-size: .9rem; line-height: 1.55; }

/* Seguridad: la isla oscura de la página (medianoche, texto blanco). */
.pa-noche { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; align-items: start; padding: 4rem; border-radius: 12px; background: var(--pa-noche); color: rgba(255, 255, 255, .72); }
.pa-noche h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.pa-noche__intro > p:not(.pa-eyebrow) { margin-top: 1.1rem; color: rgba(255, 255, 255, .72); font-family: var(--pa-serif); font-size: 1.12rem; line-height: 1.56; }
.pa-sello { display: inline-flex; align-items: center; gap: .85rem; margin-top: 2rem; padding: .7rem 1rem .7rem .7rem; border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); font-size: .84rem; text-decoration: none; transition: background 200ms ease; }
.pa-sello:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pa-sello__icono { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 2px solid var(--pa-cielo); border-radius: 9999px; color: var(--pa-cielo); }
.pa-sello__icono .icono { width: 1.1rem; height: 1.1rem; }
.pa-sello__texto strong { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
.pa-sello > .icono { width: 1rem; height: 1rem; transition: transform 200ms ease; }
.pa-sello:hover > .icono { transform: translateX(3px); }
.pa-garantias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.pa-garantia { padding: 1.4rem; background: var(--pa-noche); }
.pa-garantia__icono { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 9999px; background: rgba(91, 155, 255, .16); color: var(--pa-cielo); }
.pa-garantia__icono .icono { width: 1.1rem; height: 1.1rem; }
.pa-garantia strong { display: block; margin-top: .9rem; color: #fff; font-size: 1rem; font-weight: 600; }
.pa-garantia p { margin-top: .35rem; color: rgba(255, 255, 255, .6); font-size: .875rem; line-height: 1.55; }

/* Directorio: panel celeste con la tarjeta de búsqueda encima. */
.pa-directorio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; align-items: center; }
.pa-directorio .pa-encabezado { margin-bottom: 1.75rem; }
.pa-directorio__lienzo { min-height: 0; padding: 2.5rem; }
.pa-directorio__tarjeta { padding: 1.75rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); }
.pa-directorio__cabecera { display: flex; align-items: center; gap: .85rem; }
.pa-directorio__cabecera h3 { color: #000; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.pa-directorio__cabecera p { margin-top: .1rem; color: var(--pa-tinta-54); font-size: .84rem; }
.pa-directorio__tarjeta .buscador-dir { grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.pa-directorio__tarjeta .buscador-dir__campo--texto, .pa-directorio__tarjeta .buscador-dir .btn { grid-column: auto; }
.pa-directorio__tarjeta .form-input { border-color: var(--pa-borde-fuerte); border-radius: 6px; }
.pa-directorio__pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pa-borde); }

/* Planes: tarjetas blancas; la recomendada lleva el borde azul y el único botón relleno. */
.pa-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1rem; align-items: stretch; }
.pa-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.75rem 1.5rem 1.5rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); }
.pa-plan--destacado { border-color: var(--pa-azul); box-shadow: inset 0 0 0 1px var(--pa-azul); }
.pa-plan__encabezado { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.pa-plan__encabezado h3 { margin-right: auto; color: #000; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.pa-plan__cinta { position: absolute; top: -.7rem; left: 1.5rem; padding: 0 .55rem; border-radius: 9999px; background: var(--pa-marigold); color: #000; font-size: .72rem; font-weight: 600; line-height: 1.35rem; white-space: nowrap; }
.pa-plan__descripcion { min-height: 2.9rem; margin-top: .5rem; color: var(--pa-grafito); font-size: .875rem; line-height: 1.45; }
.pa-plan__precio { display: grid; gap: .15rem; min-height: 4.6rem; margin: 1.1rem 0 1.25rem; }
.pa-plan__precio strong { color: #000; font-size: 2.5rem; font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.pa-plan__precio span { color: var(--pa-tinta-54); font-size: .84rem; }
.pa-plan > .btn { height: 2.75rem; }
.pa-plan__grupo { margin: 1.5rem 0 .7rem; padding-top: 1.1rem; border-top: 1px solid var(--pa-borde); color: var(--pa-tinta-54); font-size: .8rem; font-weight: 500; }
.pa-plan__capacidad { display: grid; gap: .1rem; margin: 0; }
.pa-plan__capacidad > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .3rem 0; font-size: .875rem; }
.pa-plan__capacidad dt { color: var(--pa-grafito); }
.pa-plan__capacidad dd { margin: 0; color: #000; font-weight: 600; text-align: right; }
.pa-plan__funciones { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.pa-plan__funciones li { display: flex; align-items: flex-start; gap: .55rem; color: var(--pa-tinta-90); font-size: .875rem; line-height: 1.35; }
.pa-plan__funciones li > .icono { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .05rem; color: var(--pa-azul); stroke-width: 2.6; }
.pa-plan__funciones small { display: block; margin-top: .1rem; color: var(--pa-tinta-54); font-size: .78rem; }
.pa-plan__funciones .pa-plan__no { color: var(--pa-tinta-40); }
.pa-plan__funciones .pa-plan__no > .icono { color: rgba(0, 0, 0, .25); }
.pa-plan__siempre { display: flex; align-items: flex-start; gap: .5rem; margin-top: auto; padding-top: 1.25rem; color: var(--pa-tinta-54); font-size: .78rem; line-height: 1.45; }
.pa-plan__funciones + .pa-plan__siempre { margin-top: 1.25rem; }
.pa-plan__siempre .icono { flex: none; width: .95rem; height: .95rem; margin-top: .05rem; }

.pa-incluido { margin-top: 1.25rem; padding: 2rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); }
.pa-incluido__cabecera { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; margin-bottom: 1.5rem; }
.pa-incluido__cabecera h3 { color: #000; font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; }
.pa-incluido__cabecera p { max-width: 30rem; color: var(--pa-grafito); font-size: .94rem; }
.pa-incluido__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.pa-incluido__lista li { display: flex; align-items: flex-start; gap: .75rem; color: var(--pa-grafito); font-size: .84rem; line-height: 1.45; }
.pa-incluido__lista strong { display: block; margin-bottom: .1rem; color: #000; font-size: .9rem; font-weight: 600; }
.pa-incluido__icono { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 8px; background: var(--pa-lienzo); color: var(--pa-tinta-60); }
.pa-incluido__icono .icono { width: 1.05rem; height: 1.05rem; }
.pa-planes-nota { margin-top: 1.25rem; color: var(--pa-tinta-54); font-size: .84rem; text-align: center; }

/* Preguntas frecuentes. */
.pa-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
.pa-faq__intro { position: sticky; top: 6rem; }
.pa-faq__intro .pa-encabezado { margin-bottom: 2rem; }
.pa-faq__contacto { display: flex; gap: .9rem; padding: 1.25rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); }
.pa-faq__contacto strong { display: block; color: #000; font-weight: 600; }
.pa-faq__contacto p { margin: .25rem 0 .6rem; color: var(--pa-grafito); font-size: .9rem; }
.pa-preguntas { display: grid; gap: .5rem; }
.pa-pregunta { border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); transition: border-color 200ms ease; }
.pa-pregunta:hover, .pa-pregunta[open] { border-color: var(--pa-borde-fuerte); }
.pa-pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; border-radius: 12px; color: #000; font-size: 1rem; font-weight: 500; list-style: none; cursor: pointer; }
.pa-pregunta summary::-webkit-details-marker { display: none; }
.pa-pregunta summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: linear-gradient(#000, #000) center / .7rem 1.5px no-repeat, linear-gradient(#000, #000) center / 1.5px .7rem no-repeat, var(--pa-lienzo); transition: transform 300ms var(--pa-resorte), background-color 200ms ease; }
.pa-pregunta[open] summary::after { transform: rotate(45deg); background-color: var(--pa-durazno); }
.pa-pregunta summary:focus-visible { outline: none; box-shadow: var(--anillo); }
.pa-pregunta p { max-width: 44rem; margin: -.25rem 1.25rem 1.25rem; color: var(--pa-grafito); font-size: .94rem; line-height: 1.65; }

@media (max-width: 1140px) {
  .pa-flotante--izq { left: -.5rem; }
  .pa-incluido__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .pa-app { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .pa-app__nav { justify-content: center; font-size: 0; }
  .pa-app__logo { margin-left: .2rem; }
  .pa-app__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pa-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-roles__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pa-roles__selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-roles__pregunta { grid-column: 1 / -1; }
  .pa-bloque, .pa-noche, .pa-directorio, .pa-faq { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .pa-bloque--invertido .pa-bloque__texto { order: 0; }
  .pa-tarjeta--ancha { grid-template-columns: minmax(0, 1fr); }
  .pa-hoja { max-width: 26rem; }
  .pa-noche { padding: 3rem 2.5rem; }
  .pa-faq__intro { position: static; }
  .pa-recorrido { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-paso:nth-child(3) { border-left: 0; }
  .pa-paso:nth-child(n + 3) { border-top: 1px solid var(--pa-borde); }
}
@media (max-width: 760px) {
  .pa-hero { padding-top: 6.5rem; }
  .pa-hero__texto { font-size: 1.08rem; }
  .pa-producto { margin-top: 3rem; }
  .pa-flotante, .pa-lado, .pa-app__lateral, .pa-garabato { display: none; }
  .pa-app { grid-template-columns: minmax(0, 1fr); }
  .pa-bloques { gap: 4rem; }
  .pa-indice { justify-content: flex-start; flex-wrap: nowrap; margin: -1rem -1rem 3rem; padding: 0 1rem .25rem; overflow-x: auto; scrollbar-width: none; }
  .pa-indice a { flex: none; }
  .pa-mosaico { grid-template-columns: minmax(0, 1fr); }
  .pa-garantias, .pa-pasos { grid-template-columns: minmax(0, 1fr); }
  .pa-paso + .pa-paso { border-left: 0; border-top: 1px solid var(--pa-borde); }
  .pa-noche { padding: 2.5rem 1.5rem; }
  .pa-permiso.pa-lienzo { padding: 1.25rem .75rem; }
  .pa-permiso__app { padding: 1rem; }
}
@media (max-width: 600px) {
  .pa-app__cabecera, .pa-app__cuerpo { padding-left: .85rem; padding-right: .85rem; }
  .pa-chequeo { flex-wrap: wrap; }
  .pa-recorrido { grid-template-columns: minmax(0, 1fr); }
  .pa-roles__selector { grid-template-columns: minmax(0, 1fr); }
  .pa-rol { padding: .8rem .9rem; }
  .pa-rol__flecha { display: none; }
  .pa-directorio__tarjeta { padding: 1.35rem; }
  .pa-directorio__lienzo { padding: 1rem; }
  .pa-plan { padding: 1.5rem 1.25rem 1.25rem; }
  .pa-incluido { padding: 1.4rem; }
  .pa-incluido__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pa-marcas .pa-marca, .pa-resalte, .pa-destello, .pa-flotante, .pa-permiso, .pa-permiso__lista li { animation: none !important; }
}
@media print {
  .pa-flotante, .pa-destello { animation: none; }
  .con-revelar .pa-bloque .pa-tarea { opacity: 1; transform: none; }
}