/* =========================================================
   Renta de Trajes Leo — index.html
   Estructura y estilo únicamente. Sin JavaScript funcional.
   ========================================================= */

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-brand);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  color-scheme: light;        /* fuerza esquema claro en todo el documento */
}

/* Garantiza que inputs y selects siempre muestren texto oscuro
   independientemente del modo oscuro del sistema operativo */
input, select, textarea {
  color: var(--color-ink);
  background-color: var(--color-white);
  color-scheme: light;
  -webkit-text-fill-color: var(--color-ink);
}
select option {
  background: #f8f7f4;
  color: #141414;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.eyebrow {
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold-deep);
}

/* Motivo de firma: línea de "pespunte" dorado, alusión a la costura
   de un traje a la medida. Se usa como separador entre bloques. */
.stitch-rule {
  height: 1px;
  width: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--color-gold) 0,
    var(--color-gold) 6px,
    transparent 6px,
    transparent 12px
  );
  opacity: 0.6;
}

/* ---------- Placeholders de imagen (sin contenido visual real) ---------- */
.ph-image {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background: var(--color-stone);
  border: 1px dashed var(--color-gold-deep);
  color: var(--color-ink-soft);
  min-height: 180px;
  overflow: hidden;
}
.ph-image__label {
  margin: 0.9rem;
  padding: 0.35rem 0.6rem;
  background: var(--color-white);
  border: 1px solid var(--color-stone-dark);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
  max-width: 88%;
}
.ph-image--dark {
  background: var(--color-black-soft);
  border-color: var(--color-gold);
}
.ph-image--dark .ph-image__label {
  background: var(--color-black);
  border-color: var(--color-gold-deep);
  color: var(--color-ink-invert-soft);
}
.ph-image--texture .ph-image__label { margin-inline: auto; }

/* (Fase 1) Cuando el placeholder ya recibió una foto real (fotoRuta con
   URL de Cloudinary), se pinta la imagen a pantalla completa dentro del
   contenedor y se retira el borde punteado/fondo de "falta foto" — el
   contenedor pasa de ser un aviso a ser el marco de la foto. */
.ph-image:has(img) {
  border-style: solid;
  background: var(--color-stone);
}
.ph-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card__photo-link { display: block; }

/* Placa clara para el logo sobre fondos oscuros: el logo real tiene tinta
   marino/teal, así que sobre el footer (fondo marino) necesita una base
   clara detrás para no perderse — o bien una versión invertida del logo
   (a pedir al cliente más adelante). */
.ph-image--plate {
  background: var(--color-white-dim);
  border-color: var(--color-gold-deep);
}
.ph-image--plate .ph-image__label {
  background: transparent;
  border: none;
  color: var(--color-ink-soft);
  padding: 0.5rem;
}

/* =========================================================
   1. HEADER / NAVEGACIÓN
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  transition: box-shadow var(--duration-base) var(--ease-editorial);
}
.utility-bar {
  border-bottom: 1px solid var(--color-stone);
  background: var(--color-black);
}
.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-invert-soft);
}
.utility-bar__links { display: flex; gap: 1.5rem; }
.utility-bar__links a:hover { color: var(--color-gold); }

/* Nav de una sola fila: logo/wordmark a la izquierda, links + CTA a la
   derecha. El logo real (PNG) vive ahora en el hero (sección 2), no aquí
   — es lo que antes hacía que el header ocupara media pantalla. */
.main-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
  transition: padding-block var(--duration-base) var(--ease-editorial);
}
.brand-mark {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
}
.brand-mark small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.6rem;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  color: var(--color-gold-deep);
}
/* Variante compacta: la que realmente se usa en el header. Solo texto,
   sin el bloque de imagen del logo — así la nav se queda baja de altura. */
.brand-mark--compact {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  text-align: left;
  transition: color var(--duration-base) var(--ease-editorial), font-size var(--duration-base) var(--ease-editorial);
}
.brand-mark--compact:hover,
.brand-mark--compact:focus-visible {
  color: var(--color-teal-deep);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.nav-links a {
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.3rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-editorial);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-links a.is-active {
  color: var(--color-teal-deep);
}
.nav-links a.is-active::after {
  background: var(--color-teal);
  transform: scaleX(1);
  transform-origin: left;
}

/* Header compacto: clase que agrega main.js al hacer scroll, para ganar
   todavía más aire vertical una vez que el usuario ya se movió del hero. */
.site-header.is-scrolled {
  box-shadow: 0 6px 18px rgba(11, 35, 51, 0.08);
}
.site-header.is-scrolled .main-nav {
  padding-block: 0.55rem;
}

.nav-cta {
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-gold);
  transition: color var(--duration-base) var(--ease-editorial);
}
.nav-cta:hover { color: var(--color-gold-deep); }

/* Menú móvil: "MENÚ" en texto, se expande a pantalla completa (CSS puro) */
.mobile-menu-toggle { display: none; }
.mobile-menu-label {
  display: none;
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
}
.mobile-menu-panel { display: none; }

/* =========================================================
   2. HERO + FRANJA DE PROMOCIÓN
   ========================================================= */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-ink-invert);
}
.hero .ph-image {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 19, 16, 0.88) 0%, rgba(20, 19, 16, 0.35) 45%, rgba(20, 19, 16, 0.05) 75%);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* Logo movido aquí desde el header (ver sección 1) — en el hero sí hay
   espacio de sobra para darle presencia sin comprimir el resto del sitio.
   Nota: usamos el selector ".hero .hero__logo" (no solo ".hero__logo")
   a propósito, para igualar la especificidad de ".hero .ph-image" de
   arriba y así poder anular su position:absolute/inset:0/min-height:100%
   — si no, el logo hereda esas reglas (pensadas para la foto de fondo)
   y termina estirado a toda la altura del hero. */
.hero .hero__logo {
  position: relative;
  inset: auto;
  min-height: 0;
  /* Logo horizontal (v2, logonv.png): necesita más ancho que el vertical
     anterior para que el saco + "LEO" se lean con claridad. */
  width: clamp(220px, 26vw, 340px);
  margin-left: auto;
  margin-right: 0;
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  margin-bottom: 1.6rem;
}
/* Halo suave detrás del logo: en vez de que la imagen quede "flotando"
   como una calcomanía pegada sobre la foto, este resplandor difuso del
   mismo tono oscuro del hero funde los bordes del PNG con el fondo. */
.hero .hero__logo::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(circle, rgba(20, 19, 16, 0.55) 0%, rgba(20, 19, 16, 0.25) 55%, rgba(20, 19, 16, 0) 78%);
  filter: blur(6px);
  pointer-events: none;
}
.hero .hero__logo img {
  /* Sombra proyectada real (no un recorte plano) para dar sensación de
     profundidad, como si el logo tuviera volumen sobre la foto. */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.hero__logo .ph-image__label {
  font-size: 0.62rem;
  margin: 0.55rem;
}
.hero__eyebrow {
  color: var(--color-gold);
  font-size: var(--fs-nav);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 16ch;
}
.hero p {
  margin-top: 1.1rem;
  max-width: 40ch;
  font-size: 1.05rem;
  color: var(--color-ink-invert-soft);
}
.hero__actions { margin-top: 2rem; }

.btn {
  display: inline-block;
  padding: 0.9rem 2.1rem;
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-soft);
  transition: background var(--duration-base) var(--ease-editorial), color var(--duration-base) var(--ease-editorial);
}
/* Acción primaria: teal como base (color estructural del logo).
   El dorado solo aparece como línea fina al interactuar — acento, no base. */
.btn--primary {
  color: var(--color-black);
  background: var(--color-teal);
  border-color: var(--color-teal);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold);
}
.btn--ink-outline {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--ink-outline:hover {
  background: var(--color-ink);
  color: var(--color-white);
}
.btn--teal-outline {
  color: var(--color-teal-deep);
  border-color: var(--color-teal);
}
.btn--teal-outline:hover {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-teal);
}

/* Franja de promoción: angosta, integrada, no es una "parada" completa */
.promo-strip {
  position: relative;
  z-index: 1;
  background: var(--color-black);
  border-top: 1px solid var(--color-gold-faint);
}
.promo-strip .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.85rem;
  flex-wrap: wrap;
}
.promo-strip__tag {
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-deep);
  padding: 0.2rem 0.55rem;
}
.promo-strip__text {
  color: var(--color-ink-invert-soft);
  font-size: 0.9rem;
}
.promo-strip__link {
  margin-left: auto;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-invert);
  border-bottom: 1px solid var(--color-gold);
}
/* Nota de desarrollo: esta franja solo se renderiza si hay una promoción
   vigente. Si no existe al momento del lanzamiento, se omite por completo
   (no dejar el espacio vacío "por si acaso"). */

/* =========================================================
   3. BLOQUE FUSIONADO: OCASIÓN / SUCURSAL (tabs + carrusel)
   Implementado con radio inputs — CSS puro, sin JavaScript.

   (Fase 1) El markup de tabs (#tab-ocasion/#tab-sucursal,
   .tab-switch*, .tab-panel) se retiró de index.html: "Trajes de renta"
   y "Sucursales" ahora son secciones independientes, siempre visibles.
   Las reglas de abajo (líneas de .tab-switch-input a #tab-sucursal...)
   quedan sin selector coincidente en el HTML actual — no se borran
   para no tocar más de lo necesario en este ciclo, pero son código
   muerto seguro para limpiar en una pasada de hardening futura.
   ========================================================= */
.explore {
  padding-block: var(--section-pad-y);
  background: var(--color-white);
}
.explore__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.explore__head h2 {
  font-size: var(--fs-h2);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: 0.5rem;
}

.tab-switch-input { position: absolute; opacity: 0; pointer-events: none; }
.tab-switch { display: flex; gap: 0.5rem; }
.tab-switch label {
  padding: 0.6rem 1.3rem;
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--color-stone-dark);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-editorial), color var(--duration-base) var(--ease-editorial), border-color var(--duration-base) var(--ease-editorial);
}
.tab-switch label:hover { border-color: var(--color-gold); }

.tab-panel { display: none; }
#tab-ocasion:checked ~ .tab-panels #panel-ocasion,
#tab-sucursal:checked ~ .tab-panels #panel-sucursal { display: block; }
#tab-ocasion:checked ~ .explore__head label[for="tab-ocasion"],
#tab-sucursal:checked ~ .explore__head label[for="tab-sucursal"] {
  background: var(--color-black);
  color: var(--color-ink-invert);
  border-color: var(--color-black);
}
/* El input vive fuera del flujo visual pero antes del head en el DOM
   para que el selector de hermanos (~) funcione; ver estructura HTML. */

.carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin: 0 calc(var(--section-pad-x) * -1);
  padding-inline: var(--section-pad-x);
}
.carousel::-webkit-scrollbar { height: 4px; }
.carousel::-webkit-scrollbar-thumb { background: var(--color-gold); }
.carousel::-webkit-scrollbar-track { background: var(--color-stone); }

.card {
  flex: 0 0 auto;
  width: clamp(240px, 32vw, 320px);
  scroll-snap-align: start;
}
.card .ph-image { aspect-ratio: 3 / 4; min-height: 0; }
.card__title {
  margin-top: 0.85rem;
  font-size: var(--fs-h3);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
}
.card__link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-gold);
}

.card--branch { width: clamp(260px, 40vw, 360px); }
.card--branch .ph-image { aspect-ratio: 4 / 3; }
.card--branch__body { margin-top: 0.85rem; }
.card--branch__name {
  font-size: var(--fs-h3);
  font-weight: var(--weight-regular);
}
.card--branch__address {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.card--branch__phone {
  margin-top: 0.2rem;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.card--branch__actions {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.card--branch__actions .btn { padding: 0.55rem 1.1rem; font-size: 0.7rem; }

/* Sucursal recordada por el cliente (localStorage, ver main.js) */
.card--branch.is-sucursal-activa {
  outline: 1px solid var(--color-gold);
  outline-offset: 6px;
}
.card--branch__badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.68rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-deep);
  border: 1px solid var(--color-gold-deep);
  padding: 0.15rem 0.55rem;
}

/* =========================================================
   4. QUIÉNES SOMOS (fondo de mármol como respiro visual)
   ========================================================= */
.about {
  position: relative;
  padding-block: var(--section-pad-y);
  overflow: hidden;
}
.about .ph-image--texture {
  position: absolute;
  inset: 0;
  border: none;
  opacity: 0.9;
}
.about::before {
  /* veladura para asegurar legibilidad del texto sobre el mármol */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 249, 247, 0.9), rgba(250, 249, 247, 0.75));
}
.about__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.about__text h2 {
  font-size: var(--fs-h2);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.about__text p {
  max-width: 52ch;
  color: var(--color-ink-soft);
  font-size: 1rem;
}
.about__media .ph-image { aspect-ratio: 4 / 5; min-height: 0; }

/* =========================================================
   5. FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-black);
  color: var(--color-ink-invert-soft);
  padding-block: var(--section-pad-y) 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.footer__brand .brand-mark { text-align: left; color: var(--color-ink-invert); }
.footer__brand p {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  max-width: 30ch;
}
.footer h3 {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.footer__hours p { font-size: 0.9rem; margin-bottom: 0.3rem; }
.footer__social { display: flex; gap: 1rem; margin-top: 0.9rem; }
.footer__social a {
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-gold-deep);
}
/* Redes sociales sin URL real todavía (pendiente de confirmar con el
   cliente, ver guía de desarrollo). En vez de un href="#" que no lleva a
   ningún lado, se muestran deshabilitadas con estado "Próximamente" para
   respetar visibilidad del estado del sistema. Quitar .is-disabled y
   volver a poner el href real en cuanto el cliente confirme las cuentas. */
.footer__social a.is-disabled {
  color: var(--color-ink-invert-soft);
  border-bottom-color: var(--color-ink-invert-soft);
  cursor: default;
  pointer-events: none;
}
.footer__social a.is-disabled::after {
  content: " · próximamente";
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.8;
}

.footer__branches { display: grid; gap: 1.1rem; }
.footer__branch-name { color: var(--color-ink-invert); font-size: 0.92rem; font-weight: var(--weight-medium); }
.footer__branch-address { font-size: 0.85rem; margin-top: 0.15rem; }
.footer__branch-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-gold-deep);
}

.footer__bottom {
  border-top: 1px solid rgba(201, 166, 107, 0.2);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* =========================================================
   ÍCONO FLOTANTE DE WHATSAPP (Etapa 8)
   A propósito NO usa la paleta negro/dorado de la marca: el cliente
   pidió expresamente el verde original de WhatsApp (#25D366), porque
   es el color que la gente reconoce de inmediato como "aquí se abre
   un chat". Es la única excepción intencional a la paleta del sitio.
   ========================================================= */
.whatsapp-flotante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  /* Por debajo del panel de menú móvil de pantalla completa (z-index
     100 en mobile.css) para que, al abrir el menú, quede tapado en
     vez de flotar encima de los links — y por encima del header
     (z-index 50) el resto del tiempo. */
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #f8f7f4;
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.28);
  transition: transform var(--duration-base) var(--ease-editorial),
    box-shadow var(--duration-base) var(--ease-editorial);
}
.whatsapp-flotante:hover,
.whatsapp-flotante:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.34);
}
.whatsapp-flotante svg {
  display: block;
}