/* ============================================================================
   COMPONENTES.CSS - Piezas reutilizables del sitio
   ----------------------------------------------------------------------------
   Header, footer, botones, tarjetas de producto, hero, videos, banner de
   cookies y formularios. Todo consume tokens.css. Mobile-first.
   ============================================================================ */

/* ============================================================
   BOTONES  (mismo lenguaje que el brand-book)
   ============================================================ */
.boton {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-base);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-align: center;
  padding: 0.95em 1.9em;
  border-radius: var(--radio-boton);
  border: var(--grosor-borde) solid transparent;
  cursor: pointer;
  transition: background var(--transicion-rapida), color var(--transicion-rapida),
              box-shadow var(--transicion-rapida), transform var(--transicion-rapida);
}
.boton--primario { background: var(--color-accion); color: var(--color-accion-texto); }
.boton--primario:hover { background: var(--color-accion-hover); box-shadow: var(--sombra-accion); }
.boton--primario:active { transform: translateY(1px); }

.boton--secundario {
  background: transparent;
  color: var(--color-tinta);
  border-color: var(--color-tinta);
}
.boton--secundario:hover { background: var(--color-tinta); color: var(--color-fondo); }

[data-brand="rcaps"] .boton--secundario {
  color: var(--color-claro);
  border-color: var(--color-claro);
}
[data-brand="rcaps"] .boton--secundario:hover {
  background: var(--color-primario);
  color: var(--color-fondo);
  border-color: var(--color-primario);
}

/* Botón negro sólido: para acciones frecuentes (tarjetas de producto) donde
   el naranja saturaba. Fuerte y tappable, pero neutro. */
.boton--oscuro { background: var(--color-tinta); color: #fff; }
.boton--oscuro:hover { background: var(--color-tinta-suave); box-shadow: var(--sombra-md); }
.boton--oscuro:active { transform: translateY(1px); }
/* En R Caps (fondo oscuro) el negro no contrasta: usa su acento champán. */
[data-brand="rcaps"] .boton--oscuro { background: var(--color-primario); color: var(--color-accion-texto); }
[data-brand="rcaps"] .boton--oscuro:hover { background: var(--color-primario-fuerte); }

.boton--grande { font-size: var(--fluido-md); padding: 1.1em 2.2em; }

/* Widget flotante de WhatsApp (esquina inferior derecha, todas las páginas):
   burbuja de invitación + botón. Los dos viven en un solo contenedor fijo
   para que se muevan juntos y no queden "perdidos" en la esquina. */
.wa-widget {
  position: fixed;
  right: var(--espacio-md);
  bottom: var(--espacio-md);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--espacio-xs);
  /* La zona vacía del contenedor (incluida la burbuja oculta, que sigue
     ocupando espacio) NO debe tapar los clics de lo que hay debajo (p. ej.
     el enlace del pie). Solo el botón y la burbuja visible reciben clics. */
  pointer-events: none;
}
.wa-flotante { pointer-events: auto; }
@media (min-width: 40rem) {
  .wa-widget { right: var(--espacio-lg); bottom: var(--espacio-lg); }
}

/* Burbuja de invitación: aparece sola a los pocos segundos (ver app.js),
   es un mensaje real de bienvenida (no un falso "no leído"). */
.wa-burbuja {
  max-width: 15.5rem;
  background: var(--color-superficie);
  color: var(--color-tinta);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-lg);
  padding: var(--espacio-sm) var(--espacio-lg) var(--espacio-sm) var(--espacio-sm);
  font-size: var(--texto-sm);
  line-height: 1.4;
  position: relative;
  opacity: 0;
  transform: translateY(0.5rem) scale(0.96);
  pointer-events: none;
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida);
}
.wa-burbuja--visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wa-burbuja p { margin: 0; }
.wa-burbuja__cerrar {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  width: 1.4rem;
  height: 1.4rem;
  border: none;
  background: transparent;
  color: var(--color-gris-500);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.wa-burbuja__cerrar:hover { color: var(--color-tinta); }

.wa-flotante {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2xs);
  height: 3.75rem;
  padding-inline: 0.85rem;
  border-radius: var(--radio-pill);
  text-decoration: none; /* es un enlace: quitamos el subrayado del navegador */
  background: #25D366; /* verde oficial de WhatsApp (color de plataforma, no de marca) */
  /* Sombra con "profundidad": un halo verde suave + una sombra oscura corta.
     Da la sensación de que el botón flota, se ve más premium sin ser invasivo. */
  box-shadow: 0 0.5rem 1.25rem rgba(37, 211, 102, 0.45),
              0 0.25rem 0.5rem rgba(0, 0, 0, 0.20);
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida);
}
.wa-flotante:hover { transform: scale(1.05); }

/* Badge de notificación "1": un guiño visual tipo "tienes un mensaje" que
   atrae el ojo hacia el botón. Se dibuja solo con CSS (no hace falta tocar el
   HTML de cada página). El borde del color de la superficie lo recorta limpio. */
.wa-flotante::after {
  content: "1";
  position: absolute;
  top: -0.35rem;
  right: -0.2rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.3rem;
  border-radius: var(--radio-pill);
  background: var(--color-error); /* rojo funcional de la marca */
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35rem;
  text-align: center;
  border: 2px solid var(--color-superficie);
  box-sizing: border-box;
}
.wa-flotante__icono {
  position: relative;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.wa-flotante svg { width: 100%; height: 100%; fill: #fff; }
/* Anillo de pulso: da vida al botón sin fingir un mensaje falso */
.wa-flotante__pulso {
  position: absolute;
  inset: -0.45rem;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  animation: wa-pulso 2.4s ease-out infinite;
}
@keyframes wa-pulso {
  0%   { transform: scale(0.65); opacity: 0.5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.wa-flotante__texto {
  display: none;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
@media (min-width: 40rem) {
  .wa-flotante__texto { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-flotante__pulso { animation: none; opacity: 0.3; }
}

/* ============================================================
   BARRA DE ANUNCIOS (franja superior, igual en todas las páginas)
   3 frases que se turnan en el mismo espacio, tipo "ruleta".
   ============================================================ */
.barra-anuncio {
  position: sticky;   /* queda fija arriba aunque se haga scroll */
  top: 0;
  z-index: 101;       /* por encima del header, que se pega justo debajo */
  background: var(--color-tinta);
  overflow: hidden;
}
.barra-anuncio__pista {
  position: relative;
  height: 2.75em;
}
.barra-anuncio__item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--espacio-md);
  text-align: center;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  animation: barra-anuncio-ciclo 9s infinite;
}
.barra-anuncio__item:nth-child(1) { animation-delay: 0s; }
.barra-anuncio__item:nth-child(2) { animation-delay: 3s; }
.barra-anuncio__item:nth-child(3) { animation-delay: 6s; }
@keyframes barra-anuncio-ciclo {
  0%, 100% { opacity: 0; transform: translateY(0.8em); }
  4%       { opacity: 0; transform: translateY(0.8em); }
  9%, 29%  { opacity: 1; transform: translateY(0); }
  33%      { opacity: 0; transform: translateY(-0.8em); }
}
/* Escritorio: más aire y más presencia (la franja es angosta y se pierde a este ancho) */
@media (min-width: 48rem) {
  .barra-anuncio__pista { height: 3.25em; }
  .barra-anuncio__item {
    font-size: 0.95rem;
    letter-spacing: 0.3em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .barra-anuncio__item { animation: none; opacity: 0; transform: none; }
  .barra-anuncio__item:nth-child(1) { opacity: 1; }
}

/* ============================================================
   HEADER / NAVEGACIÓN
   ============================================================ */
.encabezado {
  position: sticky;
  top: 2.75em;   /* se pega justo debajo de la barra de anuncios (alto en móvil) */
  z-index: 100;
  /* Efecto "liquid glass": el fondo es bastante translúcido (68%) para que,
     al hacer scroll, se vea el contenido pasar difuminado por debajo. El
     blur lo esmerila y el saturate hace que los colores que cruzan vibren.
     El brillo interior de arriba es el "canto" del vidrio y la sombra suave
     lo separa del contenido para que parezca que flota. */
  background: color-mix(in srgb, var(--color-superficie) 68%, transparent);
  backdrop-filter: blur(16px) saturate(165%);
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-gris-150) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              0 8px 24px rgba(0, 0, 0, 0.07);
}
@media (min-width: 48rem) {
  /* En escritorio la barra es más alta, así que el header baja lo mismo */
  .encabezado { top: 3.25em; }
}
.encabezado__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-sm);
  padding-block: var(--espacio-2xs);
  transition: padding-block var(--transicion-media);
}
.encabezado__logo { display: flex; align-items: center; gap: var(--espacio-2xs); text-decoration: none; }
/* Logo del encabezado: más grande para que tenga presencia. */
.encabezado__logo img {
  height: 3.25rem;
  width: auto;
  background: transparent;
  transition: height var(--transicion-media);
}
@media (min-width: 52rem) {
  .encabezado__logo img { height: 3.75rem; }
}
/* Razón social junto al logo (lockup corporativo). Texto pequeño en dos líneas.
   Se oculta en pantallas estrechas para no apretar el menú/hamburguesa. */
.encabezado__razon {
  font-family: var(--fuente-titulo);
  font-size: clamp(0.42rem, 2.3vw, 0.58rem);   /* en pantallas angostas se encoge para caber en una línea */
  line-height: 1.2;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-gris-700);
  white-space: nowrap;      /* siempre en una sola línea */
}
/* Banda intermedia (tablet / laptop pequeño): el menú horizontal deja poco
   espacio, así que se oculta para no encimarse con los enlaces. */
@media (min-width: 52rem) and (max-width: 79.99rem) { .encabezado__razon { display: none; } }
/* El logo circular de R Caps es un JPG con fondo casi blanco; sobre el header
   de vidrio (translúcido) ese fondo se vería como un recuadro opaco. Con
   multiply el fondo claro se funde con el vidrio y solo queda el sello, como
   si fuera transparente. */
.encabezado__logo img[src*="rcaps"] {
  mix-blend-mode: multiply;
}

/* Estado compacto: se activa desde app.js al hacer scroll. El logo se
   encoge y el header pierde algo de padding para dejarle más altura al
   contenido. La transición de arriba hace que el cambio sea suave. */
.encabezado--compacto .encabezado__int { padding-block: 0.25rem; }
.encabezado--compacto .encabezado__logo img { height: 2.5rem; }
@media (min-width: 52rem) {
  .encabezado--compacto .encabezado__logo img { height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .encabezado__int, .encabezado__logo img { transition: none; }
}

/* Botón hamburguesa (visible solo en móvil) */
.menu-boton {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  margin-left: auto;        /* empuja la hamburguesa al extremo derecho */
  background: transparent;
  border: 0;                /* sin cuadro alrededor */
  cursor: pointer;
}
.menu-boton span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-tinta);
  border-radius: 2px;
  transition: transform 300ms ease, opacity 200ms ease;
  transform-origin: center;
}
/* Al abrir el menú (aria-expanded=true) las 3 líneas se vuelven una X */
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Lista de enlaces */
.menu-lista {
  display: flex;
  gap: var(--espacio-2xs);
  align-items: center;
}
.menu-lista a {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-tinta);
  padding: 0.5em 0.8em;
  border-radius: var(--radio-boton);
  transition: background var(--transicion-rapida), color var(--transicion-rapida);
}
/* Hover: fondo neutro claro (no naranja). */
.menu-lista a:hover { background: var(--color-gris-150); color: var(--color-tinta); }
/* Página actual: texto negro con un subrayado naranja fino (acento medido,
   no un bloque naranja). El inset evita que cambie la altura. */
.menu-lista a[aria-current="page"] {
  color: var(--color-tinta);
  box-shadow: inset 0 -3px 0 var(--color-accion);
}

/* R Caps es la marca premium (marca hija). En el menú se distingue con su
   tipografía serif (Marcellus) y un punto champán delante, para que se sienta
   "otra marca" sin romper la alineación ni el ancho de toque. El
   data-brand="rcaps" del enlace activa esos tokens (Marcellus, champán) sin
   hardcodear ningún color. En su propia página, el subrayado activo también
   sale champán en vez de naranja (usa --color-accion de la marca). */
.menu-lista a[data-brand="rcaps"] {
  font-family: var(--fuente-marca);   /* Marcellus */
  letter-spacing: 0.1em;
}
.menu-lista a[data-brand="rcaps"]::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--color-primario);  /* champán */
  vertical-align: 0.05em;
}
.menu-lista a[data-brand="rcaps"]:hover {
  color: var(--color-primario-fuerte);  /* champán profundo al pasar el mouse */
}

/* En móvil: el menú es un PANEL deslizante desde la derecha, con un fondo
   oscuro que atenúa/oculta el resto. Va por DEBAJO del header (z-index) para
   que la hamburguesa (que se vuelve X) siga por encima y sirva para cerrar. */
@media (max-width: 52rem) {
  /* Sin gap: el <nav> vacío (su menú se movió al body) no debe empujar el botón */
  .encabezado__int { gap: 0; }
  .menu-lista {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(78vw, 19rem);
    flex-direction: column;
    align-items: stretch;
    gap: var(--espacio-3xs);
    background: var(--color-superficie);
    box-shadow: -10px 0 34px rgba(0, 0, 0, 0.20);
    padding: 7.5rem var(--espacio-md) var(--espacio-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 95;                    /* debajo del header (100) y anuncios (101) */
    transform: translateX(100%);    /* oculto fuera de pantalla, a la derecha */
    visibility: hidden;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 320ms;
  }
  .menu-lista--abierto {
    transform: translateX(0);
    visibility: visible;
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }
  .menu-lista a { padding: var(--espacio-sm); border-radius: var(--radio-sm); font-size: var(--texto-md); }
  /* Página actual: barra lateral naranja (en vez del subrayado del escritorio) */
  .menu-lista a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--color-accion); }

  /* Fondo oscuro: oculta/atenúa el resto de la web mientras el menú está abierto */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 94;
    background: rgba(12, 12, 12, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 320ms ease, visibility 0s linear 320ms;
  }
  .menu-backdrop--visible { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0s; }
}
/* Bloquea el scroll del fondo mientras el menú está abierto */
body.menu-abierto { overflow: hidden; }
/* En escritorio: el botón hamburguesa desaparece */
@media (min-width: 52rem) {
  .menu-boton { display: none; }
  .encabezado__int { position: relative; }
}

/* ============================================================
   HERO (portada de inicio y cabeceras de página)
   ============================================================ */
.hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(40rem 24rem at -10% 110%, rgba(0, 175, 240, 0.16), transparent 55%),
    linear-gradient(160deg, #191919 0%, #232323 55%, #1c1c1c 100%);
  overflow: hidden;
  padding-block: var(--espacio-2xl);
}
@media (min-width: 48rem) {
  .hero { padding-block: var(--espacio-3xl); }
}

/* Carrusel de fondo del hero de inicio: 3 fotos en crossfade lento (21s),
   sutil, sin recargar. Va DEBAJO del texto (z-index) con un velo azul-oscuro
   encima para mantener el titular legible. Si las fotos no existen, se ve el
   degradado del hero: nunca se rompe. */
.hero__slideshow { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-carrusel 12s infinite;
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 4s; }
.hero__slide:nth-child(3) { animation-delay: 8s; }
@keyframes hero-carrusel {
  0%   { opacity: 0; }
  7%   { opacity: 1; }   /* aparece suave */
  33%  { opacity: 1; }   /* se mantiene */
  40%  { opacity: 0; }   /* se funde con la siguiente (crossfade) */
  100% { opacity: 0; }
}
/* Velo azul-oscuro: da el tinte azul y asegura la lectura del titular */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(150deg, rgba(0, 55, 105, 0.66) 0%, rgba(16, 19, 27, 0.84) 100%);
}
/* El contenido (texto y botones) por encima del carrusel y el velo */
.hero .contenedor { position: relative; z-index: 2; }
/* Hero centrado (solo en inicio; el de R Caps no lleva esta clase) */
.hero--centrado .contenedor { text-align: center; }
.hero--centrado .hero__bajada { margin-inline: auto; }
.hero--centrado .hero__acciones { justify-content: center; }
/* Respeta a quien reduce animaciones: sin carrusel, solo la primera foto */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; }
  .hero__slide:nth-child(1) { opacity: 1; }
}

.hero__meta {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: var(--texto-sm);
  color: var(--color-primario);
  margin-bottom: var(--espacio-sm);
}

.hero h1 {
  /* Móvil/tablet: 2 líneas equilibradas (una sola línea a este ancho quedaría
     ilegible de tan pequeña). text-wrap: balance reparte parejo las líneas. */
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.05;
  max-width: none;
  text-wrap: balance;
}
/* Escritorio: UNA sola línea horizontal que llena el ancho del contenido.
   El tamaño escala con la pantalla (min) y se topa antes de desbordar. */
@media (min-width: 62rem) {
  .hero h1 {
    white-space: nowrap;
    font-size: min(5.9vw, 4.3rem);
    text-wrap: nowrap;
  }
}
.hero .acento { color: var(--color-primario); }
.hero__bajada {
  margin-top: var(--espacio-md);
  max-width: 62ch;          /* más ancho para acompañar el titular grande (antes 52ch) */
  color: #D9D6D2;
  font-size: var(--fluido-md);
  line-height: 1.7;         /* más aire entre líneas */
}
.hero__acciones {
  margin-top: var(--espacio-lg);
  display: flex;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
}
/* Los botones del hero no parten su texto en dos líneas */
.hero__acciones .boton { white-space: nowrap; }
@media (max-width: 30rem) {
  /* En móvil van a ancho completo (más aire) y con el interletrado un poco
     menor, para que "Cotizar por WhatsApp" quepa en una sola línea sin desbordar */
  .hero__acciones .boton { flex: 1 1 100%; letter-spacing: 0.08em; }
  .hero__acciones .boton--grande { padding-inline: 1.4em; }
}
/* En el hero oscuro, el botón secundario va en claro */
.hero .boton--secundario { color: #fff; border-color: #fff; }
.hero .boton--secundario:hover { background: #fff; color: #1c1c1c; }

/* Invitación a R Caps en el inicio: banda más compacta (menos "recuadro negro")
   y texto con más presencia, para que pese más el mensaje que el fondo. */
.seccion--rcaps { padding-block: var(--espacio-xl); }
.seccion--rcaps .titulo-seccion { font-size: var(--fluido-3xl); margin-bottom: var(--espacio-sm); }
.seccion--rcaps .plomo { font-size: var(--fluido-lg); }

/* Cabecera de página interior (más compacta que el hero de inicio) */
.cabecera-pagina {
  color: #fff;
  background: linear-gradient(160deg, #191919 0%, #262626 100%);
  padding-block: var(--espacio-xl);
}
.cabecera-pagina h1 { font-size: var(--fluido-2xl); }
.cabecera-pagina p { color: #C9C6C3; margin-top: var(--espacio-2xs); }

/* Hero del diseñador de catálogo: más aire y jerarquía (evita el amontonado) */
.cabecera-pagina--diseno { padding-block: var(--espacio-2xl); }
.cabecera-pagina--diseno .contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-md);
  text-align: center;
}
.cabecera-pagina--diseno h1 { margin: 0; }
.cabecera-pagina--diseno .cabecera-pagina__intro {
  margin: 0;
  max-width: 54ch;
  font-size: var(--fluido-md);
  line-height: 1.55;
}

/* ============================================================
   TARJETA DE PRODUCTO (patrón reutilizable - la dibuja app.js)
   ============================================================ */
.producto {
  background: var(--color-superficie);
  border: 1px solid var(--color-gris-150);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transicion-media), box-shadow var(--transicion-media);
}
.producto:hover { transform: translateY(-4px); box-shadow: var(--sombra-lg); }

.producto__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-gris-150);
}
/* La foto va absoluta ENCIMA del placeholder: si carga, lo tapa; si falla
   (archivo no subido aún), onerror la quita y el placeholder queda visible. */
.producto__foto .producto__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                              /* arranca oculta; se revela al cargar */
  transition: opacity var(--transicion-media);
}

/* Placeholder cuando aún no hay foto real */
.producto__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(31,31,31,0.05) 10px 20px),
    var(--color-gris-150);
  color: var(--color-gris-500);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Contador "1 / 6" sobre la foto (solo en productos con galería) */
.producto__contador {
  position: absolute;
  bottom: var(--espacio-2xs);
  right: var(--espacio-2xs);
  z-index: 2;
  background: rgba(20, 18, 16, 0.72);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-xs);
  letter-spacing: 0.05em;
  padding: 0.2em 0.6em;
  border-radius: var(--radio-etiqueta);
}

/* Tira de miniaturas de la galería */
.producto__thumbs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-gris-150);
}
.producto__thumb {
  position: relative;
  flex: 1 1 0;         /* tamaño automático (como Beisbolera) */
  max-width: 37px;     /* tope: todas las miniaturas quedan de 37px */
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid var(--color-gris-300);
  border-radius: var(--radio-xs);
  background: var(--color-gris-150);
  cursor: pointer;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  color: var(--color-gris-500);
  transition: border-color var(--transicion-rapida);
}
/* El número queda de fondo; la foto (si existe) lo tapa. */
.producto__thumb span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.producto__thumb img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.producto__thumb--activo { border-color: var(--color-accion); }
.producto__thumb:hover { border-color: var(--color-gris-500); }

.producto__agotado {
  position: absolute;
  top: var(--espacio-2xs);
  left: var(--espacio-2xs);
  background: var(--color-error);
  color: #fff;
  font-size: var(--texto-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3em 0.7em;
  border-radius: var(--radio-etiqueta);
}

.producto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2xs);
  padding: var(--espacio-sm) var(--espacio-md) var(--espacio-md);
  flex: 1;
}
.producto__categoria {
  font-size: var(--texto-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gris-500);
}
.producto__nombre { font-size: var(--texto-md); }
.producto__desc { font-size: var(--texto-sm); color: var(--color-gris-700); flex: 1; }
.producto__cta { margin-top: var(--espacio-2xs); font-size: var(--texto-sm); }

/* Filtros de categoría del catálogo */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2xs);
  margin-bottom: var(--espacio-lg);
}
.filtro {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-gris-150);         /* relleno suave: se ve tocable */
  color: var(--color-tinta);
  border: 1px solid transparent;
  border-radius: var(--radio-pill);          /* forma de píldora */
  padding: 0.55em 1.15em;
  cursor: pointer;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
}
/* Hover solo en los inactivos: un tono de gris más */
.filtro:not(.filtro--activo):hover { background: var(--color-gris-300); }
/* Activo: naranja de marca con texto OSCURO (mejor contraste que el blanco) */
.filtro--activo { background: var(--color-accion); color: var(--color-tinta); border-color: var(--color-accion); }

.catalogo__vacio { color: var(--color-gris-500); }

/* ============================================================
   DISEÑADOR DEL CATÁLOGO - "Tu gorra ideal, con asesoría"
   Pasos corte -> visera -> cierre. Se dibuja desde app.js.
   ============================================================ */
.paso__cab { display: flex; align-items: center; gap: var(--espacio-sm); margin-bottom: var(--espacio-2xs); }
.paso__num {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accion);
  color: var(--color-tinta);           /* oscuro sobre naranja = legible */
  font-family: var(--fuente-titulo);
  font-size: var(--texto-md);
}
.paso__titulo { font-family: var(--fuente-titulo); font-size: var(--fluido-2xl); font-weight: var(--peso-titulo); margin: 0; }
.paso__ayuda { color: var(--color-gris-700); margin-bottom: var(--espacio-lg); max-width: 60ch; }

/* Pasos "¿Cómo pedir?" (página de contacto): número + título + texto */
.paso-info h3 { margin-top: var(--espacio-xs); font-size: var(--fluido-lg); }
.paso-info p { margin-top: var(--espacio-2xs); color: var(--color-gris-700); max-width: none; }

/* Rejilla de opciones */
.selector { display: grid; gap: var(--espacio-md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .selector { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 60rem) { .selector { grid-template-columns: repeat(4, 1fr); } }
.selector--compacto { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .selector--compacto { grid-template-columns: repeat(3, 1fr); } }

/* Tarjeta-opción (es un <button>) */
.op {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  font: inherit;
  cursor: pointer;
  background: var(--color-superficie);
  border: 1px solid var(--color-gris-150);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  position: relative;
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), border-color var(--transicion-rapida);
}
.op:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); border-color: var(--color-gris-300); }
.op.es-elegido {
  border: 2px solid var(--color-accion);
  transform: translateY(-3px);
  /* Anillo/halo naranja + sombra: la opción elegida "salta" a la vista */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accion) 22%, transparent), var(--sombra-lg);
}
/* En los cortes, la barra del nombre se pinta de naranja al elegir */
.op.es-elegido .op__nombre { background: var(--color-accion); color: var(--color-tinta); }
.op.es-elegido::after {
  content: "\2713";                    /* ✓ */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--color-accion);
  color: var(--color-tinta);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.op__foto { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--color-gris-150); overflow: hidden; }
/* Nota "imágenes de referencia" */
/* Nota de referencia: chip pequeño y de esquinas curvas (sobre fondo claro) */
.nota-ref {
  display: inline-block;
  margin: 0 0 var(--espacio-md);
  max-width: 58ch;
  font-size: var(--texto-xs);
  line-height: 1.45;
  color: var(--color-gris-500);
  background: var(--color-superficie);
  border: 1px solid var(--color-gris-150);
  border-radius: var(--radio-lg);
  padding: var(--espacio-2xs) var(--espacio-sm);
}
.op__img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--transicion-media);
}
.op__nombre {
  display: block;
  padding: 0.6rem 0.8rem;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  color: var(--color-tinta);
}
/* Viseras y cierres: fotos verticales en formato retrato (3:4). Llenan la caja
   (cover) para que se vean grandes; como las fotos ya son casi 3:4, el recorte
   es mínimo (antes iban 'contain' y quedaban pequeñas flotando). */
.selector--compacto .op__foto { aspect-ratio: 3 / 4; }
.selector--compacto .op__img { object-fit: cover; }

/* Detalle del corte elegido: foto grande + descripción + miniaturas */
.detalle { margin-top: var(--espacio-lg); display: grid; gap: var(--espacio-lg); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .detalle { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.detalle__foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--color-gris-150); }
.detalle__nombre { font-family: var(--fuente-titulo); font-size: var(--fluido-lg); }
.detalle__desc { color: var(--color-gris-700); margin-top: 0.3rem; }
.detalle__thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--espacio-md); }
.detalle__thumb {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--color-gris-300);
  background: var(--color-superficie);
  color: var(--color-tinta);
  font-family: var(--fuente-titulo);
  cursor: pointer;
}
.detalle__thumb.es-activo { background: var(--color-accion); border-color: var(--color-accion); color: var(--color-tinta); }

/* Caja de resumen + CTA */
.resumen-caja {
  display: flex; flex-wrap: wrap; gap: var(--espacio-md);
  align-items: center; justify-content: space-between;
  border: 1px solid var(--color-gris-150);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-lg);
  background: var(--color-superficie);
}
.resumen-caja__label { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--texto-xs); color: var(--color-gris-500); }
.resumen-caja__texto { font-size: var(--texto-md); margin-top: 0.2rem; }

/* ============================================================
   TÉCNICAS DE MARCACIÓN (catálogo): servicios clave, en grande.
   Cuadrícula de tarjetas con ícono, nombre y descripción.
   ============================================================ */
.tecnicas {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: 1fr;
}
/* 2 columnas: tarjetas grandes para que se lea el texto interno de las fotos */
@media (min-width: 40rem) { .tecnicas { grid-template-columns: repeat(2, 1fr); } }
.tecnica {
  background: var(--color-superficie);
  border: 1px solid var(--color-gris-150);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;                     /* recorta la foto a las esquinas */
  transition: transform var(--transicion-rapida), box-shadow var(--transicion-rapida), border-color var(--transicion-rapida);
}
.tecnica:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  border-color: var(--color-gris-300);
}
/* Foto vertical (3:4), igual que "Opciones de personalización". Patrón a
   prueba de errores: la imagen arranca invisible y se revela al cargar; si el
   archivo no existe, queda el placeholder con el ícono de la técnica. */
.tecnica__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-gris-150);
}
/* En tablet/escritorio, imágenes de técnica un poco más grandes (móvil se deja 3:4) */
@media (min-width: 40rem) { .tecnica__foto { aspect-ratio: 2 / 3; } }
.tecnica__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* imagen completa, sin recortar el texto interno */
  opacity: 0;
  transition: opacity var(--transicion-media);
}
/* Video de técnica (vertical, en bucle, sin controles). Mismo patrón a prueba
   de errores que la imagen: arranca invisible y se revela con onloadedmetadata;
   si el archivo no existe, queda el placeholder. */
.tecnica__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* el video llena el marco vertical */
  opacity: 0;
  transition: opacity var(--transicion-media);
}
.tecnica__foto.con-video .tecnica__video { opacity: 1; }
.tecnica__foto.con-video .producto__placeholder { display: none; }
.tecnica__ph-ico { width: 2rem; height: 2rem; margin-bottom: 0.4rem; opacity: 0.65; }
.tecnica__cuerpo { padding: var(--espacio-md) var(--espacio-lg) var(--espacio-lg); }
.tecnica__cuerpo h3 { font-size: var(--texto-lg); margin-bottom: var(--espacio-2xs); }
.tecnica__cuerpo p { font-size: var(--texto-sm); color: var(--color-gris-700); margin: 0; }
/* Al llegar por el enlace #tecnicas, deja aire para que el header fijo
   (barra de anuncios + menú) no tape el título de la sección. */
#tecnicas { scroll-margin-top: 7rem; }

/* ============================================================
   "POR QUÉ TRABAJAR CON NOSOTROS" - pilares de valor (inicio)
   ============================================================ */
.valores {
  display: grid;
  /* Móvil: 2×2 para que no se vea pobre ni con tanto aire (antes 1 columna) */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-lg) var(--espacio-md);
  margin-top: var(--espacio-lg);
}
@media (min-width: 54rem) {
  .valores { grid-template-columns: repeat(4, 1fr); gap: var(--espacio-lg); margin-top: var(--espacio-xl); }
}
.valor { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espacio-2xs); }
.valor__icono {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accion) 12%, var(--color-superficie));
  color: var(--color-accion);
}
.valor__icono svg { width: 1.5rem; height: 1.5rem; }
.valor h3 { font-size: var(--texto-md); margin-top: var(--espacio-2xs); }
/* 5 estrellas al cierre del texto (sensación de calidad/compromiso) */
.estrellas { display: flex; gap: 0.3rem; margin-top: var(--espacio-md); color: var(--color-ambar); }
.estrellas svg { width: 1.5rem; height: 1.5rem; }
/* Si la sección va centrada (.centro-texto), centramos también el eyebrow,
   las estrellas y cada pilar (título de sección y plomo ya los centra base.css) */
.centro-texto .hero__meta { text-align: center; }
.centro-texto .estrellas { justify-content: center; }
.centro-texto .valor { align-items: center; text-align: center; }

/* ============================================================
   MARCAS ALIADAS - marquesina de logos (inicio)
   Auto-scroll horizontal continuo (no se detiene al pasar el mouse) MÁS
   arrastre con mouse o dedo. El contenedor es scrolleable (overflow-x) y
   app.js (iniciarCarruselMarcas) hace el auto-avance con scrollLeft, el drag
   con mouse, y el dedo usa el scroll táctil nativo; al interactuar se pausa el
   auto-avance y se reanuda al soltar. La pista tiene el grupo duplicado, así
   el bucle empalma sin saltos. Logos en tamaño uniforme y responsive.
   ============================================================ */
.marcas__carrusel {
  margin-top: var(--espacio-lg);
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;              /* Firefox: sin barra de scroll */
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marcas__carrusel::-webkit-scrollbar { display: none; }   /* Chrome/Safari: sin barra */
.marcas__carrusel.arrastrando { cursor: grabbing; }
.marcas__pista {
  display: flex;
  width: max-content;
  align-items: center;
}
/* Caja de cada logo - móvil (base). Crece en escritorio más abajo. */
.marca {
  position: relative;
  flex: 0 0 auto;
  width: 10.5rem;
  height: 6rem;
  margin-right: var(--espacio-lg);
  display: grid;
  place-items: center;
}
@media (min-width: 48rem) {
  .marca { width: 13rem; height: 7rem; margin-right: var(--espacio-xl); }
}
.marca__ph {
  width: 100%;
  text-align: center;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--texto-sm);
  color: var(--color-gris-300);
  border: 1px dashed var(--color-gris-150);
  border-radius: var(--radio-sm);
  padding: 0.6rem 0.4rem;
  transition: opacity 300ms ease;
}
.marca__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0.6rem 1rem;             /* respiro; con box-sizing el contain cabe dentro (no recorta) */
  box-sizing: border-box;
  object-fit: contain;              /* mismo tamaño de caja para logos de origen distinto */
  background: transparent;          /* mata el fondo gris (regla base img) en PNG transparentes */
  opacity: 0;                       /* se revela solo si el archivo existe */
  filter: grayscale(1);             /* tono neutro por defecto */
  transition: opacity 400ms ease, filter 300ms ease;
}
.marca:hover .marca__logo { filter: grayscale(0); }   /* color original al hover */

/* ============================================================
   COLECCIÓN R CAPS - modelos solo imagen + CTA de WhatsApp (rcaps.html)
   ============================================================ */
.rcaps-coleccion {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 40rem) { .rcaps-coleccion { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .rcaps-coleccion { grid-template-columns: repeat(4, 1fr); } }
.rcaps-prod {
  display: flex;
  flex-direction: column;
  background: var(--color-superficie);
  border: 1px solid color-mix(in srgb, var(--color-claro) 12%, transparent);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}
.rcaps-prod__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #fff;                  /* recuadro blanco: cada foto se muestra completa (contain) y el sobrante se funde */
}
.rcaps-prod__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--espacio-sm);
  color: var(--color-gris-300);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--texto-sm);
}
.rcaps-prod__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;              /* muestra la gorra completa, nunca la recorta (estándar para cualquier foto) */
  opacity: 0;
  transition: opacity 400ms ease;
}
.rcaps-prod__cta {
  margin: var(--espacio-2xs) var(--espacio-2xs) var(--espacio-sm);
  padding: 0.75em 0.5em;                        /* menos ancho para caber en la tarjeta */
  letter-spacing: 0.03em;
  font-size: clamp(0.62rem, 2.7vw, var(--texto-sm));  /* se achica lo justo para una línea */
  white-space: nowrap;                          /* nunca parte "Cotizar por WhatsApp" en 2 líneas */
  text-align: center;
}

/* ============================================================
   EXPLORADOR (tipos de visera): foto grande + specs + pestañas
   ============================================================ */
.explorador__vista {
  display: grid;
  gap: var(--espacio-xl);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 48rem) {
  /* foto un poco más grande; el texto ocupa el resto, centrado */
  .explorador__vista { grid-template-columns: 1.15fr 1fr; }
}
.explorador__info { align-self: center; }
.explorador__foto {
  position: relative;
  aspect-ratio: 3 / 4;              /* vertical, para las páginas del catálogo */
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--color-gris-150);
  border: 1px solid var(--color-gris-150);
}
.explorador__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;             /* muestra la imagen COMPLETA, sin recortar */
  opacity: 0;
  transition: opacity var(--transicion-media);
}
.explorador .explorador__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);          /* título prominente (antes se perdía) */
  text-transform: uppercase;
  letter-spacing: var(--tracking-titulo);
  color: var(--color-tinta);
  display: inline-block;
  margin-bottom: var(--espacio-md);
  padding-bottom: var(--espacio-2xs);
  border-bottom: 3px solid var(--color-accion);  /* acento naranja debajo */
}
.explorador__specs { display: grid; gap: var(--espacio-sm); }
.explorador__specs li {
  position: relative;
  padding-left: 1.6em;
  font-size: var(--texto-md);            /* specs más grandes y presentes */
  color: var(--color-tinta);
}
.explorador__specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.6em;
  height: 0.6em;
  background: var(--color-accion);
}
.explorador__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2xs);
  margin-top: var(--espacio-lg);
}
.explorador__tab {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5em 1.1em;
  background: transparent;
  border: 1px solid var(--color-gris-300);
  border-radius: var(--radio-boton);
  cursor: pointer;
  transition: background var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
}
.explorador__tab:hover { border-color: var(--color-accion); }
.explorador__tab--activo {
  background: var(--color-tinta);
  color: #fff;
  border-color: var(--color-tinta);
}

/* Chips de opciones de personalización (tipos de visera / cierre) */
.chips { display: flex; flex-wrap: wrap; gap: var(--espacio-2xs); margin-top: var(--espacio-2xs); }
.chips li {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3em 0.75em;
  border: 1px solid var(--color-gris-300);
  border-radius: var(--radio-etiqueta);
  color: var(--color-gris-700);
}

/* ============================================================
   TARJETAS DE SERVICIO / GENÉRICAS
   ============================================================ */
.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-gris-150);
  border-radius: var(--radio-tarjeta);
  padding: var(--espacio-md);
  box-shadow: var(--sombra-sm);
}
.tarjeta h3 { font-size: var(--texto-lg); margin-bottom: var(--espacio-2xs); }
.tarjeta p { color: var(--color-gris-700); font-size: var(--texto-sm); }
/* Video dentro de una tarjeta (Nosotros). A prueba de errores: el video arranca
   oculto y se revela al cargar (onloadedmetadata → .con-video); si el archivo no
   existe, queda el placeholder "Video pendiente". */
.tarjeta__video {
  position: relative;
  aspect-ratio: 3 / 4;                  /* vertical, misma proporción que las técnicas del inicio */
  width: 100%;
  overflow: hidden;
  background: var(--color-tinta-suave);
}
@media (min-width: 40rem) { .tarjeta__video { aspect-ratio: 2 / 3; } }
/* Tarjeta con video a sangre (misma distribución que las técnicas del inicio):
   el video llena todo el ancho arriba y el texto va en un cuerpo con padding. */
.tarjeta--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tarjeta--media .tarjeta__cuerpo { padding: var(--espacio-md); }
.tarjeta--media .tarjeta__cuerpo h3 { margin-bottom: var(--espacio-2xs); }
/* Tarjeta de texto centrada (Cobertura nacional): llena el alto con ícono + texto. */
.tarjeta--centro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tarjeta--centro p { max-width: 22ch; }
.tarjeta__icono { color: var(--color-primario); margin-bottom: var(--espacio-sm); line-height: 0; }
.tarjeta__icono svg { width: 2.6rem; height: 2.6rem; }

/* "QUIÉNES SOMOS" + video del fundador (vertical, con audio y controles).
   Escritorio: texto a la izquierda, video a la derecha. Móvil: apilado
   (primero el texto, luego el video). No autoplay, no bucle: el usuario le da play. */
.quienes { display: grid; gap: var(--espacio-lg); align-items: center; }
@media (min-width: 52rem) {
  .quienes { grid-template-columns: 1.35fr 0.65fr; gap: var(--espacio-xl); }
}
.quienes__video { margin: 0; }
.fundador-video {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 18rem;
  margin: 0 auto;
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--color-tinta-suave);
}
.fundador-video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}
.fundador-video.con-video video { opacity: 1; }
.fundador-video.con-video .fundador-video__ph { display: none; }
.fundador-video__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--color-gris-300);
  font-size: var(--texto-sm);
}
.quienes__caption {
  margin-top: var(--espacio-sm);
  text-align: center;
  font-size: var(--texto-sm);
  color: var(--color-gris-700);
}
/* Portada "clic para reproducir": tapa el primer frame con un velo de marca y
   un botón de play. Solo aparece cuando el video cargó (con-video) y se oculta
   al empezar a reproducir (reproduciendo). Si falta el archivo, no aparece. */
.fundador-video__cover {
  position: absolute; inset: 0; z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem;
  border: 0; cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
}
.fundador-video.con-video .fundador-video__cover { display: flex; }
.fundador-video.reproduciendo .fundador-video__cover { display: none; }
.fundador-video__play {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--color-primario);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.fundador-video__play svg { width: 1.3rem; height: 1.3rem; fill: var(--color-fondo); margin-left: 3px; }
.fundador-video__cover-txt {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tarjeta__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
}
.tarjeta__video.con-video video { opacity: 1; }
.tarjeta__video.con-video .tarjeta__video-ph { display: none; }
.tarjeta__video-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-gris-300);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--texto-sm);
}
.tarjeta__icono {
  width: 3rem; height: 3rem;
  margin-bottom: var(--espacio-sm);
  color: var(--color-accion);
}

/* ============================================================
   SECCIÓN DE VIDEOS (3 espacios reutilizables)
   ============================================================ */
.videos-rejilla {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .videos-rejilla { grid-template-columns: repeat(3, 1fr); }
}
.video-item {
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  background: var(--color-tinta-suave);
  box-shadow: var(--sombra-sm);
}
/* Relación de aspecto fija: el layout NO salta al cambiar el video */
.video-item__marco {
  position: relative;
  aspect-ratio: 9 / 16;   /* vertical, estilo reels; cambia a 16/9 si prefieres */
  background: #000;
}
@media (min-width: 48rem) {
  .video-item__marco { aspect-ratio: 9 / 16; }
}
.video-item__marco video,
.video-item__marco img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.video-item__titulo {
  padding: var(--espacio-2xs) var(--espacio-sm);
  font-size: var(--texto-sm);
  color: var(--color-gris-150);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Placeholder cuando aún no hay video */
.video-item__vacio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--color-gris-300);
  padding: var(--espacio-md);
}
.video-item__vacio span {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--texto-sm);
}
/* Patrón a prueba de errores (igual que las fotos): el video arranca oculto y
   solo se revela si el archivo existe (loadedmetadata añade .video-item--listo).
   Si no existe, queda el placeholder. Basta con subir el .mp4 con su nombre. */
.video-item__marco video { opacity: 0; transition: opacity 550ms ease; }
.video-item--listo .video-item__marco video { opacity: 1; }
.video-item--listo .video-item__vacio { display: none; }
/* Fundido en el "empalme" del bucle: app.js añade .en-fundido en el último
   medio segundo; al reiniciar lo quita y el video vuelve a aparecer suave,
   así el reinicio no se siente brusco. */
.video-item--listo .video-item__marco video.en-fundido { opacity: 0; }

/* ============================================================
   SEDES (mapa + tarjetas)
   ============================================================ */
.sedes-rejilla {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .sedes-rejilla { grid-template-columns: 1fr 1fr; }
}
.sede {
  background: var(--color-superficie);
  border: 1px solid var(--color-gris-150);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
  box-shadow: var(--sombra-sm);
}
.sede__mapa {
  aspect-ratio: 16 / 9;
  background: var(--color-gris-150);
}
.sede__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.sede__cuerpo { padding: var(--espacio-md); display: flex; flex-direction: column; gap: var(--espacio-2xs); }
.sede__nombre { font-size: var(--texto-lg); }
.sede__dato { font-size: var(--texto-sm); color: var(--color-gris-700); display: flex; gap: var(--espacio-2xs); align-items: flex-start; }
.sede__icono { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--color-accion); margin-top: 0.1em; }
.sede__acciones { margin-top: var(--espacio-2xs); display: flex; gap: var(--espacio-2xs); flex-wrap: wrap; }

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
.formulario { display: grid; gap: var(--espacio-sm); max-width: 34rem; }
.campo { display: grid; gap: 0.35em; }
.campo label { font-size: var(--texto-sm); font-weight: var(--peso-negrita); }
.campo input, .campo textarea {
  font: inherit;
  padding: 0.7em 1em;
  border-radius: var(--radio-campo);
  border: var(--grosor-borde) solid var(--color-gris-300);
  background: var(--color-superficie);
  color: var(--color-tinta);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible {
  outline: none;
  border-color: var(--color-foco);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-foco) 30%, transparent);
}

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */
.banner-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  background: var(--color-tinta);
  color: #fff;
  padding: var(--espacio-sm) var(--espacio-md);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
  transform: translateY(110%);
  transition: transform var(--transicion-media);
}
.banner--visible { transform: translateY(0); }
.banner-cookies__int {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-sm);
  justify-content: space-between;
}
.banner-cookies p { font-size: var(--texto-sm); color: #E9E7E4; max-width: 60ch; }
.banner-cookies a { color: var(--color-primario); }
.banner-cookies__acciones { display: flex; gap: var(--espacio-2xs); flex-shrink: 0; }
.banner-cookies .boton { font-size: var(--texto-sm); padding: 0.7em 1.3em; }
.banner-cookies .boton--secundario { color: #fff; border-color: #fff; }
.banner-cookies .boton--secundario:hover { background: #fff; color: var(--color-tinta); }

/* ============================================================
   FOOTER
   ============================================================ */
.pie {
  background: var(--color-tinta);
  color: var(--color-gris-300);
  padding-block: var(--espacio-xl);
  margin-top: var(--espacio-2xl);
}
.pie__rejilla {
  display: grid;
  gap: var(--espacio-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .pie__rejilla { grid-template-columns: 2fr 1fr 1fr; }
}
.pie h3 {
  color: #fff;
  font-size: var(--texto-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--espacio-sm);
}
.pie a { color: var(--color-gris-300); text-decoration: none; }
.pie a:hover { color: #fff; }
.pie__enlaces { display: grid; gap: var(--espacio-2xs); font-size: var(--texto-sm); }
/* El logo tiene partes negras que se perderían sobre el pie oscuro.
   Se coloca sobre una tarjeta blanca para que se lea con claridad. */
.pie__marca img {
  height: 4rem;              /* logo más discreto en el pie */
  width: auto;
  max-width: 13rem;
  background: #fff;
  padding: 0.5rem 0.65rem;   /* recuadro ajustado al logo */
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-sm);
  margin-bottom: var(--espacio-sm);
}
.pie__desc { font-size: var(--texto-sm); max-width: 40ch; }
.pie__redes { display: flex; flex-wrap: wrap; gap: var(--espacio-2xs); margin-top: var(--espacio-sm); }
/* Botón de red social: pill con icono + @usuario visible, para distinguir de un
   vistazo cada cuenta (GCP vs R Caps). Al pasar el mouse se pinta de naranja. */
.pie__redes a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--color-gris-700);
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida);
}
.pie__redes a:hover {
  background: var(--color-accion);
  border-color: var(--color-accion);
  color: var(--color-accion-texto);
}
.pie__redes svg { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
.pie__red-nombre { display: inline-block; }

.pie__base {
  border-top: 1px solid var(--color-gris-700);
  margin-top: var(--espacio-lg);
  padding-top: var(--espacio-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2xs) var(--espacio-md);
  justify-content: space-between;
  align-items: center;
  font-size: var(--texto-xs);
}
/* Crédito JarcOnline: discreto, sin competir con la marca del cliente */
.pie__credito { color: var(--color-gris-500); }
.pie__credito a { color: var(--color-gris-300); text-decoration: underline; text-underline-offset: 2px; }
.pie__credito a:hover { color: #fff; }

/* En escritorio centramos el crédito de JarcOnline (columna del medio) para
   sacarlo de la esquina donde flota el botón de WhatsApp: el copyright se
   queda a la izquierda y la derecha libre para el botón. En móvil el pie
   sigue apilado como antes (no entra en este media). */
@media (min-width: 40rem) {
  .pie__base {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .pie__credito { justify-self: center; text-align: center; }
}

/* ============================================================
   BLOQUE DESTACADO / LLAMADO A LA ACCIÓN
   ============================================================ */
.cta-franja {
  background: var(--color-tinta);
  color: #fff;
  text-align: center;
  padding-block: var(--espacio-2xl);
}
.cta-franja h2 { color: #fff; margin-bottom: var(--espacio-sm); }
.cta-franja p { color: var(--color-gris-300); margin-inline: auto; margin-bottom: var(--espacio-lg); }

/* ============================================================
   R CAPS - LOOKBOOK Y VIDEO (solo en la página premium)
   Reusan el patrón a prueba de errores del catálogo: la imagen/el video
   arrancan invisibles (opacity 0) y solo se revelan si el archivo existe;
   si no, queda el placeholder elegante (nunca se ve roto). La clienta solo
   sube los archivos con el nombre exacto en img/rcaps/ - sin tocar código.
   Estos bloques viven dentro de <main data-brand="rcaps">, así que los
   tokens (champán, Marcellus, superficie oscura) ya son los de R Caps.
   ============================================================ */
.rcaps-eyebrow {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: var(--texto-sm);
  color: var(--color-primario);
  margin-bottom: var(--espacio-2xs);
}

/* --- Lookbook (galería editorial asimétrica) --- */
.lookbook {
  display: grid;
  gap: var(--espacio-sm);
  grid-template-columns: 1fr 1fr;
}
.lookbook__item {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  border: 1px solid var(--color-gris-700);
  background: var(--color-superficie);
}
/* En móvil la foto principal va ancha arriba; el resto en cuadrícula debajo */
.lookbook__item--grande { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 48rem) {
  .lookbook { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 175px 175px; }
  .lookbook__item { aspect-ratio: auto; }        /* el alto lo dan las filas */
  .lookbook__item--grande { grid-column: auto; grid-row: 1 / span 2; }
}
.lookbook__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.25rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(201, 169, 97, 0.06) 10px 20px),
    var(--color-superficie);
  color: var(--color-gris-500);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
}
.lookbook__ph span { font-size: var(--texto-sm); letter-spacing: 0.15em; }
.lookbook__ph small { font-size: var(--texto-xs); color: var(--color-gris-700); letter-spacing: 0.12em; }
.lookbook__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                                     /* se revela al cargar (onload) */
  transition: opacity var(--transicion-media);
}

/* --- Reels verticales (formato Instagram 9:16, mínimo 3) ---
   En móvil se deslizan en horizontal (scroll con snap, como en Instagram);
   en escritorio van los 3 en fila. Para sumar más videos, basta con añadir
   otro bloque .rcaps-reel en el HTML: la cuadrícula se adapta sola. */
.rcaps-reels {
  display: grid;
  gap: var(--espacio-lg);
  grid-template-columns: 1fr;      /* móvil: apilados, uno debajo del otro */
  justify-items: center;
}
.rcaps-reels .rcaps-reel {
  width: 100%;
  max-width: 22rem;                /* tope para que el reel no quede gigante en teléfonos grandes */
}
@media (min-width: 48rem) {
  .rcaps-reels {
    grid-template-columns: repeat(3, 1fr);   /* escritorio: 3 en fila */
    gap: var(--espacio-sm);
  }
  .rcaps-reels .rcaps-reel { max-width: none; }   /* en escritorio ocupan su columna completa */
}
.rcaps-reel {
  position: relative;
  aspect-ratio: 9 / 16;            /* formato vertical de Instagram */
  overflow: hidden;
  border-radius: var(--radio-tarjeta);
  border: 1px solid var(--color-gris-700);
  background: var(--color-superficie);
  scroll-snap-align: center;
}
.rcaps-reel__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                       /* se revela si el video existe */
  transition: opacity var(--transicion-media);
}
.rcaps-reel--listo .rcaps-reel__media { opacity: 1; }
.rcaps-reel--listo .rcaps-reel__ph { display: none; }
.rcaps-reel__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--espacio-sm);
  text-align: center;
  padding: var(--espacio-md);
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(201, 169, 97, 0.06) 10px 20px),
    var(--color-superficie);
  color: var(--color-gris-500);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: var(--texto-sm);
}
.rcaps-reel__play {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--color-primario);
  display: grid;
  place-items: center;
}
.rcaps-reel__play svg { width: 1.4rem; height: 1.4rem; fill: var(--color-fondo); margin-left: 3px; }

/* ============================================================
   INTRO DEL LOGO (velo de entrada, UNA vez por sesión)
   El script inline del <head> añade la clase .con-intro a <html> solo en
   la primera visita de la sesión y solo si el usuario NO pidió reducir
   animaciones. Sin esa clase el velo queda oculto (display:none): así no
   hay parpadeo en las páginas siguientes, y si el JS está desactivado
   tampoco estorba (el contenido carga normal detrás => SEO a salvo).
   Dura ~1.1s, no bloquea clics y se oculta solo al terminar.
   ============================================================ */
.intro { display: none; }
.con-intro .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;                 /* nunca atrapa clics */
  background: var(--color-superficie);  /* blanco de marca */
  animation: intro-salida 1.1s ease forwards;
}
.con-intro .intro__logo {
  width: min(78vw, 400px);   /* logo horizontal: necesita más ancho */
  height: auto;
  background: transparent;   /* anula el gris de "img" en base.css (el logo es PNG transparente) */
  animation: intro-logo 1.1s ease forwards;
}
@keyframes intro-logo {
  0%   { opacity: 0; transform: scale(0.88); }
  22%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); }
}
@keyframes intro-salida {
  0%, 68% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}
/* Seguro extra: si alguien tiene animaciones reducidas, nunca se muestra */
@media (prefers-reduced-motion: reduce) {
  .con-intro .intro { display: none; }
}