/* =============================================================================
   Air & Sea Insurance Corp.
   Built on the Column style reference (DESIGN.md): deep navy institutional
   language on a near-white canvas, geometric grotesque, 8px radius, 4px base.

   Two deliberate departures, both documented:
   1. Accent buttons use BLACK on Signal Orange, not white. The spec's
      "Accent Orange Button" asks for #ffffff on #ec652b = 3.2:1, which fails
      WCAG AA. Black on #ec652b = 6.5:1 and is what the spec's own Agent
      Prompt Guide specifies.
   2. Primary action is Indigo Navy filled at 8px radius, per the Components
      section and the Do's/Don'ts — not the orange 9999px pill the Agent
      Prompt Guide asks for. The two contradict; the detailed spec wins.
   ============================================================================= */

:root {
  /* --- Colors: straight from DESIGN.md ----------------------------------- */
  --indigo-navy: #111a4a;
  --midnight-ink: #011821;
  --slate-ink: #3b3e47;
  --steel: #7c7f88;
  --fog: #a9acb6;
  --mist: #cbcccf;
  --silver-lining: #e3e4e8;
  --cloud-canvas: #f6f6f8;
  --pure-white: #ffffff;
  --charcoal: #232730;
  --obsidian: #12161e;
  --signal-orange: #ec652b;
  --peach-glow: #f2936b;
  --seafoam-700: #167e6c;
  --seafoam-600: #44b48b;

  /* The company's own emblem blue, sampled from the logo. Used ONLY on the
     mark itself. #111a4a is the same violet-tinted blue family, desaturated
     for use at surface scale. */
  --brand-mark: #01007F;

  /* --- Semantic roles ---------------------------------------------------- */
  --canvas: var(--cloud-canvas);
  --surface: var(--pure-white);
  --ink: var(--indigo-navy);        /* headings                16.1:1 on canvas */
  --body-ink: var(--slate-ink);     /* body copy               10.3:1 on canvas */
  --muted: var(--steel);            /* secondary               4.6:1  on canvas */
  --line: var(--silver-lining);
  --accent: var(--signal-orange);   /* ONE surface per page          6.5:1 on black */
  --data: var(--seafoam-700);       /* figures only            5.0:1  on white */

  /* --- Type -------------------------------------------------------------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --w-light: 300; --w-reg: 400; --w-med: 500; --w-semi: 600;

  --text-micro: 10px;
  --text-caption: 12px;
  --text-ui: 14px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-sub-sm: 20px;
  --text-sub-lg: 28px;
  --text-h-sm: clamp(28px, 4vw, 40px);
  --text-h: clamp(32px, 5vw, 48px);
  --text-display: clamp(36px, 6.2vw, 60px);

  /* --- Spacing: 4px base ------------------------------------------------- */
  --s4: 4px;  --s8: 8px;   --s12: 12px; --s16: 16px; --s20: 20px;
  --s24: 24px; --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px;
  --s72: 72px; --s80: 80px; --s96: 96px;

  --radius: 8px;
  --radius-pill: 9999px;          /* badges and tags ONLY, never buttons */

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 80px);
  --section-gap: 72px;
  --card-pad: 24px;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-card:
    rgba(18, 22, 30, 0.024) 0 1px 4px 0,
    rgba(18, 22, 30, 0.05) 0 1px 0 0,
    rgba(18, 22, 30, 0.024) 0 0 0 1px;
  --shadow-product:
    rgba(0, 0, 0, 0.02) 0 40px 32px 0,
    rgba(0, 0, 0, 0.03) 0 22px 18px 0,
    rgba(0, 0, 0, 0.03) 0 12px 10px 0,
    rgba(0, 0, 0, 0.04) 0 7px 5px 0,
    rgba(0, 0, 0, 0.07) 0 3px 2px 0;
  --shadow-btn:
    rgba(17, 26, 74, 0.1) 0 1px 3px 0,
    rgba(17, 26, 74, 0.05) 0 1px 0 0,
    rgba(255, 255, 255, 0.5) 0 1px 0 0 inset,
    rgba(255, 255, 255, 0.5) 0 1px 4px 0 inset;
}

/* =============================================================================
   Reset — note it does NOT kill focus outlines.
   The old site shipped :focus{outline:0} globally. That bug does not return.
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--w-reg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: var(--w-semi); line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--ink); }
a:hover { color: var(--indigo-navy); }
strong { font-weight: var(--w-semi); color: var(--ink); }
:focus-visible { outline: 2px solid var(--indigo-navy); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: var(--s16); top: -5rem; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: var(--s12) var(--s16); border-radius: var(--radius);
  font-size: var(--text-ui); font-weight: var(--w-med); text-decoration: none;
  box-shadow: var(--shadow-card); transition: top 120ms ease;
}
.skip:focus { top: var(--s16); }

/* =============================================================================
   Layout — 1200px max, 72px section gaps, alternating white / canvas
   ============================================================================= */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap); }
.section--sm { padding-block: var(--s48); }
.section--white { background: var(--surface); }
.measure { max-width: 68ch; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--card-pad);
}
.card--lg { padding: var(--s40); }
.card--float { box-shadow: var(--shadow-product); border-radius: var(--radius); background: var(--surface); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s48) var(--s40); }

/* =============================================================================
   Type
   ============================================================================= */
.display { font-size: var(--text-display); line-height: 1; letter-spacing: -0.03em; font-weight: var(--w-semi); }
.h-sm { font-size: var(--text-h-sm); line-height: 1.1; letter-spacing: -0.02em; }
.h { font-size: var(--text-h); line-height: 1.1; letter-spacing: -0.02em; }
.sub-lg { font-size: var(--text-sub-lg); line-height: 1.1; letter-spacing: -0.01em; }
.sub-sm { font-size: var(--text-sub-sm); line-height: 1.3; letter-spacing: -0.01em; }
.lede { font-size: var(--text-body-lg); line-height: 1.5; color: var(--slate-ink); font-weight: var(--w-reg); }
.prose { color: var(--slate-ink); line-height: 1.5; }
.small { font-size: var(--text-ui); color: var(--muted); line-height: 1.43; }

/* Tag with Dot — no rounding: it reads as a label, not a chip */
.tag {
  display: inline-flex; align-items: center; gap: var(--s8);
  font-size: var(--text-caption); font-weight: var(--w-med);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  border-radius: 0;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seafoam-600); }
.tag--accent::before { background: var(--accent); }

/* Figures use the data colour, per the Stats Row component */
.stat b { font-family: var(--font-sans); font-size: var(--text-sub-lg); font-weight: var(--w-med); color: var(--data); line-height: 1.1; letter-spacing: -0.01em; }

/* =============================================================================
   Buttons — 8px radius, never a pill. Never two filled CTAs side by side.
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  min-height: 44px; padding: var(--s12) var(--s20);
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--text-ui); font-weight: var(--w-med);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--indigo-navy); color: var(--pure-white); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: #0b1235; color: var(--pure-white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--indigo-navy); padding-inline: var(--s32); }
.btn--outline:hover { background: var(--indigo-navy); color: var(--pure-white); }
/* Black on orange = 6.5:1. White on orange = 3.2:1 and fails AA. */
.btn--accent { background: var(--accent); color: #000; }
.btn--accent:hover { background: #d4551d; color: #000; }
.btn svg { flex-shrink: 0; }

.link {
  display: inline-flex; align-items: center; gap: var(--s8); min-height: 44px;
  font-size: var(--text-ui); font-weight: var(--w-med); color: var(--ink); text-decoration: none;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   24/7 bar — the page's one Signal Orange surface
   ============================================================================= */
.alert-bar { background: var(--accent); color: #000; font-size: var(--text-ui); }
.alert-bar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s4) var(--s16); padding-block: var(--s4); min-height: 44px;
}
.alert-bar strong { color: #000; font-weight: var(--w-semi); }
.alert-bar__nums { display: inline-flex; align-items: center; gap: var(--s8); flex-wrap: wrap; justify-content: center; }
.alert-bar a {
  display: inline-flex; align-items: center; gap: var(--s8);
  min-height: 34px; padding: 0 var(--s12);
  color: #000; text-decoration: none; font-weight: var(--w-med);
  font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: var(--radius);
}
.alert-bar a:hover { background: rgba(0,0,0,0.18); border-color: rgba(0,0,0,0.5); color: #000; }
.alert-bar a svg { opacity: 0.72; }
/* El chip mide 34px, pero el contenedor le da 5px arriba y abajo: el objetivo
   táctil real son 44px sin que la barra crezca. */
.alert-bar__nums a { margin-block: 5px; }
.alert-bar__label { display: inline-flex; align-items: center; gap: var(--s8); }
.alert-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: #000; flex-shrink: 0; }

/* =============================================================================
   Masthead — 62px bar, white, hairline rule
   ============================================================================= */
.masthead { background: var(--surface); box-shadow: rgba(18,22,30,0.05) 0 1px 0 0; }
.masthead__top { display: flex; align-items: center; gap: var(--s24); padding-block: var(--s16); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--s12); text-decoration: none; color: var(--brand-mark); flex-shrink: 0; }
.brand { min-width: 0; min-height: 44px; }
.brand > span { min-width: 0; }
.brand__name {
  font-size: clamp(15px, 3.6vw, var(--text-sub-sm));
  font-weight: var(--w-semi); color: var(--ink);
  line-height: 1.15; letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
.brand__meta { font-size: var(--text-caption); color: var(--muted); line-height: 1.5; font-weight: var(--w-reg); }
.masthead__contact { margin-left: auto; text-align: right; font-size: var(--text-ui); line-height: 1.43; color: var(--muted); }
.masthead__contact a { color: var(--ink); font-weight: var(--w-med); text-decoration: none; }

.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.lang a, .lang span {
  display: flex; align-items: center; min-height: 44px; padding-inline: var(--s12);
  font-size: var(--text-caption); font-weight: var(--w-med); text-decoration: none; letter-spacing: 0.02em;
}
.lang span[aria-current] { background: var(--indigo-navy); color: var(--pure-white); }
.lang a { color: var(--muted); }
.lang a:hover { color: var(--ink); }

.nav { border-top: 1px solid var(--line); }
.nav ul {
  display: flex; flex-wrap: wrap;
  column-gap: var(--s20); row-gap: 0;
  padding-block: var(--s4);
}
.nav a {
  display: flex; align-items: center; min-height: 40px; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  font-size: 13px; font-weight: var(--w-reg); letter-spacing: -0.005em;
  border-bottom: 2px solid transparent;
}
/* 40 px de alto + 4 px de padding arriba y abajo en el ul = 44 px de objetivo
   táctil real por fila, sin inflar la cabecera a 88 px con dos filas. */
.nav li { display: flex; padding-block: 2px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: var(--w-med); border-bottom-color: var(--indigo-navy); }
.nav__toggle { display: none; }

/* =============================================================================
   Hero — split: copy left ~60%, floating card right
   ============================================================================= */
.hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s64); align-items: start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s12); }

.facts > li { display: flex; flex-direction: column; gap: var(--s4); padding-block: var(--s16); border-top: 1px solid var(--line); }
.facts > li:first-child { border-top: 0; padding-top: 0; }
.facts span { font-size: var(--text-ui); color: var(--muted); line-height: 1.43; }

/* =============================================================================
   Capability strip — the nine lines rescued from top.jpg.
   Logo-bar treatment: flat, monochrome, whitespace as the only separator.
   ============================================================================= */
.lines { background: var(--surface); border-block: 1px solid var(--line); }
.lines ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s12) var(--s24); padding-block: var(--s24); }
.lines li { font-size: var(--text-caption); font-weight: var(--w-med); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* =============================================================================
   Figure — imagery the way DESIGN.md allows it: functional, never decorative.
   Duotone into the palette so a photograph reads as part of the system instead
   of pasted-in stock. Small and inset, never a full-bleed lifestyle hero.
   ============================================================================= */
.figure { margin: 0; }
.figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--brand-050);
}
.lead-figure { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s48); align-items: start; }
@media (max-width: 64rem) { .lead-figure { grid-template-columns: 1fr; gap: var(--s24); } }

/* =============================================================================
   Numbered product list
   ============================================================================= */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 var(--s48); }
.products li { display: flex; gap: var(--s16); padding-block: var(--s20); border-top: 1px solid var(--line); }
.products .n { flex-shrink: 0; min-width: 22px; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--fog); padding-top: 3px; font-variant-numeric: tabular-nums; }
.products h3 { font-size: var(--text-body); font-weight: var(--w-med); line-height: 1.4; letter-spacing: 0; }
.products p { font-size: var(--text-ui); line-height: 1.5; color: var(--muted); margin-top: var(--s4); }

.bullets li { display: flex; gap: var(--s12); align-items: baseline; padding-block: var(--s8); border-top: 1px solid var(--line); font-size: var(--text-ui); line-height: 1.43; color: var(--slate-ink); }
.bullets li:first-child { border-top: 0; }
.bullets li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--seafoam-600); }

/* =============================================================================
   Forms list
   ============================================================================= */
.forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 var(--s48); }
.forms a {
  display: flex; align-items: center; gap: var(--s12); min-height: 44px;
  padding-block: var(--s12); border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: var(--text-ui); font-weight: var(--w-reg);
}
.forms a:hover { color: var(--indigo-navy); text-decoration: underline; text-underline-offset: 3px; }
.forms svg { flex-shrink: 0; color: var(--fog); }
.forms a:hover svg { color: var(--indigo-navy); }
.forms .ext { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: 0.08em; color: var(--fog); }

/* =============================================================================
   Claim panel
   ============================================================================= */
.claim { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); border-left: 3px solid var(--accent); padding: var(--s40); }
.claim__phones { display: flex; flex-wrap: wrap; gap: var(--s12); align-items: center; }
.phone {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center;
  padding: var(--s12) var(--s20); border-radius: var(--radius); text-decoration: none;
  border: 1px solid var(--indigo-navy);
}
.phone--solid { background: var(--indigo-navy); color: var(--pure-white); box-shadow: var(--shadow-btn); }
.phone--solid:hover { background: #0b1235; color: var(--pure-white); }
.phone--ghost { background: transparent; color: var(--ink); }
.phone--ghost:hover { background: var(--indigo-navy); color: var(--pure-white); }

/* El genérico a:hover tiene especificidad (0,1,1) y se comía el color de
   cualquier componente declarado con una sola clase (0,1,0): el botón azul
   se quedaba con texto azul marino sobre fondo azul marino. Todo componente
   con fondo propio declara su :hover explícitamente, y este cinturón de
   seguridad evita que vuelva a pasar con uno nuevo. */
.btn:hover, .phone:hover, .alert-bar a:hover, .foot a:hover, .nav a:hover, .lang a:hover { color: inherit; }
.btn--primary:hover, .btn--accent:hover, .phone--solid:hover, .phone--ghost:hover, .btn--outline:hover { color: var(--pure-white); }
.btn--accent:hover { color: #000; }
.alert-bar a:hover { color: #000; }
.phone small { font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.phone b { font-size: var(--text-body); font-weight: var(--w-med); }

/* Los correos y teléfonos son cadenas largas sin espacios: sin esto, a 320 px
   empujan la tarjeta de contacto fuera del viewport. */
.card a[href^="mailto:"], .foot a[href^="mailto:"] { overflow-wrap: anywhere; }

/* =============================================================================
   Footer — compact, deep surface
   ============================================================================= */
.foot { background: var(--midnight-ink); color: var(--mist); padding-block: var(--s64) var(--s32); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s32) var(--s48); padding-bottom: var(--s32); border-bottom: 1px solid rgba(255,255,255,0.12); }
.foot h2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); font-weight: var(--w-reg); margin-bottom: var(--s16); }
.foot p, .foot li { font-size: var(--text-ui); line-height: 1.6; color: var(--mist); }
.foot .brand__name { color: var(--pure-white); }
.foot a { color: var(--pure-white); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot nav ul { display: flex; flex-direction: column; gap: var(--s8); }
.foot nav a { color: var(--mist); }
.foot nav a:hover { color: var(--pure-white); }
.foot strong { color: var(--pure-white); }
.foot__legal { padding-top: var(--s32); display: flex; flex-wrap: wrap; gap: var(--s16) var(--s40); justify-content: space-between; align-items: flex-start; }
.foot__legal p { font-size: var(--text-caption); color: var(--steel); max-width: 68ch; line-height: 1.5; }
.foot__legal nav ul { flex-direction: row; gap: var(--s24); }
.foot__legal a { color: var(--steel); }

/* =============================================================================
   Phone / tablet
   ============================================================================= */
@media (max-width: 64rem) {
  .hero { grid-template-columns: 1fr; gap: var(--s40); }
  .masthead__contact { margin-left: 0; text-align: left; order: 3; width: 100%; }
}

@media (max-width: 48rem) {
  :root { --section-gap: 48px; --card-pad: 20px; }
  .brand__meta, .masthead__contact { display: none; }
  .emblem { width: 40px !important; height: 40px !important; }

  /* Una sola fila en móvil. Con wrap, la marca (234px) + idioma (82px) +
     hamburguesa (44px) no caben en los 350px útiles de un iPhone y caían a
     TRES filas, dejando la hamburguesa sola y la cabecera en 146px de alto.
     La marca se queda con el espacio sobrante y su nombre parte en dos
     líneas dentro de la altura del emblema, así que no crece nada. */
  .masthead__top { flex-wrap: nowrap; gap: var(--s8); padding-block: var(--s12); }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand__name { font-size: 15px; line-height: 1.2; }
  .lang { flex-shrink: 0; }
  .lang a, .lang span { padding-inline: 10px; font-size: 11.5px; }
  .nav__toggle { flex-shrink: 0; margin-left: 0; }
  .hero__actions .btn { flex: 1 1 100%; }
  .lines ul { justify-content: flex-start; gap: var(--s8) var(--s16); }
  .claim { padding: var(--s24); }
  .card--lg { padding: var(--s24); }

  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto;
    background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; color: var(--charcoal);
  }
  .nav ul { flex-direction: column; column-gap: 0; padding-block: 0; }
  .nav li + li { border-top: 1px solid var(--line); }
  .nav a { min-height: 48px; }
  .nav[data-open="false"] { display: none; }
  .foot__legal nav ul { flex-wrap: wrap; gap: var(--s16); }
}

@media print {
  .alert-bar, .nav, .lang, .hero__actions, .skip { display: none; }
  body { background: #fff; font-size: 11pt; color: #000; }
  .card, .claim { box-shadow: none; border: 1px solid var(--line); }
}