/* ==========================================================================
   MP Travel Services — Documento legal
   --------------------------------------------------------------------------
   Los apartados plegables de las páginas legales: una columna angosta de
   `<details>` que se abren de a uno.

   La cargan `reglamento.html`, `renuncia.html` y `proteccion-de-datos.html`;
   `aviso-legal.html` no, porque ese usa tarjetas normales y le alcanza con
   `paginas.css`. Va SIEMPRE después de `paginas.css`: lo pisa en algún punto.

   Los tokens, el vidrio y los botones vienen de `base.css`.
   ========================================================================== */

@media (max-width:560px){
  .articulo > summary{padding:var(--space-3) 0}
  .cuerpo{padding:0 0 var(--space-4)}
}

/* ==========================================================================
   DOCUMENTO LEGAL
   Una sola columna angosta de apartados plegables. Eran paneles de vidrio,
   uno debajo del otro con su borde y su sombra: treinta cajas apiladas es
   justo lo que hace que un documento largo parezca un panel de control.

   Ahora cada apartado es un renglón de índice separado por un filete, con el
   rombo de latón a la izquierda del título: la misma receta de las tarjetas y
   de los pilares de Nosotros. Los títulos van en caja normal y no en
   versalitas, porque un documento se lee mejor así.
   ========================================================================== */
.documento{max-width:78ch;margin-inline:auto}

/* Cada apartado es un panel desplegable. El header es sticky (72px): sin el
   scroll-margin, llegar por un ancla deja el título escondido detrás. */
.articulo{
  position:relative;padding:0;margin:0;
  border-top:1px solid var(--acento-tenue);
  scroll-margin-top:var(--space-8);
}

.articulo:last-of-type{border-bottom:1px solid var(--acento-tenue)}

/* El rombo de latón, otra vez: acá hace de viñeta del índice y marca dónde
   arranca cada apartado. Se enciende cuando el apartado está abierto. */
.articulo > summary::before{
  content:"";flex:none;
  width:7px;height:7px;margin-right:var(--space-1);
  transform:rotate(45deg);
  background:var(--acento);opacity:.55;
  transition:opacity .25s var(--ease-out);
}

.articulo[open] > summary::before{opacity:1}

.articulo > summary{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4) 0;
  list-style:none;cursor:pointer;
  transition:color .25s var(--ease-out);
}

/* El título empuja al cheurón hasta el borde derecho. */
.articulo > summary h3{flex:1}

.articulo > summary::-webkit-details-marker{display:none}

/* Sin panel que pintar, el aviso de que el renglón responde es el título en
   tinta plena y el rombo encendido. */
.articulo > summary:hover{color:var(--text)}

.articulo > summary:hover::before{opacity:1}

.articulo > summary:focus-visible{outline:2px solid var(--text);outline-offset:2px}

.articulo > summary h3{margin:0}

/* Cheurón hecho con dos bordes de un cuadrado girado: ni SVG ni fuente de
   iconos para una flechita que aparece treinta veces en la página. */
.articulo > summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:4px;
  border-right:1.5px solid var(--text-soft);
  border-bottom:1.5px solid var(--text-soft);
  transform:translateY(-3px) rotate(45deg);
  transition:transform .3s var(--ease-out);
}

.articulo[open] > summary::after{transform:translateY(2px) rotate(-135deg)}

/* El cuerpo se sangra a la altura del texto del título —el rombo y su
   separación—, de modo que lo desplegado cuelga del título y no del margen. */
.cuerpo{padding:0 0 var(--space-5) calc(7px + var(--space-1) + var(--space-4))}

.articulo h3{
  margin:0 0 var(--space-3);font-size:1.05rem;font-weight:700;
  letter-spacing:-.01em;line-height:1.35;
}

.articulo h4{
  margin:var(--space-4) 0 var(--space-2);
  font-size:1rem;font-weight:700;letter-spacing:.01em;
}

.cuerpo > h4:first-child{margin-top:0}

.articulo p{margin:0 0 var(--space-3);color:var(--text-mut);font-size:var(--t-apoyo)}

.articulo ul{
  margin:0 0 var(--space-3);padding-left:1.2rem;
  color:var(--text-mut);font-size:var(--t-apoyo);
}

.articulo li{margin-bottom:var(--space-2)}

.articulo li:last-child{margin-bottom:0}

.articulo strong{color:var(--text);font-weight:700}

.cuerpo > :last-child{margin-bottom:0}

/* Los datos de contacto del reglamento van dentro de un artículo, no al pie
   de una sección: sin el margen grande de arriba y alineados a la izquierda. */
.articulo .datos{margin:var(--space-3) 0 0;text-align:left;gap:var(--space-4)}

/* Menciones técnicas dentro de un artículo (nombre de una cookie, un flag) */
.articulo code{
  padding:.1em .35em;border-radius:6px;
  background:var(--glass-3);border:1px solid var(--hair);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85em;
}

.articulo em{font-style:italic}

/* Pie de un documento legal: cuándo se actualizó por última vez */
.fecha{
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--hair);
  color:var(--text-soft);font-size:var(--t-pie);font-style:italic;
}

/* Un botón cierra un artículo del documento (pedir cotización) */
.articulo .btn{margin-top:var(--space-4)}

/* Aclaración al pie de un bloque, en cuerpo menor */
.nota{margin-top:var(--space-3);color:var(--text-soft);font-size:var(--t-pie)}

.nota a{text-decoration:none;border-bottom:1px solid var(--hair)}

.nota a:hover{border-bottom-color:var(--text)}

/* Los enlaces dentro del cuerpo de un artículo se subrayan: sin color de
   marca que los distinga, el subrayado es lo único que los delata. */
.articulo p a,.articulo li a{text-decoration:none;border-bottom:1px solid var(--hair)}

.articulo p a:hover,.articulo li a:hover{border-bottom-color:var(--text)}