/* ===================================================================
   OIKO — página "en desarrollo"

   TODA la maquetación cuelga de UNA sola variable: --w (el ancho del
   bloque de fotos). Cada medida es un porcentaje de --w, sacado
   midiendo el original del cliente (unnamed_1.jpg, 1692×1264 px) con
   detección de bordes, no a ojo. Referencia medida:

     bloque de fotos ......... x 202→794  (ancho 593)
                               y 308→1047 (alto  740)  = 4:5 por foto
     hueco entre columnas .... 3 px
     columna de texto ........ empieza en x 847
     logo / icono ............ 125,5 px de ancho los dos
     línea (hr) .............. y 539,5 — llega hasta el final del texto
     bases de línea .......... h1 605 · p1 685 · p2 721 · contacto 769

   Al ser todo proporción de --w, el diseño se mantiene calcado a
   cualquier tamaño de pantalla.
   =================================================================== */

/* Tipografía de marca que mandó el cliente. El logotipo "oiko" NO es
   texto (es un PNG), así que Fraunces solo se aplica a título, párrafos
   y contacto. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces144ptSoft-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces144ptSoft-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces144ptSoft-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces144ptSoft-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-text: #14110f;
  --color-muted: #6b6b6b;
  --color-line: #14110f;

  /* --w = ancho del bloque de fotos. El alto sale solo (1,249 × --w).
     38vw: el conjunto completo mide 2,306 × --w de ancho.
     70vh: para que el bloque (más alto que ancho) no se corte en
     ventanas anchas pero bajas. */
  --w: clamp(264px, min(38vw, 70vh), 640px);

  /* hueco de la rejilla de fotos: 3 px sobre 593 en el original */
  --gap: calc(var(--w) * 0.00506);

  font-family: "Fraunces", "Georgia", "Iowan Old Style", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}

.wrap {
  display: flex;
  align-items: flex-start;
  /* separación fotos → texto: 53 px sobre 593 */
  gap: calc(var(--w) * 0.08938);
  min-width: 0;
}

/* ---------- Collage de 4 fotos ----------
   CLAVE: cada foto es 4:5 (700×875 px, tal cual las mandó el cliente),
   NO cuadrada. Esto era lo que descuadraba todo lo demás: al forzar el
   cuadrado, las fotos se recortaban y el bloque quedaba 20% más bajo
   de la cuenta, así que ninguna alineación vertical podía cuadrar. */

.photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  width: var(--w);
  flex-shrink: 0;
}

.photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* ---------- Columna de marca + texto ----------
   width: max-content → la columna mide exactamente lo que mide la línea
   más larga ("En Septiembre 2026..."), que es lo que hace que la línea
   horizontal termine justo donde termina el texto, como en el original. */

.info {
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

/* logo e icono miden lo mismo de ancho (125,5 px sobre 593).
   El margen negativo compensa el borde transparente del PNG, para que
   el trazo del logo empiece exactamente en el borde superior de las
   fotos, no 1 px más abajo. */
.logo {
  display: block;
  width: calc(var(--w) * 0.21231);
  height: auto;
  margin-top: calc(var(--w) * -0.00123);
}

.icon {
  display: block;
  width: calc(var(--w) * 0.21231);
  height: calc(var(--w) * 0.21231);
  margin-top: calc(var(--w) * 0.02587);
}

hr {
  border: none;
  border-top: max(1px, calc(var(--w) * 0.0025)) solid var(--color-line);
  margin: calc(var(--w) * 0.06020) 0 0;
}

h1 {
  font-size: calc(var(--w) * 0.05456);
  font-weight: 600;
  line-height: 1.2;
  margin: calc(var(--w) * 0.05597) 0 0;
}

p {
  font-size: calc(var(--w) * 0.05091);
  font-weight: 400;
  /* interlineado del original: 35,7 px con cuerpo 30,2 */
  line-height: 1.1826;
  color: var(--color-text);
  /* con este margen, la primera línea ("En Septiembre 2026...") cae
     centrada sobre la juntura entre las fotos de arriba y las de abajo,
     que es exactamente donde la sitúa el cliente en su original */
  margin: calc(var(--w) * 0.07339) 0 0;
}

.contact {
  margin-top: calc(var(--w) * 0.02125);
  /* números de altura uniforme: si no, el teléfono sale "ondulado" */
  font-variant-numeric: lining-nums;
}

/* sin subrayado, como en el diseño del cliente; el subrayado aparece
   solo al pasar por encima o al llegar con el tabulador */
.contact a {
  color: var(--color-text);
  text-decoration: none;
}

.contact a:hover,
.contact a:focus-visible {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.contact .sep {
  margin: 0 calc(var(--w) * 0.00843);
  color: var(--color-muted);
}

/* ---------- Móvil ----------
   Aquí el texto ya no puede ir a su ancho natural (no cabe), así que
   se apila y se usan tamaños propios. */
@media (max-width: 700px) {
  :root { --w: min(86vw, 380px); }

  body { padding: 8vh 7vw; }

  .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--w) * 0.09);
  }

  .info { width: 100%; }

  .logo  { width: calc(var(--w) * 0.30); margin-top: 0; }
  .icon  { width: calc(var(--w) * 0.30); height: calc(var(--w) * 0.30); }

  hr { margin-top: calc(var(--w) * 0.075); }

  h1 { font-size: clamp(20px, 6.4vw, 26px); margin-top: calc(var(--w) * 0.07); }
  p  { font-size: clamp(15px, 4.6vw, 18px); line-height: 1.35; margin-top: calc(var(--w) * 0.05); }
  .contact { margin-top: calc(var(--w) * 0.04); }
}