/* ==================================================================
   MARTÍN FOTOGRAFÍA — HOJA DE ESTILOS
   Sistema editorial oscuro: negro, blanco y grises. Sin degradados.
   La fotografía es siempre el elemento principal.
   ================================================================== */

/* ------------------------------------------------------------------
   1. TOKENS DE DISEÑO
   ------------------------------------------------------------------ */
:root {
  /* Paleta — sólo neutros, ninguna decisión de color "de más" */
  --color-black:      #0a0a0a;   /* fondo base, toda la página */
  --color-surface:    #131311;   /* franjas levemente distintas del negro */
  --color-ink:        #f4f2ee;   /* texto principal sobre fondo oscuro */
  --color-white:      #faf9f7;
  --color-gray-100:   #232320;
  --color-gray-400:   #86827a;
  --color-gray-600:   #b8b4ac;
  --color-line-light: rgba(244, 242, 238, 0.12);
  --color-line-dark:  rgba(244, 242, 238, 0.18);
  --color-gold:       #c9a35e;
  --color-gold-dark:  #b48c46;

  /* Tipografía
     Display: Bebas Neue — el equivalente libre más cercano a Bebas Kai,
     la fuente condensada en mayúsculas que usás en el portfolio y en la
     guía de 15 (confirmado en las fuentes incrustadas del PDF). Se usa
     sólo en los títulos grandes de marca. Si más adelante comprás la
     licencia de Bebas Kai, sólo hay que cambiar esta línea y el <link>
     de Google Fonts por el @font-face real.
     Accent: Fraunces — serif elegante en itálica, reservada para
     subtítulos y frases cortas (no para títulos grandes).
     Body: Inter — todo el texto de lectura. */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-accent:  "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciado fluido */
  --space-section: clamp(4.5rem, 9vw, 9rem);
  --space-gutter:  clamp(1.5rem, 5vw, 4rem);

  /* Ritmo de animación */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-slow: 900ms;
  --dur-med:  500ms;
  --dur-fast: 240ms;
}

/* ------------------------------------------------------------------
   2. RESET
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; border: none; background: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; }

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

/* Enlace de accesibilidad "saltar al contenido" */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-black);
  padding: 1rem 1.5rem;
  z-index: 1000;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Foco visible y consistente en toda la interfaz */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   3. BOTONES
      Transición elegante: sombra + ligero cambio de escala al hover.
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-editorial),
              color var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial),
              box-shadow var(--dur-fast) var(--ease-editorial);
}
.btn:hover {
  transform: scale(1.035);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.btn--primary {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
.btn--primary:hover { background: #efeee9; }

.btn--dark {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-line-dark);
}
.btn--dark:hover { background: var(--color-gray-100); }

.btn--gold {
  background: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold);
}
.btn--gold:hover { background: var(--color-gold-dark); border-color: var(--color-gold-dark); }

.btn--large { padding: 1.25rem 2.9rem; font-size: 1.15rem; }

/* ------------------------------------------------------------------
   4. HEADER — logo-sello centrado (ícono + wordmark) con la fila de
      navegación arriba. Transparente sobre el hero, sólido con blur
      al hacer scroll.
   ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 1.1rem 0 0.9rem;
  transition: background var(--dur-med) var(--ease-editorial),
              padding var(--dur-med) var(--ease-editorial);
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(10px);
  padding: 0.7rem 0 0.6rem;
}
.site-header__inner {
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--space-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header__nav {
  display: none;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 1.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.72);
  margin-left: auto;
}
.site-header__nav a { transition: color var(--dur-fast) var(--ease-editorial); }
.site-header__nav a:hover { color: var(--color-white); }

.site-header__mark {
  display: flex;
  align-items: center;
  transition: transform var(--dur-med) var(--ease-editorial);
}
.site-header__logo {
  width: min(300px, 78vw);
  height: auto;
  display: block;
  transition: width var(--dur-med) var(--ease-editorial);
}
.site-header.is-scrolled .site-header__logo { width: 65px; }
@media (max-width: 640px) {
  .site-header__logo {
    width: 90px;
    opacity: 0;
    transition: width var(--dur-med) var(--ease-editorial),
                opacity var(--dur-med) var(--ease-editorial);
  }
  .site-header.is-scrolled .site-header__logo { width: 55px; opacity: 1; }
}

.site-header__menu-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  margin: -0.5rem calc(-1 * var(--space-gutter)) -0.5rem 0;
}
.site-header__menu-btn span {
  width: 22px;
  height: 1px;
  background: var(--color-white);
  transition: transform var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-white);
}
.mobile-nav[hidden] { display: none; }

@media (min-width: 860px) {
  .site-header__nav { display: flex; }
  .site-header__menu-btn { display: none; }
}

/* ------------------------------------------------------------------
   5. HERO
      Entrada: la foto des-zoom-ea de 102% a 100% en ~2s mientras el
      texto aparece en cascada (fade + 20px). Luego continúa un
      Ken Burns lento e infinito. Al scrollear, un parallax adicional
      se aplica vía JS sobre .hero__media (ver script.js).
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  background: var(--color-black);
}
.hero__media {
  position: absolute;
  inset: -3% -3%;
  will-change: transform;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  filter: grayscale(15%);
  animation: heroKenburns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@media (max-width: 640px) {
  /* En pantallas angostas y altas, el recorte vertical es mucho más
     agresivo (la foto es horizontal). Bajamos el punto de foco para
     no perder las piernas/el vestido. Si igual se cortan, subir este
     valor (80% → 90% → 100%) hasta que entre el cuerpo completo. */
  .hero__img { object-position: center 80%; }
}
@keyframes heroKenburns {
  0%   { transform: scale(1.01); }
  6%   { transform: scale(1.0); }
  100% { transform: scale(1.07); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.4) 22%,
    rgba(0,0,0,0.08) 46%,
    rgba(0,0,0,0) 68%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 1.5rem clamp(4.5rem, 11vh, 7rem);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero__tagline {
  margin-top: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.95rem, 4.05vw, 3.3rem);
  line-height: 1.15;
  max-width: 90vw;
  white-space: nowrap;
  color: rgba(244, 242, 238, 0.92);
  animation: fadeUp var(--dur-slow) var(--ease-editorial) 300ms both;
}
@media (max-width: 640px) {
  .hero__tagline {
    font-size: clamp(1.4rem, 6.4vw, 1.8rem);
    max-width: 20ch;
    white-space: normal;
  }
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 0.85rem;
}
@media (min-width: 860px) {
  .hero__actions {
    margin-top: 1.7rem;
  }
}
.hero__actions .btn {
  animation: fadeUp var(--dur-slow) var(--ease-editorial) 700ms both;
}
.hero__secondary {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: rgba(244, 242, 238, 0.75);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial);
  animation: fadeUp var(--dur-slow) var(--ease-editorial) 850ms both;
}
.hero__secondary:hover {
  color: var(--color-white);
  border-color: var(--color-line-dark);
}

.hero__meta {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  animation: fadeUp var(--dur-slow) var(--ease-editorial) 950ms both;
  transition: opacity var(--dur-fast) var(--ease-editorial);
}
.hero__meta:hover { opacity: 0.8; }
.hero__meta-stars {
  color: var(--color-gold);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}
.hero__meta-text {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(244, 242, 238, 0.75);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scroll-cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  color: rgba(244, 242, 238, 0.95);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  animation: fadeUp var(--dur-slow) var(--ease-editorial) 1000ms both,
             arrowBob 2s ease-in-out 1900ms infinite;
}
@keyframes arrowBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* ------------------------------------------------------------------
   6. TRES CATEGORÍAS
      No son botones: son tres fotografías enormes. Al pasar el
      mouse, la foto hace zoom (100%→103%) y la tarjeta se eleva.
   ------------------------------------------------------------------ */
.categories {
  display: grid;
  grid-template-columns: 1fr;
}
.category-card {
  position: relative;
  height: 78vh;
  min-height: 460px;
  overflow: hidden;
  border-top: 1px solid var(--color-line-light);
  transition: transform var(--dur-med) var(--ease-editorial),
              box-shadow var(--dur-med) var(--ease-editorial);
}
.category-card:hover,
.category-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.category-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(25%);
  transition: transform 1.1s var(--ease-editorial);
}
.category-card:hover .category-card__img,
.category-card:focus-within .category-card__img {
  transform: scale(1.03);
}
.category-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.08) 45%);
  transition: background var(--dur-med) var(--ease-editorial);
}
.category-card__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  color: var(--color-white);
}
.category-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.96rem, 3.45vw, 2.65rem);
}
.category-card__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(244, 242, 238, 0.6);
  margin-bottom: 0.6rem;
}
.category-card__text {
  margin-top: 0.5rem;
  font-family: var(--font-accent);
  font-style: italic;
  color: rgba(244, 242, 238, 0.82);
  font-size: 1.03rem;
  line-height: 1.4;
}
.category-card__link {
  margin-top: 1.25rem;
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: 0.068em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-editorial);
  width: fit-content;
}
.category-card__link:hover { border-color: currentColor; }

@media (max-width: 859px) {
  .category-card__text { margin-top: 0.15rem; }
  .category-card__link { margin-top: 0.5rem; }
}

@media (min-width: 860px) {
  .categories { grid-template-columns: repeat(3, 1fr); }
  .category-card { height: 88vh; border-top: none; border-left: 1px solid var(--color-line-light); }
  .category-card:first-child { border-left: none; }
}

/* ------------------------------------------------------------------
   8. GALERÍA HORIZONTAL — carrusel manual, gigante, tipo Apple
   ------------------------------------------------------------------ */
.gallery {
  padding: var(--space-section) 0;
  background: var(--color-surface);
}
.gallery__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--space-gutter);
  margin-bottom: 2.5rem;
}
.gallery__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--color-white);
}
.gallery__hint {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-gray-400);
  animation: galleryHintNudge 2.6s ease-in-out 1.2s 2;
}
@keyframes galleryHintNudge {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(6px); opacity: 1; }
}

.gallery__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 var(--space-gutter);
}
.gallery__viewport::before,
.gallery__viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1rem;
  width: clamp(1.5rem, 5vw, 4rem);
  z-index: 2;
  pointer-events: none;
}
.gallery__viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--color-surface), transparent);
}
.gallery__viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--color-surface), transparent);
}

.gallery__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 0 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-400) transparent;
  cursor: grab;
}
.gallery__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery__item {
  position: relative;
  flex: 0 0 auto;
  height: min(76vh, 580px);
  scroll-snap-align: start;
  margin: 0;
  cursor: zoom-in;
}
.gallery__item img:not(.gallery__watermark) {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: grayscale(8%);
  transition: transform 1s var(--ease-editorial);
  -webkit-user-select: none;
  user-select: none;
}
.gallery__item:hover img:not(.gallery__watermark) { transform: scale(1.02); }

.gallery__arrow {
  flex-shrink: 0;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-line-dark);
  background: var(--color-surface);
  color: var(--color-white);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial);
}
.gallery__arrow:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gold);
  transform: scale(1.06);
}
.gallery__arrow svg { width: 18px; height: 18px; }

/* Mobile (< 760px): las flechas se muestran superpuestas sobre la
   imagen (position: absolute), no como elementos del flex row —
   así no le restan ancho a la foto en pantallas chicas. En
   escritorio siguen empujando el carrusel, sin cambios. */
@media (max-width: 759px) {
  .gallery__arrow {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 36px;
    height: 36px;
    background: rgba(10, 10, 10, 0.55);
    border-color: rgba(244, 242, 238, 0.35);
  }
  .gallery__arrow--prev { left: 0.5rem; }
  .gallery__arrow--next { right: 0.5rem; }
}

@media (min-width: 760px) {
  .gallery__arrow { display: flex; }
}
@media (min-width: 1024px) {
  .gallery__item { height: min(85vh, 820px); }
}

/* ------------------------------------------------------------------
   LIGHTBOX — ampliación a pantalla completa de la galería
   ------------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(6, 6, 6, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
  animation: fadeUp 260ms var(--ease-editorial) both;
}
.lightbox[hidden] { display: none; }
.lightbox__frame {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  max-height: 100%;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  display: block;
}
.gallery__watermark {
  position: absolute;
  right: 3%;
  bottom: 3%;
  width: 10%;
  max-width: 70px;
  min-width: 28px;
  height: auto;
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-line-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-editorial);
}
.lightbox__close:hover { background: var(--color-gray-100); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-line-dark);
  background: rgba(10, 10, 10, 0.5);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial);
}
.lightbox__arrow:hover { background: var(--color-gray-100); border-color: var(--color-gold); }
.lightbox__arrow svg { width: 20px; height: 20px; }
.lightbox__arrow--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__arrow--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* ------------------------------------------------------------------
   9. DETRÁS DE CADA IMAGEN + RESEÑAS
      Una sola franja de dos columnas: a la izquierda el fotógrafo
      y su enfoque de trabajo, a la derecha las opiniones reales de
      clientes en Google. Nada de bloques negros vacíos: siempre hay
      una foto o un elemento visual acompañando el texto.
   ------------------------------------------------------------------ */
.about-reviews {
  border-top: 1px solid var(--color-line-light);
  background: var(--color-black);
}
.about-reviews__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}
.about-reviews__col {
  padding: var(--space-section) var(--space-gutter);
}
.about-reviews__col--about {
  border-bottom: 1px solid var(--color-line-light);
}
.about-reviews__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.5rem;
}
.about-reviews__about-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.about__photo {
  width: clamp(160px, 32vw, 260px);
  flex-shrink: 0;
}
.about__photo img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 3 / 4.5;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(30%);
}
.about__text p {
  font-size: 1.041rem;
  line-height: 1.75;
  color: var(--color-gray-600);
}
.about__text p + p { margin-top: 0.9rem; }
.about__signature {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-white);
}

@media (max-width: 559px) {
  .about-reviews__about-body {
    align-items: center;
  }
  .about__photo {
    width: clamp(192px, 38.4vw, 312px);
    align-self: center;
    margin: 0 auto;
  }
  .about__text {
    width: 100%;
    align-self: stretch;
  }
  .about__signature {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    text-align: right;
  }
}

@media (min-width: 560px) {
  .about-reviews__about-body { flex-direction: row; align-items: flex-start; }
}
@media (min-width: 860px) {
  .about-reviews__inner { grid-template-columns: 1fr 1fr; }
  .about-reviews__col--about {
    border-bottom: none;
    border-right: 1px solid var(--color-line-light);
    padding-right: calc(var(--space-gutter) + 2.5rem);
  }
  .about-reviews__col--reviews {
    padding-left: calc(var(--space-gutter) + 2.5rem);
  }
}

/* ------------------------------------------------------------------
   10. GUÍA DE 15 — dos columnas: cover animado a la izquierda,
      contenido + checklist a la derecha.
   ------------------------------------------------------------------ */
.guide {
  position: relative;
  overflow: hidden;
  padding: var(--space-section) var(--space-gutter);
  background: var(--color-surface);
  border-top: 1px solid var(--color-line-light);
  border-bottom: 1px solid var(--color-line-light);
}
.guide__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 88%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 88%);
}
.guide__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) grayscale(30%) brightness(0.95);
  transform: scale(1.15);
}
@media (min-width: 780px) {
  .guide__backdrop { display: block; width: 72%; }
}
.guide__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.guide__visual { display: flex; justify-content: center; order: 2; }
.guide__content { text-align: left; order: 1; }
@media (min-width: 780px) {
  .guide__visual { order: 0; }
  .guide__content { order: 0; }
}
.guide__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.guide__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: clamp(2.1rem, 4.5vw, 2.9rem);
  color: var(--color-white);
  line-height: 1.1;
}
.guide__text {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-gray-600);
  line-height: 1.75;
  max-width: 46ch;
}
.guide__checklist {
  margin: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.guide__checklist li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  color: var(--color-ink);
  line-height: 1.5;
}
.guide__checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: -0.05em;
  color: var(--color-gold);
  font-weight: 700;
}
.guide__inner .btn { margin-top: 2rem; }

@media (min-width: 780px) {
  .guide__inner .btn { margin-top: 3.5rem; }
}

@media (max-width: 779px) {
  .guide__content { display: contents; }
  .guide__eyebrow,
  .guide__title,
  .guide__text,
  .guide__checklist { order: 1; }
  .guide__visual { order: 2; }
  .guide__inner .btn {
    order: 3;
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

.guide__mockup {
  width: min(260px, 62vw);
  perspective: 2200px;
  perspective-origin: 80% 0%;
}
.guide__mockup-frame {
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-black);
  border: 1px solid var(--color-line-dark);
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.65);
  transform-style: preserve-3d;
  transform-origin: bottom center;
  transform: rotateX(20deg) rotateY(-16deg);
  transition: transform var(--dur-slow) var(--ease-editorial);
}
.guide__mockup:hover .guide__mockup-frame,
.guide__mockup:focus-within .guide__mockup-frame {
  transform: rotateX(10deg) rotateY(-8deg);
}
@media (max-width: 779px) {
  .guide__mockup-frame { transform: rotateX(14deg) rotateY(-10deg); }
  .guide__visual { margin-bottom: 0.5rem; }
}
.guide__mockup-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 0.6rem;
  background: var(--color-gray-100);
}
.guide__mockup-bar span:not(.guide__mockup-url) {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gray-400);
  flex-shrink: 0;
}
.guide__mockup-url {
  margin-left: 0.4rem;
  font-size: 0.55rem;
  letter-spacing: 0.02em;
  color: var(--color-gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guide__mockup-viewport {
  height: 300px;
  overflow: hidden;
  position: relative;
}
.guide__mockup-viewport img {
  width: 100%;
  display: block;
  filter: grayscale(10%);
  animation: guideScroll 28s var(--ease-editorial) infinite alternate;
}
@keyframes guideScroll {
  0%   { transform: translateY(0); }
  8%   { transform: translateY(0); }
  92%  { transform: translateY(calc(-100% + 300px)); }
  100% { transform: translateY(calc(-100% + 300px)); }
}
@media (prefers-reduced-motion: reduce) {
  .guide__mockup-viewport img { animation: none; }
}

@media (min-width: 780px) {
  .guide__inner { grid-template-columns: 0.85fr 1fr; gap: 4rem; }
}

/* ------------------------------------------------------------------
   11. CTA FINAL — franja negra, sólo WhatsApp, nada más
   ------------------------------------------------------------------ */
.final-cta {
  position: relative;
  overflow: hidden;
  padding: var(--space-section) var(--space-gutter);
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
}
.final-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.final-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(25%);
  opacity: 0.78;
}
.final-cta__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(10,10,10,0.85) 0%,
    rgba(10,10,10,0.62) 55%,
    rgba(10,10,10,0.45) 100%
  );
}
.final-cta__inner {
  position: relative;
  z-index: 2;
}
.final-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.05;
}
.final-cta__text {
  margin-top: 1rem;
  color: rgba(244, 242, 238, 0.8);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.4rem;
}
.final-cta__inner .btn { margin-top: 2.4rem; }

/* ------------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------------ */
.site-footer {
  background: var(--color-black);
  color: rgba(244, 242, 238, 0.6);
  padding: 2.5rem var(--space-gutter);
  border-top: 1px solid var(--color-line-dark);
}
.site-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}
.site-footer__mark {
  width: 40%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.site-footer nav { display: flex; gap: 1.5rem; }
.site-footer nav a:hover { color: var(--color-white); }

.site-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 1.4rem;
}
.site-footer__social a {
  width: auto;
  height: auto;
  border: none;
  background: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial);
}
.site-footer__social a:hover {
  opacity: 1;
  transform: translateY(-2px);
  background: none;
  border: none;
  color: var(--color-white);
}
.site-footer__social svg { width: 48px; height: 48px; }

@media (min-width: 720px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: left;
  }
  .site-footer__mark { width: 20%; justify-self: start; margin: 0; }
  .site-footer__social { justify-self: center; }
  .site-footer__legal { justify-self: end; text-align: right; }
}

/* ------------------------------------------------------------------
   14. RESEÑAS — carrusel de opiniones reales de Google, con
      controles manuales, autoplay pausable y respeto de
      prefers-reduced-motion. Vive dentro de .about-reviews.
   ------------------------------------------------------------------ */
.reviews__summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  width: fit-content;
  transition: opacity var(--dur-fast) var(--ease-editorial);
}
.reviews__summary:hover { opacity: 0.8; }
.reviews__stars {
  color: var(--color-gold);
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.reviews__summary-text {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--color-gray-400);
}

.reviews__carousel {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.reviews__track {
  flex: 1;
  min-width: 0;
  position: relative;
  min-height: 220px;
  padding: 0.5rem 0;
}
.review-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-editorial),
              transform var(--dur-slow) var(--ease-editorial);
}
.review-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}
.review-card__quote-mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.5;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}
.review-card__quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 46ch;
}
.review-card__stars {
  margin-top: 1.25rem;
  color: var(--color-gold);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
}
.review-card__author {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--color-gray-400);
}
.review-card__tag {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-gray-400);
  opacity: 0.75;
}

.reviews__arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-line-dark);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial);
}
.reviews__arrow:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gold);
}
.reviews__arrow svg { width: 18px; height: 18px; }

.reviews__dots {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.5rem;
}
.reviews__dot {
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: var(--color-line-dark);
  transition: background var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial);
}
.reviews__dot.is-active {
  background: var(--color-gold);
  transform: scale(1.4);
}

/* ------------------------------------------------------------------
   13. ANIMACIONES DE REVELADO (Intersection Observer)
      Fade + desplazamiento de 20px al entrar en pantalla.
   ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-editorial),
              transform var(--dur-slow) var(--ease-editorial);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}