/* Interfrigo — sitio institucional
   Fondo blanco, tinta azul marino de la marca, turquesa solo como acento.
   Spectral para títulos; Montserrat (la tipografía de la marca) para texto, menús y botones. */

/* Fuentes alojadas en el sitio (licencia SIL OFL 1.1), solo el juego latino. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fuentes/montserrat-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("fuentes/spectral-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 300; font-display: swap; src: url("fuentes/spectral-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("fuentes/spectral-latin-400-normal.woff2") format("woff2"); }

:root {
  --papel: #ffffff;
  --papel-2: #f4f6f9;
  --tinta: #0f1f36;
  --tinta-suave: #475467;
  --azul: #083c7d;
  --azul-profundo: #052a59;
  --turquesa: #41a9ae;
  --turquesa-texto: #2d7f83; /* mismo tono, con contraste AA sobre blanco */
  --linea: rgba(15, 31, 54, .15);
  --linea-clara: rgba(255, 255, 255, .2);
  --claro-suave: rgba(255, 255, 255, .8);

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --margen: clamp(16px, 4vw, 48px);
  --bloque: clamp(56px, 7vw, 104px);
  --ancho: 1280px;

  /* Escala tipográfica áurea: cada nivel es el anterior × 1,618 (base 16 px). */
  --t1: 1.618rem;   /* 25,9 px: subtítulos */
  --t2: 2.618rem;   /* 41,9 px: títulos de sección */
  --t3: 4.236rem;   /* 67,8 px: portada y cierre */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.618 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 600; color: inherit; }
::selection { background: var(--azul); color: var(--papel); }
:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; }

.envoltura { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.saltar { position: absolute; left: var(--margen); top: -100px; z-index: 20; padding: 10px 14px; background: var(--azul); color: var(--papel); }
.saltar:focus { top: 12px; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--papel); border-bottom: 1px solid var(--linea); }
.cabecera-interior {
  max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen);
  height: 60px; display: flex; align-items: center; gap: 32px;
}
.marca img { height: 37px; width: auto; } /* 60 px de barra ÷ φ */
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { font: 500 13.5px/1 var(--sans); text-decoration: none; padding-block: 8px; }
.menu a { border-bottom: 1px solid transparent; transition: border-color .16s; }
.menu a:hover { border-color: var(--tinta); }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 22px;
  background: var(--azul); color: var(--papel);
  font: 600 15px/1 var(--sans); text-decoration: none;
  border-radius: 2px; transition: background-color .16s;
}
.boton:hover { background: var(--azul-profundo); }
.boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s; }
.boton:hover svg { transform: translateX(3px); }
.boton-claro { background: var(--papel); color: var(--azul); }
.boton-claro:hover { background: #fff; }

.enlace {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--sans); color: var(--azul); text-decoration: none;
  padding-bottom: 5px; border-bottom: 1px solid currentColor;
}
.enlace::after { content: "→"; transition: transform .16s; }
.enlace:hover::after { transform: translateX(3px); }

/* ---------- Portada ---------- */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(61.8vw, 88vh); /* alto = ancho ÷ φ, sin pasar la pantalla */
  background: var(--azul-profundo); color: #fff;
}
.portada-fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%;
}
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(5, 42, 89, .92) 0%, rgba(5, 42, 89, .62) 38%, rgba(5, 42, 89, 0) 72%),
    linear-gradient(to right, rgba(5, 42, 89, .45) 0%, rgba(5, 42, 89, 0) 60%);
}
.portada-contenido { width: 100%; padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); }
.portada-titulo {
  max-width: 14ch;
  font: 300 clamp(2.6rem, 6vw, var(--t3))/1 var(--serif);
  letter-spacing: -.025em;
  margin-bottom: 24px;
}
.portada-titulo em { font-style: italic; }
.portada-bajada { max-width: 62ch; font-size: 17px; color: rgba(255, 255, 255, .86); margin-bottom: 32px; }
.portada-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.enlace-claro { color: #fff; }

/* ---------- Cadena ---------- */
.cadena {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); /* 1 : φ */
  column-gap: clamp(24px, 4vw, 56px); row-gap: 24px;
  padding-block: var(--bloque);
  border-top: 1px solid var(--linea);
}
.cadena-titulo { font: 300 clamp(1.9rem, 3vw, var(--t2))/1.06 var(--serif); letter-spacing: -.02em; }
.cadena-texto { columns: 2; column-gap: 40px; color: var(--tinta-suave); }
.cadena-texto p { break-inside: avoid; margin-bottom: 1em; }

/* ---------- Proceso ---------- */
.proceso { padding-bottom: var(--bloque); }
.seccion-titulo {
  font: 300 clamp(1.9rem, 3vw, var(--t2))/1.1 var(--serif); letter-spacing: -.015em;
  padding-top: 24px; margin-bottom: 32px; border-top: 1px solid var(--linea);
}
.etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
.etapa-foto { margin-bottom: 20px; overflow: hidden; }
.etapa-foto img { width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; }
.etapa h3 {
  display: flex; align-items: baseline; gap: 12px;
  font: 400 var(--t1)/1.1 var(--serif); letter-spacing: -.01em;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linea);
}
.etapa-numero { font: 600 12px/1 var(--sans); letter-spacing: .08em; color: var(--turquesa-texto); }
.etapa p { font-size: 15px; color: var(--tinta-suave); }

/* ---------- Banda: genética y calidad ---------- */
.banda { position: relative; isolation: isolate; overflow: hidden; background: var(--azul-profundo); color: var(--papel); }
/* El isologo, gigante y cortado por el borde, como marca de agua. */
.banda::before {
  content: ""; position: absolute; z-index: -1;
  width: clamp(560px, 64vw, 1000px); aspect-ratio: 217 / 209;
  right: -16%; top: 50%; transform: translateY(-50%);
  background: url("marca/simbolo-blanco.svg") center / contain no-repeat;
  opacity: .06;
  pointer-events: none;
}
.banda-grilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 96px); row-gap: 56px;
  padding-block: var(--bloque);
}
.banda h2 { font: 300 clamp(1.9rem, 3vw, var(--t2))/1.08 var(--serif); letter-spacing: -.02em; margin-bottom: 20px; max-width: 18ch; }
.banda p { color: var(--claro-suave); margin-bottom: 1em; }
.sello { display: inline-flex; align-items: center; gap: 18px; margin-top: 12px; padding: 14px 20px; border: 1px solid var(--linea-clara); }
.sello-rotulo { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.sello-marca { font: 700 22px/1 var(--sans); letter-spacing: -.01em; }
.sello img { height: 28px; width: auto; }
.normas { margin-top: 8px; border-bottom: 1px solid var(--linea-clara); }
.normas div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--linea-clara); }
.normas dt { font: 400 var(--t1)/1.2 var(--serif); }
.normas dd { font-size: 15px; color: var(--claro-suave); }
.normas dd strong { color: var(--papel); }

/* ---------- Clientes y productores ---------- */
.publicos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 80px); row-gap: 64px;
  padding-block: var(--bloque);
}
.publico { display: flex; flex-direction: column; align-items: flex-start; }
.publico-foto { width: 100%; margin-bottom: 24px; overflow: hidden; }
.publico-foto img { width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; }
.publico h2 { font: 300 clamp(1.9rem, 3vw, var(--t2))/1.1 var(--serif); letter-spacing: -.015em; margin-bottom: 12px; }
.publico-intro { color: var(--tinta-suave); margin-bottom: 20px; }
.detalles { width: 100%; margin-bottom: 28px; border-bottom: 1px solid var(--linea); }
.detalles div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--linea); font-size: 15px; }
.detalles dt { font-weight: 600; }
.detalles dd { color: var(--tinta-suave); }

/* ---------- Pie ---------- */
.pie { background: var(--azul); color: var(--papel); }
.pie-grilla {
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); /* φ : 1 */
  column-gap: clamp(32px, 6vw, 96px); row-gap: 32px; align-items: end;
  padding-block: clamp(56px, 7vw, 88px);
}
.pie-llamado { display: flex; flex-direction: column; align-items: flex-start; }
.pie-llamado h2 { font: 300 clamp(2.4rem, 5vw, var(--t3))/1.02 var(--serif); letter-spacing: -.02em; margin-bottom: 12px; }
.pie-llamado p { color: var(--claro-suave); margin-bottom: 28px; }
.sedes { border-bottom: 1px solid var(--linea-clara); }
.sedes div { padding: 18px 0; border-top: 1px solid var(--linea-clara); }
.sedes dt { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 10px; }
.sedes dd { font: 400 var(--t1)/1.25 var(--serif); }
.pie-email { margin-top: 18px; font-size: 16px; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--linea-clara); }
.pie-email:hover { border-color: var(--papel); }
.pie-base {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  padding-block: 24px; border-top: 1px solid var(--linea-clara);
  font-size: 13px; color: rgba(255, 255, 255, .7);
}
.pie-base img { height: 30px; width: auto; margin-right: auto; }
.pie-base a { text-decoration: none; }
.pie-base a:hover { color: var(--papel); }

/* ---------- WhatsApp flotante ---------- */
.flotante {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 30;
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 28px rgba(15, 31, 54, .22), 0 2px 6px rgba(15, 31, 54, .12);
  opacity: 0; pointer-events: none;
  transform: translateY(32px) scale(.3);
  transition: transform .6s cubic-bezier(.34, 1.7, .5, 1), opacity .2s ease-out, box-shadow .2s;
}
.flotante svg { width: 30px; height: 30px; fill: currentColor; }
.flotante.visible { opacity: 1; pointer-events: auto; transform: none; }
.flotante.visible:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(15, 31, 54, .28), 0 2px 6px rgba(15, 31, 54, .12); }
.flotante:focus-visible { outline-offset: 4px; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .menu { display: none; }

  .cadena-titulo, .cadena-texto { grid-column: 1 / -1; }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie-llamado, .sedes { grid-column: 1 / -1; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .marca img { height: 30px; }
  .portada { display: block; min-height: 0; }
  .portada::before { content: none; }
  .portada-fondo { position: static; height: auto; aspect-ratio: 4 / 3; object-position: 46% 40%; }
  .portada-contenido { padding-block: 32px 48px; }
  .cadena-texto { columns: 1; }
  .banda-grilla, .publicos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .portada-titulo { font-size: clamp(2.4rem, 11vw, 3rem); }
  .portada-acciones { flex-direction: column; align-items: stretch; }
  .portada-acciones .enlace { align-self: flex-start; }
  .boton { justify-content: space-between; }
  .etapas { grid-template-columns: minmax(0, 1fr); }
  .normas div, .detalles div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pie-llamado .boton { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Página no encontrada ---------- */
.pagina-error { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.no-encontrada {
  flex: 1; display: flex; align-items: center;
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--azul-profundo); color: #fff;
}
.no-encontrada::before {
  content: ""; position: absolute; z-index: -1;
  width: clamp(560px, 70vw, 1100px); aspect-ratio: 217 / 209;
  right: -18%; top: 50%; transform: translateY(-50%);
  background: url("marca/simbolo-blanco.svg") center / contain no-repeat;
  opacity: .06; pointer-events: none;
}
.no-encontrada-grilla {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); /* φ : 1 */
  column-gap: clamp(32px, 6vw, 96px); row-gap: 48px; align-items: center;
  padding-block: clamp(64px, 10vw, 128px);
}
.no-encontrada-codigo { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 20px; }
.no-encontrada h1 { font: 300 clamp(2.6rem, 6vw, var(--t3))/1.02 var(--serif); letter-spacing: -.025em; margin-bottom: 20px; }
.no-encontrada-texto > p:not(.no-encontrada-codigo) { color: var(--claro-suave); max-width: 46ch; margin-bottom: 32px; }
.no-encontrada-atajos { border-bottom: 1px solid var(--linea-clara); }
.no-encontrada-atajos a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--linea-clara); text-decoration: none;
}
.no-encontrada-atajos a::after { content: "→"; grid-column: 2; grid-row: 1 / 3; color: rgba(255, 255, 255, .6); transition: transform .16s, color .16s; }
.no-encontrada-atajos span { font: 400 var(--t1)/1.2 var(--serif); }
.no-encontrada-atajos small { font-size: 14px; color: var(--claro-suave); }
.no-encontrada-atajos a:hover::after { transform: translateX(4px); color: #fff; }
@media (max-width: 760px) {
  .no-encontrada-grilla { grid-template-columns: minmax(0, 1fr); }
  .no-encontrada .boton { display: flex; justify-content: space-between; }
}