/* ==========================================================================
   COMPONENTES — nomenclatura BEM. Cada bloque es autónomo y reutilizable.
   Depende de tokens.css y base.css.
   ========================================================================== */

/* --- Superficies ---------------------------------------------------------- */

.surface {
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}

.surface--card { background: var(--color-surface); }
.surface--deep { background: var(--color-surface-deep); color: var(--color-text-on-dark); }
.surface--alt  { background: var(--color-surface-alt);  color: var(--color-text-on-dark); }

/* Marco vacío para imágenes aún no provistas. */
.placeholder {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  min-height: 360px;
}

.placeholder__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* helpers.js copia data-src -> src y añade .loaded cuando termina de cargar. */
.placeholder__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition);
}

.placeholder__img.loaded { opacity: 1; }

/* Encuadre por foto. Las fotos del equipo llegan con planos muy distintos
   (un selfie, retratos de estudio, figuras sentadas en un despacho), asi que
   cada imagen declara el centro de la cara (--foco) y cuanto acercarse
   (--zoom) para que todas queden en un plano de cabeza y hombros parecido.
   Van como propiedades personalizadas en linea porque son datos de cada
   foto, no estilo: ninguna media query necesita sobrescribirlas. Sin ellas
   el comportamiento es el de siempre, centrado y sin zoom. */
.placeholder__img,
.modal__img {
  object-position: var(--foco, 50% 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--foco, 50% 50%);
}

/* El marcador va DESPUES de la imagen en el marcado y ambos son absolutos,
   asi que sin esto se queda pintado encima de la foto ya cargada. Se retira
   en cuanto la imagen llega; si falla, el marcador permanece como respaldo. */
.placeholder__img.loaded ~ .placeholder__empty { display: none; }

.placeholder__icon  { stroke: var(--color-text-muted); }
.placeholder__label { font-size: var(--text-micro); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }

/* Gráfico pixelado decorativo. Los colores viven en el SVG del marcado. */
.pixel { display: block; }

/* --- Botones -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--tap-target);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Primario: marino sobre claro (15:1). Vira a terracota al interactuar. */
.btn--primary {
  background: var(--color-surface-deep);
  color: var(--color-text-on-dark);
  font-weight: var(--weight-bold);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent);
  color: var(--color-surface-deep);
}

/* Secundario sobre fondo claro. */
.btn--ghost {
  border: 1.5px solid var(--color-surface-deep);
  color: var(--color-text);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-surface-deep);
  color: var(--color-text-on-dark);
}

/* Primario cuando el fondo ya es oscuro: se invierte. */
.btn--light {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-bold);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--color-accent);
  color: var(--color-surface-deep);
}

.btn--block { width: 100%; }

/* --- Cabecera ------------------------------------------------------------- */

/* El <header> llega dentro de #site-header-slot. Un sticky se fija dentro de
   su PADRE, y ese contenedor solo mide lo que el propio header: con el slot
   en el arbol de cajas la cabecera se iba con la pagina. display: contents lo
   saca del layout y deja el header como hijo directo de <body>. */
#site-header-slot,
#site-footer-slot { display: contents; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-canvas);
  transition: background var(--transition);
}

/* Portada: la cabecera flota sobre la fotografia. header.js le pone
   .is-scrolled al pasar el hero para devolverle el fondo, de modo que
   sigue siendo sticky y legible sobre el fondo arena. */
.home .site-header { background: transparent; }
.home .site-header.is-scrolled { background: var(--color-canvas); }

/* Ojo con el alcance: estas dos solo valen para la marca de la CABECERA en
   la portada. Sin acotar a .site-header alcanzaban tambien a la del pie. */
.home .site-header .site-brand { color: var(--color-text-on-dark); }
.home .site-header.is-scrolled .site-brand { color: var(--color-text); }

/* El pie siempre es marino, asi que su marca siempre va en marfil. */
.site-footer .site-brand { color: var(--color-text-on-dark); }

.home .site-nav__list {
  border: 1px solid rgba(251, 245, 239, 0.18);
  background: rgba(251, 245, 239, 0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.home .site-nav__item a { color: var(--color-text-on-dark); }
.home .site-nav__item a::before { background: rgba(251, 245, 239, 0.18); }

.home .site-header__brochure {
  border-color: var(--color-text-on-dark);
  color: var(--color-text-on-dark);
}

.home .site-header__brochure:hover {
  background: var(--color-text-on-dark);
  color: var(--color-text);
}

.home .site-header.is-scrolled .site-nav__list {
  border-color: transparent;
  background: var(--color-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home .site-header.is-scrolled .site-nav__item a { color: var(--color-text); }
.home .site-header.is-scrolled .site-nav__item a::before { background: var(--color-canvas); }

.home .site-header.is-scrolled .site-header__brochure {
  border-color: var(--color-surface-deep);
  color: var(--color-text);
}

.home .site-header.is-scrolled .site-header__brochure:hover {
  background: var(--color-surface-deep);
  color: var(--color-text-on-dark);
}

.home .hamburger {
  background: rgba(251, 245, 239, 0.10);
  border: 1px solid rgba(251, 245, 239, 0.2);
}

.home .hamburger__bar { background: var(--color-text-on-dark); }
.home .site-header.is-scrolled .hamburger { background: var(--color-surface); border-color: transparent; }
.home .site-header.is-scrolled .hamburger__bar { background: var(--color-text); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: var(--header-height);
}

/* --- Marca (cabecera y pie) ------------------------------------------------
   Logo en caja fija + nombre en dos lineas. La variante --lg es la del pie. */

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text);
  flex-shrink: 0;
}

.site-brand__logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
}

.site-brand__name {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 0.96;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

/* Cada palabra en su linea: "CONSULTORA" sobre "LEGAL GUZMAN". */
.site-brand__line { display: block; }

.site-brand--lg { gap: var(--space-md); }
.site-brand--lg .site-brand__logo { width: 64px; height: 64px; }
.site-brand--lg .site-brand__name { font-size: var(--text-h4); line-height: var(--leading-tight); }

.site-nav__list {
  display: flex;
  gap: var(--space-xxs);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 6px;
}

.site-nav__item a {
  position: relative;
  z-index: 0;
  display: block;
  padding: 12px 18px;
  border-radius: var(--radius-card);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transition: color var(--transition), font-weight var(--transition);
}

/* El fondo es un pseudo-elemento para poder animarlo: entra escalando desde
   el centro en vez de aparecer de golpe. */
.site-nav__item a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--color-canvas);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--transition), transform var(--transition);
}

.site-nav__item a:hover::before,
.site-nav__item a:focus-visible::before,
.site-nav__item a.active::before {
  opacity: 1;
  transform: scale(1);
}

/* Retroceso al pulsar: da sensación de botón físico. */
.site-nav__item a:active::before { transform: scale(0.93); }

/* La opción seleccionada además se marca con un punto terracota. */
.site-nav__item a.active {
  font-weight: var(--weight-bold);
}

.site-nav__item a.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: nav-dot 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nav-dot {
  from { opacity: 0; transform: translateY(-4px) scale(0.4); }
  to   { opacity: 1; transform: none; }
}

.site-header__brochure { transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); }
.site-header__brochure:active { transform: scale(0.97); }

.site-header__brochure {
  flex-shrink: 0;
  padding: 10px 22px;
  font-size: var(--text-small);
  min-height: 44px;
}

/* Hamburguesa: oculta en escritorio, visible bajo el breakpoint de nav. */
.hamburger {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hamburger__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

.hamburger.open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Menú móvil ----------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--color-surface-deep);
  color: var(--color-text-on-dark);
  padding: var(--space-lg);
  display: none;
  flex-direction: column;
}

.mobile-menu.open { display: flex; }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.mobile-menu__brand {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  max-width: 220px;
}

.mobile-menu__close {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: rgba(251, 245, 239, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mobile-menu__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mobile-menu__title { margin-bottom: var(--space-lg); }

.mobile-menu__list { display: flex; flex-direction: column; }

.mobile-menu__item a {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 56px;
  padding: var(--space-xs) 0 var(--space-xs) 28px;
  border-bottom: 1px solid var(--color-border-dark);
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
}

/* El ítem activo se marca con el mismo cuadrado terracota del antetítulo. */
.mobile-menu__item a.active {
  padding-left: 0;
  color: var(--color-accent);
}

.mobile-menu__item a.active::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.mobile-menu__item--brochure { margin-top: var(--space-xl); }

/* .mobile-menu__item a pinta en marfil todos los enlaces del menú y pesa más
   que .btn--light, así que el texto del botón quedaba marfil sobre marfil.
   Esta regla tiene la misma especificidad y va después: gana ella. */
.mobile-menu__item--brochure a {
  color: var(--color-text);
  justify-content: center;
  border-bottom: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  text-transform: none;
  letter-spacing: normal;
}

.mobile-menu__foot {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.mobile-menu__contact-label { font-size: var(--text-micro); color: var(--color-text-muted-dark); }
.mobile-menu__contact-value { font-size: var(--text-body); font-weight: var(--weight-medium); word-break: break-word; }

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

/* --- Escenario del hero ----------------------------------------------------
   Contiene la foto del carrusel, el velo y -encima- la cabecera, el texto,
   los botones y las cifras. El margen negativo lo desliza bajo la cabecera,
   que sigue en flujo y sigue siendo sticky; el padding devuelve el espacio
   por dentro para que nada quede tapado.                                    */

.hero-stage {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-height) * -1);
  padding-top: var(--header-height);
  background: var(--color-surface-deep);
  overflow: hidden;
}

.hero-stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Velo plano: el sistema no usa degradados. */
  background: rgba(10, 31, 64, 0.62);
  pointer-events: none;
}

.hero-stage__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-height));
}

.hero-stage__inner .hero {
  flex-grow: 1;
  display: flex;
  align-items: center;
  /* El hueco de abajo es el sitio de los puntos del carrusel: sin el, las
     tarjetas de cifra se les echarian encima al centrarse el contenido. */
  padding-block: var(--section-gap) calc(var(--section-gap) + var(--space-3xl));
}

/* Texto y llamada a la accion a la izquierda; las cifras en 2x2 a la derecha,
   ambos bloques centrados entre si. Bajo 1024px se apilan (ver responsive).
   El hueco entre columnas es deliberadamente grande: es lo que separa los dos
   bloques a cualquier ancho, incluso cuando la pantalla no da mas de si. */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
  gap: var(--space-4xl);
  align-items: center;
}

/* Sobre la fotografia todo el texto va en marfil. */
.hero-stage .display,
.hero-stage .lead { color: var(--color-text-on-dark); }

/* La rejilla ya limita el ancho del titular; el tope solo actua cuando el
   hero se apila y la columna vuelve a ocupar todo el contenedor. */
.hero-stage .display { max-width: 860px; }

/* Ritmo vertical del hero. Los botones se separan mas del parrafo: pegados
   competian con el y costaba leerlos como accion. */
.hero__body { margin-top: var(--space-lg); }
.hero__cta  { margin-top: var(--space-2xl); }

/* Bloque de texto que rota con el carrusel. Los botones quedan fuera para
   que no se muevan al cambiar de diapositiva. */
.hero__copy {
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.hero__copy.is-swapping {
  opacity: 0;
  transform: translateY(10px);
}

/* Hero de páginas interiores: bloque marino con el gráfico decorativo
   anclado a una esquina. Lo usan las cinco vistas que no son la portada;
   la portada no lo utiliza (allí manda .hero-stage). */
.hero-band {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-deep);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-card);
  padding: var(--space-4xl) var(--card-padding);
}

.hero-band__content { position: relative; max-width: 760px; }
.hero-band__body    { margin-top: var(--space-xl); max-width: 560px; }
.hero-band__cta     { margin-top: var(--space-2xl); }

.hero-band__decor {
  position: absolute;
  right: var(--card-padding);
  top: var(--card-padding);
}

.hero-band__decor--bottom { top: auto; bottom: var(--card-padding); }

/* --- Carrusel de portada ---------------------------------------------------
   Mismo componente y mismo JavaScript: lo unico que cambia es que ahora
   ocupa todo el escenario en lugar de una columna a la derecha.            */

.hero-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Sin z-index a proposito: si creara contexto de apilamiento, los puntos
     no podrian situarse por encima del contenido del escenario. */
}

.hero-carousel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -4px;
}

.hero-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.hero-carousel.is-dragging .hero-carousel__track { cursor: grabbing; }

.hero-slide { flex: 0 0 100%; height: 100%; }

.hero-slide__media {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--color-surface-deep);
}

.hero-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desenfoque suave + escalado para que el difuminado no deje bordes. */
  transform: scale(1.08);
  filter: blur(3px) saturate(0.92);
  opacity: 0;
  transition: opacity var(--transition);
}

.hero-slide__img.loaded { opacity: 1; }

/* Los puntos se alinean con el contenido y se apoyan justo encima de las
   tarjetas de cifra. z-index 3: por encima del velo y del contenido. */
.hero-carousel__dots-holder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--section-gap);
  z-index: 3;
}

.hero-carousel__dots { display: flex; gap: var(--space-xs); }

.hero-carousel__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  background: rgba(251, 245, 239, 0.35);
  transition: background var(--transition), transform var(--transition);
}

.hero-carousel__dot:hover { background: rgba(251, 245, 239, 0.6); }

.hero-carousel__dot[aria-current="true"] {
  background: var(--color-accent);
  transform: scale(1.2);
}

/* --- Estadísticas ---------------------------------------------------------
   Un solo marcado, dos formas:
     escritorio  → tres tarjetas en rejilla
     móvil       → una tarjeta con filas separadas por filete
   (la variante móvil vive en responsive.css)                                */

.stat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Separacion propia, mayor que la de --grid-gap: aqui las tarjetas flotan
     sobre la fotografia y el hueco deja ver la imagen entre ellas. */
  gap: var(--space-lg);
}

/* Panel esmerilado: el desenfoque va DETRAS de cada tarjeta, no sobre toda
   la foto, para que la imagen se siga reconociendo entre los huecos.
   En reposo manda la etiqueta, centrada. Al pasar el puntero se encoge y
   deja subir la cifra; las dos alturas son casi identicas, asi que la
   tarjeta no cambia de tamano ni salta. */
.stat-list__row {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: var(--stat-card-h);
  padding: 24px 28px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(251, 245, 239, 0.16);
  background: rgba(251, 245, 239, 0.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: background var(--transition), border-color var(--transition);
}

.stat-list__row:hover,
.stat-list__row:focus-visible {
  background: rgba(251, 245, 239, 0.14);
  border-color: rgba(251, 245, 239, 0.3);
}

/* Enfocable a proposito: si la cifra solo apareciera al pasar el raton,
   quien navega con teclado nunca podria leerla. */
.stat-list__row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.stat__value-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat__value {
  overflow: hidden;
  min-height: 0;
  font-family: var(--font-display);
  font-size: var(--text-stat);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-list__row:hover .stat__value-wrap,
.stat-list__row:focus-within .stat__value-wrap { grid-template-rows: 1fr; }

.stat-list__row:hover .stat__value,
.stat-list__row:focus-within .stat__value { opacity: 1; transform: none; }

.stat__label {
  font-family: var(--font-display);
  font-size: var(--text-stat-label);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              letter-spacing 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-list__row:hover .stat__label,
.stat-list__row:focus-within .stat__label {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-soft-dark);
}

/* Sin puntero (tactil) no hay hover: la cifra se muestra siempre y la
   etiqueta se queda directamente en su tamano pequeno. */
@media (hover: none) {
  .stat__value-wrap { grid-template-rows: 1fr; }
  .stat__value { opacity: 1; transform: none; }
  .stat__label {
    font-size: var(--text-small);
    letter-spacing: var(--tracking-label);
    color: var(--color-text-soft-dark);
  }
}

/* --- Tarjetas de contenido ------------------------------------------------ */

.feature-card__number {
  font-family: var(--font-display);
  font-size: var(--text-number);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}

.feature-card__title { margin-top: var(--space-md); }
.feature-card__text  { margin-top: var(--space-sm); }
.feature-card__icon  { stroke: var(--color-accent); }

/* Tarjeta de abogado.
   Columna flexible: el nombre puede ocupar una o dos líneas y el botón
   siempre queda pegado al fondo, alineado entre tarjetas hermanas. */
.team-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.team-card__action { margin-top: auto; padding-top: var(--space-lg); }

.team-card__photo {
  position: relative;
  overflow: hidden;
  background: var(--color-canvas);
  border-radius: var(--radius-inner);
  /* Proporcion y no alto fijo: con alto fijo, en una tarjeta ancha de
     tablet el marco se volvia una franja y cortaba cabezas. */
  aspect-ratio: 6 / 5;
  max-height: 420px;
}

.team-card__name { margin-top: var(--space-xl); }

.team-card__role {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-label);
  margin-top: var(--space-sm);
}

/* --- Ruleta de equipo ------------------------------------------------------
   Carril de tarjetas que avanza de una en una. --per-view es el contrato con
   teamCarousel.js: aquí se dice cuántas tarjetas caben y responsive.css lo
   cambia por breakpoint; el JS lo lee y calcula el resto.                   */

.team-carousel {
  --per-view: 3;
  position: relative;
}

.team-carousel__viewport { overflow: hidden; }

.team-carousel__viewport:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

.team-carousel__track {
  display: flex;
  align-items: stretch;
  gap: var(--grid-gap);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
}

.team-carousel.is-dragging .team-carousel__track { cursor: grabbing; }

/* La tarjeta conserva su forma: solo se le fija el ancho de la ventana
   dividido entre las que caben, descontando los huecos. */
.team-carousel__track > .team-card {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--grid-gap)) / var(--per-view));
  user-select: none;
}

/* Las que quedan fuera se atenúan en lugar de recortarse a medias. */
.team-carousel__track > .team-card.is-outside {
  opacity: 0.45;
  transition: opacity var(--transition);
}

.team-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.team-carousel__dots { display: flex; gap: var(--space-xs); }

.team-carousel__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--color-text-muted);
  transition: background var(--transition), transform var(--transition);
}

.team-carousel__dot:hover { background: var(--color-text); }

.team-carousel__dot[aria-current="true"] {
  background: var(--color-accent);
  transform: scale(1.2);
}

.team-carousel__arrows { display: flex; gap: var(--space-sm); }

.team-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-surface-deep);
  color: var(--color-text);
  transition: background var(--transition), color var(--transition), opacity var(--transition);
}

/* Las flechas nunca se deshabilitan: la ruleta da la vuelta en los extremos,
   igual que la reproducción automática. */
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible {
  background: var(--color-surface-deep);
  color: var(--color-text-on-dark);
}


/* Cita de misión / visión. */
.quote {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-top: var(--space-lg);
}

/* --- Mosaico de fondo ------------------------------------------------------
   La baldosa se repite sobre la superficie marino. La opacidad baja mantiene
   el contraste del texto: marfil sobre el marino teñido de terracota al 20%
   sigue por encima de 10:1.                                                 */

.mosaic {
  position: relative;
  overflow: hidden;
}

.mosaic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/mosaico.svg');
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.2;
  pointer-events: none;
}

.mosaic__content {
  position: relative;
  z-index: 1;
}

/* --- Banda de cierre ------------------------------------------------------ */

.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.cta-band__text p    { margin-top: var(--space-md); }
.cta-band__actions   { flex-shrink: 0; }

/* --- Formulario ----------------------------------------------------------- */

/* Contacto: tarjeta de canales (5) + formulario (7), a la misma altura. */
.split--contact { align-items: stretch; }
.split--contact .split__visual { grid-column: span 5; }
.split--contact .split__text   { grid-column: span 7; }
.split--contact .surface { height: 100%; }


.form { display: flex; flex-direction: column; gap: var(--space-lg); }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }

.form__label {
  display: block;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-sm);
}

.form__control {
  width: 100%;
  min-height: var(--tap-target);
  background: var(--color-canvas);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 16px 28px;
  /* Nunca por debajo de 16px: iOS hace zoom automatico al enfocar un campo
     con letra menor. El token esta por encima de ese suelo. */
  font-size: var(--text-body);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.form__control:focus {
  border-color: var(--color-surface-deep);
  outline: none;
}

.form__control--textarea {
  border-radius: var(--radius-inner);
  min-height: 140px;
  padding: 20px 28px;
  resize: vertical;
}

.form-error {
  display: none;
  font-size: var(--text-small);
  color: var(--color-accent);
  margin-top: var(--space-xs);
}

/* form.js escribe el texto del error y lo vacia al corregirlo, asi que el
   propio contenido decide si el hueco se ve. Vale igual para los errores de
   los campos, los de la casilla y los que devuelve el servidor. */
/* Un correo largo no tiene donde partirse y en pantalla estrecha empuja su
   contenedor: son los 2px de scroll horizontal que aparecian en Contactanos a
   375px. anywhere y no break-word, porque es el unico que ademas reduce el
   ancho minimo intrinseco, que es lo que causaba el empuje. */
[data-site-email],
[data-footer-email] { overflow-wrap: anywhere; }

.form-error:not(:empty) { display: block; }
.form__control.error { border-color: var(--color-accent); }

/* --- Casilla de consentimiento --- */

.form__consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm) var(--space-md);
  align-items: start;
}

.form__check {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  accent-color: var(--color-surface-deep);
  cursor: pointer;
}

.form__check-label {
  font-size: var(--text-small);
  line-height: var(--leading-body);
  cursor: pointer;
}

.form__check-label a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form__check-label a:hover { color: var(--color-accent); }

.form__check.error { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* El error de la casilla ocupa las dos columnas de la rejilla. */
.form__consent .form-error { grid-column: 1 / -1; }

/* --- Trampa para bots ---
   Fuera de la vista sin display:none: hay bots que descartan lo que esta
   oculto de esa forma, y este campo solo sirve si lo rellenan. */
.form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* El widget de Turnstile trae su propio tamano; solo se le reserva sitio. */
.form__captcha { min-height: 65px; }

.form__feedback {
  display: none;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--color-surface-alt);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-inner);
  padding: 20px 28px;
}

.form__feedback.visible { display: flex; }
.form__feedback svg { flex-shrink: 0; margin-top: 2px; stroke: var(--color-text-on-dark); }

.form__feedback--error { background: var(--color-surface-deep); }
.form__feedback--error svg { stroke: var(--color-accent); }

/* --- Modal de perfil ------------------------------------------------------ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}

.modal.open { display: flex; }

/* El velo va en un pseudoelemento para poder fundirlo por su cuenta mientras
   el diálogo hace su propio recorrido desde el botón. */
.modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 64, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.is-in::before { opacity: 1; }

/* modal.js fija transform y opacity en línea para el punto de partida (el
   botón pulsado) y luego los borra; la transición de aquí hace el resto.
   transform-origin al centro: el desplazamiento ya lo calcula el JS. */
.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .modal__dialog { transition: opacity 0.2s ease; }
}

/* z-index: .modal__photo crea contexto de apilamiento y va después en el
   DOM, así que sin esto el botón queda debajo de la foto en móvil. */
.modal__close {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 32px;
  box-shadow: 0 0 0 4px var(--color-surface);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl); align-items: start; }
.modal__media { grid-column: span 5; }
.modal__info  { grid-column: span 7; }

/* Misma presencia que la foto de la tarjeta, algo mayor: es lo que se viene
   a ver al abrir la ficha. */
.modal__photo {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  height: 420px;
}

/* modal.js alterna estos dos por style.display / clase .loaded. */
.modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition);
}

.modal__img.loaded { opacity: 1; }

.modal__img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-on-dark);
}
.modal__name { margin-top: var(--space-md); }
.modal__bio  { margin-top: var(--space-lg); }

.modal__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.modal__social .btn { padding: 12px 22px; font-size: var(--text-small); min-height: 44px; }

/* --- Áreas de práctica: filtro + mosaico -----------------------------------
   Doce áreas en tarjeta con párrafo alargaban la vista sin fin. El mosaico
   las reduce a pieza pequeña —número y nombre— y la barra de filtros deja
   llegar a una familia sin recorrer la lista entera.                        */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.filter-pill:hover { border-color: var(--color-surface-deep); }

/* El estado activo va en aria-pressed y no en una clase: así el estilo y lo
   que anuncia el lector de pantalla no pueden desincronizarse. */
.filter-pill[aria-pressed="true"] {
  background: var(--color-surface-deep);
  border-color: var(--color-surface-deep);
  color: var(--color-text-on-dark);
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.area-tile {
  display: flex;
  flex-direction: column;
  min-height: 140px;
  padding: var(--space-md);
  border-radius: var(--radius-inner);
  background: var(--color-surface);
  color: var(--color-text);
  transition: transform var(--transition);
}

/* display: flex gana al [hidden] del navegador; hay que repetirlo. */
.area-tile[hidden] { display: none; }

.area-tile:hover { transform: translateY(-4px); }

.area-tile__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
}

.area-tile__num {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
}

.area-tile__arrow {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition);
}

.area-tile:hover .area-tile__arrow,
.area-tile:focus-visible .area-tile__arrow { opacity: 1; }

.area-tile__name {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-wrap: pretty;
}

/* --- Mapa de ubicación -----------------------------------------------------
   Alto fijo, no proporción: la tarjeta pasa de una columna estrecha a todo el
   ancho al colapsar el split, y con aspect-ratio el mapa se volvía enorme.  */

.map {
  overflow: hidden;
  height: 300px;
  border-radius: var(--radius-inner);
  background: var(--color-canvas);
}

.map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Pie ------------------------------------------------------------------ */

.site-footer {
  background: var(--color-surface-deep);
  color: var(--color-text-on-dark);
}

/* El fondo va en el <footer>, que ocupa todo el ancho; el contenido sigue
   dentro del contenedor ancho, alineado con la cabecera. */
.site-footer__inner {
  padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3xl) var(--space-2xl);
}

.footer-brand { grid-column: span 5; }
.footer-col--nav { grid-column: span 3; }
.footer-col--contact { grid-column: span 4; }

.footer-brand__desc { font-size: var(--text-small); line-height: var(--leading-body); color: var(--color-text-soft-dark); margin-top: var(--space-lg); max-width: 360px; }

/* --- Redes sociales -------------------------------------------------------- */

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-on-dark);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.social__link:hover,
.social__link:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface-deep);
}

.footer-col__title { margin-bottom: var(--space-xl); }
.footer-col__list  { display: flex; flex-direction: column; gap: var(--space-md); }
.footer-col__list a { font-size: var(--text-small); }
.footer-col__list a:hover { color: var(--color-accent); }

.footer-contact { display: flex; flex-direction: column; gap: var(--space-lg); }
.footer-contact__label { font-size: var(--text-micro); color: var(--color-text-muted-dark); margin-bottom: 2px; }
/* contactanos.html reutiliza la etiqueta; el versalita solo va en el pie. */
.site-footer .footer-contact__label { letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-xxs); }
.footer-contact__value { font-size: var(--text-small); word-break: break-word; }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  border-top: 1px solid var(--color-border-dark);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
}

.site-footer__bottom span,
.site-footer__legal { font-size: var(--text-micro); color: var(--color-text-muted-dark); }

.site-footer__legal { transition: color var(--transition); }
.site-footer__legal:hover,
.site-footer__legal:focus-visible {
  color: var(--color-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Animación de entrada ------------------------------------------------- */

[data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].animate-in {
  opacity: 1;
  transform: none;
}