/* Sitio de Distrito Derecho (distritoderecho.com) — lote del 6-oct-2026.
   Identidad según el "Manual de Identidad Corporativa" de Distrito Derecho (2021):
   rojo 2350 C #A6110B (principal), #421717 y #D91A0B; complementarios #EFEFEF,
   #606060, #0E0E0D. Letras: Lora (títulos), Poppins (párrafo primario),
   Cormorant Garamond (párrafo secundario). Trama de rombos (balanzas). */
:root {
  --rojo: #a6110b;
  --rojo-oscuro: #421717;
  --rojo-vivo: #d91a0b;
  --gris-claro: #efefef;
  --gris: #606060;
  --negro: #0e0e0d;
  --blanco: #ffffff;
  /* Colores de cada marca (sus manuales) */
  --distrito-ley: #000a23;
  --codileyes: #027495;
  --derecho-digital: #1a003a;
  /* Trama: el rombo-balanza del logo, repetido */
  --trama-blanca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='132' viewBox='0 0 120 132'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M30.06,0,0,35.22,31.14,66.06,60.08,35.22ZM28.78,35h-24l24-29.31ZM31.23,5.72,55.27,35h-24Z'/%3E%3Cpath transform='translate(60 66)' d='M30.06,0,0,35.22,31.14,66.06,60.08,35.22ZM28.78,35h-24l24-29.31ZM31.23,5.72,55.27,35h-24Z'/%3E%3C/g%3E%3C/svg%3E");
  --trama-gris: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='132' viewBox='0 0 120 132'%3E%3Cg fill='%23e4e4e4'%3E%3Cpath d='M30.06,0,0,35.22,31.14,66.06,60.08,35.22ZM28.78,35h-24l24-29.31ZM31.23,5.72,55.27,35h-24Z'/%3E%3Cpath transform='translate(60 66)' d='M30.06,0,0,35.22,31.14,66.06,60.08,35.22ZM28.78,35h-24l24-29.31ZM31.23,5.72,55.27,35h-24Z'/%3E%3C/g%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--blanco);
  color: var(--negro);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Lora", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
a { color: var(--rojo); }
a:hover { color: var(--rojo-vivo); }
img { max-width: 100%; display: block; }
.ancho { max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.etq { display: block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rojo); margin-bottom: 10px; }

/* ---------- Cabecera (sobre rojo) ---------- */
.cab { display: flex; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 18px; width: 100%; }
.cab .icono { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blanco); }
.cab .icono img { width: 40px; height: auto; }
.cab .icono span { font-family: "Lora", serif; font-size: 1.02rem; letter-spacing: 0.08em; }
.cab nav { margin-left: auto; display: flex; gap: 26px; font-size: 0.9rem; }
.cab nav a { color: var(--blanco); text-decoration: none; opacity: 0.9; }
.cab nav a:hover { opacity: 1; color: var(--blanco); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Portada roja ---------- */
.portada {
  position: relative;
  background-color: var(--rojo);
  color: var(--blanco);
  overflow: hidden;
}
.portada::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--trama-blanca);
  background-size: 96px auto;
  opacity: 0.06;
  pointer-events: none;
}
.portada > * { position: relative; }
.portada-centro { text-align: center; padding-top: 34px; padding-bottom: 84px; }
.portada .logo-grande { width: 230px; margin: 0 auto 34px; }
.portada h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.15; margin: 0 auto 18px; max-width: 820px; }
.portada .bajada { font-size: clamp(1rem, 1.6vw, 1.12rem); font-weight: 300; color: rgba(255,255,255,0.88); max-width: 680px; margin: 0 auto 30px; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 4px; font-weight: 500; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; }
.btn-blanco { background: var(--blanco); color: var(--rojo); }
.btn-blanco:hover { background: var(--gris-claro); color: var(--rojo); }
.btn-borde { border-color: rgba(255,255,255,0.6); color: var(--blanco); }
.btn-borde:hover { background: rgba(255,255,255,0.1); color: var(--blanco); }

/* ---------- Nuestras marcas ---------- */
.marcas-sec { background: var(--gris-claro); background-image: var(--trama-gris); background-size: 96px auto; padding: 76px 0; }
.marcas-sec .intro { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.marcas-sec h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin: 0 0 10px; }
.marcas-sec .intro p { margin: 0; color: var(--gris); }
.marcas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.marca {
  background: var(--blanco);
  border-radius: 6px;
  border-top: 5px solid var(--c, var(--rojo));
  padding: 28px 26px 26px;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(14,14,13,0.07);
}
.marca .logo-marca { height: 74px; display: flex; align-items: center; margin-bottom: 18px; }
.marca .logo-marca img { max-height: 74px; width: auto; }
.marca .logo-marca.ancho-logo img { max-height: 30px; }
.marca h3 { font-size: 1.3rem; margin: 0 0 4px; color: var(--c); }
.marca .que { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.12rem; font-style: italic; color: var(--gris); margin: 0 0 14px; }
.marca p { margin: 0 0 12px; font-size: 0.93rem; }
.marca ul { margin: 0 0 16px; padding-left: 18px; font-size: 0.9rem; color: #333; }
.marca li { margin-bottom: 4px; }
.marca .pie-marca { margin-top: auto; padding-top: 8px; font-weight: 500; font-size: 0.92rem; }
.marca .pie-marca a { color: var(--c); text-decoration: none; }
.marca .pie-marca a:hover { text-decoration: underline; }
.marca .pronto { display: inline-block; background: var(--c); color: var(--blanco); border-radius: 3px; padding: 3px 10px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Contacto ---------- */
.contacto { background: var(--rojo-oscuro); color: var(--blanco); }
.contacto .ancho { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; padding-top: 44px; padding-bottom: 44px; }
.contacto h2 { font-family: "Poppins", sans-serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #f0a39f; margin: 0 0 8px; }
.contacto p { margin: 0; font-weight: 300; }
.contacto b { font-weight: 500; }
.contacto a { color: var(--blanco); }
.contacto small { color: rgba(255,255,255,0.65); }

/* ---------- Pie ---------- */
.pie { background: var(--negro); color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.pie .ancho { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.pie nav { margin-left: auto; display: flex; gap: 20px; }
.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }

/* ---------- Páginas de texto (Privacidad / Soporte) ---------- */
.cab-pagina .titulo { padding-top: 14px; padding-bottom: 44px; }
.cab-pagina h1 { margin: 0 0 6px; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.cab-pagina p { margin: 0; font-weight: 300; color: rgba(255,255,255,0.85); }
.texto { max-width: 780px; padding-top: 40px; padding-bottom: 60px; }
.texto h2 { font-size: 1.3rem; color: var(--rojo); margin: 34px 0 8px; }
.texto h2:first-child { margin-top: 0; }
.texto ul { padding-left: 22px; }
.texto li { margin-bottom: 6px; }
.texto b { font-weight: 500; }
.caja { background: var(--gris-claro); border-left: 4px solid var(--rojo); border-radius: 4px; padding: 16px 18px; margin: 18px 0; }
.borrador { background: #fff4e5; border: 1px solid #f3c27a; color: #6b4300; border-radius: 6px; padding: 12px 16px; font-size: 0.9rem; margin-bottom: 26px; }
details { border: 1px solid #e2e2e2; border-radius: 6px; padding: 0 16px; margin-bottom: 10px; background: var(--blanco); }
details[open] { padding-bottom: 12px; border-color: #d6d6d6; }
summary { cursor: pointer; font-weight: 500; padding: 14px 0; color: var(--negro); }
summary::marker { color: var(--rojo); }
details p { margin: 0 0 8px; }

/* ---------- Tableta y teléfono ---------- */
@media (max-width: 900px) {
  .marcas { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .cab nav { gap: 16px; font-size: 0.86rem; }
  .cab nav .no-tel { display: none; }
  .cab .icono span { display: none; }
  .portada .logo-grande { width: 180px; margin-bottom: 26px; }
  .portada-centro { padding-top: 16px; padding-bottom: 60px; }
  .marcas-sec { padding: 56px 0; }
  .contacto .ancho { grid-template-columns: 1fr; gap: 22px; }
  .pie nav { margin-left: 0; }
}