/* =========================================================
   Nosotros. Medidas del Figma 04 - Nosotros:
   mobile (nosotros-mobile, 390) primero, desktop (nosotros-desktop, 1440) desde 64rem.
   Títulos de mobile con la misma escala achicada que el Inicio (ver "achicado en mobile").
   La sección Reseñas es una copia de css/home.css (mismo estilo que el Inicio, pedido de Mauro).
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
  --hero-overlay: 0.7;        /* AJUSTAR: oscuridad sobre la foto (Figma: negro al 70%) */
  --hero-title-min-gap: 20px; /* AJUSTAR: mobile, distancia mínima del header al título (pantallas bajas: parecido al Inicio) */
  position: relative;
  /* Mobile: centrado con dos espaciadores iguales (::before y ::after), pero el de arriba
     nunca baja del piso. Si no entra, el hero crece en vez de cortar el botón. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  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;
  object-position: 40% center; /* AJUSTAR: encuadre mobile del Figma (0% = borde izquierdo de la foto, 100% = derecho) */
}

/* 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;
}

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

.hero__overlay {
  background-color: rgb(0 0 0 / var(--hero-overlay));
}

.hero::before,
.hero::after {
  content: "";
  flex: 1 1 0;
}

.hero::before {
  min-height: calc(var(--header-height) + var(--hero-title-min-gap) - 50px); /* 50 = padding de .hero__content */
}

.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__text {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-white);
}

.hero__cta {
  width: 172px;
}

/* ---------- Un espacio para sentirte parte ---------- */
/* Los tres puntitos del Figma no van: es una sola foto, no un carrusel (pedido de Mauro) */
.space {
  padding-bottom: 30px;
  background-color: var(--color-off-white);
}

.space__header {
  display: flex;
  flex-direction: column;
  padding-block: 50px;
}

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

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

/* Mobile: la foto va de borde a borde (Figma: 390 x 400, 30 px debajo del texto) */
.space__media {
  margin-top: -20px;      /* 50 del texto - 20 = 30 del Figma */
}

.space__media img {
  width: 100%;
  height: 400px;          /* AJUSTAR: alto de la foto en mobile */
  object-fit: cover;
}

/* ---------- Un poco de nuestra vida (carrusel de fotos, js/photo-carousel.js) ---------- */
.life {
  padding-block: 30px;
  background-color: var(--color-black);
  color: var(--color-off-white);
}

.life__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

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

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

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

/* Pista con scroll horizontal y snap: se mueve con el dedo, el trackpad o las flechas. Sin autoplay. */
.life__track {
  --life-gap: 16px;       /* AJUSTAR: separación entre fotos (Figma: 16) */
  position: relative;     /* referencia de offsetLeft para js/photo-carousel.js */
  display: flex;
  gap: var(--life-gap);
  padding-block: 10px;    /* lugar para el contorno de foco */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.life__track::-webkit-scrollbar {
  display: none;
}

/* Mobile: una foto del ancho del contenido (310 en el frame de 390), 400 de alto */
.life__item {
  flex: 0 0 min(100%, 400px);
  height: 400px;          /* AJUSTAR: alto de las fotos en mobile */
  scroll-snap-align: start;
}

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

/* Flechas doradas (Figma: Inter 20, separadas 20 en mobile y 100 en desktop).
   En SVG porque el Inter autoalojado no trae ← ni →. Botones de 44 para que sean cómodos al tacto. */
.life__arrows {
  display: flex;
  justify-content: center;
  gap: 0;                 /* mobile: con botones de 44 los centros quedan a 44 (Figma: 40) */
  padding-block: 12px;    /* 20 del Figma menos lo que suma el botón */
}

.life__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--color-gold);
  transition: opacity var(--duration-base) var(--ease-out);
}

.life__arrow svg {
  width: 20px;            /* AJUSTAR: tamaño de las flechas */
  height: 20px;
}

/* En la primera y en la última foto la flecha queda apagada (no da la vuelta) */
.life__arrow[aria-disabled="true"] {
  opacity: 0.3;           /* AJUSTAR: qué tan apagada se ve */
  cursor: default;
}

@media (hover: hover) {
  .life__arrow:not([aria-disabled="true"]):hover {
    color: var(--color-off-white);
  }
}

/* Sin JS las flechas no funcionan: se ocultan y la pista se desliza a mano */
@media (scripting: none) {
  .life__arrows {
    display: none;
  }
}

/* Copia de css/home.css (sección Reseñas), sin cambios */
/* ---------- 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: desktop queda como antes, centrado en el alto de la pantalla, sin piso */
  .hero {
    flex-direction: row;
    align-items: center;
    height: 100vh;
    height: 100svh;
  }

  .hero::before,
  .hero::after {
    content: none;
  }

  .hero__media img {
    object-position: left 67%; /* AJUSTAR: encuadre desktop del Figma */
  }

  .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);
  }

  /* Un espacio para sentirte parte: texto y foto de 1200 x 500 */
  .space {
    padding-block: 70px;
  }

  .space__inner {
    width: min(var(--container-width), 100% - 2 * var(--section-gutter));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .space__header {
    width: 100%;          /* ya está dentro de .space__inner, que tiene el ancho del contenido */
    gap: 10px;
    padding-block: 0;
  }

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

  .space__media {
    margin-top: 0;
  }

  .space__media img {
    height: 500px;        /* AJUSTAR: alto de la foto en desktop */
  }

  /* Un poco de nuestra vida: la fila de fotos va de borde a borde (Figma: 400 x 380) */
  .life {
    padding-block: 70px;
  }

  .life__inner {
    width: 100%;
  }

  .life__header {
    width: min(var(--container-width), 100% - 2 * var(--section-gutter));
    margin-inline: auto;
  }

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

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

  .life__break {
    display: none;        /* desktop: en una línea (mobile: cortes del Figma) */
  }

  .life__item {
    flex-basis: 400px;
    height: 380px;        /* AJUSTAR: alto de las fotos en desktop */
  }

  .life__arrows {
    gap: 76px;            /* 100 del Figma entre flechas, menos lo que suman los botones de 44 */
    padding-block: 0;
  }

  /* Copia de css/home.css (Reseñas desktop), sin cambios */
  /* 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);
  }
}