/*
 * Páginas fijas (patrón A): quiénes somos, equipo, contacto, suscríbete, anúnciate y
 * newsletter. Comparten hoja porque comparten gramática: cabecera con filete, cifras
 * grandes en azul, bloques separados por reglas y ninguna caja innecesaria.
 */

.exxi-cabecera-pagina__img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-top: var(--space-8);
}

.exxi-pagina__texto {
  max-width: 68ch;
  font-family: var(--font-serif);
  /* Explícito: la casa escribe el cuerpo a 500 y el serif no tiene ese peso. */
  font-weight: 400;
  font-size: var(--size-lg);
  line-height: var(--leading-loose);
}

.exxi-pagina__subtitulo {
  font-family: var(--font-sans);
  font-size: var(--size-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: var(--space-8) 0 var(--space-3);
}

.exxi-pagina__aviso {
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .exxi-pagina__dos-columnas {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 60px;
    align-items: start;
  }
}

/* Cifras ------------------------------------------------------------- */

.exxi-pagina__cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: var(--border-width) solid var(--color-border);
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
}

@media (min-width: 900px) { .exxi-pagina__cifras { grid-template-columns: repeat(4, 1fr); } }

.exxi-pagina__cifras > li {
  background: var(--color-bg);
  padding: var(--space-6);
}

.exxi-pagina__cifra {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.375rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-accent);
}

.exxi-pagina__cifra-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  line-height: var(--leading-base);
  color: var(--color-text-soft);
  margin-top: var(--space-3);
}

/* Hitos -------------------------------------------------------------- */

.exxi-pagina__hitos { margin-top: var(--space-12); }

.exxi-hitos {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}

.exxi-hito {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.exxi-hito__ano {
  font-family: var(--font-serif);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
}

.exxi-hito__texto {
  font-family: var(--font-serif);
  /* Explícito: la casa escribe el cuerpo a 500 y el serif no tiene ese peso. */
  font-weight: 400;
  font-size: var(--size-lg);
  line-height: var(--leading-base);
}

/* Equipo ------------------------------------------------------------- */

.exxi-equipo__grupo + .exxi-equipo__grupo { margin-top: var(--space-12); }

.exxi-equipo__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

@media (min-width: 600px) { .exxi-equipo__lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .exxi-equipo__lista { grid-template-columns: repeat(4, 1fr); } }

.exxi-miembro a { color: inherit; text-decoration: none; }

.exxi-miembro__foto {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radius-full);
  filter: grayscale(20%);
}

.exxi-miembro__foto--vacia { display: block; background: var(--color-surface-alt); }

.exxi-miembro__nombre {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: var(--weight-bold);
  margin-top: var(--space-3);
}

.exxi-miembro a:hover .exxi-miembro__nombre { color: var(--color-accent); }

.exxi-miembro__cargo {
  display: block;
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 3px;
}

.exxi-miembro__email {
  display: block;
  font-size: var(--size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  word-break: break-word;
}

/* Contacto ----------------------------------------------------------- */

.exxi-datos { margin: var(--space-5) 0 0; font-family: var(--font-sans); }

.exxi-datos > div + div { margin-top: var(--space-4); }

.exxi-datos dt {
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.exxi-datos dd {
  font-size: var(--size-base);
  line-height: var(--leading-base);
  margin: var(--space-1) 0 0;
}

.exxi-areas {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  font-family: var(--font-sans);
}

.exxi-areas > li {
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.exxi-areas__area {
  display: block;
  font-size: var(--size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.exxi-areas__persona { display: block; font-size: var(--size-base); font-weight: var(--weight-semibold); }

.exxi-areas a { font-size: var(--size-sm); color: var(--color-text-muted); }
.exxi-areas a:hover { color: var(--color-accent); }

/* Planes ------------------------------------------------------------- */

.exxi-planes {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) { .exxi-planes { grid-template-columns: repeat(3, 1fr); } }

.exxi-plan {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-ink);
  padding: var(--space-6);
}

/* El plan recomendado se distingue por el color de la casa, no por un tamaño distinto:
   comparar precios exige que las tres columnas midan igual. */
.exxi-plan--destacado { border-top-color: var(--color-accent); }

.exxi-plan__etiqueta {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.59375rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--color-accent);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.exxi-plan__nombre {
  font-family: var(--font-serif);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  margin: 0;
}

.exxi-plan__precio {
  font-family: var(--font-serif);
  font-size: 2.375rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  margin: var(--space-3) 0 0;
}

.exxi-plan__precio small {
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
}

.exxi-plan__desc {
  font-size: var(--size-sm);
  color: var(--color-text-soft);
  line-height: var(--leading-base);
  margin: var(--space-3) 0 0;
}

.exxi-plan__incluye {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--size-sm);
  line-height: var(--leading-base);
}

.exxi-plan__incluye > li {
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  position: relative;
}

.exxi-plan__incluye > li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* Preguntas frecuentes ----------------------------------------------- */

.exxi-faq { margin-top: var(--space-12); }

.exxi-faq__item {
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-4) 0;
}

.exxi-faq__pregunta {
  font-family: var(--font-serif);
  font-size: var(--size-xl);
  font-weight: var(--weight-bold);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.exxi-faq__pregunta::-webkit-details-marker { display: none; }

.exxi-faq__pregunta::after {
  content: "+";
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
}

.exxi-faq__item[open] .exxi-faq__pregunta::after { content: "−"; }

.exxi-faq__respuesta {
  font-size: var(--size-base);
  line-height: var(--leading-loose);
  color: var(--color-text-soft);
  margin: var(--space-3) 0 0;
  max-width: 70ch;
}

/* Anúnciate ---------------------------------------------------------- */

.exxi-pagina__formatos { margin-top: var(--space-12); }

.exxi-pagina__comercial {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 3px solid var(--color-ink);
}

.exxi-pagina__comercial .exxi-plan__cta { margin: 0; align-self: auto; }

.exxi-pagina__contacto-nombre {
  font-family: var(--font-serif);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  margin: 0;
}

.exxi-pagina__contacto-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--size-base);
  margin: var(--space-2) 0 0;
}

/* Newsletter --------------------------------------------------------- */

.exxi-incluye {
  list-style: none;
  margin: 0;
  padding: 0;
}

.exxi-incluye > li {
  padding: var(--space-5) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.exxi-incluye__titulo {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
}

.exxi-incluye__texto {
  display: block;
  font-size: var(--size-base);
  line-height: var(--leading-base);
  color: var(--color-text-soft);
  margin-top: var(--space-2);
}

.exxi-side-newsletter--pagina { position: sticky; top: var(--space-6); }

/* Título de respaldo cuando la composición no trae encabezado de primer nivel. */
.exxi-titulo-suelto {
  font-family: var(--font-serif);
  font-size: var(--size-3xl);
  line-height: var(--leading-tight);
  margin: var(--space-10) 0 var(--space-6);
}