/* ============================================================
   JENGIEXPOR S.A. — hoja de estilos única
   Minimalismo editorial: una columna, mucho aire, tipografía grande.
   Sin dependencias externas. La serif se sirve desde /fuentes/.
   ============================================================ */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;          /* fuente variable: un solo fichero */
  font-display: swap;
  src: url('/fuentes/ebgaramond-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* La balsa es madera pálida: el fondo la evoca. */
  --hueso:      #F6F2E9;
  --hueso-hondo:#EDE7DA;
  --verde:      #1E3A2F;   /* texto principal y detalles */
  --verde-medio:#42564B;   /* texto secundario */
  --madera:     #8B5D25;   /* acento calido. Elegido por contraste: 5.09:1 sobre
                            el fondo hueso y 4.62:1 sobre el hueso hondo, los dos
                            por encima del 4.5 que pide WCAG AA para texto normal. */
  --linea:      #D8CFBC;

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ancho: 43rem;          /* columna de lectura */
  --aire: clamp(4.5rem, 11vw, 9rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--verde);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Solo un desvanecido suave al cargar, y nada si el sistema pide calma. */
@media (prefers-reduced-motion: no-preference) {
  body { animation: aparecer .5s ease-out both; }
  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--verde); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--madera); }
:focus-visible { outline: 2px solid var(--madera); outline-offset: 3px; }

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--verde); color: var(--hueso);
  padding: .7rem 1.2rem; z-index: 10;
}
.saltar:focus { left: 0; }

.envoltorio { max-width: var(--ancho); margin-inline: auto; padding-inline: 1.5rem; }

/* ---------- Cabecera y selector de idioma ---------- */
.cabecera {
  border-bottom: 1px solid var(--linea);
}
.cabecera .envoltorio {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding-block: 1.1rem;
}
.marca {
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--verde-medio); text-decoration: none; font-weight: 500;
}
.idiomas { display: flex; gap: .55rem; align-items: center; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; }
.idiomas a { color: var(--verde-medio); text-decoration: none; padding: .2rem .1rem; }
.idiomas a:hover { color: var(--madera); }
.idiomas [aria-current="true"] { color: var(--verde); font-weight: 600;
  border-bottom: 1px solid var(--madera); }
.idiomas .sep { color: var(--linea); }

/* ---------- Hero ---------- */
.hero { padding-block: calc(var(--aire) * 1.15) var(--aire); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.1rem, 11vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0 0 1.6rem;
}
.hero .descriptor {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--verde-medio);
  margin: 0 0 .9rem;
  font-style: italic;
}
.hero .lugar {
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--verde-medio); margin: 0;
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--aire); border-top: 1px solid var(--linea); }
.rotulo {
  font-size: .74rem; letter-spacing: .21em; text-transform: uppercase;
  color: var(--madera); margin: 0 0 1.6rem; font-weight: 600;
}
.seccion h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.1rem, 5.5vw, 3.1rem);
  line-height: 1.12; letter-spacing: -.01em;
  margin: 0 0 1.5rem;
}
.seccion h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--verde-medio);
  margin: 2.6rem 0 .9rem;
}
.seccion p { margin: 0 0 1.25rem; max-width: 38rem; }
.seccion p:last-child { margin-bottom: 0; }

/* ---------- El nombre: la sección firma ---------- */
.nombre {
  background: var(--hueso-hondo);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding-block: calc(var(--aire) * 1.2);
}
.nombre .relato {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.2vw, 2.15rem);
  line-height: 1.42;
  margin: 0;
  max-width: 34rem;
}
.nombre .relato span { display: block; }
.nombre .relato span + span { margin-top: 1.1rem; }
.nombre .cierre { color: var(--madera); font-style: italic; }

/* ---------- Fichas de datos ---------- */
.datos { margin: 0; border-top: 1px solid var(--linea); }
.datos div {
  display: grid; grid-template-columns: 12rem 1fr; gap: .4rem 1.5rem;
  padding-block: .95rem; border-bottom: 1px solid var(--linea);
}
.datos dt {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde-medio); font-weight: 600;
}
.datos dd { margin: 0; }
.pendiente { color: var(--verde-medio); font-style: italic; }

figure { margin: 2.6rem 0 0; }
figure img { border: 1px solid var(--linea); }
figcaption {
  font-size: .82rem; color: var(--verde-medio);
  margin-top: .7rem; line-height: 1.5;
}

/* ---------- Contacto ---------- */
.contacto ul { list-style: none; margin: 0; padding: 0; }
.contacto li { padding-block: .8rem; border-bottom: 1px solid var(--linea); }
.contacto li:first-child { border-top: 1px solid var(--linea); }
.contacto .etiqueta {
  display: block; font-size: .74rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--verde-medio); margin-bottom: .2rem;
}
.contacto a { font-family: var(--serif); font-size: 1.4rem; }

/* ---------- Pie ---------- */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: 2.6rem 3.4rem;
  font-size: .82rem; color: var(--verde-medio);
}
.pie p { margin: 0 0 .35rem; }

@media (max-width: 34rem) {
  .datos div { grid-template-columns: 1fr; gap: .15rem; }
  .cabecera .envoltorio { flex-direction: column; align-items: flex-start; gap: .5rem; }
}