/*
 * Página pública de UNO (portada, registro, recuperar contraseña, términos), fuera del panel. Mobile-first, tema claro.
 * Colores: solo los tokens de colores-uno.css (azul UNO como único acento). Fuente: Cerebri Sans local
 * (cms/assets/fonts, compartidas con el panel), sin servicios externos. Radios: tarjetas 18px, botones y campos 12px, etiquetas en píldora.
 * Movimiento: solo transform/opacity, <= 600 ms, nada en bucle; todo se apaga con prefers-reduced-motion.
 */
@font-face { font-family: 'Cerebri Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(../../cms/assets/fonts/cerebrisans-regular.woff2) format('woff2'); }
@font-face { font-family: 'Cerebri Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url(../../cms/assets/fonts/cerebrisans-semibold.woff2) format('woff2'); }

.sitio {
  --s-azul: var(--uno-azul);
  --s-tinta: var(--uno-tinta);
  --s-tinta-2: var(--uno-tinta-2);
  --s-superficie: var(--uno-superficie);
  --s-tinte: rgba(var(--uno-azul-rgb), .04);
  --s-borde: rgba(var(--uno-tinta-rgb), .1);
  --s-borde-campo: rgba(var(--uno-tinta-rgb), .38);
  --s-radio: 18px;
  --s-radio-sm: 12px;
  --s-sombra: 0 1px 2px rgba(var(--uno-tinta-rgb), .05), 0 28px 56px -28px rgba(var(--uno-azul-rgb), .32);
  --s-curva: cubic-bezier(.16, 1, .3, 1);
  margin: 0;
  background: var(--s-superficie);
  color: var(--s-tinta);
  font-family: 'Cerebri Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(.sitio) *, :where(.sitio) *::before, :where(.sitio) *::after { box-sizing: border-box; }
:where(.sitio) img { max-width: 100%; height: auto; display: block; }
:where(.sitio) a { color: var(--s-azul); text-underline-offset: 3px; }
:where(.sitio) :where(h1, h2, h3) { margin: 0; font-weight: 600; line-height: 1.15; color: var(--s-tinta); }
:where(.sitio) p { margin: 0; }
:where(.sitio) main { display: block; outline: none; }
.sitio :focus-visible { outline: 3px solid rgba(var(--uno-azul-rgb), .45); outline-offset: 2px; }
.sitio--simple { background: var(--uno-fondo); }

.sitio-oculto { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sitio-saltar { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--s-radio-sm); background: var(--s-azul); color: #fff !important; font-weight: 600; text-decoration: none; transition: top .2s; }
.sitio-saltar:focus { top: 12px; }

.sitio-contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.sitio-contenedor--angosto { max-width: 820px; }
@media (min-width: 768px) { .sitio-contenedor { padding-inline: 24px; } }

/* ---------- Botones ---------- */
.sitio-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1.5px solid transparent; border-radius: var(--s-radio-sm);
  font: inherit; font-weight: 600; font-size: .9375rem; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .15s var(--s-curva), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.sitio-boton:active { transform: scale(.97); }
.sitio-boton[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.sitio-boton--primario { background: var(--s-azul); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(var(--uno-azul-rgb), .7); }
.sitio-boton--fantasma { background: transparent; border-color: rgba(var(--uno-azul-rgb), .28); color: var(--s-azul) !important; }
.sitio-boton--blanco { background: var(--s-superficie); color: var(--s-azul) !important; }
.sitio-boton--contorno-blanco { border-color: rgba(255, 255, 255, .6); color: #fff !important; }
.sitio-boton--grande { min-height: 54px; padding: 0 26px; font-size: 1rem; }
.sitio-boton--ancho { width: 100%; }
@media (hover: hover) {
  .sitio-boton--primario:hover { background: var(--uno-azul-hover); }
  .sitio-boton--fantasma:hover { background: rgba(var(--uno-azul-rgb), .06); border-color: rgba(var(--uno-azul-rgb), .45); }
  .sitio-boton--blanco:hover { background: rgba(255, 255, 255, .9); }
  .sitio-boton--contorno-blanco:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
}
.sitio-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.sitio-acciones--centro { justify-content: center; }
@media (max-width: 479.98px) {
  .sitio-acciones > .sitio-boton { flex: 1 1 100%; white-space: normal; }
}

/* ---------- Barra superior ---------- */
.sitio-barra { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.sitio-barra--sombra { border-bottom-color: var(--s-borde); box-shadow: 0 8px 24px -20px rgba(var(--uno-tinta-rgb), .5); }
.sitio-barra__fila { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.sitio-barra__logo { display: inline-flex; align-items: center; min-height: 48px; margin-right: auto; }
.sitio-barra__logo img { width: auto; height: 30px; }
.sitio-barra__menu { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -8px; border: 0; border-radius: var(--s-radio-sm); background: transparent; color: var(--s-tinta); font-size: 1.75rem; cursor: pointer; }
.sitio-barra__menu:active { transform: scale(.94); }
.sitio-barra__simple { display: flex; align-items: center; gap: 12px; }
.sitio-barra__pregunta { display: none; color: var(--s-tinta-2); font-size: .9375rem; }
@media (min-width: 560px) { .sitio-barra__pregunta { display: inline; } }
.sitio-barra__simple .sitio-boton { min-height: 44px; padding: 0 16px; }

.sitio-nav { display: none; }
.sitio-nav a:not(.sitio-boton) { display: flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--s-tinta); font-weight: 600; text-decoration: none; }
.sitio-nav--abierta {
  display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
  padding: 8px 16px 20px; background: var(--s-superficie); border-bottom: 1px solid var(--s-borde); box-shadow: 0 24px 40px -24px rgba(var(--uno-tinta-rgb), .45);
  animation: sitio-baja .22s var(--s-curva) both;
}
.sitio-nav--abierta a:not(.sitio-boton) { border-bottom: 1px solid var(--s-borde); }
.sitio-nav__acciones { display: grid; gap: 10px; margin-top: 16px; }
@keyframes sitio-baja { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) {
  .sitio-barra__menu { display: none; }
  .sitio-nav, .sitio-nav--abierta { display: flex; flex-direction: row; align-items: center; gap: 22px; position: static; padding: 0; background: none; border: 0; box-shadow: none; animation: none; }
  .sitio-nav a:not(.sitio-boton) { border: 0 !important; font-size: .9375rem; color: var(--s-tinta-2); }
  .sitio-nav a:not(.sitio-boton):hover { color: var(--s-azul); }
  .sitio-nav__acciones { display: flex; gap: 10px; margin: 0 0 0 8px; }
  .sitio-nav__acciones .sitio-boton { min-height: 44px; padding: 0 16px; }
}

/* ---------- Portada (inicio) ---------- */
.portada { padding: 28px 0 56px; overflow: hidden; background: linear-gradient(180deg, rgba(var(--uno-azul-rgb), .055), rgba(var(--uno-azul-rgb), 0) 70%); }
.portada__rejilla { display: grid; gap: 40px; align-items: center; }
.sitio-etiqueta { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: rgba(var(--uno-azul-rgb), .09); color: var(--s-azul); font-size: .875rem; font-weight: 600; }
.portada__titulo { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 2.85rem); line-height: 1.08; letter-spacing: -.03em; }
.portada__titulo > span { display: block; color: var(--s-azul); }
.portada__sub { margin: 18px 0 28px; max-width: 34em; color: var(--s-tinta-2); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; }
.portada__visual { position: relative; padding: 0 18px 30px 0; }
.portada__telefono { position: absolute; right: 0; bottom: 0; width: 31%; max-width: 210px; }
@media (min-width: 960px) {
  .portada { padding: 56px 0 88px; }
  .portada__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; }
  .portada__visual { padding: 0 28px 44px 0; }
}

/* Marcos de las capturas (las imágenes son capturas reales del sistema) */
.marco-escritorio { margin: 0; overflow: hidden; border: 1px solid var(--s-borde); border-radius: 14px; background: var(--uno-fondo); box-shadow: var(--s-sombra); }
.marco-escritorio__barra { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 12px; background: var(--s-superficie); border-bottom: 1px solid var(--s-borde); }
.marco-escritorio__barra span { width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--uno-tinta-rgb), .16); }
.marco-escritorio--plano { box-shadow: 0 20px 44px -30px rgba(var(--uno-tinta-rgb), .45); }
.marco-telefono { margin: 0; padding: 6px; border-radius: 30px; background: var(--s-tinta); box-shadow: 0 30px 60px -24px rgba(var(--uno-tinta-rgb), .55); }
.marco-telefono img { border-radius: 24px; }

/* ---------- Secciones ---------- */
.sitio-seccion { padding: 64px 0; }
.sitio-seccion--tinte { background: var(--s-tinte); }
@media (min-width: 960px) { .sitio-seccion { padding: 96px 0; } }
.sitio-cabeza { max-width: 720px; margin-bottom: 36px; }
.sitio-cabeza--centro { margin-inline: auto; text-align: center; }
.sitio-cabeza--centro .sitio-intro { margin-inline: auto; }
.sitio-titulo { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); letter-spacing: -.02em; line-height: 1.12; }
.sitio-titulo--chico { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.sitio-intro { margin-top: 12px; color: var(--s-tinta-2); font-size: 1.0625rem; max-width: 60ch; }

.sitio-lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sitio-lista-check li { position: relative; padding-left: 30px; color: var(--s-tinta-2); }
.sitio-lista-check li::before { content: "\f012c"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--uno-azul-rgb), .1); color: var(--s-azul); font: 13px/20px "Material Design Icons"; text-align: center; }
.sitio-lista-check--grande li { font-size: 1.0625rem; color: var(--s-tinta); }

/* Problemas → soluciones */
.problemas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 768px) { .problemas { grid-template-columns: 1fr 1fr; gap: 16px; } }
.problema { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 20px; border: 1px solid var(--s-borde); border-radius: var(--s-radio); background: var(--s-superficie); }
.problema__icono { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--s-radio-sm); background: rgba(var(--uno-azul-rgb), .08); color: var(--s-azul); font-size: 1.375rem; }
.problema__antes { font-weight: 600; color: var(--s-tinta); }
.problema__ahora { color: var(--s-tinta-2); }
.problema__con { color: var(--s-azul); font-weight: 600; }

/* Funcionalidades */
.funcion { display: grid; gap: 32px; align-items: center; margin-bottom: 72px; }
@media (min-width: 960px) {
  .funcion { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-bottom: 96px; }
  .funcion--invertida .funcion__visual { order: -1; }
}
.funcion__titulo { display: flex; align-items: center; gap: 12px; font-size: 1.375rem; letter-spacing: -.01em; }
.funcion__titulo i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--s-radio-sm); background: rgba(var(--uno-azul-rgb), .09); color: var(--s-azul); font-size: 1.375rem; }
.funcion__desc { margin: 14px 0 18px; color: var(--s-tinta-2); font-size: 1.0625rem; }
.funcion__beneficio { margin-top: 20px; padding-left: 14px; border-left: 3px solid var(--s-azul); color: var(--s-tinta); font-weight: 600; }
.funcion__visual--telefono { display: flex; justify-content: center; }
.funcion__visual--telefono .marco-telefono { width: min(68%, 260px); }
@media (min-width: 960px) { .funcion__texto .funcion__titulo { font-size: 1.75rem; } }

/* Mosaico (bento): 6 celdas exactas. 1 col en el teléfono, 2 en tablet, 3 en escritorio. */
.mosaico { display: grid; gap: 16px; grid-auto-flow: dense; }
.mosaico__celda { display: flex; flex-direction: column; gap: 4px; padding: 24px; border: 1px solid var(--s-borde); border-radius: var(--s-radio); background: var(--s-superficie); min-width: 0; }
.mosaico__celda .funcion__titulo { font-size: 1.1875rem; }
.mosaico__celda .funcion__desc { margin: 12px 0 0; font-size: 1rem; }
.mosaico__texto .sitio-lista-check { margin-top: 16px; }
.mosaico__celda--tinte { background: rgba(var(--uno-azul-rgb), .06); border-color: rgba(var(--uno-azul-rgb), .14); }
.mosaico__celda--azul { background: var(--s-azul); border-color: var(--s-azul); }
.mosaico__celda--azul .funcion__titulo, .mosaico__celda--azul .funcion__desc { color: #fff; }
.mosaico__celda--azul .funcion__titulo i { background: rgba(255, 255, 255, .16); color: #fff; }
.mosaico__celda--ancha { display: grid; gap: 24px; align-items: center; overflow: hidden; }
.mosaico__telefono { width: min(70%, 240px); justify-self: center; margin-bottom: -60px; }
@media (min-width: 600px) {
  .mosaico__celda--ancha { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); padding-bottom: 0; }
  .mosaico__celda--ancha .mosaico__texto { padding-bottom: 24px; }
  .mosaico__telefono { width: 100%; align-self: end; margin: 0 0 -80px; }
}
@media (min-width: 768px) {
  .mosaico { grid-template-columns: 1fr 1fr; }
  .mosaico__celda--ancha { grid-column: span 2; }
  .mosaico__celda:last-child { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaico__celda--ancha { grid-column: span 2; grid-row: span 2; }
  .mosaico__celda:last-child { grid-column: auto; }
}

/* Demostración con pestañas */
.demo__pestanas { display: flex; gap: 8px; margin: 0 -16px 18px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
.demo__pestanas::-webkit-scrollbar { display: none; }
.demo__pestanas button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1.5px solid var(--s-borde); border-radius: 999px; background: var(--s-superficie); color: var(--s-tinta-2); font: inherit; font-weight: 600; font-size: .9375rem; cursor: pointer; scroll-snap-align: start; transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--s-curva); }
.demo__pestanas button:active { transform: scale(.97); }
.demo__pestanas button[aria-selected="true"] { background: var(--s-azul); border-color: var(--s-azul); color: #fff; }
@media (hover: hover) { .demo__pestanas button[aria-selected="false"]:hover { border-color: rgba(var(--uno-azul-rgb), .4); color: var(--s-azul); } }
@media (min-width: 768px) { .demo__pestanas { flex-wrap: wrap; margin: 0 0 22px; padding: 0; overflow: visible; } }
.demo__panel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: var(--uno-fondo); }
.demo__panel--entra { animation: sitio-aparece .35s var(--s-curva) both; }
@keyframes sitio-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Cómo funciona */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.paso { padding: 26px 24px; border: 1px solid var(--s-borde); border-radius: var(--s-radio); background: var(--s-superficie); }
.paso__numero { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--s-azul); color: #fff; font-weight: 600; }
.paso h3 { font-size: 1.25rem; margin-bottom: 8px; }
.paso p { color: var(--s-tinta-2); }

/* Beneficios y para quién */
.beneficios { display: grid; gap: 40px; }
@media (min-width: 960px) { .beneficios { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.beneficios__items { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 600px) { .beneficios__items { grid-template-columns: 1fr 1fr; gap: 24px 28px; } }
.beneficios__items li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; color: var(--s-tinta-2); }
.beneficios__items i { color: var(--s-azul); font-size: 1.5rem; line-height: 1.1; }
.beneficios__items strong { color: var(--s-tinta); font-weight: 600; }
.para-quien { padding: 28px 24px; border: 1px solid var(--s-borde); border-radius: var(--s-radio); background: var(--s-superficie); }
.para-quien__tipos { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.para-quien__tipos li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(var(--uno-azul-rgb), .07); color: var(--s-tinta); font-weight: 600; }
.para-quien__tipos i { color: var(--s-azul); font-size: 1.25rem; }
.para-quien__nota { color: var(--s-tinta-2); font-size: .9375rem; }

/* Planes */
.planes { display: grid; gap: 18px; max-width: 900px; margin-inline: auto; }
@media (min-width: 768px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 28px 24px; border: 1px solid var(--s-borde); border-radius: var(--s-radio); background: var(--s-superficie); }
.plan .sitio-lista-check { flex: 1; }
.plan--destacado { border: 2px solid var(--s-azul); box-shadow: var(--s-sombra); }
.plan__nombre { font-size: 1.25rem; }
.plan__precio { font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--s-tinta); }
.plan__precio span { font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--s-tinta-2); }
.plan__precio--pendiente { font-size: 1.625rem; color: var(--s-tinta-2); }
.planes__nota { max-width: 70ch; margin: 24px auto 0; color: var(--s-tinta-2); font-size: .9375rem; text-align: center; }

/* Preguntas frecuentes */
.preguntas { margin-top: 28px; border-top: 1px solid var(--s-borde); }
.pregunta { border-bottom: 1px solid var(--s-borde); }
.pregunta summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.0625rem; color: var(--s-tinta); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary i { flex: none; font-size: 1.5rem; color: var(--s-azul); transition: transform .25s var(--s-curva); }
.pregunta[open] summary i { transform: rotate(180deg); }
.pregunta p { padding: 0 0 20px; color: var(--s-tinta-2); max-width: 68ch; }

/* Llamada final */
.cierre-cta { padding: 0 0 72px; }
.sitio-seccion--tinte + .cierre-cta { padding-top: 72px; background: linear-gradient(var(--s-tinte), var(--s-tinte)) top / 100% 50% no-repeat; }
.cierre-cta__caja { padding: 48px 24px; border-radius: 24px; background: var(--s-azul); text-align: center; color: #fff; box-shadow: 0 30px 60px -30px rgba(var(--uno-azul-rgb), .8); }
.cierre-cta h2 { max-width: 22ch; margin: 0 auto; color: #fff; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem); letter-spacing: -.02em; }
.cierre-cta p { margin: 14px auto 28px; max-width: 46ch; color: rgba(255, 255, 255, .86); font-size: 1.0625rem; }
@media (min-width: 768px) { .cierre-cta__caja { padding: 64px 48px; } }

/* Pie */
.sitio-pie { padding: 56px 0 24px; background: var(--s-tinta); color: rgba(255, 255, 255, .72); font-size: .9375rem; }
.sitio-pie__rejilla { display: grid; gap: 32px; }
@media (min-width: 768px) { .sitio-pie__rejilla { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.sitio-pie__marca img { width: auto; height: 32px; margin-bottom: 16px; }
.sitio-pie__marca p { max-width: 40ch; }
.sitio-pie__col h2 { margin-bottom: 8px; color: #fff; font-size: .9375rem; }
.sitio-pie__col a { display: flex; align-items: center; min-height: 40px; color: rgba(255, 255, 255, .78); text-decoration: none; overflow-wrap: anywhere; }
.sitio-pie__col a:hover { color: #fff; text-decoration: underline; }
.sitio-pie__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .875rem; }

/* ---------- Registro, recuperar contraseña, confirmar ---------- */
.sitio-acceso { padding: 28px 0 64px; }
.sitio-acceso__rejilla { display: grid; gap: 24px; align-items: start; }
.sitio-acceso__rejilla--sola { max-width: 540px; }
@media (min-width: 960px) {
  .sitio-acceso { padding: 56px 0 96px; }
  .sitio-acceso__rejilla:not(.sitio-acceso__rejilla--sola) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
}
.sitio-acceso__tarjeta { padding: 26px 20px; border: 1px solid var(--s-borde); border-radius: var(--s-radio); background: var(--s-superficie); box-shadow: 0 20px 44px -32px rgba(var(--uno-tinta-rgb), .45); }
@media (min-width: 480px) { .sitio-acceso__tarjeta { padding: 32px 30px; } }
.sitio-acceso__titulo { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); letter-spacing: -.015em; }
.sitio-acceso__texto { margin: 10px 0 22px; color: var(--s-tinta-2); }
.sitio-acceso__icono { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: rgba(var(--uno-azul-rgb), .09); color: var(--s-azul); font-size: 1.75rem; }
.sitio-acceso__icono--aviso { background: var(--uno-aviso-fondo); color: var(--uno-aviso-texto); }
.sitio-acceso .sitio-lista-check { margin-bottom: 24px; }
.sitio-acceso__lado { padding: 28px 24px; border-radius: var(--s-radio); background: rgba(var(--uno-azul-rgb), .06); }
.sitio-acceso__lado h2 { margin-bottom: 18px; font-size: 1.25rem; }
.sitio-acceso__nota { margin-top: 22px; color: var(--s-tinta-2); font-size: .9375rem; }
.sitio-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 14px 16px; border-radius: var(--s-radio-sm); background: var(--s-tinte); }
.sitio-datos dt { font-size: .8125rem; font-weight: 400; color: var(--s-tinta-2); }
.sitio-datos dd { margin: 2px 0 0; font-weight: 600; color: var(--s-tinta); overflow-wrap: anywhere; }
.sitio-lista-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: paso; }
.sitio-lista-pasos li { position: relative; padding-left: 40px; color: var(--s-tinta-2); counter-increment: paso; }
.sitio-lista-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--s-azul); color: #fff; font-size: .875rem; font-weight: 600; }
.sitio-lista-pasos strong { color: var(--s-tinta); }

.sitio-form { display: grid; gap: 18px; }
.sitio-form--linea { gap: 10px; padding-top: 20px; border-top: 1px solid var(--s-borde); }
@media (min-width: 480px) { .sitio-form--linea { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.sitio-campo { display: grid; gap: 6px; min-width: 0; }
.sitio-campo label { font-weight: 600; font-size: .9375rem; color: var(--s-tinta); }
.sitio-campo input[type="text"], .sitio-campo input[type="email"], .sitio-campo input[type="password"] {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--s-borde-campo); border-radius: var(--s-radio-sm);
  background: var(--s-superficie); color: var(--s-tinta); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.sitio-campo input:focus { outline: none; border-color: var(--s-azul); box-shadow: 0 0 0 4px rgba(var(--uno-azul-rgb), .16); }
.sitio-campo--error input[type="text"], .sitio-campo--error input[type="email"], .sitio-campo--error input[type="password"] { border-color: var(--uno-peligro-texto); }
.sitio-campo__ayuda { color: var(--s-tinta-2); font-size: .875rem; }
.sitio-campo__error { color: var(--uno-peligro-texto); font-size: .875rem; font-weight: 600; }
.sitio-campo__error:empty { display: none; }
.sitio-clave { position: relative; }
.sitio-clave input { padding-right: 56px !important; }
.sitio-clave__ver { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 48px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--s-tinta-2); font-size: 1.375rem; cursor: pointer; }
.sitio-check { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding-top: 4px; font-weight: 400 !important; color: var(--s-tinta-2) !important; cursor: pointer; }
.sitio-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--s-azul); }
.sitio-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sitio-form__pie { text-align: center; color: var(--s-tinta-2); }
.sitio-form__pie a { display: inline-block; padding: 10px 2px; font-weight: 600; }

.sitio-aviso { margin-bottom: 18px; padding: 12px 14px; border-radius: var(--s-radio-sm); background: var(--uno-info-fondo); color: var(--s-tinta); font-size: .9375rem; }
.sitio-aviso--success { background: var(--uno-exito-fondo); }
.sitio-aviso--error { background: var(--uno-peligro-fondo); color: var(--uno-peligro-texto); font-weight: 600; }
.sitio-aviso--warning { background: var(--uno-aviso-fondo); color: var(--uno-aviso-texto); }

/* ---------- Páginas legales ---------- */
.legal { padding: 40px 0 72px; }
.legal h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); letter-spacing: -.02em; }
.legal h2 { margin: 32px 0 10px; font-size: 1.25rem; }
.legal p, .legal li { color: var(--s-tinta-2); max-width: 72ch; }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; }
.legal__fecha { margin-top: 8px; font-size: .9375rem; }

/* ---------- Movimiento: entrada de la portada y aparición al bajar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: sitio-aparece .6s var(--s-curva) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .sitio-js .revela { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--s-curva), transform .55s var(--s-curva); transition-delay: calc(var(--i, 0) * 80ms); }
  .sitio-js .revela.visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sitio *, .sitio *::before, .sitio *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Marca UNO dentro del texto (.uno-marca en marca-uno.css): en botones y fondos oscuros toma el color del texto. */
.sitio-boton .uno-marca, .cierre-cta .uno-marca, .sitio-pie .uno-marca { --uno-marca-color: currentColor; }