/* Isla Baja VFX · islabajavfx.com
   Colores, tipos y medidas de la marca (Marca-Isla-Baja/marca.py). El naranja de tracking solo
   aparece en marcas gráficas (la caja del mapa y las esquinas del visor), nunca en texto. */

@font-face {
  font-family: "Archivo";
  src: url("/fuentes/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fuentes/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --tinta: #121416;
  --cal: #f3f1ec;
  --blanco: #ffffff;
  --tracking: #ff5b1f;
  --basalto: #2a2d31;
  --piedra: #6e7176;

  --fondo: var(--cal);
  --texto: var(--tinta);
  --secundario: #55585d;   /* Piedra oscurecida: 6,4:1 sobre Cal */
  --raya: #d9d6cf;
  --boton-fondo: var(--tinta);
  --boton-texto: var(--cal);
  --visor-borde: transparent;

  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 48px);
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Archivo", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: var(--tinta);
    --texto: var(--cal);
    --secundario: #a3a6ab;
    --raya: var(--basalto);
    --boton-fondo: var(--cal);
    --boton-texto: var(--tinta);
    --visor-borde: var(--basalto);
  }
}
:root[data-theme="dark"] {
  --fondo: var(--tinta);
  --texto: var(--cal);
  --secundario: #a3a6ab;
  --raya: var(--basalto);
  --boton-fondo: var(--cal);
  --boton-texto: var(--tinta);
  --visor-borde: var(--basalto);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 400 17px/1.55 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

.envoltura { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }

.etiqueta {
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secundario);
}

h1, h2, h3 { font-stretch: 112.5%; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.4vw, 68px); font-weight: 620; line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.08; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
p { max-width: 62ch; text-wrap: pretty; }

/* ─── botón: una sola intención en toda la página (escribir) ─── */
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--boton-fondo); color: var(--boton-texto);
  font: 600 16px/1 var(--sans); font-stretch: 112.5%;
  text-decoration: none; white-space: nowrap;
  transition: transform 160ms ease, opacity 160ms ease;
}
.boton:hover { opacity: 0.88; }
.boton:active { transform: translateY(1px); }
.boton .flecha { font-family: var(--mono); font-weight: 400; }
.enlace { font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.enlace:hover { text-decoration-thickness: 2px; }

/* ─── cabecera ─── */
.cabecera { border-bottom: 1px solid var(--raya); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.logo img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: 28px; list-style: none; padding: 0; font-size: 15px; }
.menu a:not(.boton) { text-decoration: none; color: var(--secundario); }
.menu a:not(.boton):hover { color: var(--texto); }
.menu .boton { padding: 11px 16px; font-size: 15px; }
.idioma { font: 400 13px/1 var(--mono); letter-spacing: 0.04em; }

/* ─── portada ─── */
.portada .envoltura {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px);
  align-items: center;
  min-height: min(calc(100svh - 72px), 760px);
  padding-block: clamp(40px, 6vh, 72px);
}
.portada .texto { display: grid; gap: 28px; }
.portada .entrada { font-size: 19px; color: var(--secundario); }
.portada .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* El visor: siempre oscuro, como una pantalla de trabajo, con esquinas de encuadre */
.visor { position: relative; aspect-ratio: 1 / 1; background: var(--tinta); outline: 1px solid var(--visor-borde); outline-offset: -1px; color: var(--cal); overflow: hidden; }
.visor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visor .esquina { position: absolute; width: 18px; height: 18px; border: 0 solid var(--tracking); }
.visor .ni { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; }
.visor .nd { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; }
.visor .si { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; }
.visor .sd { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }
.visor .dato {
  position: absolute; font: 400 11px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: #a3a6ab;
}
.visor .arriba { top: 18px; left: 44px; right: 44px; display: flex; justify-content: space-between; gap: 12px; }
.visor .abajo { bottom: 18px; left: 44px; right: 44px; display: flex; justify-content: space-between; gap: 12px; }

/* ─── secciones ─── */
.seccion { border-top: 1px solid var(--raya); padding-block: clamp(64px, 9vw, 120px); }
.seccion .cabeza { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 72px); margin-bottom: clamp(40px, 5vw, 64px); }
.seccion .cabeza .etiqueta { padding-top: 10px; }
.seccion .cabeza p { color: var(--secundario); margin-top: 18px; }

/* servicios: lista en dos columnas, con raya entre filas */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); list-style: none; padding: 0; }
.servicios li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding-block: 24px; border-top: 1px solid var(--raya); }
.servicios .num { font: 400 13px/1.9 var(--mono); color: var(--secundario); grid-row: span 2; }
.servicios p { color: var(--secundario); font-size: 16px; }

/* método: cuatro pasos en fila, numerados */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; list-style: none; padding: 0; counter-reset: paso; }
.pasos li { border-top: 2px solid var(--texto); padding-top: 20px; display: grid; gap: 10px; align-content: start; }
.pasos li::before { counter-increment: paso; content: "0" counter(paso); font: 400 13px/1 var(--mono); color: var(--secundario); }
.pasos p { color: var(--secundario); font-size: 16px; }
.nota { margin-top: 40px; font-size: 15px; color: var(--secundario); }

/* contacto */
.contacto .envoltura { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(32px, 5vw, 72px); }
.contacto .etiqueta { padding-top: 10px; }
.contacto .correo { display: inline-block; margin-top: 28px; font-size: clamp(24px, 3.6vw, 44px); font-weight: 600; font-stretch: 112.5%; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.contacto p { color: var(--secundario); margin-top: 18px; }
.contacto .acciones { margin-top: 32px; }

/* pie */
.pie { border-top: 1px solid var(--raya); padding-block: 32px 40px; font-size: 14px; color: var(--secundario); }
.pie .envoltura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.pie .firma { display: flex; align-items: center; gap: 14px; }
.pie .firma img { width: 28px; height: 28px; }
.pie a { color: var(--secundario); }
.pie address { font-style: normal; }

.solo-claro { display: block; }
.solo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .solo-claro { display: none; }
  :root:not([data-theme="light"]) .solo-oscuro { display: block; }
}
:root[data-theme="dark"] .solo-claro { display: none; }
:root[data-theme="dark"] .solo-oscuro { display: block; }

/* entrada suave de la portada, una sola vez */
@media (prefers-reduced-motion: no-preference) {
  .portada .texto > * { animation: subir 700ms cubic-bezier(.2,.7,.2,1) both; }
  .portada .texto > :nth-child(2) { animation-delay: 80ms; }
  .portada .texto > :nth-child(3) { animation-delay: 160ms; }
  .portada .texto > :nth-child(4) { animation-delay: 240ms; }
  .visor { animation: aparecer 900ms ease both; }
  @keyframes subir { from { opacity: 0; transform: translateY(12px); } }
  @keyframes aparecer { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ─── móvil ─── */
@media (max-width: 960px) {
  .portada .envoltura { grid-template-columns: 1fr; min-height: 0; }
  .visor { aspect-ratio: 4 / 3; }
  .seccion .cabeza, .contacto .envoltura { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .menu .ancla { display: none; }
  .menu { gap: 16px; }
  .servicios, .pasos { grid-template-columns: 1fr; }
  .servicios li:last-child { border-bottom: 1px solid var(--raya); }
  .portada .entrada { font-size: 17px; }
}
@media (max-width: 420px) {
  .logo img { height: 32px; }
  .menu .boton { padding: 10px 12px; font-size: 14px; }
  .visor .dato { font-size: 10px; }
  .visor .arriba, .visor .abajo { left: 38px; right: 38px; }
}