/* =====================================================
   EQQ – Equipa Tu Equipo | Estilos principales
   Versión: 1.0 (landing provisional)
   ===================================================== */

/* ─── 1. Custom Properties ─────────────────────────── */
:root {
  /* Paleta base */
  --color-black:       #0a0a0a;
  --color-dark:        #111111;
  --color-gray-900:    #1a1a1a;
  --color-gray-800:    #2d2d2d;
  --color-gray-600:    #555555;
  --color-gray-400:    #888888;
  --color-gray-200:    #cccccc;
  --color-gray-100:    #f0f0f0;
  --color-white:       #ffffff;

  /* Acento — paleta de marca: negro / blanco / burdeos */
  --color-accent:      #7a1f2e;   /* burdeos (fondos de botón, detalles) */
  --color-accent-dark: #5c1622;   /* burdeos oscuro (texto sobre blanco) */
  --color-accent-light:#cf7883;   /* burdeos claro para TEXTO sobre fondo oscuro (contraste ≥4.5:1) */
  --color-whatsapp:    #25d366;
  --color-whatsapp-dk: #1da851;

  /* Tipografía */
  --font-base:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Tamaños de fuente (fluid) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3rem;
  --fs-hero: clamp(2rem, 5vw + 1rem, 3.75rem);

  /* Espaciado */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Bordes */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Layout */
  --container-max: 1180px;
  --nav-height: 64px;
}

/* ─── 2. Reset & Base ──────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* El atributo [hidden] debe ocultar SIEMPRE, aunque otra regla fije display
   (p. ej. .form-row { display:flex }). Garantiza que no ocupe espacio. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-dark);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  font: inherit;
  border: none;
  background: none;
}

/* ─── 3. Skip link ─────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 9999;
  font-weight: 600;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ─── 4. Container ─────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 600px) {
  .container {
    padding-inline: var(--space-4);
  }
}

/* ─── 5. Tipografía utilitaria ─────────────────────── */
.section-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}
.section-label--light {
  /* Etiqueta sobre fondo oscuro: burdeos claro para cumplir contraste. */
  color: var(--color-accent-light);
}

.section-title {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-black);
  letter-spacing: -0.02em;
}
.section-title--center {
  text-align: center;
}
.section-title--light {
  color: var(--color-white);
}

.section-intro {
  font-size: var(--fs-lg);
  color: var(--color-gray-600);
  max-width: 640px;
  margin: var(--space-4) auto 0;
  text-align: center;
}

.inline-link {
  color: var(--color-black);
  text-decoration: underline;
  font-weight: 600;
}

/* ─── 6. Botones ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.75rem;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast),
              transform var(--transition-fast), box-shadow var(--transition-fast);
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.01em;
  white-space: nowrap;
  min-height: 48px; /* accesibilidad táctil */
}

.btn:active {
  transform: scale(0.97);
}

/* Botón primario: blanco con texto negro; al pasar el cursor, burdeos con texto blanco. */
.btn-primary {
  background: var(--color-white);
  color: var(--color-black);
  border: 2px solid var(--color-white);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(122,31,46,0.35);
}

/* En secciones de fondo CLARO (proceso) el CTA blanco no contrastaría: usamos
   relleno negro con texto blanco; el hover burdeos se mantiene coherente. */
.section-process .btn-primary {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.section-process .btn-primary:hover,
.section-process .btn-primary:focus-visible {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* Botón secundario */
.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: rgba(255,255,255,0.1);
}

/* Botón outline oscuro */
.btn-outline {
  background: transparent;
  color: var(--color-black);
  border: 2px solid var(--color-black);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-black);
  color: var(--color-white);
}

/* Botón WhatsApp */
.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
  border: 2px solid var(--color-whatsapp);
  font-size: var(--fs-lg);
  padding: 1rem 2rem;
}
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  background: var(--color-whatsapp-dk);
  border-color: var(--color-whatsapp-dk);
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
}

/* Focus visible global */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ─── 7. Header / Navegación ──────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition-base);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  gap: var(--space-4);
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 44px;
  width: 44px;
  /* Recorte circular: el logo es cuadrado; lo mostramos como círculo limpio. */
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.logo-fallback {
  display: none;
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: -0.04em;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-link {
  color: var(--color-gray-200);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color var(--transition-fast);
  padding: var(--space-2) 0;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-white);
}

.nav-cta {
  background: var(--color-white);
  color: var(--color-black) !important;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-sm);
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--color-accent);
  color: var(--color-white) !important;
  transform: translateY(-1px);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  color: var(--color-white);
  flex-shrink: 0;
}
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Estado abierto del menú mobile */
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    left: 0;
    /* El backdrop-filter del header crea un containing block para los
       descendientes fixed, por eso se fija la altura explícitamente en
       lugar de usar bottom:0. */
    height: calc(100svh - var(--nav-height));
    height: calc(100vh - var(--nav-height));
    background: var(--color-dark);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) 0;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }
  .nav-menu.is-open {
    transform: translateX(0);
  }
  .nav-link {
    display: block;
    padding: var(--space-4) var(--space-6);
    font-size: var(--fs-base);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: var(--color-white);
  }
  .nav-cta {
    margin: var(--space-4) var(--space-6);
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--color-white) !important;
    color: var(--color-black) !important;
    padding: 0.875rem;
    font-size: var(--fs-base);
  }
}

@media (max-width: 600px) {
  .nav-container {
    padding-inline: var(--space-4);
  }
}

/* ─── 8. Sección Hero ──────────────────────────────── */
.section-hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav-height);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  z-index: 0;
}

/* Textura deportiva sutil */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 60px,
      rgba(255,255,255,0.015) 60px,
      rgba(255,255,255,0.015) 61px
    );
}

/* Acento diagonal derecho */
.hero-bg::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(135deg, transparent 30%, rgba(122,31,46,0.14) 100%);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-20);
  max-width: 780px;
}

.hero-pretitle {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* Texto superior del hero en blanco para máxima legibilidad sobre la foto. */
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.08;
  color: var(--color-white);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.hero-title .accent {
  /* H1 completo en blanco (sin cambios de color). */
  color: var(--color-white);
}

/* Lema aprobado: párrafo destacado bajo el H1 (jerarquía menor que el H1). */
.hero-lema {
  font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-2xl));
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.25;
  max-width: 620px;
  margin-bottom: var(--space-5, 1.25rem);
}

.hero-subtitle {
  font-size: clamp(var(--fs-base), 2vw, var(--fs-lg));
  color: var(--color-white);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: var(--space-10, 2.5rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.scroll-arrow {
  display: block;
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255,255,255,0.3);
  border-bottom: 2px solid rgba(255,255,255,0.3);
  transform: rotate(45deg);
  animation: scrollBounce 1.8s infinite;
}
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }
  50%       { transform: rotate(45deg) translateY(6px); opacity: 0.4; }
}

@media (max-width: 600px) {
  .hero-content {
    padding-block: var(--space-16) var(--space-12);
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    text-align: center;
    justify-content: center;
  }
}

/* ─── 9. Sección Marca ─────────────────────────────── */
.section-brand {
  padding-block: var(--space-24);
  background: var(--color-white);
}

.brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: center;
}

/* Sin columna de imagen (foto de equipo pendiente): el texto se limita a un
   ancho de lectura cómodo y se centra en el contenedor. */
.brand-text {
  max-width: 760px;
  margin-inline: auto;
}

.brand-body {
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  font-size: var(--fs-md);
}

.brand-pillars {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pillar-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.pillar-icon {
  color: var(--color-accent-dark);
  font-size: var(--fs-xs);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.pillar-item strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-1);
}

.pillar-item p {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .brand-grid {
    gap: var(--space-12);
  }
}

/* ─── 10. Sección Prendas ──────────────────────────── */
.section-products {
  padding-block: var(--space-24);
  background: var(--color-gray-100);
}

.section-products .section-label,
.section-products .section-title {
  text-align: center;
  display: block;
}

.products-grid {
  display: grid;
  /* Dos tarjetas con imagen real (Jerseys y Conjuntos); se centran con un
     ancho máximo para que la retícula quede equilibrada. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
  max-width: 760px;
  margin-inline: auto;
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.product-img-wrap {
  position: relative;
  overflow: hidden;
}

.product-img-wrap img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 400ms ease;
}
.product-card:hover .product-img-wrap img {
  transform: scale(1.04);
}

.product-info {
  padding: var(--space-6);
}

.product-name {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.product-desc {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.products-note {
  text-align: center;
  margin-top: var(--space-10, 2.5rem);
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
}

@media (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .products-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }
  .section-products {
    padding-block: var(--space-16);
  }
}

/* ─── 11. Sección Casos ("Equipos que visten EQQ") ─── */
.section-casos {
  padding-block: var(--space-24);
  background: var(--color-white);
}

/* Rejilla de casos: una columna en móvil, dos en escritorio. */
.casos-grid {
  margin-top: var(--space-12);
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 860px) {
  .casos-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.caso-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Enlace que envuelve la miniatura del caso (Real Hormigas). */
.caso-media-link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.caso-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.caso-media-link:hover .caso-img,
.caso-media-link:focus-visible .caso-img {
  transform: scale(1.03);
}

/* Contenedor del vídeo con espacio 16:9 reservado (evita saltos de layout). */
.caso-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-black);
}
.caso-video .video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Facade: botón que ocupa todo el contenedor; no carga YouTube hasta el clic. */
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  cursor: pointer;
  color: var(--color-white);
  background:
    linear-gradient(135deg, rgba(122,31,46,0.55) 0%, rgba(10,10,10,0.85) 100%),
    linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  border: none;
  transition: filter var(--transition-fast);
}
.video-facade:hover,
.video-facade:focus-visible {
  filter: brightness(1.08);
}
.video-facade-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}
.video-brand {
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
}
.video-sub {
  font-size: var(--fs-sm);
  color: var(--color-gray-200);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-play svg {
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.video-play-bg {
  fill: var(--color-accent);
  transition: fill var(--transition-fast);
}
.video-facade:hover .video-play-bg,
.video-facade:focus-visible .video-play-bg {
  fill: var(--color-accent-dark);
}

.caso-nombre {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.caso-desc {
  font-size: var(--fs-base);
  color: var(--color-gray-600);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}
.caso-link {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
}

/* ─── 11b. Sección FAQ ("Preguntas sobre tu pedido") ─── */
.section-faq {
  padding-block: var(--space-24);
  background: var(--color-gray-100);
}
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-q {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-6);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 48px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.faq-item[open] .faq-q::after {
  content: '–';
}
.faq-q:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}
.faq-a {
  padding: 0 var(--space-6) var(--space-5);
}
.faq-a p {
  color: var(--color-gray-600);
  line-height: 1.65;
  font-size: var(--fs-base);
}

/* ─── 11c. Bloque "Formas de pago" (en Contacto, fondo oscuro) ─── */
.pagos-box {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  text-align: left;
  max-width: 560px;
  margin-inline: auto;
}
.pagos-titulo {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}
.pagos-texto {
  font-size: var(--fs-sm);
  color: var(--color-gray-200);
  line-height: 1.6;
}
.pagos-texto + .pagos-texto {
  margin-top: var(--space-3);
}

/* ─── 12. Sección Proceso ──────────────────────────── */
.section-process {
  padding-block: var(--space-24);
  background: var(--color-gray-100);
}

.process-steps {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}

/* Línea vertical conectora */
.process-steps::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 3rem;
  bottom: 3rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-black), var(--color-gray-200));
}

.process-step {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding: var(--space-6) 0;
  position: relative;
}

.step-number {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  background: var(--color-black);
  /* Números 01–05 en blanco sobre el cuadro negro (alto contraste). */
  color: var(--color-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}

.step-content {
  padding-top: var(--space-3);
}

.step-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-black);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.step-desc {
  font-size: var(--fs-base);
  color: var(--color-gray-600);
  line-height: 1.6;
  max-width: 560px;
}

.process-cta {
  text-align: center;
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.process-note {
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  max-width: 480px;
}

@media (max-width: 600px) {
  .process-steps::before {
    display: none;
  }
  /* Menos espacio antes del primer paso y entre pasos en móvil. */
  .process-steps {
    margin-top: var(--space-6);
  }
  .process-step {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) 0;
  }
  .step-number {
    width: 3.5rem;
    height: 3.5rem;
  }
  .step-content {
    padding-top: 0;
  }
}

/* ─── 13. Sección Contacto ─────────────────────────── */
.section-contact {
  padding-block: var(--space-24);
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}

.section-contact::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, transparent 40%, rgba(122,31,46,0.12) 100%);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}

.contact-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.contact-body {
  font-size: var(--fs-lg);
  color: var(--color-gray-200);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.contact-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-gray-400);
  font-size: var(--fs-sm);
  margin-top: var(--space-8);
}
.contact-location svg {
  flex-shrink: 0;
  color: var(--color-gray-400);
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-gray-200);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-2);
  min-height: 44px; /* área táctil accesible */
  transition: color var(--transition-fast);
}
.social-link:hover,
.social-link:focus-visible {
  color: var(--color-white);
}
.social-icon {
  flex-shrink: 0;
}

/* ─── 14. Footer ───────────────────────────────────── */
.site-footer {
  background: var(--color-black);
  padding-block: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.footer-logo img {
  height: 56px;
  width: 56px;
  /* Recorte circular (mismo criterio que el logo del header). */
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
  display: block;
}
.footer-logo-fallback {
  display: none;
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--color-white);
  letter-spacing: -0.04em;
}

.footer-tagline {
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}
.footer-nav a {
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
  font-weight: 500;
  transition: color var(--transition-fast);
}
.footer-nav a:hover {
  color: var(--color-white);
}

/* Iconos sociales del pie */
.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px; /* área táctil accesible */
  color: var(--color-gray-400);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--color-white);
  background: rgba(255,255,255,0.08);
}

.footer-copy {
  font-size: var(--fs-xs);
  color: var(--color-gray-600);
}

/* ─── 15. Botón flotante WhatsApp ──────────────────── */
.fab-wa {
  position: fixed;
  /* Respeta el área segura inferior del dispositivo (iPhone con barra/gesto). */
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--space-6) + env(safe-area-inset-right, 0px));
  z-index: 50;
  width: 56px;
  height: 56px;
  background: var(--color-whatsapp);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.5);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.fab-wa:hover,
.fab-wa:focus-visible {
  background: var(--color-whatsapp-dk);
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(37,211,102,0.6);
}
.fab-wa:active {
  transform: scale(0.95);
}

/* Ocultar el FAB cuando la sección de contacto está en pantalla (lo marca el JS
   vía IntersectionObserver), para que NO tape el CTA principal de WhatsApp.
   Fallback sin JS: el FAB permanece visible, que es un comportamiento aceptable. */
.fab-wa.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.6);
  pointer-events: none;
}

/* ─── 16. Animaciones de entrada (reveal) ──────────────
   La clase .reveal la añade main.js SOLO cuando JS está activo.
   Sin JS, nada se oculta: el contenido permanece visible.
   Cada elemento se anima UNA sola vez (el observer deja de observarlo). */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }
  .reveal-delay-1 { transition-delay: 90ms; }
  .reveal-delay-2 { transition-delay: 180ms; }
  .reveal-delay-3 { transition-delay: 270ms; }

  /* Stagger interno: anima los hijos directos en cascada (hero, contacto) */
  [data-reveal-stagger].reveal > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 550ms ease, transform 550ms ease;
  }
  [data-reveal-stagger].reveal.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
  [data-reveal-stagger].reveal.is-visible > *:nth-child(1) { transition-delay: 60ms; }
  [data-reveal-stagger].reveal.is-visible > *:nth-child(2) { transition-delay: 140ms; }
  [data-reveal-stagger].reveal.is-visible > *:nth-child(3) { transition-delay: 220ms; }
  [data-reveal-stagger].reveal.is-visible > *:nth-child(4) { transition-delay: 300ms; }
  [data-reveal-stagger].reveal.is-visible > *:nth-child(5) { transition-delay: 380ms; }
}

/* Si el usuario prefiere menos movimiento, nunca ocultamos nada. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-reveal-stagger].reveal > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── 16b. Parallax del hero ───────────────────────────
   .hero-photo es la capa de fotografía (preparada; inactiva sin imagen).
   El movimiento lo aplica main.js vía la variable --parallax-y, solo en
   escritorio y si el usuario no prefiere menos movimiento.
   El texto (.hero-content) NUNCA se mueve: queda estable y legible. */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Desplazamiento aplicado por JS. Por defecto 0 (hero estático). */
  transform: translate3d(0, var(--parallax-y, 0), 0);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto es horizontal (1672x941) y el hero es alto: encuadramos hacia la
     parte superior-central para que los deportistas queden visibles y no se
     recorten las cabezas en pantallas verticales. */
  object-position: 50% 28%;
  display: block;
}
/* En móvil (hero más vertical) centramos un poco más alto todavía. */
@media (max-width: 600px) {
  .hero-photo img {
    object-position: 50% 22%;
  }
}
/* Cuando hay foto activa, el degradado base se oscurece sobre ella
   para mantener contraste del texto. */
.hero-photo:not(:empty) ~ .hero-content::before,
.section-hero:has(.hero-photo img) .hero-bg {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.75) 100%);
}
/* Overlay de contraste sobre la foto (solo si hay imagen) */
.hero-photo:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.7) 100%);
}

/* Parallax activo (lo marca el JS, solo escritorio sin reduced-motion):
   reservamos GPU y damos "overscan" a la capa de foto para que el
   desplazamiento (hasta 60px) nunca deje ver un borde vacío. El texto no
   se ve afectado porque vive en otra capa (.hero-content). */
.section-hero.parallax-active .hero-photo {
  will-change: transform;
  top: -80px;
  bottom: -80px;
  height: auto;
}

/* ─── 16c. Página de caso (/equipos/real-hormigas/) ─── */
.caso-page {
  padding-top: var(--nav-height);
  background: var(--color-white);
}
.caso-article {
  max-width: 820px;
  margin-inline: auto;
  padding-block: var(--space-12) var(--space-20);
}

/* Migas de pan */
.breadcrumb {
  margin-bottom: var(--space-8);
  font-size: var(--fs-sm);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-gray-600);
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumb li + li::before {
  content: '›';
  color: var(--color-gray-400);
}
.breadcrumb a {
  color: var(--color-accent-dark);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-gray-600); }

.caso-hero .section-label { color: var(--color-accent-dark); }

.caso-h1 {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin: var(--space-3) 0 var(--space-8);
}
.caso-h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-black);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.caso-parrafo {
  font-size: var(--fs-md);
  color: var(--color-gray-800);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.caso-bloque {
  margin-top: var(--space-16);
}

/* Figuras */
.caso-figura {
  margin: var(--space-6) 0;
}
.caso-figura img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
}
.caso-figura figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
}
.caso-figura--principal { margin-bottom: var(--space-6); }
.caso-galeria {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 680px) {
  .caso-galeria { grid-template-columns: 1fr 1fr; }
}

.caso-hero .btn { margin-top: var(--space-4); }
.caso-cta-final .btn { margin-top: var(--space-4); }
.caso-credito {
  margin-top: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
}

.footer-legal {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-gray-400);
}

/* ─── 16d. Página de Patrocinios (/patrocinios/) ────── */

/* ══ Retícula común de Patrocinios ══
   Un solo contenedor centrado (máx ~1200px) con márgenes laterales adaptables.
   Header, subnav y secciones comparten estas líneas de alineación. */
.patrocinios-page {
  --pat-max: 1200px;
  --pat-gutter: clamp(1.5rem, 5vw, 4rem); /* 24px móvil → 40–64px escritorio */
}
.pat-container {
  width: 100%;
  max-width: var(--pat-max);
  margin-inline: auto;
  padding-inline: var(--pat-gutter);
  box-sizing: border-box;
}
/* La subnav y el hero de patrocinios usan la misma retícula que .pat-container. */
.patrocinios-page .subnav-inner,
.section-hero.patrocinios-hero > .hero-content.container {
  max-width: var(--pat-max);
  padding-inline: var(--pat-gutter);
}

/* Espaciado entre secciones (editorial). */
.patrocinios-page .pat-bloque,
.patrocinios-page .section-ubicacion,
.patrocinios-page .pat-proceso,
.patrocinios-page .pat-casos {
  padding-block: clamp(2.5rem, 6vw, 6rem); /* 40–56px móvil → 72–96px escritorio */
}

/* Tipografía coherente dentro de patrocinios. */
.patrocinios-page .section-title {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem); /* H2 ~32–44px */
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.patrocinios-page .section-intro {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.7;
}

/* Sub-barra compacta de sección */
.subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: 40;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.subnav-inner {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 3vw, 1.75rem);  /* separación explícita y adaptable */
  align-items: stretch;
  min-height: 48px;
}
.subnav-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-gray-200);
  white-space: nowrap;
  padding: var(--space-3) var(--space-1);   /* área táctil cómoda */
  min-height: 44px;
}
.subnav-link:hover { color: var(--color-white); }
.subnav-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.subnav-cta { color: var(--color-white); }
/* Enlace activo = sección visible (lo marca el JS scroll-spy). */
.subnav-link.is-active {
  color: var(--color-white);
  box-shadow: inset 0 -2px 0 0 var(--color-accent);
}
/* Etiquetas: cortas en móvil, largas en pantallas amplias. */
.subnav-short { display: inline; }
.subnav-full { display: none; }
@media (min-width: 560px) {
  .subnav-short { display: none; }
  .subnav-full { display: inline; }
}

/* Desplazamiento de anclas: el objetivo no queda bajo el header + subnav fijos.
   Encapsulado en .patrocinios-page para no alterar la home ni Real Hormigas. */
.patrocinios-page [id] { scroll-margin-top: calc(var(--nav-height) + 56px); }
.patrocinios-page .pat-form :is(input, select, textarea) { scroll-margin-top: calc(var(--nav-height) + 72px); }

/* Seguridad anti-desbordamiento, SOLO en patrocinios (sin overflow-x global). */
.patrocinios-page { max-width: 100%; }
/* Todas las secciones de patrocinios comparten la misma retícula (~1200px). */
.patrocinios-page .container {
  max-width: var(--pat-max);
  padding-inline: var(--pat-gutter);
}
.patrocinios-page .form-grid,
.patrocinios-page .ubicacion-layout,
.patrocinios-page .pat-caso-card { min-width: 0; }
.patrocinios-page .form-grid > *,
.patrocinios-page .pat-form .form-row { min-width: 0; }

/* ══════════════════ HERO DE PATROCINIOS ══════════════════
   Base (móvil ≤768px): texto sobre negro sólido; foto como bloque separado
   DEBAJO. Escritorio (≥769px): dos columnas (texto izq / foto der) sobre
   fondo negro integrado, dentro de la retícula común. Todo encapsulado. */
.section-hero.patrocinios-hero {
  min-height: 0;                 /* altura natural, sin recortes */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
  padding-top: 0;
  background: var(--color-black);
}
.section-hero.patrocinios-hero .hero-bg,
.section-hero.patrocinios-hero:has(.hero-photo img) .hero-bg {
  position: static;
  order: 2;
  inset: auto;
  background: var(--color-black);
}
.patrocinios-hero .hero-bg::before,
.patrocinios-hero .hero-bg::after { display: none; }
.patrocinios-hero .hero-photo {
  position: static;
  transform: none;
  width: 100%;
  height: auto;
  z-index: auto;
}
.patrocinios-hero .hero-photo img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.patrocinios-hero .hero-photo:has(img)::after { display: none; }
.patrocinios-hero .hero-content {
  order: 1;
  background: var(--color-black);
  padding-top: calc(var(--nav-height) + var(--space-8));
  padding-bottom: var(--space-10);
}
/* Jerarquía del texto del hero (acotada: proporción equilibrada, sin partir
   palabra por línea ni atravesar la pantalla). */
.patrocinios-hero .hero-title {
  font-size: clamp(1.9rem, 1rem + 2.4vw, 3.25rem);   /* ~40–52px en escritorio */
  max-width: 15ch;                                   /* ~2–3 líneas, no 1 palabra/línea */
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;                                /* reparte mejor las líneas */
}
.patrocinios-hero .hero-lema {       /* hook: jerarquía secundaria (texto en blanco) */
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem);
  font-weight: 700;
  color: var(--color-white);         /* blanco sobre negro (contraste alto) */
  max-width: 34ch;
  line-height: 1.3;
  margin-bottom: var(--space-5);
}
.patrocinios-hero .hero-subtitle {   /* texto de apoyo 18–20px */
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  max-width: 42ch;
  line-height: 1.6;
}
.patrocinios-hero .hero-actions .btn {
  white-space: normal;
  height: auto;
  min-height: 48px;
  line-height: 1.2;
}

/* ── Hero en MÓVIL (≤768px): botones a ancho completo ── */
@media (max-width: 768px) {
  .patrocinios-hero .hero-actions .btn { width: 100%; }
}

/* ── Hero en ESCRITORIO (≥769px): dos columnas equilibradas ── */
@media (min-width: 769px) {
  .section-hero.patrocinios-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;        /* ambas columnas centradas verticalmente */
    column-gap: clamp(2rem, 4vw, 4rem);
    max-width: var(--pat-max);
    margin-inline: auto;
    padding-inline: var(--pat-gutter);
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 2.5rem;
  }
  .patrocinios-hero .hero-content {
    order: 1;
    padding: 0;                 /* la retícula del grid aporta el margen */
    max-width: none;
    align-self: center;
  }
  .patrocinios-hero .hero-bg {
    order: 2;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  /* Composición vertical de la foto (retrato), sin estirar ni ampliar. */
  .patrocinios-hero .hero-photo {
    width: 100%;
    max-width: 420px;
    margin-inline: 0 0 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .patrocinios-hero .hero-photo img {
    aspect-ratio: 4 / 5;        /* retrato más contenido (evita columna demasiado alta) */
    width: 100%;
    height: 100%;
    max-height: 560px;
    object-fit: cover;
    object-position: 50% 12%;   /* rostro y logo del jersey visibles */
  }
  /* Parallax sutil: lo activa el JS (solo escritorio, sin reduced-motion).
     Movemos la IMAGEN dentro de su contenedor con un ligero sobre-escalado,
     para que el desplazamiento no revele bordes ni altere el encuadre. */
  .section-hero.patrocinios-hero.parallax-active .hero-photo { will-change: transform; }
  .section-hero.patrocinios-hero.parallax-active .hero-photo img {
    transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.08);
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-hero.patrocinios-hero.parallax-active .hero-photo img { transform: none; }
}

.hero-aclaracion {
  font-size: var(--fs-sm);
  color: var(--color-gray-200);
  max-width: 560px;
  line-height: 1.55;
  margin-top: 0;
  margin-bottom: var(--space-8);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
}

/* ══ Bloques de prosa (identidad) ══ */
.pat-prosa {
  max-width: 760px;
  margin-inline: auto;
}
.pat-prosa .section-title { margin-bottom: var(--space-5); }

/* ══ "Qué tomamos en cuenta": dos columnas (intro izq / criterios der) ══ */
.pat-criterios .pat-criterios-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 769px) {
  .pat-criterios .pat-criterios-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}
.pat-criterios .section-title { margin-bottom: var(--space-4); }
.pat-lista {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.pat-lista li {
  padding: var(--space-4) 0;
  color: var(--color-gray-800);
  font-size: var(--fs-md);
  line-height: 1.5;
  border-top: 1px solid var(--color-gray-200); /* líneas finas, sin tarjetas */
}
.pat-lista li:last-child { border-bottom: 1px solid var(--color-gray-200); }

/* ══ Selector de ubicación: foto izq (≤460px) + contenido agrupado der ══ */
.section-ubicacion { background: var(--color-gray-100); }
.ubicacion-layout {
  margin-top: var(--space-8);
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;             /* alineación vertical equilibrada */
}
@media (min-width: 769px) {
  .ubicacion-layout {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  }
}
.ubicacion-media {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
.ubicacion-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--color-black);
}
.ubicacion-panel[hidden] { display: none; }
.ubicacion-content { max-width: 520px; }
.ubicacion-content .section-label { color: var(--color-accent-dark); }
.ubicacion-content .section-title { margin: var(--space-3) 0 var(--space-6); text-align: left; }
.ubicacion-desc {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
  color: var(--color-gray-800);
  line-height: 1.6;
  min-height: 3em;                 /* evita saltos al cambiar de pestaña */
}
.ubicacion-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-content: start;
}
.ubicacion-tab {
  padding: var(--space-3) var(--space-6);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-black);
  font-weight: 700;
  font-size: var(--fs-base);
  min-height: 48px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.ubicacion-tab:hover { border-color: var(--color-accent); }
.ubicacion-tab[aria-selected="true"] {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.ubicacion-tab:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.ubicacion-nota {
  margin-top: var(--space-6);
  max-width: 520px;
  font-size: var(--fs-sm);
  color: var(--color-gray-600);
  line-height: 1.5;
}
.ubicacion-cta { margin-top: var(--space-6); }

/* ══ Proceso: tres columnas equilibradas en escritorio, números discretos ══ */
.pat-proceso .pat-steps {
  margin-top: var(--space-10);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: none;
  counter-reset: none;
}
@media (min-width: 769px) {
  .pat-proceso .pat-steps { grid-template-columns: repeat(3, 1fr); }
}
/* Sin la línea vertical conectora ni bloques negros grandes. */
.pat-proceso .pat-steps::before { display: none; }
.pat-proceso .process-step {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0;
}
.pat-proceso .step-number {
  width: auto;
  height: auto;
  min-width: 0;
  background: transparent;
  color: var(--color-accent);
  font-size: var(--fs-xl);
  font-weight: 800;
  border-radius: 0;
  padding: 0 0 var(--space-2);
  border-bottom: 2px solid var(--color-accent);
}
.pat-proceso .step-content { padding-top: 0; }
.pat-proceso .step-title { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem); }

/* Caso real en la página de patrocinios (una sola tarjeta centrada) */
.pat-casos { background: var(--color-white); }
.pat-caso-card {
  margin-top: var(--space-10);
  max-width: 760px;
  margin-inline: auto;
}
@media (min-width: 680px) {
  .pat-caso-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
  }
}

/* Formulario de solicitud (sobre fondo oscuro de contacto) */
.section-solicitud { background: var(--color-dark); }
.solicitud-content {
  max-width: 680px;
  margin-inline: auto;
  text-align: left;
  position: relative;
  z-index: 1;
}
.solicitud-content .section-title { text-align: left; }
.pat-form { margin-top: var(--space-8); }
.form-row { margin-bottom: var(--space-5); display: flex; flex-direction: column; }
.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 620px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.pat-form label,
.pat-form legend {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-2);
}
.pat-form .req { color: var(--color-accent-light); } /* sobre form oscuro: contraste */
.pat-form .opt { color: var(--color-gray-400); font-weight: 400; }
/* Campos de TEXTO del formulario (se excluyen radio/checkbox a propósito). */
.pat-form input[type="text"],
.pat-form input[type="number"],
.pat-form input[type="email"],
.pat-form input[type="tel"],
.pat-form input[type="url"],
.pat-form select,
.pat-form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px; /* evita el zoom automático al enfocar en iOS */
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: var(--color-white);
  min-height: 48px;
}
.pat-form textarea { min-height: 96px; resize: vertical; }
.pat-form input::placeholder,
.pat-form textarea::placeholder { color: var(--color-gray-400); }
.pat-form select option { color: #000; }
.pat-form input[type="text"]:focus-visible,
.pat-form input[type="number"]:focus-visible,
.pat-form select:focus-visible,
.pat-form textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
/* Error solo tras interacción del usuario (user-invalid); nunca de entrada. */
.pat-form input[type="text"]:user-invalid,
.pat-form input[type="number"]:user-invalid,
.pat-form select:user-invalid,
.pat-form textarea:user-invalid {
  border-color: #e06666;
}

/* Fieldset de preferencia: contenido en columna, cada opción una fila. */
.form-fieldset {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-width: 0;
  box-sizing: border-box;
}
.form-fieldset legend { padding-inline: var(--space-2); }
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-fieldset .radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) 0;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-gray-200);
  min-height: 44px;
  cursor: pointer;
  line-height: 1.4;
}
/* Radio de tamaño normal: no lo estira la regla de campos de texto. */
.form-fieldset .radio input[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
  width: 20px;
  height: 20px;
  min-width: 20px;   /* no se encoge en flex */
  min-height: 0;
  margin: 0.1rem 0 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}
.form-fieldset .radio span,
.form-fieldset .radio {
  overflow-wrap: anywhere; /* la etiqueta puede envolver sin desbordar */
}
.form-error {
  color: #ffb3b3;
  background: rgba(224,102,102,0.14);
  border: 1px solid rgba(224,102,102,0.4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
}
/* Botón de envío del formulario: ocupa el ancho disponible y puede envolver. */
.pat-form .btn-whatsapp {
  width: 100%;
  max-width: 100%;
  white-space: normal;      /* permite que el texto envuelva */
  word-break: normal;
  overflow-wrap: anywhere;
  height: auto;
  min-height: 52px;
  padding-block: 0.9rem;
  line-height: 1.2;
}
.pat-form .btn-whatsapp .wa-icon {
  flex: 0 0 auto;           /* icono proporcionado, no se deforma */
}
.form-aviso {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-gray-200);
}
.form-alt {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-gray-200);
}
.inline-link--light { color: #ffd9df; }

/* Invitación a Patrocinios en la home */
.home-patrocinios {
  padding-block: var(--space-20);
  background: var(--color-black);
  text-align: center;
}
.home-patrocinios .section-title { color: var(--color-white); }
.home-patrocinios p {
  color: var(--color-gray-200);
  max-width: 540px;
  margin: var(--space-3) auto var(--space-8);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.home-patrocinios .hook {
  color: var(--color-accent-light);   /* sobre negro: burdeos claro (contraste ≥4.5:1) */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-3);
}

/* Movimiento reducido: sin transiciones de la media del selector */
@media (prefers-reduced-motion: reduce) {
  .ubicacion-panel img,
  .caso-img { transition: none; }
}

/* ─── 17. Utilidades ───────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ─── 18. Print ────────────────────────────────────── */
@media print {
  .site-header,
  .fab-wa,
  .hero-scroll-hint,
  .nav-toggle { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { text-decoration: underline; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIENDA / UNIFORMES — reconstrucción UX (categoría + 6 fichas)
   Todo encapsulado en .uni-page. No altera Home / Patrocinios / Real Hormigas.
   Paleta: fondo #0B0B0D, paneles #151518, texto #F7F7F7, secundario #B8B8BE,
   acento rojo #E50924, blanco contraste. Grid gris sutil de fondo.
   ═══════════════════════════════════════════════════════════════════════ */
.uni-page {
  --uni-bg:      #0B0B0D;
  --uni-panel:   #151518;
  --uni-panel-2: #1c1c21;
  --uni-text:    #F7F7F7;
  --uni-muted:   #B8B8BE;
  --uni-red:     #E50924;
  --uni-red-dk:  #b3061b;
  --uni-line:    rgba(255,255,255,0.06);
  --uni-border:  rgba(255,255,255,0.12);
  --uni-photo-bg:#e9e9ee;
  --uni-max:     1200px;
  --uni-gutter:  clamp(1.25rem, 4vw, 2.5rem);
  background: var(--uni-bg);
  color: var(--uni-text);
  min-height: 100vh;
  overflow-x: hidden;
}
/* Rejilla decorativa sutil (solo CSS). Capa de parallax estable e independiente. */
.uni-grid-bg {
  position: fixed; inset: -10% 0 0 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--uni-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--uni-line) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .5; will-change: transform;
}
.uni-page > * { position: relative; z-index: 1; }

.uni-container { width:100%; max-width: var(--uni-max); margin-inline:auto; padding-inline: var(--uni-gutter); box-sizing:border-box; }

/* ── Header / nav ── */
.uni-header { position: sticky; top:0; z-index:50; background: rgba(11,11,13,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom:1px solid var(--uni-border); }
.uni-nav { display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); min-height:64px; }
.uni-logo { display:inline-flex; align-items:center; padding:6px 0; }
.uni-logo img { height:40px; width:auto; max-width:180px; object-fit:contain; display:block; }
.uni-nav-links { display:none; gap: var(--space-6); align-items:center; }
.uni-nav-links a { color: var(--uni-text); font-weight:600; font-size: var(--fs-sm); }
.uni-nav-links a:hover, .uni-nav-links a[aria-current="page"] { color: var(--uni-red); }
.uni-nav-cta { background: var(--uni-red); color:#fff !important; padding:.6rem 1.1rem; border-radius: var(--radius-sm); font-weight:700; min-height:44px; display:inline-flex; align-items:center; }
.uni-nav-cta:hover { background: var(--uni-red-dk); color:#fff !important; }
@media (min-width:880px){ .uni-nav-links{ display:flex; } .uni-nav-toggle{ display:none; } }
.uni-nav-toggle { background:none; border:1px solid var(--uni-border); border-radius: var(--radius-sm); width:44px; height:44px; color: var(--uni-text); font-size:1.25rem; cursor:pointer; }
.uni-nav-mobile { display:none; flex-direction:column; gap: var(--space-2); padding: var(--space-4) 0; }
.uni-nav-mobile.is-open { display:flex; }
.uni-nav-mobile a { color: var(--uni-text); padding: var(--space-3) 0; border-bottom:1px solid var(--uni-line); min-height:44px; display:flex; align-items:center; }
@media (min-width:880px){ .uni-nav-mobile{ display:none !important; } }

/* ── Breadcrumbs ── */
.uni-breadcrumb { font-size: var(--fs-sm); color: var(--uni-muted); padding-block: var(--space-4); }
.uni-breadcrumb ol { display:flex; flex-wrap:wrap; gap:.4rem; }
.uni-breadcrumb li { display:flex; gap:.4rem; }
.uni-breadcrumb li + li::before { content:"/"; color: var(--uni-muted); }
.uni-breadcrumb a { color: var(--uni-muted); }
.uni-breadcrumb a:hover { color: var(--uni-text); }
.uni-breadcrumb [aria-current="page"] { color: var(--uni-red); }

/* ── Tipografía ── */
.uni-h1 { font-family: var(--font-display); font-weight:900; letter-spacing:-.02em; line-height:1.04; text-transform:uppercase; font-size: clamp(2rem,1rem + 4vw,3.5rem); color: var(--uni-text); }
.uni-h2 { font-family: var(--font-display); font-weight:800; letter-spacing:-.01em; line-height:1.1; text-transform:uppercase; font-size: clamp(1.5rem,1rem + 2vw,2.25rem); color: var(--uni-text); }
.uni-eyebrow { color: var(--uni-red); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size: var(--fs-sm); }
.uni-lead { color: var(--uni-muted); font-size: clamp(1rem,.95rem + .3vw,1.2rem); line-height:1.6; }
.uni-section { padding-block: clamp(2.5rem,6vw,5rem); }

/* ── Botones ── */
.uni-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.8rem 1.5rem; border-radius: var(--radius-sm); font-weight:700; font-size: var(--fs-base); line-height:1.2; cursor:pointer; border:2px solid transparent; text-align:center; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.uni-btn--primary { background: var(--uni-red); color:#fff; border-color: var(--uni-red); }
.uni-btn--primary:hover { background: var(--uni-red-dk); border-color: var(--uni-red-dk); }
.uni-btn--ghost { background:transparent; color: var(--uni-text); border-color: var(--uni-border); }
.uni-btn--ghost:hover { border-color: var(--uni-text); }
.uni-btn--wa { background: var(--color-whatsapp); color:#fff; border-color: var(--color-whatsapp); }
.uni-btn--wa:hover { background: var(--color-whatsapp-dk); border-color: var(--color-whatsapp-dk); }
.uni-btn--block { width:100%; }
.uni-btn:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.uni-btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ══ HERO de campaña (categoría) ══ */
.uni-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--uni-border); }
.uni-hero-grid { display:grid; gap: var(--space-8); align-items:center; padding-block: clamp(2rem,5vw,3.5rem); }
@media (min-width:900px){ .uni-hero-grid{ grid-template-columns: 1fr 1.05fr; } }
.uni-hero-copy { max-width: 40ch; }
.uni-hero-copy .uni-h1 { margin:.5rem 0; }
.uni-hero-copy .uni-lead { margin-bottom: var(--space-6); max-width: 34ch; }
.uni-hero-actions { display:flex; flex-wrap:wrap; gap: var(--space-3); }
/* Contenedor estable para el parallax: la imagen se transforma dentro, el marco no. */
.uni-hero-media { position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:3/2; background: linear-gradient(135deg,#202024,#0e0e11); border:1px solid var(--uni-border); }
.uni-hero-media .uni-hero-imgwrap { position:absolute; inset:-8% 0; }
.uni-hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block; background:#0e0e11; will-change: transform; }
.uni-hero-media--err img { display:none; }
.uni-ph-label { position:absolute; bottom:10px; right:10px; z-index:2; background: rgba(0,0,0,.6); color: var(--uni-muted); font-size: var(--fs-xs); padding:.25rem .5rem; border-radius: var(--radius-sm); }
/* Altura del hero contenida para no tapar el catálogo; en móvil, texto arriba y foto después */
@media (max-width:899px){
  .uni-hero-grid { grid-template-columns:1fr; }
  .uni-hero-media { aspect-ratio:4/3; order:2; }
  .uni-hero-copy { order:1; }
  .uni-hero-media img { object-position:center 28%; }
}

/* ══ CATÁLOGO ══ */
.uni-cat-head { max-width: 720px; margin-inline:auto; text-align:center; }
.uni-designs { display:grid; grid-template-columns:1fr; gap: var(--space-6); margin-top: var(--space-10); }
@media (min-width:600px){ .uni-designs{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .uni-designs{ grid-template-columns:repeat(3,1fr); } }
.uni-card { background: var(--uni-panel); border:1px solid var(--uni-border); border-radius: var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.uni-card:hover, .uni-card:focus-within { transform: translateY(-4px); border-color: var(--uni-red); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
/* Media de tarjeta: proporción consistente (retrato de modelo), foto como principal */
.uni-card-media { position:relative; aspect-ratio:3/4; background: var(--uni-photo-bg); overflow:hidden; display:block; }
.uni-card-media img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.uni-card-media .uni-card-primary { position:absolute; inset:0; transition: opacity .4s ease; }
.uni-card-media .uni-card-secondary { position:absolute; inset:0; opacity:0; object-fit:contain; background: var(--uni-photo-bg); transition: opacity .4s ease; }
/* Segunda vista (render frontal) al pasar el cursor O al activar con teclado/clic (toggle por JS en móvil) */
.uni-card:hover .uni-card-secondary, .uni-card.is-flipped .uni-card-secondary { opacity:1; }
.uni-card:hover .uni-card-primary, .uni-card.is-flipped .uni-card-primary { opacity:0; }
.uni-card-media--err img { display:none; }
.uni-card-media--err { background: #cfd0d4; }
.uni-flip-btn { position:absolute; bottom:10px; left:10px; z-index:3; background: rgba(0,0,0,.6); color:#fff; border:none; border-radius:999px; min-height:36px; padding:0 .8rem; font-size: var(--fs-xs); cursor:pointer; display:inline-flex; align-items:center; gap:.3rem; }
.uni-flip-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.uni-card-body { padding: var(--space-5); display:flex; flex-direction:column; gap:.35rem; flex:1; }
.uni-card-id { font-size: var(--fs-xs); color: var(--uni-red); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.uni-card-name { font-weight:800; font-size: var(--fs-lg); line-height:1.2; }
.uni-card-sub { color: var(--uni-muted); font-size: var(--fs-sm); }
.uni-tag { align-self:flex-start; font-size: var(--fs-xs); color: var(--uni-muted); border:1px solid var(--uni-border); border-radius:999px; padding:.15rem .6rem; margin-top:.35rem; }
.uni-card-link { margin-top:auto; padding-top:.6rem; color: var(--uni-red); font-weight:700; font-size: var(--fs-sm); display:inline-flex; align-items:center; gap:.3rem; min-height:44px; }
.uni-card:hover .uni-card-link { color:#fff; }
.uni-card-link::after { content:"→"; transition: transform .2s ease; }
.uni-card:hover .uni-card-link::after { transform: translateX(3px); }
.uni-card-stretch { position:absolute; inset:0; z-index:2; } /* enlace que cubre la tarjeta */

/* ══ Banda propuesta personalizada ══ */
.uni-band { border-top:2px solid var(--uni-red); border-bottom:1px solid var(--uni-border); background: linear-gradient(120deg, var(--uni-panel), var(--uni-bg)); }
.uni-band-inner { display:grid; gap: var(--space-5); padding-block: clamp(2.5rem,5vw,4rem); }
@media (min-width:760px){ .uni-band-inner{ grid-template-columns: 1fr auto; align-items:center; } }
.uni-band blockquote { color: var(--uni-muted); font-size: clamp(1rem,.95rem + .4vw,1.25rem); line-height:1.6; margin:.75rem 0 0; border-left:3px solid var(--uni-red); padding-left: var(--space-4); max-width: 54ch; }

/* ══ Info breve: tela + proceso + FAQ ══ */
.uni-steps { display:grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width:760px){ .uni-steps{ grid-template-columns:repeat(3,1fr); } }
.uni-step { display:flex; gap: var(--space-4); align-items:flex-start; }
.uni-step-n { color: var(--uni-red); font-weight:900; font-size: var(--fs-2xl); line-height:1; }
.uni-step h3 { font-size: var(--fs-md); margin-bottom:.25rem; }
.uni-step p { color: var(--uni-muted); font-size: var(--fs-sm); line-height:1.5; }
.uni-fabric-sum { display:grid; gap: var(--space-6); align-items:center; }
@media (min-width:760px){ .uni-fabric-sum{ grid-template-columns: 220px 1fr; } }
.uni-fabric-thumb { aspect-ratio:1/1; border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--uni-border); background:#dfe0e4; cursor: zoom-in; position:relative; }
.uni-fabric-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* ══ FICHA: layout galería + personalización ══ */
.uni-product { display:grid; gap: var(--space-8); margin-top: var(--space-4); align-items:start; }
@media (min-width:980px){ .uni-product{ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } }
/* Galería */
.uni-gallery { display:flex; flex-direction:column; gap:.6rem; }
.uni-gallery-main { aspect-ratio:3/4; background: var(--uni-photo-bg); border-radius: var(--radius-lg); overflow:hidden; position:relative; cursor: zoom-in; width:100%; display:block; border:1px solid var(--uni-border); }
.uni-gallery-main img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition: opacity .25s ease; }
.uni-gallery-main img.is-contain { object-fit:contain; background: var(--uni-photo-bg); }
.uni-gallery-zoomhint { position:absolute; bottom:10px; right:10px; background: rgba(0,0,0,.55); color:#fff; border-radius:999px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; pointer-events:none; }
.uni-thumbs { display:flex; gap:.5rem; flex-wrap:wrap; }
.uni-thumb { width:76px; height:96px; border-radius: var(--radius-sm); overflow:hidden; border:2px solid var(--uni-border); background: var(--uni-photo-bg); cursor:pointer; padding:0; }
.uni-thumb.is-active { border-color: var(--uni-red); }
.uni-thumb:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.uni-thumb img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.uni-thumb.thumb-contain img { object-fit:contain; }
.uni-illus-note { font-size: var(--fs-xs); color: var(--uni-muted); margin-top:.3rem; }

/* Columna de info/personalización. Sticky SOLO si cabe (altura suficiente). */
.uni-pcol { min-width:0; }
@media (min-width:980px) and (min-height:900px){
  .uni-pcol.can-stick { position: sticky; top: 80px; }
}
.uni-pinfo .uni-h1 { margin-bottom:.25rem; font-size: clamp(1.6rem,1rem + 2.2vw,2.4rem); }
.uni-pkg { color: var(--uni-muted); font-weight:700; }
.uni-price { font-size: var(--fs-xl); font-weight:800; color: var(--uni-text); margin:.5rem 0; }
.uni-pdesc { color: var(--uni-muted); line-height:1.6; margin-bottom: var(--space-5); }
.uni-pactions { display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom: var(--space-4); }

/* ══ WIZARD de cotización (3 etapas) ══ */
.uni-wizard { background: var(--uni-panel); border:1px solid var(--uni-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-4); }
.uni-steps-nav { display:flex; gap:.5rem; margin-bottom: var(--space-5); list-style:none; padding:0; }
.uni-steps-nav li { flex:1; text-align:center; font-size: var(--fs-xs); color: var(--uni-muted); padding-bottom:.5rem; border-bottom:2px solid var(--uni-border); display:flex; flex-direction:column; gap:.2rem; }
.uni-steps-nav li .n { width:24px; height:24px; border-radius:999px; border:1px solid var(--uni-border); display:inline-flex; align-items:center; justify-content:center; margin-inline:auto; font-weight:700; }
.uni-steps-nav li.is-active { color: var(--uni-text); border-bottom-color: var(--uni-red); }
.uni-steps-nav li.is-active .n { background: var(--uni-red); border-color: var(--uni-red); color:#fff; }
.uni-steps-nav li.is-done .n { background: var(--uni-panel-2); border-color: var(--uni-red); color: var(--uni-red); }
.uni-wstep { display:none; }
.uni-wstep.is-current { display:block; animation: uni-fade .3s ease; }
@media (prefers-reduced-motion: reduce){ .uni-wstep.is-current{ animation:none; } }
@keyframes uni-fade { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.uni-wnav { display:flex; gap:.75rem; margin-top: var(--space-5); }
.uni-wnav .uni-btn { flex:1; }

.uni-field { margin-bottom: var(--space-5); }
.uni-field label { display:block; font-weight:600; font-size: var(--fs-sm); margin-bottom:.4rem; }
.uni-field .req { color: var(--uni-red); }
.uni-field .opt { color: var(--uni-muted); font-weight:400; }
.uni-input, .uni-select, .uni-textarea { width:100%; box-sizing:border-box; min-width:0; font:inherit; font-size:16px; padding:.7rem .9rem; border-radius: var(--radius-sm); min-height:48px; background: var(--uni-panel-2); color: var(--uni-text); border:1px solid var(--uni-border); }
.uni-textarea { min-height:90px; resize:vertical; }
.uni-input:focus-visible, .uni-select:focus-visible, .uni-textarea:focus-visible { outline:3px solid #fff; outline-offset:1px; border-color: var(--uni-red); }
.uni-field.has-error .uni-input, .uni-field.has-error .uni-select { border-color:#ff6b6b; }
.uni-field-error { color:#ffb3b3; font-size: var(--fs-xs); margin-top:.35rem; display:none; }
.uni-field.has-error .uni-field-error { display:block; }
.uni-grid-2 { display:grid; gap: var(--space-4); }
@media (min-width:560px){ .uni-grid-2{ grid-template-columns:1fr 1fr; } }
.uni-sizes { display:grid; grid-template-columns:repeat(2,1fr); gap: var(--space-3); }
@media (min-width:480px){ .uni-sizes{ grid-template-columns:repeat(4,1fr); } }
.uni-size label { font-size: var(--fs-sm); }
.uni-size input { width:100%; }
.uni-sizes.is-pending { opacity:.5; }
.uni-assign { font-size: var(--fs-sm); margin-top:.5rem; }
.uni-assign.ok { color:#3ddc84; }
.uni-assign.bad { color:#ff8a8a; }
.uni-check { display:flex; align-items:center; gap:.5rem; font-size: var(--fs-sm); color: var(--uni-muted); min-height:44px; }
.uni-check input { width:18px; height:18px; accent-color: var(--uni-red); }
.uni-opts { display:flex; flex-wrap:wrap; gap:1rem; }
.uni-opts label { display:flex; align-items:center; gap:.4rem; font-weight:400; color: var(--uni-muted); min-height:44px; }
.uni-opts input { width:18px; height:18px; accent-color: var(--uni-red); }
.uni-form-note { font-size: var(--fs-xs); color: var(--uni-muted); margin-top:.5rem; }
.uni-counter { font-size: var(--fs-xs); color: var(--uni-muted); text-align:right; }

/* Chip de tela */
.uni-fabric-pick { display:flex; gap:.75rem; align-items:center; background: var(--uni-panel-2); border:1px solid var(--uni-red); border-radius: var(--radius-md); padding:.6rem .8rem; }
.uni-fabric-pick .sw { width:52px; height:52px; border-radius: var(--radius-sm); overflow:hidden; flex:0 0 auto; background:#d9dade; cursor: zoom-in; }
.uni-fabric-pick .sw img { width:100%; height:100%; object-fit:cover; }
.uni-fabric-pick .meta .n { font-weight:800; }
.uni-fabric-pick .meta .c { color: var(--uni-muted); font-size: var(--fs-xs); }

/* Revisión (etapa 3) */
.uni-review { background: var(--uni-panel-2); border:1px solid var(--uni-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.uni-review h3 { font-size: var(--fs-sm); text-transform:uppercase; letter-spacing:.1em; color: var(--uni-muted); margin-bottom: var(--space-3); }
.uni-sum-row { display:flex; justify-content:space-between; gap:.75rem; font-size: var(--fs-sm); padding:.4rem 0; border-bottom:1px solid var(--uni-line); }
.uni-sum-row:last-child { border-bottom:none; }
.uni-sum-row span:first-child { color: var(--uni-muted); flex:0 0 auto; }
.uni-sum-row span:last-child { text-align:right; }
.uni-sum-note { font-size: var(--fs-xs); color: var(--uni-muted); margin:.6rem 0 0; }
.uni-review-edit { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.uni-link-btn { background:none; border:none; color: var(--uni-red); font-weight:700; cursor:pointer; font-size: var(--fs-sm); padding:.3rem 0; text-decoration:underline; }
.uni-link-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* ══ Acordeones ══ */
.uni-acc { border:1px solid var(--uni-border); border-radius: var(--radius-md); overflow:hidden; background: var(--uni-panel); margin-bottom:.6rem; }
.uni-acc > summary { cursor:pointer; list-style:none; padding: var(--space-4) var(--space-5); font-weight:700; display:flex; justify-content:space-between; gap:1rem; min-height:48px; align-items:center; color: var(--uni-text); }
.uni-acc > summary::-webkit-details-marker { display:none; }
.uni-acc > summary::after { content:"+"; color: var(--uni-red); font-size:1.3rem; line-height:1; }
.uni-acc[open] > summary::after { content:"–"; }
.uni-acc > summary:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.uni-acc-body { padding:0 var(--space-5) var(--space-5); color: var(--uni-muted); line-height:1.6; }
.uni-acc-body p { margin-bottom:.5rem; }

/* ══ Sección tela (ficha) ══ */
.uni-fabric { background: var(--uni-panel); border-top:1px solid var(--uni-border); border-bottom:1px solid var(--uni-border); }
.uni-fabric-grid { display:grid; gap: var(--space-8); align-items:center; }
@media (min-width:860px){ .uni-fabric-grid{ grid-template-columns:1fr 1fr; } }
.uni-fabric-visual { position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:16/10; background:#d9dade; cursor: zoom-in; border:1px solid var(--uni-border); width:100%; padding:0; }
.uni-fabric-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.uni-fabric-zoombtn { position:absolute; top:10px; right:10px; background: rgba(0,0,0,.55); color:#fff; border:none; border-radius:999px; width:40px; height:40px; cursor:pointer; font-size:1.1rem; }
.uni-fabric-card { background: var(--uni-panel-2); border:1px solid var(--uni-red); border-radius: var(--radius-md); padding: var(--space-5); display:flex; gap: var(--space-4); align-items:center; }
.uni-fabric-card .sw { width:72px; height:72px; border-radius: var(--radius-sm); overflow:hidden; flex:0 0 auto; background:#d9dade; }
.uni-fabric-card .sw img { width:100%; height:100%; object-fit:cover; }
.uni-fabric-meta .k { color: var(--uni-red); font-size: var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.uni-fabric-meta .n { font-weight:800; font-size: var(--fs-lg); }
.uni-fabric-meta .c { color: var(--uni-muted); font-size: var(--fs-sm); }
.uni-fabric-disclaimer { font-size: var(--fs-xs); color: var(--uni-muted); margin-top: var(--space-4); }

/* ══ Productos relacionados ══ */
.uni-related { display:grid; grid-template-columns:1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width:600px){ .uni-related{ grid-template-columns:repeat(3,1fr); } }
.uni-rel-card { background: var(--uni-panel); border:1px solid var(--uni-border); border-radius: var(--radius-md); overflow:hidden; display:block; transition: transform .2s ease, border-color .2s ease; }
.uni-rel-card:hover, .uni-rel-card:focus-visible { transform: translateY(-3px); border-color: var(--uni-red); }
.uni-rel-media { aspect-ratio:3/4; background: var(--uni-photo-bg); }
.uni-rel-media img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.uni-rel-body { padding: var(--space-4); }
.uni-rel-body .n { font-weight:700; }
.uni-rel-body .s { color: var(--uni-muted); font-size: var(--fs-sm); }

/* ══ Modal zoom (tela + galería de producto) ══ */
.uni-modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding: var(--space-4); background: rgba(0,0,0,.88); }
.uni-modal.is-open { display:flex; }
.uni-modal-img { max-width: min(960px,96vw); max-height:88vh; border-radius: var(--radius-md); }
.uni-modal-close { position:absolute; top:16px; right:16px; width:48px; height:48px; border-radius:999px; border:none; background: rgba(255,255,255,.15); color:#fff; font-size:1.4rem; cursor:pointer; }
.uni-modal-close:focus-visible { outline:3px solid #fff; }

/* ══ Footer ══ */
.uni-footer { border-top:1px solid var(--uni-border); background: var(--uni-bg); }
.uni-footer-inner { display:grid; gap: var(--space-6); padding-block: var(--space-12); align-items:center; }
@media (min-width:760px){ .uni-footer-inner{ grid-template-columns:auto 1fr auto; } }
.uni-footer .uni-logo img { height:44px; max-width:180px; }
.uni-footer-tag { color: var(--uni-muted); font-size: var(--fs-sm); }
.uni-footer-meta { color: var(--uni-muted); font-size: var(--fs-xs); text-align:right; }

/* ══ Barra CTA móvil (ficha) ══ */
.uni-mobilebar { position: fixed; left:0; right:0; bottom:0; z-index:55; display:none; gap:.6rem; padding:.6rem var(--uni-gutter); padding-bottom: calc(.6rem + env(safe-area-inset-bottom,0px)); background: rgba(11,11,13,.96); border-top:1px solid var(--uni-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.uni-mobilebar .uni-btn { flex:1; min-height:48px; }
@media (max-width:979px){ .uni-page.has-mobilebar .uni-mobilebar { display:flex; } .uni-page.has-mobilebar main { padding-bottom: 84px; } }
/* Se oculta mientras un campo tiene foco (evita tapar teclado) */
.uni-mobilebar.is-hidden { transform: translateY(120%); transition: transform .2s ease; }

/* ══ Movimiento ══ */
.uni-reveal { opacity:1; }
@media (prefers-reduced-motion: no-preference) {
  .uni-reveal { opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .uni-reveal.is-in { opacity:1; transform:none; }
  .uni-stagger > * { opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .uni-stagger.is-in > * { opacity:1; transform:none; }
  .uni-stagger.is-in > *:nth-child(1){ transition-delay:.00s; }
  .uni-stagger.is-in > *:nth-child(2){ transition-delay:.08s; }
  .uni-stagger.is-in > *:nth-child(3){ transition-delay:.16s; }
  .uni-stagger.is-in > *:nth-child(4){ transition-delay:.24s; }
  .uni-stagger.is-in > *:nth-child(5){ transition-delay:.32s; }
  .uni-stagger.is-in > *:nth-child(6){ transition-delay:.40s; }
}
@media (prefers-reduced-motion: reduce) {
  .uni-hero-media img { transform:none !important; }
  .uni-grid-bg { transform:none !important; }
}

/* FAB */
.uni-fab { position:fixed; z-index:60; right: calc(16px + env(safe-area-inset-right,0px)); bottom: calc(16px + env(safe-area-inset-bottom,0px)); width:56px; height:56px; border-radius:999px; background: var(--color-whatsapp); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(37,211,102,.5); }
.uni-fab.is-hidden { opacity:0; visibility:hidden; transform:scale(.6); pointer-events:none; }
@media (max-width:979px){ .uni-page.has-mobilebar .uni-fab { display:none; } }

/* ═══════════════════════════════════════════════════════════════════════
   HERO DE CAMPAÑA a ancho completo (sustituye la composición en tarjeta).
   Fotografía de extremo a extremo; texto HTML integrado con degradado local.
   ═══════════════════════════════════════════════════════════════════════ */
.uni-breadcrumb--tight { padding-block: .4rem; }
.uni-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--uni-border); }
/* Escenario full-bleed: rompe el contenedor y ocupa el 100% del viewport */
.uni-hero-stage {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;              /* recorte controlado para el parallax */
  background: #0e0e11;
  aspect-ratio: 16 / 9;          /* escritorio: panorámico, cabezas completas */
}
.uni-hero-stage .uni-hero-imgwrap { position: absolute; inset: -6% 0; } /* margen para el parallax */
.uni-hero-stage img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  display: block; will-change: transform;
}
.uni-hero-stage--err { background:#1b1b20; }
.uni-hero-stage--err img { display:none; }
/* Degradado localizado: oscurece solo la franja inferior-izquierda donde va el texto */
.uni-hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,8,10,.82) 0%, rgba(8,8,10,.45) 26%, rgba(8,8,10,0) 52%),
    linear-gradient(to right, rgba(8,8,10,.55) 0%, rgba(8,8,10,0) 42%);
}
.uni-hero-text { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.uni-hero-text .uni-container { width: 100%; padding-bottom: clamp(1.25rem, 4vw, 3rem); }
.uni-hero-text .uni-h1 { color:#fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); max-width: 18ch; font-size: clamp(1.9rem, 1rem + 3.4vw, 3.4rem); }
.uni-hero-sup { color:#fff; font-weight:700; font-size: clamp(1rem,.95rem + .5vw,1.4rem); margin-top:.5rem; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.uni-hero-scroll { display:inline-flex; align-items:center; gap:.4rem; margin-top: var(--space-5); color:#fff; font-weight:700; font-size: var(--fs-sm); letter-spacing:.02em; border-bottom:2px solid var(--uni-red); padding-bottom:.2rem; }
.uni-hero-scroll span { transition: transform .2s ease; }
.uni-hero-scroll:hover span { transform: translateY(3px); }
.uni-hero-scroll:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.uni-hero-legend { position:absolute; right:10px; bottom:8px; z-index:2; background: rgba(0,0,0,.55); color:#e9e9ee; font-size: 11px; padding:.2rem .5rem; border-radius: var(--radius-sm); }

/* Móvil: proporción más horizontal para no cortar a los modelos; texto compacto debajo
   integrado al hero cuando el titular no cabe con holgura sobre la imagen. */
@media (max-width: 760px) {
  /* Proporción del hero: ver bloque "HERO Pulso" más abajo (apaisada, no corta a la modelo). */
  .uni-hero-text .uni-h1 { font-size: clamp(1.6rem, 1.1rem + 3.5vw, 2.2rem); max-width: 16ch; }
}

/* El catálogo sigue de inmediato, sin vacío excesivo */
.uni-section--catalog { padding-top: clamp(1.75rem, 4vw, 2.75rem); }

/* Movimiento reducido: sin transform en la imagen del hero */
@media (prefers-reduced-motion: reduce) {
  .uni-hero-stage img { transform: none !important; }
}

/* FAB oculto por defecto en la categoría hasta pasar el hero (lo controla el JS) */
.uni-page .uni-fab.is-hidden { opacity:0; visibility:hidden; transform: scale(.6); pointer-events:none; }

/* ═══════════════════════════════════════════════════════════════════════
   MOVIMIENTO reforzado — hero multicapa, intro del titular, catálogo
   ═══════════════════════════════════════════════════════════════════════ */
/* Más margen de recorte para recorrido 110px + escala 1.08 sin descubrir bordes */
.uni-hero-stage .uni-hero-imgwrap { position: absolute; inset: -10% 0; will-change: transform; }
.uni-hero-stage img { will-change: transform; transform-origin: center 30%; }
/* Capa decorativa del hero (acento rojo difuso) con velocidad propia */
.uni-hero-deco {
  position: absolute; z-index: 1; pointer-events: none; will-change: transform;
  width: 60vw; max-width: 520px; height: 60vw; max-height: 520px; right: -8%; top: -14%;
  background: radial-gradient(circle at 50% 50%, rgba(229,9,36,.28), rgba(229,9,36,0) 68%);
  filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) { .uni-hero-deco { display: none; } }

/* Intro del titular: desliza + aparece; luego estable y legible */
@media (prefers-reduced-motion: no-preference) {
  .uni-hero-text { opacity: 0; }
  .uni-hero-text .uni-h1, .uni-hero-text .uni-hero-sup, .uni-hero-text .uni-hero-scroll {
    opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .uni-hero-text.is-in { opacity: 1; }
  .uni-hero-text.is-in .uni-h1 { transition-delay: .08s; opacity: 1; transform: none; }
  .uni-hero-text.is-in .uni-hero-sup { transition-delay: .20s; opacity: 1; transform: none; }
  .uni-hero-text.is-in .uni-hero-scroll { transition-delay: .32s; opacity: 1; transform: none; }
}

/* Puente hero -> catálogo: degradado de continuidad, sin vacío */
.uni-section--catalog { position: relative; }
.uni-section--catalog::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 120px;
  background: linear-gradient(to bottom, rgba(8,8,10,.6), rgba(11,11,13,0)); pointer-events: none; z-index: 0;
}
.uni-section--catalog > * { position: relative; z-index: 1; }

/* Entradas escalonadas más perceptibles en el catálogo */
@media (prefers-reduced-motion: no-preference) {
  .uni-designs.uni-stagger > * { opacity: 0; transform: translateY(30px) scale(.985); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
  .uni-designs.uni-stagger.is-in > * { opacity: 1; transform: none; }
  .uni-designs.uni-stagger.is-in > *:nth-child(1){ transition-delay:.00s; }
  .uni-designs.uni-stagger.is-in > *:nth-child(2){ transition-delay:.09s; }
  .uni-designs.uni-stagger.is-in > *:nth-child(3){ transition-delay:.18s; }
  .uni-designs.uni-stagger.is-in > *:nth-child(4){ transition-delay:.27s; }
  .uni-designs.uni-stagger.is-in > *:nth-child(5){ transition-delay:.36s; }
  .uni-designs.uni-stagger.is-in > *:nth-child(6){ transition-delay:.45s; }
}
/* Transición foto modelo <-> render más cuidada (cross-fade + leve escala) */
.uni-card-media .uni-card-primary, .uni-card-media .uni-card-secondary { transition: opacity .5s ease, transform .5s ease; }
.uni-card:hover .uni-card-primary, .uni-card.is-flipped .uni-card-primary { opacity: 0; transform: scale(1.03); }
.uni-card:hover .uni-card-secondary, .uni-card.is-flipped .uni-card-secondary { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .uni-card-media .uni-card-primary, .uni-card-media .uni-card-secondary { transition: opacity .2s linear; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO Pulso — encuadre que protege ambos rostros (modelos arriba-centro).
   Las caras están altas en la imagen; mantenemos object-position alto y un
   recorrido de parallax contenido para no recortar cabezas en ningún punto.
   ═══════════════════════════════════════════════════════════════════════ */
/* La foto es apaisada con DOS modelos lado a lado (mujer a la derecha). Para no recortarla,
   el encuadre se mantiene ANCHO en todos los tamaños (nada de proporciones verticales que
   corten a la modelo de la derecha). En móvil se usa casi la proporción nativa (3:2). */
.uni-hero-stage { aspect-ratio: 16 / 9; }
.uni-hero-stage img { object-fit: cover; object-position: center 30%; }
@media (max-width: 899px) { .uni-hero-stage { aspect-ratio: 3 / 2; } .uni-hero-stage img { object-position: center 28%; } }
@media (max-width: 480px) { .uni-hero-stage { aspect-ratio: 3 / 2; } .uni-hero-stage img { object-position: center 26%; } }
/* Espacio de seguridad superior: el degradado del texto no cubre rostros (abajo). */
.uni-hero-overlay {
  background:
    linear-gradient(to top, rgba(8,8,10,.86) 0%, rgba(8,8,10,.5) 24%, rgba(8,8,10,0) 50%),
    linear-gradient(to right, rgba(8,8,10,.5) 0%, rgba(8,8,10,0) 44%);
}

/* Nota de personalización (ficha Pulso) */
.uni-perso-note { background: var(--uni-panel-2); border:1px solid var(--uni-border); border-left:3px solid var(--uni-red); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding: var(--space-4); margin-top: var(--space-4); }
.uni-perso-note p { color: var(--uni-muted); font-size: var(--fs-sm); line-height:1.55; margin:0; }
.uni-perso-note strong { color: var(--uni-text); }

/* ═══════════════════════════════════════════════════════════════════════
   Galería: vista apaisada (acabado interior) sin recorte ni franjas vacías.
   El marco vertical (3/4) pasa a 4/3 y la imagen llena con cover.
   ═══════════════════════════════════════════════════════════════════════ */
.uni-gallery-main.is-wide { aspect-ratio: 4 / 3; }
.uni-gallery-main.is-wide img { object-fit: cover; object-position: center; }
/* Si la imagen apaisada se marca contain, respétalo; por defecto cover llena el marco 4/3. */
.uni-gallery-main.is-wide img.is-contain { object-fit: contain; }

/* ── Robustez del enlace de tarjeta (navegación al modelo) ──
   El enlace que cubre la tarjeta queda por encima de la media para que el tap
   siempre navegue; el botón "ver render/espalda" queda por encima solo en su zona. */
.uni-card { position: relative; }
.uni-card-stretch { position:absolute; inset:0; z-index:4; } /* cubre toda la tarjeta */
.uni-flip-btn { z-index:5; }                                  /* el botón sí recibe su tap */
.uni-card-body { position: relative; z-index:1; }
.uni-card-link { position: relative; z-index:1; pointer-events:none; } /* el texto no roba el tap al enlace */