/* pafa.ar — escritorio (≥ 901px) y móvil (≤ 900px), según «PAFA · Paleta y guía visual».
   Tres familias con un uso fijo: serif para todos los títulos, sans para párrafos,
   mono para menú, etiquetas y botones (siempre en mayúsculas y con letras separadas). */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  background: var(--papel);
  color: var(--tinta);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--titulo); }
strong { font-weight: 600; color: var(--tinta); }

a {
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid var(--acento-linea);
}
a:hover { color: var(--acento-hover); border-bottom-color: var(--acento-hover); }
a:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.bloque {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.solo-movil { display: none; }

/* ---------- Cabecera ---------- */
/* La barra acompaña a la página: se queda arriba al bajar. El fondo es petróleo
   sólido, así que el contenido pasa por debajo sin transparentarse. scroll-padding-top
   es para que un ancla (#capas, #faqs) no quede tapada por la barra. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--petroleo);
}
.cabecera .bloque {
  height: 88px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-right: auto;
  border-bottom: 0;
}
.marca:hover { border-bottom: 0; }
.marca__nombre {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--claro);
}
.marca__raya { width: 1px; height: 16px; background: rgba(250, 249, 246, 0.3); }
.marca__sello {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}

.nav { display: flex; gap: 40px; }
.nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--claro-suave);
  border-bottom: 0;
}
.nav a:hover { color: var(--claro); border-bottom: 0; }

.menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.menu span { width: 18px; height: 1.5px; background: var(--claro-suave); }
.menu:focus-visible { outline: 2px solid var(--claro-suave); outline-offset: 2px; }

/* El switch de idioma: un enlace a la página hermana en el otro idioma, del mismo
   tono que el menú. Las vistas de Redoc no lo llevan: los contratos son en castellano. */
.idioma {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--claro-suave);
  border-bottom: 0;
}
.idioma:hover { color: var(--claro); border-bottom: 0; }
.idioma:focus-visible { outline: 2px solid var(--claro-suave); outline-offset: 2px; }

/* El switch de tema: en la barra, del mismo tono que el menú. Muestra el modo
   al que se va a pasar, no en el que está. Sin JavaScript no aparece. */
.tema {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--claro-suave);
}
.tema:hover { color: var(--claro); }
.tema:focus-visible { outline: 2px solid var(--claro-suave); outline-offset: 2px; }
.tema[hidden] { display: none; }
.tema svg { width: 16px; height: 16px; }
.tema__luna { fill: currentColor; }
.tema__sol { fill: currentColor; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.tema__sol path { fill: none; }
.tema[data-modo="claro"] .tema__sol { display: none; }
.tema[data-modo="oscuro"] .tema__luna { display: none; }

/* ---------- Portada ---------- */
.hero .bloque { padding-block: 96px 72px; }
.hero__ojo, .hero h1, .hero p { max-width: 768px; }
.hero__ojo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}
.hero h1 {
  margin: 18px 0 28px;
  font-size: 46px;
  line-height: 1.2;
}
.hero p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta-parrafo);
}
.hero p + p { margin-top: 16px; }

/* ---------- Secciones ---------- */
.seccion .bloque { padding-block: 72px 88px; }
.destacada { background: var(--destacado); }
.seccion h2 { font-size: 26px; line-height: 1.3; }

/* Título a la izquierda, texto a la derecha */
.par {
  display: flex;
  gap: 64px;
}
.par__titulo { width: 300px; flex-shrink: 0; }
.par__texto { flex-grow: 1; }
.columnas {
  display: flex;
  gap: 56px;
  flex-grow: 1;
}
.columnas > div { flex: 1; }
.cuerpo {
  font-size: 15px;
  line-height: 1.75;
  color: var(--tinta-cuerpo);
}
.cuerpo + .cuerpo { margin-top: 16px; }
.enlace {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---------- Chips de estado: son tres, y sólo tres ---------- */
.estado {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 10px;
  color: var(--sobre-acento);
  background: var(--acento);
}
.estado--dorado {
  color: var(--senal);
  background: none;
  border: 1px solid var(--senal-borde);
  padding: 5px 10px;
}

/* ---------- Las 5 capas ---------- */
.capas {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--linea);
}
.capa {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 26px 32px;
  border-bottom: 1px solid var(--linea-suave);
}
.capa:last-child { border-bottom: 0; }
.capa:nth-child(odd) { background: var(--hueso); }
.capa__num {
  width: 16px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--acento);
}
.capa__titulo {
  width: 300px;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tinta);
}
.capa__desc {
  flex-grow: 1;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* Las capas que ya tienen algo publicado llevan sus dos botones en vez del chip.
   Uno solo es el principal: la documentación, que es lo que está en este sitio. */
/* Uno debajo del otro; el ancho lo fija el más largo y el otro lo acompaña. */
.capa__acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
  width: max-content;
}
.capa__boton {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  padding: 5px 10px;
  border: 1px solid var(--linea-boton);
  color: var(--titulo);
}
.capa__boton:hover { color: var(--titulo); border-color: var(--acento); }
.capa__boton--primario {
  color: var(--sobre-acento);
  background: var(--acento);
  border-color: var(--acento);
}
.capa__boton--primario:hover {
  color: var(--sobre-acento);
  background: var(--acento-hover);
  border-color: var(--acento-hover);
}

/* ---------- Actores ---------- */
.actores-intro { margin-bottom: 48px; }
.actores-intro .cuerpo { max-width: 620px; }
.actores {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.actor { background: var(--hueso); padding: 28px 24px; }
.actor__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}
.actor__nombre {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
}
.actor__desc {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* ---------- FAQs ---------- */
.faqs {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin-top: 48px;
}
/* Contraídas por defecto: <details> sin el triángulo del navegador, con su propio signo. */
.faq { border-bottom: 1px solid var(--linea-suave); }
.faq:last-child { border-bottom: 0; }
.faq > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.faq > summary:hover .faq__titulo { color: var(--acento); }
.faq__titulo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-grow: 1;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tinta);
}
.faq__signo {
  position: relative;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  color: var(--tinta-suave);
}
.faq__signo::before, .faq__signo::after {
  content: "";
  position: absolute;
  inset: 5px 0 5px 0;
  background: currentColor;
}
.faq__signo::after { transform: rotate(90deg); }
.faq[open] .faq__signo { color: var(--acento); }
.faq[open] .faq__signo::after { display: none; }
.faq > summary:hover .faq__signo { color: var(--acento); }
.faq p {
  padding-bottom: 24px;
  max-width: 720px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* ---------- Cierre ---------- */
/* En la portada es la sección Contacto, con título: un ancla tiene que llegar a algo. */
.cierre .bloque { padding-block: 72px 88px; }
.cierre__texto { max-width: 620px; margin: 18px 0 32px; }
.acciones { display: flex; gap: 16px; }
.boton {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 0;
  padding: 12px 22px;
  border: 1px solid var(--linea-boton);
  color: var(--titulo);
  background: none;
}
.boton:hover { color: var(--titulo); border-color: var(--acento); }
/* En un mismo grupo, uno solo puede ser el botón principal. */
.boton--primario {
  color: var(--sobre-acento);
  background: var(--acento);
  border-color: var(--acento);
}
.boton--primario:hover {
  color: var(--sobre-acento);
  background: var(--acento-hover);
  border-color: var(--acento-hover);
}

/* ---------- Pie ---------- */
.pie { background: var(--petroleo); }
.pie .bloque {
  padding-block: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pie span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--claro-suave);
}
.pie a { color: var(--claro-suave); border-bottom-color: rgba(201, 216, 222, 0.4); }
.pie a:hover { color: var(--claro); border-bottom-color: var(--claro); }

/* ---------- Docs ---------- */
.tapa { background: var(--destacado); }
.tapa .bloque { padding-block: 72px 64px; }
.tapa h1 { font-size: 46px; line-height: 1.2; }
.tapa .bajada {
  margin-top: 18px;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--tinta-parrafo);
}
/* Un grupo por capa; adentro, los contratos en orden de lectura, con la fila de las capas. */
.grupo {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
}
.bajada--nota { margin-top: 12px; font-size: 14px; color: var(--tinta-suave); }
.docs { margin-top: 14px; }
.doc {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 26px 32px;
  border-bottom: 1px solid var(--linea-suave);
}
.doc:last-child { border-bottom: 0; }
.doc:nth-child(odd) { background: var(--hueso); }
.doc__num {
  width: 16px;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--acento);
}
.doc__cuerpo { flex-grow: 1; min-width: 0; }
.doc__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--tinta);
}
.doc__titulo a { color: var(--tinta); border-bottom-color: var(--tinta-linea); }
.doc__titulo a:hover { color: var(--acento); border-bottom-color: var(--acento); }
.doc__desc { margin-top: 8px; max-width: 720px; font-size: 14px; line-height: 1.65; color: var(--tinta-suave); }
.doc__desc code { font-family: var(--mono); font-size: 12.5px; }
.doc__meta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}
.actores--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  html { scroll-padding-top: 64px; }
  .solo-escritorio { display: none; }
  .solo-movil { display: revert; }

  .cabecera .bloque { height: 64px; }
  .marca__nombre { font-size: 17px; letter-spacing: 0.12em; }
  .marca__raya { height: 13px; }
  .marca__sello { font-size: 8.5px; letter-spacing: 0.1em; }

  .menu { display: flex; }
  .cabecera .bloque { gap: 6px; }
  .idioma { padding: 0 8px; }
  .marca { gap: 10px; margin-right: auto; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 20px;
    background: var(--petroleo);
  }
  .nav[data-abierto] { display: flex; }
  .nav a { padding: 12px 0; font-size: 12px; }

  .hero .bloque { padding-block: 40px 32px; }
  .hero__ojo { font-size: 9.5px; letter-spacing: 0.12em; }
  .hero h1 { margin: 12px 0 18px; font-size: 28px; line-height: 1.25; }
  .hero p { font-size: 14.5px; line-height: 1.65; }
  .hero p + p { margin-top: 12px; }

  .seccion .bloque { padding-block: 36px 44px; }
  .seccion h2 { font-size: 20px; }
  .cuerpo { font-size: 13.5px; line-height: 1.65; }
  .cuerpo + .cuerpo { margin-top: 14px; }
  .enlace { margin-top: 14px; font-size: 10px; }

  .par { display: block; }
  .par__titulo { width: auto; margin-bottom: 18px; }
  .columnas { display: block; }
  .columnas > div + div { margin-top: 14px; }

  .estado { font-size: 9px; letter-spacing: 0.06em; padding: 5px 9px; }
  .estado--dorado { padding: 4px 9px; }

  .capas { margin-top: 22px; }
  .capa { display: block; padding: 18px; }
  .capa__num { display: inline; font-size: 11px; margin-right: 10px; }
  .capa__titulo { display: inline; width: auto; font-size: 14px; }
  .capa__desc { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.6; }
  .capa__acciones { gap: 6px; }
  .capa__boton { font-size: 9px; letter-spacing: 0.06em; padding: 5px 9px; }

  .actores-intro { margin-bottom: 24px; }
  .actores-intro .cuerpo { margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .actores { grid-template-columns: minmax(0, 1fr); }
  .actor { padding: 16px 18px; }
  .actor__num { font-size: 9px; letter-spacing: 0.06em; }
  .actor__nombre { margin-top: 4px; font-size: 13.5px; }
  .actor__desc { margin-top: 6px; font-size: 12.5px; line-height: 1.55; }

  .faqs { margin-top: 20px; }
  .faq > summary { padding: 16px 0; gap: 10px; }
  .faq__titulo { gap: 10px; font-size: 14px; }
  .faq p { padding-bottom: 16px; font-size: 12.5px; line-height: 1.6; }

  .cierre .bloque { padding-block: 36px 44px; }
  .cierre__texto { margin: 12px 0 20px; }
  .acciones { flex-direction: column; gap: 10px; }
  .boton { font-size: 11px; padding: 13px 20px; }

  .pie .bloque {
    padding-block: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .pie span { font-size: 10px; }
  .pie span + span { color: var(--claro-tenue); }

  .tapa .bloque { padding-block: 40px 32px; }
  .tapa h1 { font-size: 28px; line-height: 1.25; }
  .tapa .bajada { margin-top: 12px; font-size: 14.5px; line-height: 1.65; }
  .grupo { margin-top: 24px; }
  .docs { margin-top: 10px; }
  .doc { gap: 10px; padding: 18px; }
  .doc__num { font-size: 11px; }
  .doc__titulo { font-size: 14px; gap: 8px; }
  .doc__desc { font-size: 12.5px; line-height: 1.6; }
  .doc__meta { margin-top: 8px; }
  .actores--tres { grid-template-columns: minmax(0, 1fr); }
}