/* =========================================================
   Inicio. Medidas del Figma 01 - Home:
   mobile (frame de 390) primero, desktop (frame de 1440) desde 64rem.
   ========================================================= */

/* ---------- Hero ---------- */
/* Registrada para que el oscurecido pase suave de la foto al video */
@property --hero-overlay-soft {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.2;
}

.hero {
  --hero-overlay-soft: 0.2;   /* AJUSTAR: oscuridad del lado derecho (0 = nada, 1 = negro) */
  --hero-overlay-strong: 0.8; /* AJUSTAR: oscuridad del lado izquierdo, detrás del texto */
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;              /* Mauro: alto completo de la pantalla */
  height: 100svh;             /* mobile: no queda tapado por la barra del navegador */
  overflow: hidden;
  background-color: var(--color-black);
  color: var(--color-off-white);
}

.hero__media,
.hero__overlay,
.hero__placeholder,
.hero__full {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder estirado y desenfocado hasta que llega la foto real */
.hero__placeholder img {
  filter: blur(16px);
  transform: scale(1.08);
}

.hero__full {
  opacity: 0;
  transition: opacity 600ms var(--ease-out); /* AJUSTAR: duración del crossfade */
}

.hero.is-loaded .hero__full,
.hero__full--static {
  opacity: 1;
}

/* Video (js/hero.js): invisible hasta que arranca, encima de la foto */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 600ms var(--ease-out); /* AJUSTAR: duración del crossfade */
}

/* Con el video el lado derecho se oscurece más que en el Figma (0,2): medido en los 600
   cuadros del video para que el texto dorado cumpla WCAG AA (docs/progress.md).
   Desktop tiene su propio valor más abajo. La foto de respaldo queda con el valor del Figma. */
.hero.is-video {
  --hero-overlay-soft: 0.74;  /* AJUSTAR: oscuridad del lado derecho con video en mobile */
}

.hero.is-video .hero__video {
  opacity: 1;
}

.hero {
  transition: --hero-overlay-soft 600ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero__full {
    transition: none;
  }
}

/* Figma: degradé de rgba(30, 24, 20) más oscuro a la izquierda */
.hero__overlay {
  background: linear-gradient(
    to left,
    rgb(30 24 20 / var(--hero-overlay-soft)) 51.167%,
    rgb(30 24 20 / var(--hero-overlay-strong)) 86.076%
  );
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-block: 50px;
}

.hero__title {
  font-size: 2.625rem;    /* 42px (Figma 48, achicado en mobile) */
  line-height: 3.125rem;  /* 50px */
}

.hero__tagline {
  font-family: var(--font-title);
  font-size: 1.375rem;    /* 22px (Figma 24, achicado en mobile) */
  line-height: 2.25rem;   /* 36px */
  color: var(--color-gold);
}

.hero__text {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-white);
}

.hero__cta {
  width: 172px;
}

/* ---------- Trabajos destacados ---------- */
.featured {
  padding-block: 40px;
  background-color: var(--color-off-white);
}

.featured__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.featured__eyebrow {
  font-family: var(--font-title);
  font-size: 1.5rem;      /* 24px (Figma 28, achicado en mobile) */
  line-height: 2.125rem;  /* 34px */
  color: var(--color-light-blue);
}

.featured__title {
  font-size: 2.375rem;    /* 38px (Figma 44, achicado en mobile) */
  line-height: 2.75rem;   /* 44px */
  color: var(--color-blue);
}

.featured__carousel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.featured__track {
  gap: 16px;
}

.featured__item {
  height: 500px;
}

.featured__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El Figma mobile no muestra "VER GALERIA". Se muestra igual para que mobile
   tenga el mismo contenido y enlaces que desktop (docs/seo.md, pedido de Mauro) */
.featured__more {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  text-align: right;
  color: var(--color-light-blue);
}

/* ---------- Servicios ---------- */
.services {
  background-color: #f7f7f7; /* Figma: fondo de la sección (no figura en 00 - Styles) */
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  height: 400px;
  padding: 60px;
  overflow: hidden;
  color: var(--color-off-white);
}

/* Oscurecido del Figma: negro al 30% */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(0 0 0 / 0.3); /* AJUSTAR: oscuridad sobre la foto */
}

.service-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

.service-card:hover .service-card__img {
  transform: scale(1.03);
}

.service-card__title {
  font-size: 2.75rem;     /* 44px (Figma 52, achicado en mobile) */
  line-height: 3.125rem;  /* 50px */
}

.service-card__text {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
}

.service-card__link {
  font-size: var(--text-button);
  font-weight: 700;
  line-height: var(--leading-button);
  color: var(--color-gold);
}

/* Toda la tarjeta es clickeable */
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- Barra de confianza ---------- */
.trust {
  background-color: var(--color-off-white);
}

.trust__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 20px;
  border-bottom: 1px solid var(--color-light-blue);
}

.trust__item:last-child {
  border-bottom: 0;
}

.trust__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 100px;
  height: 100px;
}

/* Figma: Inter SemiBold 24, interlineado 28 */
.trust__label {
  width: 180px;
  font-size: 1.5rem;      /* 24px */
  font-weight: 600;
  line-height: 1.75rem;   /* 28px */
  color: var(--color-light-blue);
}

/* ---------- Nuestro estudio ---------- */
.studio {
  padding-block: 50px;
  background-color: var(--color-black);
  color: var(--color-off-white);
}

.studio__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.studio__media {
  height: 400px;
}

.studio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.studio__eyebrow {
  font-family: var(--font-title);
  font-size: 1.5rem;      /* 24px (Figma 28, achicado en mobile) */
  line-height: 2.25rem;   /* 36px */
  color: var(--color-gold);
}

.studio__title {
  font-size: 2.375rem;    /* 38px (Figma 44, achicado en mobile) */
  line-height: 2.75rem;   /* 44px */
}

.studio__text {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
}

/* Mobile: más aire entre el texto y el botón (pedido de Mauro). Total = 10 del gap + este valor */
.studio__cta {
  margin-top: 30px; /* AJUSTAR: más alto, más separado del texto */
}

/* ---------- Preguntas frecuentes ---------- */
.faq {
  padding-block: 50px;
  background-color: var(--color-off-white);
}

.faq__title {
  font-size: 2.125rem;    /* 34px (Figma 40, achicado en mobile) */
  line-height: 2.375rem;  /* 38px */
  color: var(--color-blue);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 20px;
}

.faq__item {
  padding: 10px 20px;
  border-bottom: 1px solid var(--color-light-blue);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question h3 {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: var(--leading-body-lg);
  color: var(--color-black);
}

.faq__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-blue);
  transition: transform var(--duration-faq) var(--ease-in-out);
}

/* Abierta: el "+" gira y queda como "×". Al cerrar (js/faq.js) vuelve enseguida. */
.faq__item[open]:not(.is-closing) .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 12px 10px 10px 30px; /* AJUSTAR: arriba = espacio con la pregunta, izquierda = sangría */
  font-size: 1rem;              /* 16px (la pregunta va en 20) */
  line-height: 1.5rem;          /* 24px */
}

/* ---------- Reseñas ---------- */
.reviews {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 40px;
  background-color: var(--color-off-white);
}

.reviews__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mobile: logo completo (marca-de-agua-resenas-mobile.webp), con el alto justo de la sección:
     toca arriba y abajo, y a los costados se corta (pedido de Mauro).
     Con contain entra entero a lo ancho, pero queda chico y la tarjeta lo tapa casi todo. */
  object-position: center;
}

.reviews__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.reviews__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reviews__eyebrow {
  font-family: var(--font-title);
  font-size: 1.5rem;      /* 24px (Figma 28, achicado en mobile) */
  line-height: 2.25rem;   /* 36px */
  color: var(--color-light-blue);
}

.reviews__title {
  font-size: 2.375rem;    /* 38px (Figma 44, achicado en mobile) */
  line-height: 2.75rem;   /* 44px */
  color: var(--color-blue);
}

/* Mobile: tarjeta arriba, flechas abajo centradas (Figma: separadas 50) */
.reviews__carousel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 50px;
  row-gap: 18px;
}

.reviews__track {
  order: 1;
  width: 100%;
  gap: 18px;
}

.reviews__prev {
  order: 2;
}

.reviews__next {
  order: 3;
}

/* La tarjeta entera abre la reseña: el link del nombre se estira sobre toda la tarjeta
   (.review-card__link::after) y el botón "Ver más" queda por encima. */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 40px 30px;
  border-radius: 10px;
  background-color: var(--color-white);
  color: var(--color-blue);
  text-align: center;
  text-decoration: none;
}

/* Figma: New Rocker 30, interlineado 42 */
.review-card__stars {
  font-family: var(--font-nav);
  font-size: 1.875rem;    /* 30px */
  line-height: 2.625rem;  /* 42px */
  color: var(--color-gold);
}

/* Mobile: 10% más chico que el Figma (20/28), pedido de Mauro */
.review-card__text {
  --review-lines: 5;        /* AJUSTAR: líneas visibles antes del "Ver más" (mobile) */
  overflow: hidden;
  font-size: 1rem;      /* 18px */
  line-height: 1.575rem;    /* 25,2px */
  transition: height var(--duration-review) var(--ease-in-out);
}

/* Recortada con "..." al final. La pone js/reviews.js solo en mobile (sin JS se ve entera). */
.review-card__text.is-clamped p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--review-lines);
  line-clamp: var(--review-lines);
  overflow: hidden;
}

/* "Ver más" / "Ver menos" (no está en el Figma): texto en el azul de la tarjeta, subrayado */
.review-card__more {
  position: relative;
  z-index: 1;
  min-height: 44px;
  margin-block: -12px;      /* el área táctil de 44 no agranda la tarjeta */
  padding-inline: 8px;
  font-size: var(--text-button);
  font-weight: 700;
  line-height: var(--leading-button);
  /* text-decoration: underline; */
  text-underline-offset: 4px;
  color: inherit;
}

.review-card__more[hidden] {
  display: none;
}

/* Figma: Cormorant Garamond Bold 32, interlineado 42 */
.review-card__name {
  font-family: var(--font-title);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-h3);
}

.review-card__link {
  color: inherit;
  text-decoration: none;
}

.review-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* El foco se dibuja alrededor de toda la tarjeta */
.review-card__link:focus-visible {
  outline: none;
}

.review-card__link:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* =========================================================
   Desktop (frame de 1440)
   ========================================================= */
@media (min-width: 64rem) {
  /* Hero */
  .hero.is-video {
    --hero-overlay-soft: 0.63; /* AJUSTAR: oscuridad del lado derecho con video en desktop */
  }

  .hero__content {
    padding-block: 0;
  }

  .hero__content > * {
    max-width: 680px;     /* Figma: bloque de texto de 680 */
  }

  .hero__title {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
  }

  .hero__tagline {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  /* Trabajos destacados: grilla de 3 */
  .featured {
    padding-block: 90px;
  }

  .featured__eyebrow {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  .featured__title {
    font-size: 4.0625rem; /* 65px */
    line-height: 4.875rem; /* 78px */
  }

  .featured__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    overflow: visible;
  }

  .featured__dots {
    display: none;
  }

  .featured__carousel {
    gap: 0;
  }

  /* Servicios: dos tarjetas lado a lado */
  .services__list {
    flex-direction: row;
  }

  .service-card {
    flex: 1;
    height: 600px;
  }

  .service-card__title {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }

  /* Barra de confianza: 4 columnas */
  .trust {
    padding-block: 70px;
  }

  .trust__list {
    flex-direction: row;
  }

  .trust__item {
    flex: 1;
    flex-direction: column;
    padding-block: 0;
    border-bottom: 0;
  }

  .trust__label {
    width: auto;
    text-align: center;
  }

  /* Nuestro estudio: foto 700 + texto 440, separados 60 */
  .studio {
    padding-block: 60px;
  }

  .studio__inner {
    display: grid;
    grid-template-columns: 700fr 440fr;
    grid-template-rows: minmax(0, 1fr); /* la foto no estira la fila */
    gap: 60px;
    height: 600px;
  }

  .studio__media {
    height: 100%;
    min-height: 0;
  }

  .studio__media img {
    object-position: center 64%;
  }

  .studio__content {
    justify-content: center;
    gap: 24px;
  }

  .studio__eyebrow {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  .studio__title {
    font-size: 3.75rem;   /* 60px */
    line-height: 4.375rem; /* 70px */
  }

  .studio__cta {
    margin-top: 0;
  }

  /* Preguntas frecuentes */
  .faq__title {
    padding-block: 30px;
    font-size: 2.5rem;      /* 40px */
    line-height: 2.625rem;  /* 42px */
  }

  /* Reseñas: flecha, tarjeta de 900, flecha */
  .reviews {
    padding-block: 80px;
  }

  .reviews__bg {
    object-position: center;
  }

  .reviews__eyebrow {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  .reviews__title {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }

  .reviews__carousel {
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 18px;
  }

  .reviews__prev {
    order: 1;
  }

  .reviews__track {
    order: 2;
    width: auto;
    flex: 0 1 900px;
    min-width: 0;
  }

  .reviews__next {
    order: 3;
  }

  /* Desktop: texto del Figma, entero (sin "Ver más") */
  .review-card__text {
    font-size: var(--text-body-lg);
    line-height: var(--leading-body-lg);
  }
}