/* =========================================================================
   Capitán Nicolás Arias — Deferred CSS
   Everything below the portada. Loaded asynchronously; critical.css is inline.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. PHOTOGRAPHS, AND THE GREY BOXES STANDING IN FOR THEM
   ------------------------------------------------------------------------- */
.shot {
  position: relative;
  overflow: hidden;
  background: var(--sand-3);
}

.shot img { width: 100%; height: 100%; object-fit: cover; }

.shot-circle { border-radius: 50%; }

.shot-square    { aspect-ratio: 1; }
.shot-landscape { aspect-ratio: 4 / 3; }
.shot-portrait  { aspect-ratio: 3 / 4; }
.shot-wide      { aspect-ratio: 3 / 2; }

/* A slot with no file behind it: a grey box carrying the description of the
   photograph that belongs there — the same words that will be its alt text.
   It does not imitate a photograph and it does not hide what is missing. */
.shot-empty {
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 28px);
  background: var(--box);
  border: 1px solid var(--box-line);
  text-align: center;
}

.shot-empty.shot-circle { border-style: dashed; }

.shot-empty-text {
  max-width: 26ch;
  color: var(--box-text);
  font-size: clamp(0.875rem, 1.6vw, 0.95rem);
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   2. SECTION HEADS
   ------------------------------------------------------------------------- */
.head {
  display: grid;
  gap: 0.9rem;
  max-width: 760px;
  margin-bottom: clamp(38px, 5.5vw, 68px);
}

.head-mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.head-mark::after {
  content: '';
  flex: 1 1 auto;
  max-width: 120px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.head-centred { justify-items: center; text-align: center; margin-inline: auto; }

/* Centred, so the rule goes down both sides. The left-hand-only version it
   inherits from the ranged heads hung the whole line off centre. */
.head-centred .head-mark::before,
.head-centred .head-mark::after {
  content: '';
  flex: 0 1 40px;
  min-width: 12px;
  max-width: 40px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

/* -------------------------------------------------------------------------
   3. LA BITÁCORA (sobre mí)
   Text on the left, instruments on the right: the ledger of credentials and
   the gauge the figures are read off.
   ------------------------------------------------------------------------- */
.bitacora {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}

/* It borrows .lead for the colour and the measure, but it is running prose:
   balanced, its six-line paragraph lost a fifth of its line fill to save one
   short last line. A tight rag with a short last line is what a printed page
   looks like. */
.bitacora-body { text-wrap: auto; }

.bitacora-body p + p { margin-top: 1.05rem; }

.bitacora-body strong { font-weight: 700; }

.bitacora-sign {
  margin-top: 1.6rem;
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--copper-deep);
}

/* The portrait sits with the instruments, not opposite the text: the column
   reads top to bottom as who he is, what he holds and what he has done. */
.bitacora-portrait { margin-bottom: 1.8rem; }

.bitacora-portrait-caption {
  margin-top: 0.6rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-sand-soft);
}

.ledger { border-top: 1px solid var(--on-sand-line); container-type: inline-size; }

.ledger-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--on-sand-line);
}

.ledger-key {
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-deep);
}

.ledger-value { font-size: 1rem; }

@container (max-width: 24rem) {
  .ledger-row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* The gauge: the figures read off an open arc, the way a bearing is read
   off a card. It replaces the row of big numbers every other site has.

   It closes the story column rather than the instrument one: the prose ran
   some five hundred pixels short of the portrait, and the figures are what
   the story is claiming anyway. Wider here, the three labels also stop
   wrapping to two lines under two of the three numbers. */
.gauge {
  position: relative;
  /* The same measure as the prose above it. Capped narrower, its rule stopped
     77px short of the text and read as an arbitrary width rather than a
     deliberate one. */
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--on-sand-line);
}

.gauge-face { color: var(--seaglass); }

.gauge-figures {
  display: grid;
  grid-template-columns: repeat(var(--figures, 3), minmax(0, 1fr));
  gap: 12px;
  /* The numbers hang just under the arc's open ends without touching them. */
  margin-top: -3.5%;
}

.gauge-figure { text-align: center; }

/* A lone figure has no open ends to hang under: it sits in the middle of the
   dial instead, under the marker at twelve o'clock. */
.gauge-figures.gauge-figures--single {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  margin-top: 0;
}

.gauge-number {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1;
  color: var(--copper-deep);
}

.gauge-label {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1.45;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--on-sand-soft);
}

/* -------------------------------------------------------------------------
   4. SERVICIOS — full-width entries, not a row of cards
   Each one is a medallion and a page of text, and they alternate sides.
   ------------------------------------------------------------------------- */
.entry {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(38px, 5vw, 62px);
  border-top: 1px solid var(--on-sand-line);
}

.entry:last-child { border-bottom: 1px solid var(--on-sand-line); }

/* Entries alternate sides. The columns are swapped rather than one child
   reordered, so the text keeps the wide column on both sides — reordering
   inside a two-width grid cramped every other entry. */
.entry:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }

.entry:nth-of-type(even) .entry-media { grid-column: 2; grid-row: 1; }

.entry:nth-of-type(even) .entry-body { grid-column: 1; grid-row: 1; }

.entry-media { justify-self: center; width: min(300px, 70vw); }

.entry-media .medallion { width: 100%; }

/* A bare copper "I" floating above a headline reads as a stray character.
   The rule after it is the one the section heads carry, shorter: the numeral
   belongs to the same family of marks and now sits on something. */
.entry-number {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
  color: var(--copper-deep);
}

.entry-number::after {
  content: '';
  flex: 0 0 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.entry-title {
  margin-top: 0.75rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.2;
}

.entry-desc {
  margin-top: 0.85rem;
  text-wrap: balance;
  color: var(--on-sand-soft);
  max-width: 54ch;
}

/* Two columns, not auto-fit: four points across three columns left one of
   them alone on a second row at exactly the widths a tablet uses. */
.entry-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 2rem;
  margin-top: 1.5rem;
}

.entry-points li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem;
}

/* The tick: the same mark the bezel is made of, at text size. */
.entry-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 9px;
  height: 1px;
  background: var(--copper);
}

.entry-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.entry-link:hover { color: var(--on-sand); }

/* -------------------------------------------------------------------------
   5. LA DERROTA (cómo trabajo) — waypoints along a line
   ------------------------------------------------------------------------- */
.derrota {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px);
}

/* Each waypoint carries its own rule and its own mark. One line drawn across
   the whole grid only works while the grid is a single row: at two columns the
   second row's marks floated in mid-air with no line under them. */
.waypoint {
  position: relative;
  padding-top: 30px;
  border-top: 1px solid var(--on-petrol-line);
}

.waypoint::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--copper);
  transform: rotate(45deg);
}

.waypoint-index {
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--copper-light);
}

.waypoint-title {
  margin-top: 0.35rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.28rem;
}

.waypoint-desc {
  margin-top: 0.55rem;
  text-wrap: balance;
  font-size: 1rem;
  color: var(--on-petrol-soft);
}

/* -------------------------------------------------------------------------
   6. GALERÍA — a rail that scrolls sideways, with its own scale
   ------------------------------------------------------------------------- */
/* The rail stopped dead at the container edge with half the photographs
   still to the right of it and 200px of empty sand beyond — nothing said the
   strip continued. It now runs out to the viewport edge, so the next frame is
   always cut by the screen rather than by an invisible margin. */
.rail-wrap {
  position: relative;
  --bleed: max(0px, calc((100vw - 100%) / 2));
}

.rail {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-right: calc(-1 * var(--bleed));
  padding-right: var(--bleed);
  padding-bottom: 18px;
  scrollbar-width: thin;
  scroll-padding-left: 2px;
}

.rail-item {
  flex: 0 0 clamp(230px, 30vw, 340px);
  scroll-snap-align: start;
}

/* Alternating heights: a wall of photographs sitting on one baseline rather
   than a contact sheet. */
.rail-item:nth-child(odd) .shot { aspect-ratio: 3 / 4; }
.rail-item:nth-child(even) .shot { aspect-ratio: 1; }

.rail-caption {
  margin-top: 0.7rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-sand-soft);
}

.band-petrol .rail-caption { color: var(--on-petrol-soft); }

.rail-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-sand-soft);
}

/* -------------------------------------------------------------------------
   7. CONTACTO — one centred column, like a form filled in by hand
   ------------------------------------------------------------------------- */
.contacto-inner { max-width: 760px; margin-inline: auto; }

/* Three equal cells split the address as "…capitannicolasari / as.com.ar".
   The middle cell is given the extra width instead, since it is the only one
   holding something that cannot be hyphenated. */
.contacto-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-block: clamp(28px, 4vw, 44px);
  background: var(--on-sand-line);
  border: 1px solid var(--on-sand-line);
}

@media (min-width: 840px) {
  /* Widths cut to what each value actually measures, so none of the three
     wraps: equal thirds broke the address, and giving the middle cell all the
     slack then broke the port name instead. Below 840px there is no set of
     widths that fits all three, so they stack rather than each break in two
     — one of them across the middle of its phone number. */
  .contacto-rows { grid-template-columns: 0.76fr 1.3fr 0.94fr; }
}

.contacto-cell {
  display: grid;
  /* Top-aligned, not centred: should a value ever wrap, the three keys stay
     on one line instead of one of them riding up. */
  align-content: start;
  gap: 0.45rem;
  /* Grid items floor at min-content, and a 35-character address has no
     break opportunity: without this the cell refuses to narrow and pushes
     the page sideways on a 320px screen. */
  min-width: 0;
  background: var(--sand);
  padding: 1.25rem 1.15rem;
  text-align: center;
}

.contacto-key {
  display: block;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--copper-deep);
}

.contacto-value {
  display: block;
  font-family: var(--font-head);
  font-size: 1.02rem;
  line-height: 1.4;
  /* `anywhere`, not `break-word`: only this one also lowers the intrinsic
     minimum, which is what lets the cell shrink at all. Wide enough and the
     address still sets on one line, so nothing breaks in practice. */
  overflow-wrap: anywhere;
}

a.contacto-value { padding-block: 0.7rem; margin-block: -0.7rem; }

a.contacto-value:hover { color: var(--copper-deep); }

/* Column gap only. With a row gap as well, two fields that sat side by side
   on a desktop 24px apart stacked 45px apart on a phone — the same form in
   two different rhythms. The field's own margin is the single spacing rule. */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 1.3rem;
}

.field { margin-bottom: 1.5rem; }

.field-label {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-sand-soft);
}

.field-label em { font-style: normal; }

.control {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.1rem;
  font-size: 1rem;
  color: var(--on-sand);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(18, 48, 58, 0.32);
  transition: border-color var(--fast);
}

.control::placeholder { color: rgba(18, 48, 58, 0.36); }

.control:focus { outline: none; border-bottom-color: var(--copper); box-shadow: 0 2px 0 var(--copper); }

/* A message under a field that itself looks untouched is easy to miss. The
   rule under the control carries the state too. */
.control-invalid { border-bottom-color: #9d2f1c; }

.control-invalid:focus { border-bottom-color: var(--copper); }

textarea.control { resize: vertical; min-height: 104px; line-height: 1.7; }

select.control { appearance: none; border-radius: 0; cursor: pointer; }

.select-wrap { position: relative; }

.select-wrap::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1px solid var(--copper-deep);
  border-bottom: 1px solid var(--copper-deep);
  transform: rotate(45deg);
  pointer-events: none;
}

.field-error {
  display: block;
  margin-top: 0.35rem;
  min-height: 1.5rem;
  font-size: 0.875rem;
  color: #9d2f1c;
}

.form-note {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  color: var(--on-sand-soft);
  text-align: center;
}

.form-banner {
  margin-top: 1.3rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--copper);
  background: var(--sand-2);
  font-size: 1rem;
  text-align: center;
}

.form-banner-error { border-color: #9d2f1c; }

.btn-submit { width: 100%; margin-top: 0.4rem; }

/* -------------------------------------------------------------------------
   8. PIE — centred, a seal and one line of links
   ------------------------------------------------------------------------- */
.pie {
  background: var(--petrol-deep);
  color: var(--on-petrol);
  padding-block: clamp(48px, 6vw, 78px) 26px;
  text-align: center;
}

.pie-mark { width: 52px; height: 52px; margin-inline: auto; color: var(--copper); }

.pie-name {
  margin-top: 1rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
}

.pie-role {
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-style: italic;
  color: var(--on-petrol-soft);
}

.pie-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.8rem;
  margin-top: 1.4rem;
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pie-links > *:last-child { margin-right: -0.2em; }

.pie-links a { display: inline-block; padding-block: 0.65rem; color: var(--on-petrol-soft); }
.pie-links a:hover { color: var(--copper-light); }

.pie-social {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.pie-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--on-petrol-line);
  transition: border-color var(--fast), color var(--fast), background-color var(--fast);
}

.pie-social a:hover { background: var(--copper); border-color: var(--copper); color: var(--sand); }

.pie-bottom {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--on-petrol-line);
  font-size: 0.875rem;
  color: var(--on-petrol-soft);
}

/* -------------------------------------------------------------------------
   9. THE WHATSAPP TAB — a squared tab, not a floating circle
   ------------------------------------------------------------------------- */
.wa-tab {
  position: fixed;
  right: 0;
  bottom: clamp(24px, 12vh, 120px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  padding: 0.82rem 1.15rem;
  background: var(--copper-deep);
  color: var(--sand);
  font-family: var(--font-seal);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Rounded on the side that is not against the glass, and lifted off the
     sand: flush and square on all four corners read as a rendering fault. */
  border-radius: 2px 0 0 2px;
  box-shadow: -1px 2px 14px rgba(18, 48, 58, 0.18);
  transition: background-color var(--fast), transform var(--mid),
              box-shadow var(--fast), opacity var(--mid), visibility var(--mid);
}

/* Retired over the contact section — see initWaTab. Kept out of the tab order
   too, so it is not a control nobody can see. */
.wa-tab-away {
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  pointer-events: none;
}

.wa-tab:hover {
  background: var(--petrol);
  transform: translateX(-2px);
  box-shadow: -2px 3px 18px rgba(18, 48, 58, 0.24);
}

/* On a phone the tab is the icon alone: with the word it sat across whatever
   button happened to be at that height. */
@media (max-width: 720px) {
  .wa-tab { padding: 0.8rem 0.85rem; }

  .wa-tab span { display: none; }
}

/* -------------------------------------------------------------------------
   10. 404
   ------------------------------------------------------------------------- */
.lost {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--container-pad);
  background: var(--petrol);
  color: var(--on-petrol);
}

.lost-mark { width: 74px; height: 74px; margin-inline: auto; color: var(--copper-light); }

.lost-code {
  margin-top: 1.4rem;
  font-family: var(--font-seal);
  font-size: clamp(2rem, 7vw, 3.4rem);
  letter-spacing: 0.3em;
}

.lost-title {
  margin-top: 0.8rem;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 2rem);
}

.lost-text {
  margin: 1rem auto 0;
  max-width: 44ch;
  color: var(--on-petrol-soft);
}

.lost .btn { margin-top: 2rem; }

/* -------------------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bitacora { grid-template-columns: 1fr; }

  /* In one column the portrait was taking the whole 656px of a tablet and
     standing 875px tall — a snapshot the size of the section it belongs to.
     Set beside the ledger it goes back to a sensible size and the credentials
     stop being a list on their own under an enormous photograph. */
  .bitacora-instruments {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
  }

  .bitacora-portrait { margin-bottom: 0; }

  .entry,
  .entry:nth-of-type(even) { grid-template-columns: 1fr; }

  .entry:nth-of-type(even) .entry-media,
  .entry:nth-of-type(even) .entry-body { grid-column: 1; grid-row: auto; }

  .derrota { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  /* Too narrow to hold a photograph and a two-column ledger side by side. */
  .bitacora-instruments { grid-template-columns: 1fr; }

  .bitacora-portrait { margin-bottom: 1.8rem; }

  /* One and a half frames fit on a phone, so the alternating heights stop
     reading as a rhythm and start reading as one photograph hanging lower
     than the other. On this width they all take the same shape, and each is
     wide enough to be looked at rather than glanced past. */
  .rail-item { flex-basis: min(78vw, 340px); }

  .rail-item:nth-child(even) .shot { aspect-ratio: 3 / 4; }

  .derrota { grid-template-columns: 1fr; }

  .entry-points { grid-template-columns: 1fr; }

  .gauge-figures { margin-top: -1%; }
}