/* ==========================================================
   Estudio Jurídico Modelo — estilos
   Estructura: header / nav / (section + aside) / footer
   ========================================================== */

/* Tipografías alojadas en el propio sitio (sin Google Fonts: más rápido,
   sin depender de terceros y compatible con la política de seguridad). */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
}

:root {
  --azul: #1b2a41;         /* azul marino institucional */
  --azul-claro: #26395a;
  --dorado: #b8955a;
  --fondo: #f4f1ec;        /* fondo general, papel */
  --superficie: #ffffff;   /* tarjetas (article) */
  --section: #e9e4db;      /* bloque section */
  --aside: #dcd5c8;        /* bloque aside */
  --texto: #2b2b2b;
  --texto-suave: #5c5c5c;
  --radio: 6px;
  --separacion: 12px;      /* espacio entre bloques, como en el boceto */
  /* Escala de letra (11/10/2026): 6 tamaños para todo el sitio (antes ~25).
     Ningún texto baja de --t-xs (14 px). */
  --t-xs: .875rem;   /* etiquetas, fechas, notas */
  --t-sm: .95rem;    /* textos secundarios */
  --t-base: 1.05rem; /* texto general */
  --t-md: 1.25rem;   /* subtítulos */
  --t-lg: 1.6rem;    /* títulos de sección, reloj */
  --t-xl: clamp(1.5rem, 3.4vw, 2.4rem); /* títulos grandes (portada, encabezado, publicación) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Lo oculto con el atributo hidden queda oculto aunque su clase le dé display */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: var(--separacion);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  gap: var(--separacion);
  min-height: 100vh;
  max-width: 1200px;
  margin-inline: auto;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1.25;
  margin: 0 0 .6em;
}

a {
  color: var(--azul-claro);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: .65em 1.3em;
  border-radius: var(--radio);
  background: var(--azul);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background .2s;
}
.boton:hover { background: var(--azul-claro); }

.boton--claro {
  background: var(--dorado);
  color: var(--azul);
}
.boton--claro:hover { background: #cdab72; }

/* ---------- HEADER ---------- */
.header {
  background: var(--azul);
  color: #fff;
  border-radius: var(--radio);
  padding: 1.6rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.header__marca {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

/* El símbolo del logo (una balanza en un círculo), PNG sin
   fondo; copia de muestra, 27/10/2026. */
.header__logo {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: contain;
  flex-shrink: 0;
}

.header__titulo {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.2;
}

.header__lema {
  display: block;
  color: var(--dorado);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: var(--t-xs);
}

/* ---------- NAV ---------- */
.nav {
  background: var(--azul-claro);
  border-radius: var(--radio);
}

.nav__toggle {
  display: none;
  width: 100%;
  padding: .8rem 1rem;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.nav__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.nav__lista a {
  display: block;
  padding: .75rem 1.1rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 3px solid transparent;
}

.nav__lista a:hover,
.nav__lista a:focus-visible {
  color: var(--dorado);
}
.nav__lista a:focus-visible { outline: 3px solid var(--dorado); outline-offset: -3px; }

/* Página actual */
.nav__lista a[aria-current="page"] {
  color: #cdab72;  /* 5,3:1 sobre el azul claro (el dorado daba 4,1:1) */
  border-bottom-color: var(--dorado);
}

/* Ícono hamburguesa del botón Menú */
.nav__icono,
.nav__icono::before,
.nav__icono::after {
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  vertical-align: middle;
  position: relative;
}
.nav__icono::before,
.nav__icono::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__icono::before { top: -6px; }
.nav__icono::after { top: 6px; }
.nav__toggle .nav__icono { margin-right: .5rem; }

/* ---------- CONTENIDO: SECTION + ASIDE ---------- */
.contenido {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;   /* section ancho + aside angosto */
  gap: var(--separacion);
  align-items: stretch;
}

/* ---------- Portada: foto del frente del estudio (solo "El Estudio", 08/10/2026) ----------
   Opción A+D+E+H: banda de lado a lado, entrada suave (la foto aparece, sube el
   título y se dibuja la línea dorada), acercamiento lento de 20 s, y el título
   sobre un degradado (sin botón ni lema: pedido del dueño). Solo CSS. */
.portada {
  grid-column: 1 / -1;          /* ocupa las dos columnas: section + aside */
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--azul);
}

.portada__marco {
  position: relative;
  height: clamp(300px, 46vw, 600px);
}

.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;  /* el vidrio y la puerta, menos cielo y vereda */
  transform-origin: 50% 60%;
  animation: portada-acercar 20s ease-out both;
}

.portada__texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3rem 2rem 1.7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  color: #fff;
  background: linear-gradient(to top, rgba(14, 22, 36, .9) 0%, rgba(14, 22, 36, .55) 55%, rgba(14, 22, 36, 0) 100%);
}

.portada__titulo {
  margin: 0;
  color: #fff;
  font-size: var(--t-xl);
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  animation: portada-subir .6s .15s ease both;
}

.portada__linea {
  display: block;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: var(--dorado);
  transform-origin: left center;
  animation: portada-linea .5s .45s ease both;
}

@keyframes portada-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes portada-acercar { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes portada-subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Se anima con transform y no con width: el ancho obliga a redibujar la página en cada cuadro. */
@keyframes portada-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Quien pidió menos movimiento en su equipo ve la portada quieta. */
@media (prefers-reduced-motion: reduce) {
  .portada__foto, .portada__titulo, .portada__linea { animation: none; }
}

@media (max-width: 600px) {
  .portada__marco { height: 420px; }   /* en el celular, más alta que ancha */
  .portada__texto { padding: 2.5rem 1.2rem 1.3rem; }
}

.section {
  background: var(--section);
  border-radius: var(--radio);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--separacion);
}

.section__titulo {
  font-size: var(--t-lg);
  color: var(--azul);
  text-align: center;
  margin-bottom: 0;
}

.section__intro {
  text-align: center;
  color: var(--texto-suave);
  margin: 0 0 .5rem;
}

.article {
  background: var(--superficie);
  border-radius: var(--radio);
  border-left: 4px solid var(--dorado);
  padding: 1.5rem 1.8rem;
  scroll-margin-top: var(--separacion);
}

.article h2 {
  color: var(--azul);
  font-size: var(--t-md);
}

.article h3 {
  color: var(--azul);
  font-size: var(--t-base);
  margin-top: 1.4rem;
}

.article p:last-child { margin-bottom: 0; }


.aside {
  background: var(--aside);
  border-radius: var(--radio);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--separacion);
}

/* Cada bloque del aside: noticia, calendario, contacto */
.aside__panel {
  background: rgba(255, 255, 255, .55);
  border-radius: var(--radio);
  padding: 1.1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  scroll-margin-top: var(--separacion);
}

.aside__titulo {
  color: var(--azul);
  font-size: var(--t-md);
  text-align: center;
  margin: 0;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--dorado);
}

.aside__bloque h3 {
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
  margin: 0 0 .2rem;
}

.aside__bloque p {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- Última noticia ---------- */
.noticia {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 4rem;
}

.noticia p { margin: 0; }

.noticia__titulo {
  font-size: var(--t-base);
  margin: 0;
}
.noticia__titulo a {
  color: var(--azul);
  text-decoration: none;
}
.noticia__titulo a:hover { text-decoration: underline; }

.noticia__meta {
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.noticia__resumen { font-size: var(--t-sm); }

.noticia__origen {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  font-style: italic;
}

.noticia__estado {
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

/* ---------- Calendario + reloj ---------- */
.reloj {
  text-align: center;
  background: var(--azul);
  color: #fff;
  border-radius: var(--radio);
  padding: .7rem .5rem;
}

.reloj p { margin: 0; }

.reloj__hora {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.reloj__fecha {
  font-size: var(--t-xs);
  color: var(--dorado);
}

.calendario {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
}

.calendario caption {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: var(--azul);
  padding-bottom: .4rem;
}

.calendario th {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  font-weight: 600;
  padding-bottom: .3rem;
}

.calendario td {
  padding: .1rem 0;
  font-size: var(--t-sm);
}

.calendario td span {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
}

.calendario td.finde { color: #6b6152; }

.calendario td.hoy span {
  background: var(--dorado);
  color: var(--azul);
  font-weight: 700;
}

/* Feriados, ferias e inhábiles judiciales (17/10/2026). Además del color, cada
   tipo tiene su forma (borde lleno, sin borde, borde de rayas) para quien no
   distingue colores. Contraste del número sobre su fondo: más de 7:1. */
.especial--feriado { --esp-fondo: #f6dcda; --esp-texto: #7a1f17; --esp-borde: #b3392d; --esp-linea: solid; }
.especial--feria   { --esp-fondo: #dce6f2; --esp-texto: #1b2a41; --esp-borde: #dce6f2; --esp-linea: solid; }
.especial--inhabil { --esp-fondo: #f1e6cf; --esp-texto: #5a4214; --esp-borde: #8a6a2e; --esp-linea: dashed; }

.calendario td.especial span { border: 2px var(--esp-linea) var(--esp-borde); }
.calendario td.especial:not(.hoy) span {
  background: var(--esp-fondo);
  color: var(--esp-texto);
  font-weight: 600;
}
.calendario td.especial.hoy span { border-color: var(--azul); }

.calendario__leyenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem .9rem;
  margin: -.3rem 0 0; /* el panel ya separa sus partes (gap) */
  padding: 0;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.calendario__leyenda li { display: flex; align-items: center; gap: .35rem; }
.calendario__muestra {
  display: inline-block;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--esp-fondo);
  border: 2px var(--esp-linea) var(--esp-borde);
}
.calendario__especiales {
  list-style: none;
  margin: -.5rem 0 0;
  padding: 0;
  font-size: var(--t-xs);
  color: var(--texto);
  text-align: left;
}
.calendario__especiales li {
  border-left: 4px solid var(--esp-borde);
  padding: .15rem 0 .15rem .45rem;
}
.calendario__especiales li + li { margin-top: .3rem; }
.calendario__especiales li.especial--feria { border-left-color: #3d6496; }
.calendario__especiales strong { color: var(--azul); }
.calendario__leyenda[hidden], .calendario__especiales[hidden] { display: none; }

.aside .boton { margin-top: .2rem; }

/* ==========================================================
   Componentes de las páginas
   ========================================================== */

.aside__texto { margin: 0; text-align: center; }

/* Redes sociales del aside (06/10/2026). */
.redes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; width: 100%; }
.redes__enlace {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem .8rem; border: 1px solid var(--dorado); border-radius: 6px;
  color: var(--azul); font-weight: 600; text-decoration: none;
}
.redes__enlace:hover { background: var(--dorado); color: #fff; }
.redes__enlace:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }

.boton--borde {
  background: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
  padding: calc(.65em - 2px) calc(1.3em - 2px);
}
.boton--borde:hover { background: var(--azul); color: #fff; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.2rem 0 0;
}

.enlace-flecha {
  font-weight: 600;
  text-decoration: none;
}
.enlace-flecha::after { content: " →"; }
.enlace-flecha:hover { text-decoration: underline; }

.nota {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.lista { margin: 0; padding-left: 1.2rem; }
.lista li + li { margin-top: .3rem; }

/* ---------- El Estudio: accesos a las áreas ---------- */
.tarjetas-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .6rem;
}

.tarjetas-areas a {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  height: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--aside);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.tarjetas-areas a:hover {
  border-color: var(--dorado);
  box-shadow: 0 2px 8px rgba(27, 42, 65, .08);
}
.tarjetas-areas strong { color: var(--azul); }
.tarjetas-areas span { font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------- Áreas: profesional a cargo (opcional) ---------- */
.profesional {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.1rem;
  padding: .7rem .9rem;
  background: var(--fondo);
  border-radius: var(--radio);
}
.profesional img {
  border-radius: 50%;
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
}
.profesional p { margin: 0; }
.profesional__rol {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
}

/* ---------- Contacto ---------- */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
}
.datos dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
  font-weight: 600;
}
.datos dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
/* Fila WhatsApp (17/10/2026): logo antes del número y las redes en chico a la derecha.
   Los íconos se ven de 18 px pero cada enlace mide 44 × 44 (área de toque); el margen
   negativo evita que la fila crezca. Si no entran, bajan debajo del número. */
.datos__whatsapp {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 .75rem;
}
.datos__wa { display: inline-flex; align-items: center; gap: .4rem; }
.datos__wa-logo { flex-shrink: 0; color: #128c7e; } /* verde WhatsApp oscuro: 4,2:1 sobre blanco */
/* Título "Redes" (mismo estilo que los dt, 17/10/2026) centrado sobre los dos íconos.
   El margen de arriba negativo lo sube a la altura del dt "WhatsApp" para que la fila
   no crezca. */
.datos__redes {
  margin: -1.6rem 0 -.6rem auto;
  display: flex; flex-direction: column; align-items: center;
}
.datos__redes-titulo {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
  font-weight: 600;
  line-height: 1.5;
}
.datos__redes-lista { list-style: none; margin: 0; padding: 0; display: flex; }
.datos__red {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--texto-suave);
}
.datos__red:hover { color: var(--azul); background: var(--fondo); }
.datos__red:focus-visible { outline: 3px solid var(--dorado); outline-offset: -3px; }

.horario {
  width: 100%;
  border-collapse: collapse;
}
.horario th,
.horario td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--section);
}
.horario th { font-weight: 600; color: var(--azul); }

.mapa {
  border-radius: var(--radio);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--section);
}
/* Mapa propio de Contacto (17/10/2026): Leaflet + OpenStreetMap, ver /js/mapa.js */
/* En el celular la proporción 16:10 deja ~190 px y el globo no entra: alto fijo de 340 px
   (sin aspect-ratio, que si no estiraría el ancho y la página se correría de costado). */
.mapa { position: relative; }
@media (max-width: 600px) {
  .mapa { aspect-ratio: auto; height: 340px; }
}
.mapa__sin-js {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mapa.mapa--activo { font: inherit; z-index: 0; } /* z-index: el mapa no tapa el menú ni el asistente */
.mapa__pie { margin: .6rem 0 0; font-size: var(--t-sm); }
.mapa__pie a { color: var(--azul); }
/* Puntero: el símbolo del estudio en un círculo con borde dorado y sombra */
.mapa__puntero {
  border-radius: 50%;
  border: 3px solid var(--dorado);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.mapa__puntero:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
/* Globo */
.mapa .leaflet-popup-content { margin: 14px 16px; font-family: inherit; line-height: 1.35; }
.mapa-globo { text-align: center; color: var(--texto); }
.mapa-globo p { margin: 0; }
.mapa-globo__logo { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto .5rem; }
.mapa-globo__nombre { font-weight: 700; color: var(--azul); font-size: var(--t-sm); }
.mapa-globo__frase { font-style: italic; color: var(--texto-suave); font-size: var(--t-xs); margin-top: .3rem !important; }
.mapa-globo__direccion { font-size: var(--t-xs); margin-top: .4rem !important; }
.mapa .mapa-globo__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: .7rem;
  color: #fff;
  font-size: var(--t-sm);
}
.mapa .leaflet-popup-close-button { width: 32px; height: 32px; font-size: 22px; line-height: 30px; color: var(--texto-suave); }
.mapa .leaflet-control-attribution { font-size: var(--t-xs); }
.mapa .leaflet-control-attribution a { color: var(--azul); }

/* ---------- Equipo: foto grupal ---------- */
.foto-grupal { margin: 0; }
.foto-grupal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
}
.foto-grupal figcaption {
  text-align: center;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  margin-top: .6rem;
}

/* ---------- Equipo: carrusel ---------- */
.carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.carrusel__pista {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;          /* sin esto la pista se estira y la página scrollea de costado */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * .8rem) / 3);   /* 3 a la vez */
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 2px solid var(--dorado); outline-offset: 4px; }

.carrusel__item { scroll-snap-align: start; }

.miembro {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: center;
}
.miembro img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  height: auto;
  object-fit: cover;
}
.miembro figcaption {
  padding: .8rem .6rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.miembro__nombre {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--azul);
  font-size: var(--t-base);
}
.miembro__cargo { font-size: var(--t-xs); color: var(--texto-suave); }
.miembro__especialidad {
  font-size: var(--t-sm);
  font-weight: 600;
  color: #8a6b35;
}
.miembro__mas { margin-top: .4rem; font-size: var(--t-xs); font-weight: 600; color: var(--azul); }

/* Trayectoria de un integrante (07/10/2026): foto al costado en pantalla
   ancha, arriba en el celular. */
.trayectoria { display: grid; gap: 1.2rem; align-items: start; scroll-margin-top: 1rem; }
.trayectoria__foto { width: 100%; max-width: 260px; height: auto; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radio); justify-self: center; }
.trayectoria__texto h2 { margin-top: 0; }
.trayectoria__cargo { margin-top: -.4rem; font-weight: 600; color: #8a6b35; }
@media (min-width: 700px) {
  .trayectoria { grid-template-columns: 220px 1fr; }
  .trayectoria__foto { max-width: none; }
}

.carrusel__boton {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 0;
  background: var(--azul);
  color: #fff;
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding-bottom: .2rem;
}
.carrusel__boton:hover { background: var(--azul-claro); }
.carrusel__boton:disabled { opacity: .3; cursor: default; }

.carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin-top: 1rem;
}
.carrusel__puntos button {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0;
  padding: .4rem;            /* zona de toque de 24 px; el círculo visible sigue de 11 px */
  background: var(--aside);
  background-clip: content-box;
  cursor: pointer;
}
.carrusel__puntos button[aria-current="true"] { background-color: var(--dorado); }

/* ---------- Misión: valores ---------- */
.valores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .7rem;
}
.valores li {
  background: var(--fondo);
  border-radius: var(--radio);
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
}
.valores strong { color: var(--azul); }
.valores span { font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------- Publicaciones ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.filtros__cuenta { font-weight: 400; opacity: .7; }

.publicaciones {
  display: flex;
  flex-direction: column;
  gap: var(--separacion);
}
.publicacion h2 { font-size: var(--t-md); margin-bottom: .4rem; }
.publicacion p:last-child { margin-bottom: 0; }

.publicacion__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .6rem;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.publicaciones__vacio { text-align: center; color: var(--texto-suave); }

.etiqueta {
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--section);
  color: var(--azul);
}
.etiqueta--leyes { background: #dfe7f3; color: #1b3a66; }
.etiqueta--modificaciones { background: #e8e1f2; color: #4a2f73; }
.etiqueta--fallos { background: #f3e2df; color: #7a2b1f; }
.etiqueta--casos { background: #e0efe4; color: #1f5b33; }
.etiqueta--cumpleanos { background: #f7ecd6; color: #7a5516; }


/* ---------- Accesibilidad ---------- */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dorado);
  color: var(--azul);
  padding: .6rem 1rem;
  z-index: 10;
  font-weight: 600;
}
.saltar:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Aside: más noticias ---------- */
.noticia__mas {
  list-style: none;
  margin: .3rem 0 0;
  padding: .6rem 0 0;
  border-top: 1px solid var(--aside);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: var(--t-sm);
}
.noticia__mas a { color: var(--azul); }
.noticia__mas span { display: block; font-size: var(--t-xs); color: var(--texto-suave); }

/* ---------- Inicio: últimas publicaciones ---------- */
.ultimas {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ultimas li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--section);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ultimas a { font-weight: 600; color: var(--azul); text-decoration: none; }
.ultimas a:hover { text-decoration: underline; }
.ultimas__meta { font-size: var(--t-xs); color: var(--texto-suave); display: flex; gap: .5rem; align-items: center; }

/* ---------- Publicaciones: filtros como enlaces ---------- */
.filtros a {
  font-size: var(--t-sm);
  font-weight: 600;
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 2px solid var(--azul);
  color: var(--azul);
  text-decoration: none;
}
.filtros a:hover { background: rgba(27, 42, 65, .08); }
.filtros a[aria-current="page"] { background: var(--azul); color: #fff; }

.publicacion h2 a { color: var(--azul); text-decoration: none; }
.publicacion h2 a:hover { text-decoration: underline; }
.publicacion__icono { font-size: var(--t-xs); }

.publicacion__cuerpo {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.publicacion__imagen img {
  display: block;
  width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radio);
}

.paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  font-weight: 600;
}

/* ---------- Publicación completa ---------- */
.migas { font-size: var(--t-sm); color: var(--texto-suave); }
.migas a { color: var(--texto-suave); }

.publicacion__titulo {
  font-size: var(--t-xl);
  color: var(--azul);
  margin: 0 0 .5rem;
}
.publicacion__bajada {
  font-size: var(--t-base);
  color: var(--texto-suave);
  margin: 0 0 1.2rem;
}
.publicacion__figura { margin: 0 0 1.2rem; }
.publicacion__figura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio);
}
.publicacion__texto p { margin: 0 0 1em; }
.publicacion__subtitulo { font-size: var(--t-md) !important; margin-top: 1.6rem; }

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 0 1rem;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
}
.video iframe,
.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.adjuntos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.adjuntos a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  border: 1px solid var(--aside);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--azul);
  overflow-wrap: anywhere;
}
.adjuntos a:hover { border-color: var(--dorado); }
.adjuntos__tipo {
  flex-shrink: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--azul);
  color: #fff;
}

.enlace-flecha--atras::after { content: ""; }
.enlace-flecha--atras::before { content: "← "; }

.etiqueta--noticias { background: #e3e7ee; color: var(--azul); }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--azul);
  color: #d9dde5;
  border-radius: var(--radio);
  padding: 1.2rem 2rem;
  text-align: center;
  font-size: var(--t-sm);
}

.footer p { margin: 0; }

.footer__nota {
  margin-top: .3rem !important;
  font-size: var(--t-xs);
  color: #9aa4b5;
}

.footer__acceso {
  margin-top: .6rem !important;
  font-size: var(--t-xs);
}

.footer__acceso a {
  color: #9aa4b5;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.footer__acceso a:hover,
.footer__acceso a:focus-visible { color: var(--dorado); }

/* ---------- Responsive: celulares y tablets ---------- */

/* Menú plegable: con 6 opciones ya no entra en una línea */
@media (max-width: 960px) {
  .nav__toggle { display: block; }
  .nav__lista { display: none; flex-direction: column; }
  .nav__lista.abierta { display: flex; }
  .nav__lista a {
    padding: .7rem 1rem;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .nav__lista a[aria-current="page"] { border-left-color: var(--dorado); }

  .carrusel__pista { grid-auto-columns: calc((100% - .8rem) / 2); }   /* 2 a la vez */
}

@media (max-width: 800px) {
  body { padding: 8px; gap: 8px; }

  .contenido { grid-template-columns: minmax(0, 1fr); }  /* aside pasa debajo de section */

  .header { padding: 1.2rem; justify-content: center; text-align: center; }
  .header__marca { flex-direction: column; }

  .section { padding: 1.2rem; }
  .article { padding: 1.2rem; }
}

@media (max-width: 480px) {
  .carrusel__pista { grid-auto-columns: 100%; }   /* 1 a la vez */
  .carrusel__boton { width: 2rem; height: 2rem; font-size: var(--t-md); }
  .acciones .boton { flex: 1 1 100%; }
  .publicacion__cuerpo { flex-direction: column; }
  .publicacion__imagen img { width: 100%; height: auto; aspect-ratio: 5 / 3; }
}

/* ==========================================================
   PREGUNTAS FRECUENTES (04/10/2026): temas que se despliegan y,
   adentro, preguntas que también se despliegan.
   ========================================================== */
.boton--chico { padding: .4em .9em; font-size: var(--t-sm); }
.boton--borde.boton--chico { padding: calc(.4em - 2px) calc(.9em - 2px); }

.faq__herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
}
.faq__buscar { flex: 1 1 280px; }
.faq__buscar input {
  width: 100%;
  padding: .65em .9em;
  font: inherit;
  border: 2px solid #8a8070;  /* borde de campo: 3:1 o más sobre blanco */
  border-radius: var(--radio);
  background: var(--superficie);
}
.faq__buscar input:focus { outline: 3px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.faq__botones { display: flex; gap: .4rem; }
.faq__estado { margin: 0; min-height: 0; }

.faq-tema {
  background: var(--superficie);
  border-radius: var(--radio);
  border-left: 4px solid var(--dorado);
}
.faq-tema__resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.4rem;
  cursor: pointer;
  list-style: none;
}
.faq-tema__resumen::-webkit-details-marker { display: none; }
.faq-tema__resumen::before {
  content: "+";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  line-height: 1.6rem;
  text-align: center;
}
.faq-tema[open] > .faq-tema__resumen::before { content: "−"; background: var(--dorado); color: var(--azul); }
.faq-tema__titulo {
  flex: 1;
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--azul);
}
.faq-tema__cantidad { font-size: var(--t-xs); color: var(--texto-suave); white-space: nowrap; }
.faq-tema__resumen:focus-visible,
.faq-pregunta__resumen:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }
.faq-tema__lista { padding: 0 1.4rem 1rem 3.4rem; }

.faq-pregunta { border-top: 1px solid var(--section); }
.faq-pregunta__resumen {
  position: relative;
  padding: .75rem 2rem .75rem 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--azul-claro);
  list-style: none;
}
.faq-pregunta__resumen::-webkit-details-marker { display: none; }
.faq-pregunta__resumen::after {
  content: "▾";
  position: absolute;
  right: .3rem;
  top: .75rem;
  color: var(--dorado);
  transition: transform .15s;
}
.faq-pregunta[open] > .faq-pregunta__resumen::after { transform: rotate(180deg); }
.faq-pregunta__resumen:hover { color: var(--azul); text-decoration: underline; text-decoration-color: var(--dorado); }
.faq-pregunta__respuesta { padding: 0 0 .9rem; color: var(--texto); }
.faq-pregunta__respuesta p { margin: 0 0 .6rem; }

.faq__cierre { border-left-color: var(--azul); }

/* ==========================================================
   PEDIR TURNO (04/10/2026)
   ========================================================== */
.turno-web { display: flex; flex-direction: column; gap: 1.2rem; }
.turno-web__paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.turno-web__paso legend {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--azul);
  margin-bottom: .6rem;
}
.turno-web__dias,
.turno-web__lista-horas { display: flex; flex-wrap: wrap; gap: .5rem; }
.turno-web__dias { max-height: 15rem; overflow-y: auto; padding: 2px; }
.turno-web__opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 5.5rem;
  padding: .5rem .7rem;
  border: 2px solid var(--aside);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--azul);
  font: inherit;
  cursor: pointer;
}
.turno-web__opcion span { font-size: var(--t-xs); color: var(--texto-suave); }
.turno-web__opcion:hover { border-color: var(--dorado); }
.turno-web__opcion:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }
.turno-web__opcion[aria-pressed="true"],
.turno-web__opcion[aria-checked="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.turno-web__opcion[aria-pressed="true"] span,
.turno-web__opcion[aria-checked="true"] span { color: #e5d7bd; }
/* Preferencia de turno (06/10/2026): dos opciones grandes, mañana y tarde. */
.turno-web__opcion--preferencia { min-width: 12rem; padding: .9rem 1.2rem; }
.turno-web__opcion--preferencia strong { font-size: var(--t-base); }
.turno-web__opcion--hora { min-width: 4.5rem; font-weight: 600; }
.turno-web__dia { margin: 0 0 .5rem; font-weight: 600; }

.turno-web__campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1rem;
}
.turno-web__campos label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; color: var(--azul); }
.turno-web__campos small { font-weight: 400; color: var(--texto-suave); }
.turno-web__campos input[type="text"],
.turno-web__campos input[type="tel"],
.turno-web__campos input[type="email"],
.turno-web__campos textarea {
  padding: .6em .8em;
  font: inherit;
  font-weight: 400;
  border: 2px solid #8a8070;  /* borde de campo: 3:1 o más sobre blanco */
  border-radius: var(--radio);
  background: #fff;
}
.turno-web__campos input:focus,
.turno-web__campos textarea:focus { outline: 3px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.turno-web__ancho { grid-column: 1 / -1; }
.turno-web__acepto { display: flex; gap: .6rem; flex-direction: row !important; align-items: flex-start; font-weight: 400 !important; color: var(--texto) !important; }
/* Días de la semana (06/10/2026): botones chicos que se marcan y desmarcan. */
.turno-web__dias--semana { max-height: none; }
.turno-web__opcion--dia { min-width: 6.5rem; font-weight: 600; }
.turno-web__acepto input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; flex: none; }
.turno-web__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turno-web__resumen { margin: 0; font-weight: 600; color: var(--azul); }
.turno-web__resumen:empty { display: none; }
.turno-web__error { margin: 0; padding: .6rem .9rem; border-radius: var(--radio); background: #fbe9e7; color: #8a1c12; }
.turno-web button[type="submit"] { align-self: flex-start; font-size: var(--t-base); }
.turno-web__listo { border-left-color: #2e7d32; }
.turno-web__listo:focus { outline: none; }

@media (max-width: 600px) {
  .turno-web__campos { grid-template-columns: minmax(0, 1fr); }
  .turno-web button[type="submit"] { align-self: stretch; }
  .faq-tema__lista { padding: 0 1rem 1rem; }
  .faq-tema__resumen { padding: .9rem 1rem; }
}

/* ==========================================================
   ASISTENTE (04/10/2026): globo de ayuda abajo a la derecha que
   responde con las preguntas frecuentes (pb_public/js/asistente.js).
   ========================================================== */
.asistente {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-size: var(--t-base);
}
.asistente__abrir {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border: 2px solid var(--dorado);
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(27, 42, 65, .3);
}
.asistente__abrir:hover { background: var(--azul-claro); }
.asistente__abrir:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; }
.asistente__icono { font-size: var(--t-md); line-height: 1; }
.asistente--abierto .asistente__abrir-texto { display: none; }

.asistente__panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 110px));
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(27, 42, 65, .35);
}
.asistente__cabecera {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  background: var(--azul);
  color: #fff;
  border-bottom: 3px solid var(--dorado);
}
.asistente__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--dorado);
  border-radius: 50%;
  color: var(--dorado);
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: var(--t-md);
}
.asistente__titulos { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.asistente__titulos small { color: #d9c6a0; font-size: var(--t-xs); }
.asistente__cerrar {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 .3rem;
}
.asistente__cerrar:focus-visible { outline: 2px solid var(--dorado); }

.asistente__charla {
  flex: 1;
  overflow-y: auto;
  padding: .9rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.asistente__globo {
  max-width: 88%;
  padding: .55rem .8rem;
  border-radius: 12px;
  font-size: var(--t-sm);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.asistente__globo p { margin: 0 0 .45rem; }
.asistente__globo p:last-child { margin-bottom: 0; }
.asistente__globo--estudio {
  align-self: flex-start;
  background: var(--superficie);
  border-top-left-radius: 3px;
  border-left: 3px solid var(--dorado);
}
.asistente__globo--persona {
  align-self: flex-end;
  background: var(--azul);
  color: #fff;
  border-top-right-radius: 3px;
}
.asistente__pregunta { font-weight: 700; color: var(--azul); }
.asistente__fuente { font-size: var(--t-xs); }
.asistente__fuente a { color: var(--azul-claro); }

.asistente__opciones { display: flex; flex-wrap: wrap; gap: .35rem; }
.asistente__opcion {
  padding: .35rem .7rem;
  border: 1.5px solid var(--azul);
  border-radius: 999px;
  background: #fff;
  color: var(--azul);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.asistente__opcion:hover { background: var(--azul); color: #fff; }
.asistente__opcion:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.asistente__opcion--enlace { border-color: var(--dorado); }

.asistente__escribir { display: flex; gap: .4rem; padding: .6rem .7rem; background: var(--section); }
.asistente__escribir input {
  flex: 1;
  min-width: 0;
  padding: .55rem .75rem;
  font: inherit;
  font-size: var(--t-sm);
  border: 1.5px solid #8a8070;
  border-radius: 999px;
  background: #fff;
}
.asistente__escribir input:focus { outline: 3px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.asistente__escribir .boton { padding: .5rem .9rem; border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: var(--t-sm); cursor: pointer; }
.asistente__aviso { margin: 0; padding: .35rem .8rem .55rem; background: var(--section); font-size: var(--t-xs); color: var(--texto-suave); }

@media (max-width: 480px) {
  .asistente { right: 10px; bottom: 10px; }
  .asistente__abrir { padding: .65rem .9rem; }
  /* Que el globo no tape "Acceso del personal" al llegar al final de la página */
  .footer { padding-bottom: 4.5rem; }
  .asistente__panel { height: calc(100vh - 90px); }
}
@media print { .asistente { display: none; } }

/* ==========================================================
   AJUSTES DE DISEÑO (09/10/2026) — auditoría con la skill ui-ux-pro-max
   ========================================================== */

/* Foco visible en los botones, igual que el resto de los controles (para quien
   navega con el teclado). */
.boton:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }

/* El desplazamiento suave también respeta "reducir movimiento". */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* En el celular: el encabezado ocupaba casi media pantalla y había cajas dentro
   de cajas (fondo + bloque + tarjeta), así que el texto quedaba en una columna
   angosta. Encabezado en una fila y menos relleno alrededor del texto. */
@media (max-width: 600px) {
  body { padding: 6px; gap: 6px; }

  .header { padding: .9rem 1rem; gap: .8rem; }
  .header__marca { flex-direction: row; gap: .7rem; text-align: left; }
  .header__logo { width: 3rem; height: 3rem; }
  .header__titulo { font-size: var(--t-md); }
  .header__lema { font-size: var(--t-xs); letter-spacing: .05em; }
  .header__cta { width: 100%; padding: .55em 1em; }

  .section { padding: .6rem; }
  .article { padding: 1.1rem 1rem; border-left-width: 3px; }
}
/* ---------- Firma del desarrollador (11/10/2026) ----------
   Logo DOS blanco de 22 px + texto chico, sin enlace, al final del pie.
   Texto #9aa4b5 sobre el azul del pie: 5,74:1. */
.footer .firma-dos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .6rem;
  font-size: var(--t-xs);
  color: #9aa4b5;
}
.firma-dos img { display: block; width: auto; height: 22px; opacity: .85; }
/* Slogan de la firma (20/10/2026): "Tu negocio en línea", "en línea" en el naranja de los cerros del logo. */
.firma-dos__slogan em { font-style: normal; color: #F0997B; }
/* «© año Hecho por [DOS]» va junto: si la firma no entra en una línea, el slogan baja solo a la segunda. */
.firma-dos__marca { display: inline-flex; align-items: center; gap: inherit; white-space: nowrap; }
/* Entre 481 y 900 px el globo del asistente también puede tapar el final del
   pie (por debajo de 481 ya deja lugar el relleno de arriba). */
@media (min-width: 481px) and (max-width: 900px) {
  .footer { margin-bottom: 4.5rem; }
}

/* ---------- ANCHO DE LA PÁGINA (26/10/2026, "B + C") ----------
   En monitores grandes (27") la página quedaba como una caja de 1200 px con
   mucho fondo vacío a los costados.
   C: el encabezado, el menú, la foto de la portada y el pie van de borde a borde.
   B: el contenido pasa de 1200 a 1400 px, pero los párrafos no pasan de ~75
      caracteres por línea (más largos se leen peor).
   Solo el sitio público: el panel (body.panel) tiene su propio ancho en panel.css. */
:root { --ancho-contenido: 1400px; }

body:not(.panel) {
  max-width: none;
  padding: 0;
  overflow-x: clip;              /* la portada usa 100vw: sin barra horizontal */
}

/* Franjas: el fondo ocupa toda la pantalla y lo de adentro se alinea con el contenido. */
body:not(.panel) > .header,
body:not(.panel) > .footer {
  border-radius: 0;
  padding-inline: max(2rem, calc((100% - var(--ancho-contenido)) / 2 + 2rem));
}
body:not(.panel) > .nav {
  border-radius: 0;
  margin-top: calc(-1 * var(--separacion));   /* encabezado y menú, una sola franja */
  padding-inline: max(0px, calc((100% - var(--ancho-contenido)) / 2));
}

body:not(.panel) > .contenido {
  width: 100%;
  max-width: calc(var(--ancho-contenido) + 2 * var(--separacion));
  margin-inline: auto;
  padding-inline: var(--separacion);
}

/* Foto de la portada (El Estudio): de borde a borde, pegada al menú. */
body:not(.panel) > .contenido:has(> .portada) { margin-top: calc(-1 * var(--separacion)); }
body:not(.panel) .portada {
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
}
body:not(.panel) .portada__texto { padding-inline: max(2rem, calc((100vw - var(--ancho-contenido)) / 2 + 2rem)); }

/* B: renglones cómodos aunque la tarjeta sea ancha. */
.article p,
.article li { max-width: 75ch; }

/* Con más ancho, el carrusel del equipo muestra 4 tarjetas y el costado se ensancha un poco. */
@media (min-width: 1500px) {
  .carrusel__pista { grid-auto-columns: calc((100% - 3 * .8rem) / 4); }   /* 4 a la vez */
  body:not(.panel) > .contenido { grid-template-columns: minmax(0, 1fr) 360px; }
}

@media (max-width: 800px) {
  body:not(.panel) > .header,
  body:not(.panel) > .footer { padding-inline: 1.2rem; }
  body:not(.panel) > .contenido { padding-inline: 8px; }
}

/* El globo del asistente: lugar dentro del pie (no un margen beige debajo de la franja). */
@media (min-width: 481px) and (max-width: 900px) {
  body:not(.panel) > .footer { margin-bottom: 0; padding-bottom: 4.5rem; }
}

/* ---------- Modo demo (SITIO.demo): franja arriba de todo ---------- */
/* Azul marino sobre dorado: 5,5:1. Se va sola con `demo: null` en sitio.js. */
.franja-demo {
  margin: 0;
  padding: .45rem 1rem;
  background: var(--dorado);
  color: var(--azul);
  font-size: var(--t-xs);
  line-height: 1.4;
  text-align: center;
}
.franja-demo a {
  color: var(--azul);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.franja-demo a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ---------- Ver el panel (modo demo): capturas ---------- */
.capturas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.captura h2 { margin-bottom: .3rem; }
.captura p { margin: 0 0 .8rem; color: var(--texto-suave); }
.captura a { display: block; border-radius: var(--radio); overflow: hidden; box-shadow: 0 4px 18px rgba(27, 42, 65, .18); }
.captura a:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; }
.captura img { display: block; width: 100%; height: auto; }
.capturas__cierre { margin-top: 2rem; }