/* =====================================================================
   3DOGS FOTOGRAFÍA — style.css (v2)
   -----------------------------------------------------------------
   Sistema de diseño — sitio público
   Color:
     --color-bg              #FFFFFF  fondo dominante (secciones claras)
     --color-bg-oscuro        #0B0B0B  fondo de secciones oscuras
                                        (hero, experiencia, tarjeta clientes)
     --color-bg-elevado       #F4F3F0  superficie clara secundaria
     --color-bg-elevado-osc   #161614  superficie oscura secundaria
     --color-texto            #0B0B0B  texto principal sobre claro
     --color-texto-invertido  #FFFFFF  texto principal sobre oscuro
     --color-texto-tenue      #6E6C67  texto secundario sobre claro
     --color-texto-tenue-inv  #9C9891  texto secundario sobre oscuro
     --color-acento           #5C7A82  acento (azul-verde apagado), se usa
                                        SOLO para etiquetas/eyebrows sobre
                                        fondo oscuro — nunca en botones
   Tipografía:
     Familia única 'Plus Jakarta Sans' (geométrica, redondeada), variando
     peso: 800/700 en titulares, 500 en textos destacados, 400 en cuerpo.
   Firma visual:
     1) Titulares en dos tonos (palabra fuerte + palabra atenuada) que
        se repite en cada sección como hilo conductor tipográfico.
     2) Mosaico tipo "hoja de contactos" con alturas variables.
     3) Anillos concéntricos decorativos en la tarjeta de clientes,
        evocando el visor circular de un lente.
   Panel admin / login:
     Reutilizan las mismas variables pero sobreescritas a un tema
     oscuro constante (ver bloque .pagina-admin/.pagina-login), ya que
     son herramientas internas, no parte de la identidad pública.
   ===================================================================== */

:root {
  --color-bg: #FFFFFF;
  --color-bg-oscuro: #0B0B0B;
  --color-bg-elevado: #F4F3F0;
  --color-bg-elevado-osc: #161614;
  --color-texto: #0B0B0B;
  --color-texto-invertido: #FFFFFF;
  --color-texto-tenue: #b3b0aa;
  --color-texto-tenue-inv: #c4bfb8;
  --color-linea: #E7E5E0;
  --color-linea-inv: #2A2A27;
  --color-acento: #E5413C;
  --color-error: #B0473A;
  --color-error-suave: #FBEAE7;
  --color-exito: #4C7A55;
  --color-exito-suave: #EAF3EA;

  --fuente: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --ancho-maximo: 1200px;
  --espacio-seccion: clamp(4rem, 9vw, 8rem);
  --radio: 28px;
  --radio-boton: 999px;
  --transicion: 200ms ease;
}

/* ---------------------------------------------------------------------
   Reset y base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--fuente); font-weight: 800; line-height: 1.08; margin: 0 0 0.4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.tono-fuerte, .tono-fuerte-invertido { color: var(--color-texto); }
.tono-fuerte-invertido { color: var(--color-texto-invertido); }
.tono-tenue { color: var(--color-texto-tenue); font-weight: 700; }
.tono-tenue-invertido { color: var(--color-texto-tenue-inv); font-weight: 700; }

.eyebrow {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-acento);
  margin: 0 0 1.1em;
}
.eyebrow-con-icono svg { flex-shrink: 0; }

.ayuda { font-size: 0.85rem; color: var(--color-texto-tenue); }

.enlace-salto {
  position: absolute; left: -999px; top: 0;
  background: var(--color-texto); color: var(--color-bg); padding: 0.75em 1.2em;
  z-index: 999;
}
.enlace-salto:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.95em 1.9em;
  border-radius: var(--radio-boton);
  font-family: var(--fuente);
  font-size: 0.92rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion), opacity var(--transicion);
}
.boton:hover { transform: translateY(-1px); }

.boton-claro { background: var(--color-texto-invertido); color: var(--color-bg-oscuro); }
.boton-claro:hover { opacity: 0.88; }
.boton-oscuro { background: var(--color-texto); color: var(--color-texto-invertido); }
.boton-oscuro:hover { opacity: 0.85; }
.boton-secundario { background: transparent; color: inherit; border-color: var(--color-linea); }
.boton-secundario:hover { border-color: var(--color-acento); color: var(--color-acento); }

.boton-nav { padding: 0.7em 1.5em; font-size: 0.86rem; }

.boton-con-insignia { padding-right: 0.5em; }
.insignia-flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em; border-radius: 50%;
  background: var(--color-bg-oscuro); color: var(--color-texto-invertido);
  font-size: 0.9em;
}

.boton-circular {
  flex-shrink: 0;
  width: 3em; height: 3em; border-radius: 50%;
  background: var(--color-texto-invertido); color: var(--color-bg-oscuro);
  border: none; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transicion), opacity var(--transicion);
}
.boton-circular:hover { transform: translateY(-1px); opacity: 0.88; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
label {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-texto-tenue);
  margin: 1.3em 0 0.5em;
}
label:first-of-type { margin-top: 0; }
.seccion-experiencia label { color: var(--color-texto-tenue-inv); }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="file"], select, textarea {
  width: 100%;
  background: transparent;
  border: none; border-bottom: 1px solid var(--color-linea);
  color: inherit;
  font-family: var(--fuente); font-size: 1rem;
  padding: 0.65em 0.1em;
  transition: border-color var(--transicion);
}
.seccion-experiencia input, .seccion-experiencia select, .seccion-experiencia textarea {
  border-bottom-color: var(--color-linea-inv); color: var(--color-texto-invertido);
}
input::placeholder, textarea::placeholder { color: var(--color-texto-tenue); opacity: 0.7; }
.seccion-experiencia input::placeholder, .seccion-experiencia textarea::placeholder { color: var(--color-texto-tenue-inv); }
input:focus, select:focus, textarea:focus { border-color: var(--color-acento); }
textarea { resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 8px) 1.1em, calc(100% - 3px) 1.1em; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
select option {
  background-color: #1a1a1a;
  color: #ffffff;
  padding: 0.5rem;
}

.fila-dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .fila-dos-columnas { grid-template-columns: 1fr; } }

.mensaje-error { background: var(--color-error-suave); color: var(--color-error); border: 1px solid var(--color-error); border-radius: 12px; padding: 0.8em 1em; font-size: 0.88rem; }
.mensaje-exito { background: var(--color-exito-suave); color: var(--color-exito); border: 1px solid var(--color-exito); border-radius: 12px; padding: 0.8em 1em; font-size: 0.88rem; }
.campo-oculto { display: none !important; }
.respuesta-formulario:empty { display: none; margin: 0; }
.respuesta-formulario { margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Encabezado / navegación
   --------------------------------------------------------------------- */
.cabecera {
  position: fixed;
  top: 0; left: 0; width: 100%; z-index: 50;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.2rem clamp(1.2rem, 4vw, 3rem);
  
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  
  /* Transición suave para todos los cambios de estado */
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Forzamos elementos en blanco al inicio */
.cabecera .marca,
.cabecera .marca span,
.cabecera .nav-principal a {
  color: #ffffff;
  transition: color 0.4s ease;
}

/* El botón "Diseña tu Sesión" transparente arriba */
.cabecera .boton-nav {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  transition: all 0.4s ease;
}

/* Líneas del botón menú móvil en blanco arriba */
.cabecera .boton-menu span { 
  background-color: #ffffff; 
  transition: background-color 0.4s ease;
}


/* ==========================================================================
   ESTADO SCROLL: Al bajar (Fondo blanco, letras negras)
   ========================================================================== */
.cabecera.cabecera--scrolled {
  background: rgba(255, 255, 255, 0.95); /* Blanco traslúcido */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-linea);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Cambiamos todo a negro/oscuro al hacer scroll */
.cabecera.cabecera--scrolled .marca { color: #111111; }
.cabecera.cabecera--scrolled .marca span { color: #666666; } /* Un gris elegante para el subtítulo */
.cabecera.cabecera--scrolled .nav-principal a { color: #111111; }

/* Líneas del menú a negro al bajar */
.cabecera.cabecera--scrolled .boton-menu span {
  background-color: #111111;
}

/* Botón cambia a tu estilo oscuro nativo al bajar */
.cabecera.cabecera--scrolled .boton-nav {
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
}

.marca-logo {
  display: flex;
  align-items: center;
  height: 40px; /* Ajusta la altura de tu logotipo aquí */
}

.logo-visual {
  height: 100%;
  width: auto;
  transition: opacity 0.4s ease;
}

/* Estado inicial: Mostramos el blanco, ocultamos el oscuro */
.logo-blanco { display: block; }
.logo-oscuro { display: none; }

/* Estado Scroll: Intercambiamos las imágenes */
.cabecera.cabecera--scrolled .logo-blanco { display: none; }
.cabecera.cabecera--scrolled .logo-oscuro { display: block; }
/* ==========================================================================
   ESTILOS BASE DE COMPONENTES (Tu lógica limpia)
   ========================================================================== */
.marca { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; }
.marca span { display: block; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }

.nav-principal { display: flex; gap: 2rem; font-size: 0.9rem; font-weight: 500; margin-right: auto; margin-left: 3rem; }
.nav-principal a { text-decoration: none; }
.nav-principal a:hover { color: var(--color-acento) !important; } /* Evita que el scroll pise el hover */

.boton-menu { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.4rem; }
.boton-menu span { width: 22px; height: 2px; border-radius: 2px; display: block; }


/* ==========================================================================
   NAVEGACIÓN MÓVIL (Ajustada para heredar el comportamiento fixed)
   ========================================================================== */
.nav-movil {
  display: none; 
  flex-direction: column;
  position: fixed; /* Cambiado a fixed para que no rompa el flujo de la cabecera */
  top: 65px; /* Ajusta esto según el alto real de tu cabecera */
  left: 0;
  width: 100%;
  z-index: 49;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.98); /* Fondo blanco para que haga juego con el scroll */
  border-bottom: 1px solid var(--color-linea);
  padding: 0.5rem clamp(1.2rem, 4vw, 3rem) 1rem;
}
.nav-movil a { padding: 0.85rem 0; border-bottom: 1px solid var(--color-linea); font-weight: 500; text-decoration: none; color: #111111; }
.nav-movil.abierto { display: flex; }

@media (max-width: 860px) {
  .nav-principal, .boton-nav { display: none; }
  .boton-menu { display: flex; }
}

/* ---------------------------------------------------------------------
   Hero — Inicio (sección oscura)
   --------------------------------------------------------------------- */
.seccion-hero {
  min-height: 92vh;
  display: flex; 
  align-items: flex-end;
  padding: var(--espacio-seccion) clamp(1.2rem, 4vw, 3rem) 4.5rem;
  color: var(--color-texto-invertido);
  position: relative; /* Importante para el posicionamiento absoluto */
  overflow: hidden;
}

/* EL VIDEO COMO FONDO ABSOLUTO (A color real, sin filtros) */
.video-fondo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* Evita deformaciones */
  z-index: -1; /* Lo manda detrás de gradientes y textos */
}

/* El contenido que va encima */
.hero-contenido { 
  max-width: 780px; 
  position: relative;
  z-index: 1; /* Lo levanta por encima del video */
}

.hero-titulo { max-width: 14ch; }
.hero-cta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-descripcion { color: var(--color-texto-tenue-inv); max-width: 260px; margin: 0; }
/* ---------------------------------------------------------------------
   Portafolio — barra deslizante de tipos de sesiones + bento grid
   --------------------------------------------------------------------- */
.seccion-portafolio { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); }

.barra-deslizante {
  overflow: hidden;
  margin-bottom: 2rem;
  margin-top: 0;
  padding: 0 0 0 0;
  border-bottom: 1px solid var(--color-linea);
}
.barra-deslizante-track {
  display: flex;
  width: max-content;
  gap: 0.85rem;
  animation: desplazarBarra 16s linear infinite;
  will-change: transform;
}
.barra-deslizante-item {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 1rem;
  background: transparent;
  color: var(--color-texto);
  font-size: 0.9rem; font-weight: 600;
  white-space: nowrap;
}

.encabezado-portafolio { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.2rem; flex-wrap: wrap; }
.descripcion-portafolio { max-width: 360px; color: var(--color-texto-tenue); margin: 0; }

.cuadricula-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Quitamos el min-height de los items y le damos altura fija a las filas del grid */
  grid-auto-rows: 140px; 
  gap: 0.85rem;
}
.cuadro-foto {
  /* Por defecto, un bloque estándar (ocupa 4 columnas de 12 y 2 filas de altura) */
  grid-column: span 4;
  grid-row: span 2; 
  
  border-radius: 0;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: var(--color-texto);
  box-shadow: 0 6px 18px rgba(11, 11, 11, 0.05);
  transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion);
}
.cuadro-foto::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.cuadro-foto:hover,
.cuadro-foto:focus-visible,
.cuadro-foto:active {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(11, 11, 11, 0.12);
  filter: brightness(0.98);
}
.cuadro-foto--alto { grid-column: span 6; min-height: 320px; }
.cuadro-foto--medio { grid-column: span 4; min-height: 260px; }
.cuadro-foto--autor { background: linear-gradient(145deg, #F4EDE4 0%, #E5D8C8 100%); }
.cuadro-foto--bodas { background: linear-gradient(145deg, #ECDFD0 0%, #D6B79A 100%); }
.cuadro-foto--retrato { background: linear-gradient(145deg, #F0EFEA 0%, #D6D0C2 100%); }
.cuadro-foto--eventos { background: linear-gradient(145deg, #E7F0F0 0%, #B9C8CA 100%); }
.cuadro-foto--editorial { background: linear-gradient(145deg, #F3ECE7 0%, #D9CBBF 100%); }
.cuadro-foto--recien-nacidos { background: linear-gradient(145deg, #FAF1E5 0%, #E5C9B4 100%); }
.cuadro-foto-media {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(140deg, rgba(255,255,255,0.18), rgba(0,0,0,0.12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 900'%3E%3Crect width='640' height='900' fill='%23d8d0c4'/%3E%3Cpath d='M0 660 L220 420 L320 520 L430 310 L640 680 L640 900 L0 900 Z' fill='%23656a6d'/%3E%3Cpath d='M120 900 L240 620 L320 720 L420 520 L560 900 Z' fill='%23453d39'/%3E%3Ccircle cx='190' cy='255' r='90' fill='%23f5efea'/%3E%3Cpath d='M120 290 C130 200 170 130 240 120 C300 112 332 160 340 220 L370 320 L120 320 Z' fill='%23b89c80'/%3E%3C/svg%3E");
  background-size: cover; background-position: center;
  filter: grayscale(1);
  transform: scale(1.03);
  transition: filter 220ms ease, transform 220ms ease;
}
.cuadro-foto:hover .cuadro-foto-media,
.cuadro-foto:focus-visible .cuadro-foto-media,
.cuadro-foto:active .cuadro-foto-media {
  filter: grayscale(0);
  transform: scale(1);
}
.cuadro-foto-contenido {
  position: relative; 
  z-index: 2;
  display: flex; 
  flex-direction: column;
  /* Al usar space-between, empuja la categoría al tope y el CTA al fondo perfectamente */
  justify-content: space-between; 
  height: 100%;
  padding: 1.2rem;
  box-sizing: border-box;
}

.cuadro-foto-categoria {
  display: inline-flex; 
  align-self: flex-start;
  padding: 0.35rem 0.65rem;
  background: rgba(255,255,255,0.82);
  color: var(--color-texto);
  font-size: 0.7rem; 
  font-weight: 700; 
  letter-spacing: 0.16em; 
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* Removiste el título de en medio, por lo que el CTA se alineará abajo gracias al space-between */
.cuadro-foto-cta {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.9);
  color: var(--color-texto);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  margin-top: auto; /* Asegura el empuje hacia el fondo si el contenedor mide más */
}

.cuadro-foto--grande { 
  grid-column: span 8; 
  grid-row: span 3; 
}

/* Bloque Vertical / Alto (Ideal para retratos de pie) */
.cuadro-foto--alto { 
  grid-column: span 4; 
  grid-row: span 3; 
}

/* Bloque Ancho / Apaisado */
.cuadro-foto--ancho { 
  grid-column: span 8; 
  grid-row: span 2; 
}

@media (max-width: 900px) {
  .cuadricula-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cuadro-foto, .cuadro-foto--alto, .cuadro-foto--medio { grid-column: span 1; min-height: 240px; }
}
@media (max-width: 560px) {
  .cuadricula-bento { grid-template-columns: 1fr; }
  .cuadro-foto, .cuadro-foto--alto, .cuadro-foto--medio { grid-column: span 1; min-height: 220px; }
}

@keyframes desplazarBarra {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   Experiencia — contacto (sección oscura)
   --------------------------------------------------------------------- */
.seccion-experiencia {
  margin-top: 4rem;
  background: var(--color-bg-oscuro); color: var(--color-texto-invertido);
  padding: var(--espacio-seccion) clamp(1.2rem, 4vw, 3rem );
  display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem;
  max-width: 100%; 
}

.experiencia-columna-texto, .tarjeta-formulario { max-width: 560px; width: 100%; }
.experiencia-descripcion { color: var(--color-texto-tenue-inv); max-width: 420px; }

.pasos-experiencia { list-style: none; margin: 2rem 0 0; padding: 0; }
.pasos-experiencia li { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--color-linea-inv); }
.pasos-experiencia li:first-child { border-top: 1px solid var(--color-linea-inv); }
.paso-numero { font-size: 0.78rem; color: var(--color-texto-tenue-inv); font-weight: 600; }
.paso-texto { font-size: 1.02rem; font-weight: 500; }

.tarjeta-formulario {
  background: var(--color-bg-elevado-osc);
  border: 1px solid var(--color-linea-inv);
  border-radius: var(--radio);
  padding: clamp(1.8rem, 3vw, 2.6rem);
}

@media (max-width: 900px) {
  .seccion-experiencia { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Área de clientes — tarjeta oscura con anillos decorativos
   --------------------------------------------------------------------- */
.seccion-clientes { max-width: var(--ancho-maximo); margin: 0 auto; padding: var(--espacio-seccion) clamp(1.2rem, 4vw, 3rem); }

.tarjeta-clientes {
  position: relative; overflow: hidden;
  background: var(--color-bg-oscuro); color: var(--color-texto-invertido);
  border-radius: var(--radio);
  padding: clamp(2.2rem, 5vw, 4rem);
  display: flex; justify-content: space-between; align-items: center; gap: 3rem; flex-wrap: wrap;
}
/* Firma visual: anillos concéntricos, evocando el visor de un lente */
.tarjeta-clientes::before {
  content: "";
  position: absolute; top: -60px; right: -60px; width: 320px; height: 320px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center, transparent 0 38px, rgba(255,255,255,0.07) 38px 39px);
  pointer-events: none;
}
.tarjeta-clientes-texto { position: relative; max-width: 420px; }
.clientes-descripcion { color: var(--color-texto-tenue-inv); margin: 0; }

.tarjeta-clientes-formulario { position: relative; width: 100%; max-width: 380px; }
.fila-codigo { display: flex; gap: 0.7rem; }
.fila-codigo input {
  background: var(--color-bg-elevado-osc); border: 1px solid var(--color-linea-inv); border-radius: var(--radio-boton);
  padding: 0.9em 1.3em; color: var(--color-texto-invertido);
}
.fila-codigo input:focus { border-color: var(--color-acento); }
.ayuda-clientes { font-size: 0.82rem; color: var(--color-texto-tenue-inv); margin: 0.9rem 0 0; }
.ayuda-clientes a { color: var(--color-texto-invertido); text-decoration: underline; text-underline-offset: 2px; }
#error-codigo { margin-top: 1rem; }

@media (max-width: 700px) { .tarjeta-clientes { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------------
   Pie de página
   --------------------------------------------------------------------- */
.pie-pagina { max-width: var(--ancho-maximo); margin: 0 auto; padding: var(--espacio-seccion) clamp(1.2rem, 4vw, 3rem) 2.5rem; }
.pie-pagina-superior { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; }
.pie-pagina-titulo { font-size: 1.7rem; font-weight: 800; margin-bottom: 0.3em; }
.pie-pagina-tagline { color: var(--color-texto-tenue); max-width: 320px; margin: 0; }
.pie-pagina-encabezado { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-texto-tenue); margin-bottom: 1em; }
.pie-pagina-columna { display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.95rem; }
.pie-pagina-columna a:hover { color: var(--color-acento); }
.pie-pagina-inferior { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.6rem; border-top: 1px solid var(--color-linea); font-size: 0.82rem; color: var(--color-texto-tenue); }
.pie-pagina-inferior p { margin: 0; }
.enlace-discreto { opacity: 0.35; padding: 0 0.4rem; }
.enlace-discreto:hover { opacity: 0.7; }

@media (max-width: 760px) { .pie-pagina-superior { grid-template-columns: 1fr 1fr; } .pie-pagina-marca { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------------
   Galería privada del cliente
   --------------------------------------------------------------------- */
.pagina-galeria {
  background: var(--color-bg);
  color: var(--color-texto);
  min-height: 100vh;
}
.contenedor-galeria {
  max-width: 1200px; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) clamp(1.2rem, 4vw, 2rem) 3rem;
}
.encabezado-galeria {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 2rem;
}
.descripcion-galeria { color: var(--color-texto-tenue); max-width: 500px; margin: 0; }
.grid-galeria {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem;
}
.tarjeta-galeria {
  background: var(--color-bg-elevado); border: 1px solid var(--color-linea); border-radius: 0; overflow: hidden;
  box-shadow: 0 6px 18px rgba(11, 11, 11, 0.04);
}
.hero-galeria {
  margin-bottom: 1.2rem;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--color-linea);
  background: var(--color-bg-elevado);
}
.hero-galeria img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
}
.tarjeta-galeria img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.pie-galeria {
  display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-linea);
}
.tarjeta-galeria-footer span { font-size: 0.9rem; font-weight: 600; color: var(--color-texto-tenue); }
.boton-descarga {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--color-texto); color: var(--color-texto-invertido);
  font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.vacio-galeria {
  background: var(--color-bg-elevado); border: 1px dashed var(--color-linea); border-radius: 18px; padding: 2rem;
  color: var(--color-texto-tenue);
}
@media (max-width: 900px) { .grid-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-galeria { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   Modal de galería (Área de clientes) — overlay oscuro fijo
   --------------------------------------------------------------------- */
.modal-galeria { position: fixed; inset: 0; z-index: 200; background: rgba(6,6,5,0.97); display: flex; flex-direction: column; color: #EDEAE4; }
.modal-galeria[hidden] { display: none; }
.modal-galeria-barra { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.4rem; color: #9C9891; font-size: 0.85rem; }
.modal-galeria-cerrar { background: none; border: none; color: inherit; font-size: 1.3rem; cursor: pointer; padding: 0.4rem 0.7rem; }
.modal-galeria-visor { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 0; padding: 0 1rem; }
.modal-galeria-visor img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 8px; }
.modal-galeria-nav { background: none; border: 1px solid #2A2A27; color: inherit; font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.modal-galeria-nav:hover { border-color: var(--color-acento); color: var(--color-acento); }
.modal-galeria-tiras { display: flex; gap: 0.5rem; overflow-x: auto; padding: 1rem 1.4rem 1.4rem; }
.modal-galeria-tiras img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; opacity: 0.5; cursor: pointer; border: 1px solid transparent; flex-shrink: 0; }
.modal-galeria-tiras img.activa { opacity: 1; border-color: var(--color-acento); }

/* =====================================================================
   TEMA OSCURO CONSTANTE — panel admin y login (herramientas internas)
   Se sobreescriben las variables sobre el propio <body>, así que todo
   el resto de las reglas de arriba (botones, inputs, tarjetas) se
   heredan automáticamente en tono oscuro sin duplicar CSS.
   ===================================================================== */
.pagina-admin, .pagina-login {
  --color-bg: #0B0B0B;
  --color-bg-elevado: #151512;
  --color-texto: #EDEAE4;
  --color-texto-tenue: #93897E;
  --color-linea: #2A2A27;
  background: var(--color-bg); color: var(--color-texto); min-height: 100vh;
}
.pagina-admin .boton-claro, .pagina-login .boton-claro { background: var(--color-texto); color: var(--color-bg); }

.pagina-login { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.tarjeta-login {
  width: 100%; max-width: 380px;
  background: var(--color-bg-elevado); border: 1px solid var(--color-linea);
  border-radius: var(--radio); padding: clamp(2rem, 4vw, 2.6rem);
}
.tarjeta-login h1 { font-size: 1.6rem; margin-bottom: 0.6em; }
.pagina-login input { border-bottom-color: var(--color-linea); }

.barra-admin {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem clamp(1.2rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--color-linea);
}
.barra-admin-usuario { display: flex; align-items: center; gap: 1rem; font-size: 0.88rem; color: var(--color-texto-tenue); }
.contenedor-admin {
  max-width: var(--ancho-maximo); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
}
.panel-columna {
  background: var(--color-bg-elevado); border: 1px solid var(--color-linea);
  border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2.2rem);
}
@media (max-width: 960px) { .contenedor-admin { grid-template-columns: 1fr; } }

.grupo-radios { border: none; margin: 1.3em 0 0; padding: 0; }
.grupo-radios legend { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-texto-tenue); padding: 0; margin-bottom: 0.6em; }
.opcion-radio { display: inline-flex; align-items: center; gap: 0.5em; text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--color-texto); margin-right: 1.5rem; font-weight: 400; }
.opcion-radio input { width: auto; }

.zona-arrastre {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 1.4rem; padding: 2.2rem 1rem;
  border: 1px dashed var(--color-linea); border-radius: var(--radio);
  cursor: pointer; text-align: center; transition: border-color var(--transicion), background var(--transicion);
}
.zona-arrastre:hover, .zona-arrastre.sobre-arrastre { border-color: var(--color-acento); background: rgba(92,122,130,0.1); }
.zona-arrastre-titulo { font-size: 0.95rem; font-weight: 500; }
.zona-arrastre-ayuda { font-size: 0.78rem; color: var(--color-texto-tenue); }
.zona-arrastre input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.tabla-galerias { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.88rem; }
.tabla-galerias th { text-align: left; color: var(--color-texto-tenue); font-weight: 600; padding: 0.5em 0.6em; border-bottom: 1px solid var(--color-linea); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tabla-galerias td { padding: 0.65em 0.6em; border-bottom: 1px solid var(--color-linea); }
.tabla-galerias code { background: rgba(255,255,255,0.06); padding: 0.2em 0.5em; border-radius: 4px; letter-spacing: 0.05em; }

.etiqueta { font-size: 0.7rem; font-weight: 600; padding: 0.28em 0.75em; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.etiqueta-regular { background: rgba(92,122,130,0.16); color: #8FB3BC; }
.etiqueta-boudoir { background: rgba(176,71,58,0.16); color: #E29388; }

/* =====================================================================
   nosotros.php — Estilos adicionales
   Reutiliza tokens y clases ya existentes (.eyebrow, .tono-fuerte,
   .tono-tenue, .boton, .encabezado-portafolio, etc.) — no duplica
   nada del sistema base, solo agrega el layout específico de esta página.
   ===================================================================== */

.seccion-nosotros-hero {
  max-width: var(--ancho-maximo); margin: 0 auto;
  padding: var(--espacio-seccion) clamp(1.2rem, 4vw, 3rem) 3rem;
}
.nosotros-intro { max-width: 560px; color: var(--color-texto-tenue); font-size: 1.05rem; }

.seccion-filosofia { max-width: var(--ancho-maximo); margin: 0 auto; padding: 3rem clamp(1.2rem, 4vw, 3rem) var(--espacio-seccion); }
.grid-filosofia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
.tarjeta-filosofia {
  background: var(--color-bg-elevado); border: 1px solid var(--color-linea);
  border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2rem);
}
.tarjeta-filosofia h3 { font-size: 1.15rem; margin-bottom: 0.5em; }
.tarjeta-filosofia p { color: var(--color-texto-tenue); margin: 0; font-size: 0.95rem; }
@media (max-width: 860px) { .grid-filosofia { grid-template-columns: 1fr; } }

.seccion-equipo {
  background: var(--color-bg-oscuro); color: var(--color-texto-invertido);
  padding: var(--espacio-seccion) clamp(1.2rem, 4vw, 3rem);
}
.seccion-equipo .encabezado-portafolio, .grid-equipo { max-width: var(--ancho-maximo); margin: 0 auto; }
.descripcion-portafolio-invertida { color: var(--color-texto-tenue-inv) !important; }
.grid-equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
.tarjeta-equipo {
  background: var(--color-bg-elevado-osc); border: 1px solid var(--color-linea-inv);
  border-radius: var(--radio); padding: clamp(1.5rem, 3vw, 2rem);
}
.tarjeta-equipo-rol { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-acento); margin-bottom: 0.8em; }
.tarjeta-equipo h3 { font-size: 1.2rem; margin-bottom: 0.5em; }
.tarjeta-equipo-bio { color: var(--color-texto-tenue-inv); margin: 0; font-size: 0.92rem; }
@media (max-width: 860px) { .grid-equipo { grid-template-columns: 1fr; } }

.seccion-credenciales {
  max-width: var(--ancho-maximo); margin: 0 auto;
  padding: var(--espacio-seccion) clamp(1.2rem, 4vw, 3rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.credenciales-texto { max-width: 380px; }
.lista-credenciales { list-style: none; margin: 0; padding: 0; }
.lista-credenciales li {
  padding: 1.1rem 0; border-bottom: 1px solid var(--color-linea);
  font-size: 1rem; position: relative; padding-left: 1.8rem;
}
.lista-credenciales li:first-child { border-top: 1px solid var(--color-linea); }
.lista-credenciales li::before {
  content: "→"; position: absolute; left: 0; color: var(--color-acento); font-weight: 600;
}
@media (max-width: 860px) { .seccion-credenciales { grid-template-columns: 1fr; } }

.seccion-cta-nosotros {
  max-width: var(--ancho-maximo); margin: 0 auto;
  padding: 2rem clamp(1.2rem, 4vw, 3rem) var(--espacio-seccion);
  text-align: center; border-top: 1px solid var(--color-linea);
}
.seccion-cta-nosotros h2 { margin-bottom: 1em; }