/* El sitio público: la portada. Solo tokens y nombres por papel: ningún color ni medida a mano.
   La capa más expresiva (durazno vivo, fuente de títulos, escala fluida) espera las decisiones de Karina y Luciana. */
.sitio-contenedor {
  max-width: var(--maxw-content);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.sitio-angosto {
  max-width: var(--maxw-prose);
}

/* El enlace para saltar al contenido: invisible hasta que recibe el foco. */
.sitio-saltar:focus {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  width: auto;
  height: auto;
  padding: var(--sp-2) var(--sp-3);
  clip: auto;
  background: var(--surface-raised);
  color: var(--text-primary);
  z-index: 1;
}

/* ── Encabezado ── */
.sitio-encabezado {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}

.sitio-encabezado-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}

.sitio-logo {
  font-size: var(--fs-6);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.sitio-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.sitio-nav a {
  color: var(--text-secondary);
  text-decoration: none;
}

.sitio-nav a:hover,
.sitio-nav a:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

/* «Iniciar sesión»: un desplegable nativo (details), sin JS, con dos caminos (S2 del plan del sitio). */
.sitio-sesion {
  position: relative;
}

.sitio-sesion summary {
  list-style: none;
  cursor: pointer;
}

.sitio-sesion summary::-webkit-details-marker {
  display: none;
}

.sitio-sesion-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-1));
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: var(--sp-2);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  z-index: 1;
}

.sitio-sesion-menu a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.sitio-sesion-menu a:hover,
.sitio-sesion-menu a:focus-visible {
  background: var(--surface-sunken);
}

/* ── Secciones ── */
.sitio-hero {
  padding: var(--sp-8) 0 var(--sp-7);
}

.sitio-hero h1 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-8);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.sitio-entrada {
  max-width: var(--maxw-prose);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-5);
  color: var(--text-secondary);
}

.sitio-antetitulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sitio-seccion {
  padding: var(--sp-7) 0;
}

.sitio-seccion h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-7);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.sitio-seccion--suave {
  background: var(--surface-sunken);
}

.sitio-seccion--oscura {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}

.sitio-seccion--oscura .sitio-antetitulo {
  color: var(--text-inverse);
}

/* ── Planes ── */
.sitio-planes {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: stretch;
}

.sitio-plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.sitio-plan .ui-chip {
  align-self: flex-start;
}

.sitio-plan h3 {
  margin: 0;
  font-size: var(--fs-6);
}

.sitio-plan .ui-btn {
  margin-top: auto;
  justify-content: center;
}

.sitio-plan--destacado {
  border: 2px solid var(--border-emphasis);
}

.sitio-precio {
  margin: 0;
  font-size: var(--fs-7);
  font-weight: var(--fw-bold);
}

.sitio-precio span {
  font-size: var(--fs-3);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}

.sitio-lista {
  margin: 0;
  padding-left: var(--sp-5);
}

.sitio-lista li + li {
  margin-top: var(--sp-1);
}

/* ── Servicios ── */
.sitio-servicios {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.sitio-servicios li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* ── Preguntas ── */
.sitio-preguntas details {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.sitio-preguntas summary {
  cursor: pointer;
  font-weight: var(--fw-semibold);
}

.sitio-preguntas p {
  margin: var(--sp-2) 0 0;
  color: var(--text-secondary);
}

/* ── Contacto y pie ── */
.sitio-contacto {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: start;
}

.sitio-datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}

.sitio-datos dt {
  font-weight: var(--fw-semibold);
}

.sitio-datos dd {
  margin: 0;
}

.sitio-pie {
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-subtle);
}

.sitio-pie-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.sitio-pie p {
  margin: 0;
  color: var(--text-secondary);
}

.sitio-pie nav {
  display: flex;
  gap: var(--sp-4);
}