/* ==========================================================================
   Doisol — Components
   ========================================================================== */

/* --- Navigation ----------------------------------------------------------
   Two states, one authored transition. Over the hero the bar is transparent
   and full width, so the headline and the form own the first viewport. Once
   the page scrolls it contracts into a solid floating pill.

   The width change is a discrete state toggle, not a scroll-linked
   animation: it reflows once per direction change, not per frame. */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  color: var(--blanco);
  padding-top: 0;
  transition: padding-top var(--dur-nav) var(--ease-out-quint);
}

/* La contracción es el gesto más visible del sitio, así que se le da tiempo:
   con 260 ms el salto de ancho se leía como un corte. Curva de desaceleración
   larga y una sola duración compartida por todas las propiedades, para que
   nada llegue antes que el resto. */
.nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.75rem;
  padding-inline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background-color var(--dur-nav) var(--ease-out-quint),
              border-radius var(--dur-nav) var(--ease-out-quint),
              padding var(--dur-nav) var(--ease-out-quint),
              min-height var(--dur-nav) var(--ease-out-quint),
              box-shadow var(--dur-nav) var(--ease-out-quint),
              max-width var(--dur-nav) var(--ease-out-quint);
}

.nav[data-fijo='true'] { padding-top: var(--s-3); }

/* Rectángulo redondeado, NO píldora. Un radio completo en la barra convivía
   con esquinas de 12 px en el panel y en los botones, y la mezcla se leía como
   un error. Todo el cromo del menú comparte ahora --r-lg.
   El cambio de altura es corto a propósito: un salto de 76 a 60 px sumado al
   de ancho era lo que hacía sentir brusca la transición. */
.nav[data-fijo='true'] .nav__interior {
  max-width: 62rem;
  min-height: 4.25rem;
  padding-inline: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--linea-profunda);
  box-shadow: 0 10px 30px -12px rgba(0, 30, 97, 0.55);
}

/* Under the pill the page scrolls past, so the bar needs its own contrast
   against light sections; the solid fill provides it. */

.nav__marca { display: flex; align-items: center; }

/* Solo la palabra marca se reescala al contraerse la barra. La regla anterior
   apuntaba a `img` en general y estiraba también el símbolo del móvil de 34 a
   108 px al hacer scroll. */
.nav__marca .marca-completa {
  width: clamp(104px, 11vw, 128px);
  transition: width var(--dur-nav) var(--ease-out-quint);
}
.nav[data-fijo='true'] .nav__marca .marca-completa { width: 104px; }

.nav__enlaces {
  display: none;
  align-items: center;
  gap: var(--s-6);
  font-size: var(--t-sm);
  font-weight: 500;
}

.nav__enlaces a {
  text-decoration: none;
  padding-block: var(--s-2);
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--dur-rapida) var(--ease-out);
}

.nav__enlaces a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--blanco);
  transition: right var(--dur-media) var(--ease-out);
}

.nav__enlaces a:hover,
.nav__enlaces a[aria-current='page'] { color: var(--blanco); }
.nav__enlaces a:hover::after,
.nav__enlaces a[aria-current='page']::after { right: 0; }

.nav__acciones {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}

/* On a phone the bar cannot hold the mark, a CTA and the menu toggle without
   overflowing — and the hero form is already the first thing on screen, so
   the nav CTA has nothing to add there. It returns with the wider bar. */
.nav__acciones .boton { display: none; }

@media (min-width: 34rem) {
  .nav__acciones .boton { display: inline-flex; }
}

.nav__alternar {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--blanco);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
}

.nav__panel { display: none; }

/* Mismo radio que la barra: el panel cuelga de ella y dos redondeos distintos
   en piezas contiguas leen como un error, no como una decisión. */
.nav__panel[data-abierto='true'] {
  display: block;
  margin-top: var(--s-3);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--linea-profunda);
  box-shadow: 0 18px 40px -18px rgba(0, 30, 97, 0.7);
}

.nav__panel ul { display: grid; gap: var(--s-1); }

.nav__panel a {
  display: block;
  padding: var(--s-3) 0;
  text-decoration: none;
  font-size: var(--t-md);
  font-family: var(--fuente-display);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.nav__panel li:last-child a { border-bottom: 0; }

/* Mobile carries the symbol only; the full lockup with the slogan loses
   legibility at that size (manual de marca 02.04, reductibilidad).
   El símbolo mantiene su tamaño en los dos estados de la barra: es ya el
   tamaño mínimo, y encogerlo más lo vuelve ilegible. */
.nav__marca .marca-simbolo {
  width: 34px;
  height: auto;
}
.nav__marca .marca-completa { display: none; }

@media (min-width: 48rem) {
  .nav__marca .marca-simbolo { display: none; }
  .nav__marca .marca-completa { display: block; }
}

@media (min-width: 62rem) {
  .nav__enlaces { display: flex; }
  .nav__alternar { display: none; }
  .nav__panel[data-abierto='true'] { display: none; }
}

/* --- Buttons ------------------------------------------------------------- */
/* Two variants only. On a saturated surface the CTA is solid white; on a
   light surface it inverts to solid line colour. There is no third state and
   no accent hue. */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--fuente-display);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-out),
              background-color var(--dur-rapida) var(--ease-out),
              color var(--dur-rapida) var(--ease-out);
}

/* Press feedback: the control has to answer the finger before the system
   answers the request. Scale, not translate — it carries the label with it. */
.boton:active { transform: scale(0.97); }

.boton--blanco {
  background: var(--blanco);
  color: var(--linea-profunda);
}

.boton--solido {
  background: var(--linea);
  color: var(--blanco);
}

.boton--contorno {
  background: transparent;
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}

/* Hover is gated: on touch a tap fires hover and the state sticks. */
@media (hover: hover) and (pointer: fine) {
  .boton--blanco:hover { background: var(--azul-claro); }
  .boton--solido:hover { background: var(--linea-profunda); filter: brightness(0.92); }
  .boton--contorno:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1.5px var(--blanco);
  }
}

.boton--bloque { width: 100%; }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--linea);
  color: var(--blanco);
  overflow: hidden;
  padding-top: 4.75rem; /* clears the fixed nav */
}

/* Anchored sections must not land under the floating pill. */
[id] { scroll-margin-top: 6rem; }

/* Brand manual 03.b: photography carries a brand-colour layer in Multiply,
   40-85% depending on how much the image should assert itself. */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* `display: contents` hace que <picture> desaparezca de la maquetación y la
   <img> quede como hija directa de `.hero__fondo`. Sin esto la imagen se
   mediría contra el <picture>, que es en línea, y el encuadre se rompe. */
.hero__fondo picture { display: contents; }

.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--linea);
  mix-blend-mode: multiply;
  opacity: 0.86;
}

.hero__interior {
  display: grid;
  gap: var(--s-8);
  padding-block: var(--s-10);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero__interior {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s-9);
  }
}

.hero__texto > * + * { margin-top: var(--s-5); }

.hero h1 {
  font-size: var(--t-2xl);
  letter-spacing: -0.03em;
}

.hero__lema {
  font-size: var(--t-md);
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.9);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.78);
  padding-top: var(--s-3);
}

.hero__meta li { display: flex; align-items: center; gap: var(--s-2); }

.hero__meta li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--azul-claro);
  flex: none;
}

/* --- Form ---------------------------------------------------------------- */

.formulario {
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.formulario__titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--azul-oscuro);
}

.formulario__ayuda {
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  margin-top: var(--s-3);
}

.campos {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

.campo { display: grid; gap: var(--s-2); }

.campo label {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--azul-oscuro);
}

.campo input,
.campo select {
  width: 100%;
  padding: var(--s-4);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--blanco);
  color: var(--tinta);
  transition: border-color var(--dur-rapida) var(--ease-out);
}

.campo input::placeholder { color: #6B7794; }

.campo input:hover,
.campo select:hover { border-color: var(--azul-claro); }

.campo input:focus-visible,
.campo select:focus-visible {
  outline: 3px solid var(--linea);
  outline-offset: 1px;
  border-color: var(--linea);
}

.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23001E61' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-8);
}

.campo__error {
  font-size: var(--t-sm);
  font-weight: 500;
  color: #B3261E;
  min-height: 0;
}

.campo[data-invalido='true'] input,
.campo[data-invalido='true'] select { border-color: #B3261E; }

.formulario .boton { margin-top: var(--s-5); }

.formulario__nota {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-top: var(--s-4);
  line-height: 1.5;
}

/* `--linea`, no `--azul`. Escrito a mano, estos enlaces salían en el azul de
   Nómina dentro de los formularios de la página morada: una fuga de línea de
   las que el sistema existe para impedir. */
.formulario__nota a { color: var(--linea); }

/* La insignia flotante de reCAPTCHA se sirve con `position: fixed`,
   `right: -186px` y 256 px de ancho: sobresale 186 px por la derecha del
   viewport. En escritorio pasa desapercibido, pero en móvil habilita el
   desplazamiento horizontal de la página entera y el contenido parece no
   ocupar todo el ancho.

   Google permite ocultarla siempre que su marca quede visible en el flujo,
   así que cada formulario lleva la nota de atribución de abajo. Si quitas la
   nota, tienes que devolver la insignia. */
.grecaptcha-badge { visibility: hidden; }

.formulario__recaptcha {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-top: var(--s-3);
  line-height: 1.5;
}

.formulario__recaptcha a { color: var(--linea); }

.formulario__aviso {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--superficie);
  font-size: var(--t-sm);
  color: var(--azul-oscuro);
}


/* Éxito y error se distinguen por una barra lateral, no por un quinto color:
   la paleta son cuatro y ninguno es rojo ni verde. El error carga el peso y
   el color de línea; el éxito, el mismo trazo en tono de apoyo. El texto
   nunca depende del color para leerse. */
.formulario__aviso[data-estado='error'] {
  border-left: 4px solid var(--linea);
  font-weight: 500;
}

.formulario__aviso[data-estado='exito'] {
  border-left: 4px solid var(--azul-claro);
}

/* Dentro de un formulario sobre superficie saturada el aviso conserva el
   fondo claro: es el mismo panel blanco del formulario. */

/* --- The fork: the only place both lines appear, hard-edged, never mixed - */

.bifurcacion {
  display: grid;
  gap: 2px;
  background: var(--borde);
}

@media (min-width: 52rem) {
  .bifurcacion { grid-template-columns: 1fr 1fr; }
}

.puerta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-4);
  min-height: clamp(22rem, 40vh, 30rem);
  padding: var(--s-7) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  color: var(--blanco);
  text-decoration: none;
  overflow: hidden;
}

.puerta--nomina { background: var(--azul); }
.puerta--talento { background: var(--morado); }

/* The pattern is a full field, not a corner ornament.
   It is always the WHITE texture: the purple texture over the purple door
   was purple-on-purple and read as missing, and `no-repeat` at 70% with an
   off-canvas origin cropped it on the blue door. Tiling at a fixed pixel
   size keeps both doors at the same pattern scale whatever their width. */
.puerta__textura {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-repeat: repeat;
  background-position: center;
  background-size: 300px;
  opacity: 0.14;
  transition: transform var(--dur-lenta) var(--ease-out-quint),
              opacity var(--dur-lenta) var(--ease-out-quint);
}

@media (hover: hover) and (pointer: fine) {
  .puerta:hover .puerta__textura {
    transform: scale(1.06);
    opacity: 0.2;
  }
}

.puerta__etiqueta {
  font-size: var(--t-sm);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}

.puerta h3 {
  font-size: var(--t-xl);
  letter-spacing: -0.03em;
}

.puerta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 34ch;
}

.puerta__ir {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--fuente-display);
  font-weight: 700;
  margin-top: var(--s-2);
}

.puerta__ir svg { transition: transform var(--dur-media) var(--ease-out); }
.puerta:hover .puerta__ir svg { transform: translateX(6px); }

/* --- Sector switcher: proof by specificity, not a card grid --------------
   An accordion of six operations paired with the photograph of that
   operation. It advances on its own so a visitor who never clicks still
   sees their own sector go by; the progress rule under the open item is
   the only honest way to say "this is moving and you can stop it". */

.sectores__disposicion { display: grid; gap: var(--s-6); }

@media (min-width: 58rem) {
  .sectores__disposicion {
    grid-template-columns: minmax(18rem, 24rem) 1fr;
    gap: var(--s-8);
    align-items: start;
  }
}

.sectores__lista { display: grid; }

.sectores__item {
  border-bottom: 1px solid var(--borde);
}
.sectores__item:first-child { border-top: 1px solid var(--borde); }

.sectores__boton {
  position: relative;
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: var(--s-4) 0;
  font-family: var(--fuente-display);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--tinta-suave);
  cursor: pointer;
  text-align: left;
  transition: color var(--dur-rapida) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .sectores__boton:hover { color: var(--tinta); }
}

.sectores__boton[aria-expanded='true'] { color: var(--linea); }

/* Progress rule. Linear, because constant motion with an easing curve
   misreports how much time is left. */
.sectores__barra {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--linea);
  pointer-events: none;
}

.sectores__item[data-activo='true'] .sectores__barra {
  animation: avanzar var(--sector-dur, 7000ms) linear forwards;
}

[data-sectores][data-pausado='true'] .sectores__barra {
  animation-play-state: paused;
}

@keyframes avanzar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* The detail collapses with grid-template-rows, which animates cleanly from
   0fr to 1fr without measuring content height in JS.

   It is open by DEFAULT and only collapses under `.js`. Without JavaScript
   nothing can reopen it, so a collapsed default would bury five of the six
   sectors with no way back. */
.sectores__detalle {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--dur-media) var(--ease-out),
              opacity var(--dur-media) var(--ease-out);
}

.js .sectores__detalle {
  grid-template-rows: 0fr;
  opacity: 0;
}

.js .sectores__item[data-activo='true'] .sectores__detalle {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sectores__detalle > div { overflow: hidden; }

.sectores__respuesta {
  padding-bottom: var(--s-4);
  color: var(--tinta-suave);
  max-width: 46ch;
}

.sectores__detalles {
  display: grid;
  gap: var(--s-2);
  padding-bottom: var(--s-5);
}

.sectores__detalles li {
  display: grid;
  grid-template-columns: 0.85rem 1fr;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--tinta);
}

.sectores__detalles li::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 2px;
  background: var(--linea);
}

/* --- Sector image panel -------------------------------------------------- */

.sectores__escenario {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--linea-profunda);
}

.sectores__foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  transition: opacity var(--dur-lenta) var(--ease-out),
              transform var(--dur-lenta) var(--ease-out),
              filter var(--dur-lenta) var(--ease-out);
}

/* Blur bridges the crossfade: without it the eye reads two photographs
   overlapping instead of one changing. */
.sectores__foto[data-activo='true'] {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Igual que en el hero: sin `display: contents` la imagen se mediría contra
   el <picture>, que es en línea, y saldría del encuadre. */
.sectores__foto picture { display: contents; }

.sectores__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Brand colour layer in Multiply, per manual de marca 03.b. */
.sectores__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--linea);
  mix-blend-mode: multiply;
  opacity: 0.42;
}

/* La leyenda va sobre fotografía, y una sombra de texto no basta cuando debajo
   hay una escena clara y ocupada: se apoya en un degradado real desde el fondo
   del encuadre, que oscurece la zona sin tapar la imagen. */
.sectores__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s-8) var(--s-5) var(--s-5);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -0.02em;
  line-height: 1.2;
  background: linear-gradient(to top,
              rgba(0, 20, 66, 0.92) 0%,
              rgba(0, 20, 66, 0.72) 42%,
              rgba(0, 20, 66, 0) 100%);
}

/* Before the script runs, the first item is already marked `data-activo` in
   the HTML, so the panel collapses to its opening state without a flash. */

/* Aquí vivía una segunda regla `.sectores__escenario` con estilos de titular
   —tipografía display, `--t-lg`, color de tinta y `max-width: 24ch`—, hermana
   de `.sectores__respuesta`. Ningún elemento del HTML le correspondía: el
   nombre del selector quedó mal y caía sobre el contenedor de la fotografía,
   que ya se define arriba. El efecto medido era un tope de 734 px de ancho en
   una columna que da 792. Eliminada. */

.sectores__respuesta { max-width: 58ch; color: var(--tinta-suave); }

.sectores__detalles {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--borde);
}

.sectores__detalles li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--tinta);
}

.sectores__detalles li::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-top: 0.45em;
  border-radius: 2px;
  background: var(--linea);
}

/* --- Logo walls ---------------------------------------------------------- */

.muro-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--s-5) var(--s-6);
  align-items: center;
}

.muro-logos img {
  width: 100%;
  max-height: 3.25rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  mix-blend-mode: multiply;
  transition: filter var(--dur-media) var(--ease-out),
              opacity var(--dur-media) var(--ease-out);
}

.muro-logos img:hover { filter: grayscale(0); opacity: 1; }

/* --- Pending data marker ------------------------------------------------- */
/* Traction figures are not published until real numbers arrive. Showing a
   zero or an invented figure contradicts "cero improvisación". */

.pendiente {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border: 1px dashed var(--azul-claro);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
}

/* --- Modules ------------------------------------------------------------- */

.modulos {
  display: grid;
  gap: 1px;
  background: var(--borde);
  border-block: 1px solid var(--borde);
}

@media (min-width: 44rem) { .modulos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .modulos { grid-template-columns: repeat(3, 1fr); } }

.modulo {
  background: var(--blanco);
  padding: var(--s-6) var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.modulo__numero {
  font-family: var(--fuente-display);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--linea);
}

.modulo h3 { font-size: var(--t-md); letter-spacing: -0.02em; }
.modulo p { font-size: var(--t-sm); color: var(--tinta-suave); }

/* --- Doris --------------------------------------------------------------- */

.panel-doble { display: grid; gap: var(--s-7); align-items: center; }

@media (min-width: 58rem) {
  .panel-doble { grid-template-columns: 1fr 0.85fr; gap: var(--s-9); }
}

.panel-doble__texto > * + * { margin-top: var(--s-5); }

.acciones { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.hechos {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}

.hecho {
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
}

.hecho__rotulo {
  font-weight: 700;
  color: var(--azul-claro);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hecho__texto {
  background: rgba(255, 255, 255, 0.1);
  padding: var(--s-4);
  border-radius: var(--r-md);
  line-height: 1.55;
}

.hecho--respuesta .hecho__texto {
  background: var(--blanco);
  color: var(--azul-oscuro);
}

/* --- Doris flotante ------------------------------------------------------
   Botón fijo abajo a la derecha, en las tres páginas, que abre el chat real
   embebido.

   Es un ENLACE, no un botón: sin JavaScript lleva a
   doisol.com/chatIA/chatia.html en una pestaña nueva, así que el chat sigue
   siendo alcanzable. El script lo asciende a abridor del panel.
   ------------------------------------------------------------------------ */

.doris-flotante {
  position: fixed;
  right: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  bottom: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  z-index: var(--z-modal);
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--linea);
  color: var(--blanco);
  cursor: pointer;
  /* El aro blanco lo despega de las superficies saturadas; el relleno de
     color, de las claras. Ningún color de la paleta contrasta contra las
     cuatro superficies por sí solo, y no se inventa un quinto. */
  box-shadow: 0 0 0 3px var(--blanco),
              0 14px 30px -10px rgba(0, 30, 97, 0.6);
  transition: transform var(--dur-rapida) var(--ease-out);
}

.doris-flotante img { width: 50%; height: auto; }

/* La presión responde antes que el sistema. */
.doris-flotante:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .doris-flotante:hover { transform: scale(1.06); }
}

/* Con el panel abierto el mismo botón lo cierra. */
.doris-flotante__abrir,
.doris-flotante__cerrar { grid-area: 1 / 1; }
.doris-flotante__cerrar { display: none; width: 42%; }
.doris-flotante[aria-expanded='true'] .doris-flotante__abrir { display: none; }
.doris-flotante[aria-expanded='true'] .doris-flotante__cerrar { display: block; }

/* --- Panel del chat ------------------------------------------------------ */

.doris-panel {
  position: fixed;
  right: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  bottom: calc(clamp(1rem, 0.6rem + 1vw, 1.75rem) + 4.25rem);
  z-index: var(--z-modal);
  width: min(23rem, calc(100vw - 2rem));
  height: min(32rem, calc(100vh - 9rem));
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -22px rgba(0, 30, 97, 0.62);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  /* Entra desde su origen —la esquina donde vive el botón—, no desde el
     centro. Y nunca desde escala cero: nada aparece de la nada. */
  transform-origin: bottom right;
  animation: doris-entrar var(--dur-media) var(--ease-out-quint) both;
}


@keyframes doris-entrar {
  from { opacity: 0; transform: scale(0.94) translateY(0.75rem); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.doris-panel__barra {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--linea);
  color: var(--blanco);
}

.doris-panel__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
}

.doris-panel__avatar img { width: 58%; }

.doris-panel__quien { display: grid; gap: 1px; min-width: 0; }

.doris-panel__nombre {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: -0.01em;
}

.doris-panel__estado {
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.82);
}

.doris-panel__cerrar {
  margin-left: auto;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.16);
  color: var(--blanco);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--dur-rapida) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .doris-panel__cerrar:hover { background: rgba(255, 255, 255, 0.3); }
}

/* Rejilla con los dos hijos en la misma celda. En flujo normal la puerta y
   el iframe se apilaban uno debajo del otro —cada uno al 100 % de alto— y el
   iframe quedaba entero por debajo del recorte del panel. */
.doris-panel__cuerpo {
  position: relative;
  min-height: 0;
  display: grid;
}

.doris-panel__cuerpo > * { grid-area: 1 / 1; min-height: 0; }

.doris-panel__marco {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Puerta de consentimiento --------------------------------------------
   El iframe NO se carga hasta que la persona acepta: su dirección vive en
   `data-src` y el script la mueve a `src`. Cargarlo antes dejaría que la
   página del chat recopile datos sin permiso, que es justo lo que la puerta
   existe para evitar.
   ------------------------------------------------------------------------ */

.doris-puerta {
  height: 100%;
  overflow-y: auto;
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  font-size: var(--t-sm);
  color: var(--tinta-suave);
  line-height: 1.55;
}

.doris-puerta h2 {
  font-size: var(--t-md);
  letter-spacing: -0.02em;
  color: var(--azul-oscuro);
}

.doris-puerta a { color: var(--linea); }
.doris-puerta .boton { margin-top: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  .doris-panel { animation-name: doris-aparecer; animation-duration: 160ms; }
  .doris-flotante { transition: none; }
}

@keyframes doris-aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Footer -------------------------------------------------------------- */

/* Reads --linea-profunda, not --azul-oscuro: on the Gestión Humana page the
   footer must stay in the purple family. A navy footer under a purple page
   leaks the Nómina line into it. */
.pie {
  background: var(--linea-profunda);
  color: rgba(255, 255, 255, 0.78);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-sm);
}

.pie__rejilla {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

@media (min-width: 46rem) {
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* `h3` y no `h4`: el encabezado anterior en el documento es el `h2` de la
   última sección, así que un `h4` saltaba un nivel. El tamaño lo fija esta
   regla, no la etiqueta, así que el pie se ve exactamente igual. */
.pie h3 {
  font-size: var(--t-sm);
  color: var(--blanco);
  margin-bottom: var(--s-4);
  letter-spacing: 0;
}

.pie ul { display: grid; gap: var(--s-3); }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }

.pie__marca img { width: 132px; margin-bottom: var(--s-5); }
.pie__marca p { max-width: 34ch; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* Reduced motion for the sector switcher: the accordion still opens and the
   photo still changes, but nothing slides, blurs or auto-advances. */
@media (prefers-reduced-motion: reduce) {
  .sectores__item[data-activo='true'] .sectores__barra { animation: none !important; }
  .sectores__barra { transform: scaleX(1); opacity: 0.3; }
  .sectores__foto { filter: none; transform: none; }
}

/* --- Sectores en movil: titulo, descripcion, imagen ----------------------
   En escritorio la fotografia vive en su propio panel al lado de la lista.
   En movil eso la empujaba al final de los seis titulos y quedaba fuera de
   vista, asi que el script mueve el nodo dentro del caso abierto y el orden
   pasa a ser titulo -> descripcion -> imagen. Es el MISMO nodo movido, no una
   copia: una sola imagen en el DOM. */

@media (max-width: 57.99rem) {
  .sectores__detalle .sectores__escenario {
    margin-top: var(--s-2);
    margin-bottom: var(--s-5);
  }

  /* Fuera del acordeon no debe quedar un hueco reservado. */
  .sectores__disposicion > .sectores__escenario { display: none; }
}