/* GENERADO por herramientas/construir.py desde paginas/el-hotel. No editar aca. */

/* ---- estilos.css ---- */
/* ============================================================
   EL HOTEL
   Solo lo que es unico de esta pagina. La portada, la cinta, la
   composicion de fotos y el cierre son componentes de global/.
============================================================ */

/* Este archivo solo carga en El Hotel: la escala de titulos vale para toda la pagina */
body { --titulo-seccion-tamano: clamp(2.4rem, 4vw, 3.4rem); }


/* ------------------------------------------------------------
   02 · LA ESENCIA FAMILIAR
------------------------------------------------------------ */
.seccion-esencia { padding: 4.5rem 0; overflow: hidden; background: var(--color-blanco); }
.seccion-esencia__grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.seccion-esencia__foto {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  max-height: 500px;
}
.seccion-esencia__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.seccion-esencia__foto:hover img { transform: scale(1.03); }
.seccion-esencia__texto {
  display: flex;
  align-items: center;
  padding: 1.5rem 5vw 1.5rem 5rem;
}
.seccion-esencia__interior { --titulo-seccion-margen: 2rem; max-width: 540px; }
.seccion-esencia__interior p:not(.sobretitulo) {
  margin-bottom: 1.3rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-texto-suave);
}
.seccion-esencia__interior p:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------
   04 · NUESTRO EQUIPO
   El mosaico: una foto grande y cuatro chicas en una grilla de 2 x 2.
------------------------------------------------------------ */
.seccion-equipo {
  padding: 7rem 0 7.5rem;
  background: var(--color-fondo-claro);
  border-top: 1px solid rgba(115, 32, 86, 0.12);
}
.seccion-equipo__encabezado { --titulo-seccion-margen: 1.2rem; max-width: 720px; margin-bottom: 4rem; }
.seccion-equipo__bajada {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--color-texto-suave);
}
.mosaico {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.5rem;
  height: clamp(480px, 38vw, 550px);
}
.mosaico__grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5rem;
  min-height: 0;
}
.mosaico__principal,
.mosaico__foto {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--color-blanco);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.mosaico__principal { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.07); }
.mosaico__principal img,
.mosaico__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mosaico__principal:hover img { transform: scale(1.04); }
.mosaico__foto:hover img { transform: scale(1.06); }


/* ------------------------------------------------------------
   05 · NUESTRA FORMA DE SER
   Bloque ciruela con tres pilares separados por lineas finas.
------------------------------------------------------------ */
.seccion-forma {
  position: relative;
  overflow: hidden;
  padding: 7.5rem 0;
  color: var(--color-blanco);
  background: linear-gradient(135deg, var(--color-vino-profundo) 0%, #50133C 55%, var(--color-vino) 100%);
}
.seccion-forma::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(18, 20, 24, 0.4) 100%);
  pointer-events: none;
}
.seccion-forma__interior { position: relative; z-index: 2; }
.seccion-forma__titulo {
  --titulo-seccion-tamano: clamp(2.4rem, 4.4vw, 3.8rem);
  max-width: 820px;
  margin: 0 auto 5rem;
  line-height: 1.15;
  text-align: center;
}
.seccion-forma__pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
}
.pilar { position: relative; display: flex; flex-direction: column; }
.pilar:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -1.75rem;
  width: 1px;
  height: 80%;
  background: rgba(255, 255, 255, 0.16);
}
.pilar__icono {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  color: var(--color-malva);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}
.pilar__icono .icono { width: 20px; height: 20px; }
.pilar__titulo {
  margin-bottom: 0.9rem;
  font-family: var(--fuente-titulos);
  font-size: 1.75rem;
  font-weight: 300;
  font-style: italic;
}
.pilar__texto {
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}


/* ------------------------------------------------------------
   06 · MENDOZA EN NUESTRA CASA
------------------------------------------------------------ */
.seccion-mendoza { padding: 7.5rem 0; background: var(--color-blanco); }
.seccion-mendoza__grilla {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 5.5rem;
  align-items: center;
}
.seccion-mendoza__texto { --titulo-seccion-margen: 1.8rem; display: flex; flex-direction: column; }
.seccion-mendoza__texto p:not(.sobretitulo) {
  margin-bottom: 1.3rem;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-texto-suave);
}
.seccion-mendoza__enlaces {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 1.6rem;
}


/* ------------------------------------------------------------
   TABLETA Y CELULAR
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .seccion-esencia__grilla { grid-template-columns: 1fr; }
  /* La maqueta intenta achicarla a 380 y 300, pero su alto minimo le gana: queda en 440 y se ve mejor */
  .seccion-esencia__foto { height: 440px; max-height: none; }
  .seccion-esencia__texto { padding: 4rem 2rem; }
  .seccion-esencia__interior { max-width: 100%; }

  .mosaico { grid-template-columns: 1fr; height: auto; }
  .mosaico__principal { height: 380px; }
  .mosaico__grilla { grid-template-rows: auto; gap: 1.2rem; }
  .mosaico__foto { aspect-ratio: 4 / 3; }

  .seccion-forma__pilares { grid-template-columns: 1fr; gap: 3rem; }
  .pilar:not(:last-child)::after { display: none; }

  .seccion-mendoza__grilla { grid-template-columns: 1fr; gap: 3.5rem; }
}

@media (max-width: 768px) {
  .seccion-esencia { padding: 3rem 0; }
  .seccion-esencia__texto { padding: 2.5rem 1.5rem 0.5rem; }

  .seccion-equipo,
  .seccion-forma,
  .seccion-mendoza { padding: 5rem 0; }
  .mosaico__principal { height: 280px; }
  .mosaico__grilla { gap: 0.85rem; }
}