/* Alas Australes, propuesta 2: "el informe impreso" (taste-skill editorial-report, seed 1147528499).
   Composición: un eje vertical al 42 % del ancho; los títulos y los cuerpos cuelgan de él y la zona izquierda
   guarda notas al margen. Páginas de texto en papel blanco alternan con páginas enteras de color plano, como
   un impreso a dos tintas. Colores: la paleta de marca de Alas Australes (celeste, aguamarina y dos blancos)
   con dos azules marinos en lugar de los negros: el profundo para el texto y el del logo para las páginas
   oscuras. Sobre celeste y aguamarina el texto va siempre en marino. Un solo acento cálido, el naranja de
   faena, sólo para la acción y para "lo que queda el lunes"; siempre sobre blanco o marino, nunca sobre
   celeste ni aguamarina, donde no se distingue. */

@font-face { font-family: "Switzer"; src: url("fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #ffffff;            /* color claro: papel */
  --surface: #f7f7f7;       /* cuarto color: un paso de tono */
  --ink: #13254a;           /* azul marino profundo */
  --muted: #4a5872;         /* sólo notas secundarias, gris azulado */
  --accent: #97c0e8;        /* color principal: celeste */
  --accent-ink: #13254a;
  --field-1: #97c0e8; --field-1-ink: #13254a; --field-1-soft: #c0f1ef;  /* celeste */
  --field-2: #c0f1ef; --field-2-ink: #13254a;  /* color secundario: aguamarina */
  --field-3: #13254a; --field-3-ink: #ffffff; --field-3-soft: #c3d1e6;  /* azul marino profundo */
  --field-4: #183c6c; --field-4-ink: #ffffff; --field-4-soft: #c3d1e6;  /* azul marino del logo */
  --accion: #f26b3a; --accion-ink: #13254a;  /* naranja de faena: 3:1 sobre blanco, 5:1 sobre marino */

  --font: "Switzer", "Helvetica Neue", Arial, system-ui, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  --step-head: clamp(2.125rem, 1.35rem + 3.1vw, 4rem);
  --step-display: clamp(2.75rem, 6.8vw, 6.75rem);

  --m: clamp(16px, 2.2vw, 32px);
  --axis: 42vw;
  --gap: 24px;
  --section: clamp(104px, 11vw, 200px);
  --brand-w: 184px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; letter-spacing: -0.005em; font-kerning: normal; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, figure, ul, ol, dl, dd, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-color :focus-visible, .on-dark :focus-visible { outline-color: currentColor; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: var(--m); top: 8px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--field-3-ink); transform: translateY(-200%); }
.saltar:focus { transform: none; }

/* Botón: un bloque plano de esquinas rectas, decidido una vez */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; background: var(--accion); color: var(--accion-ink); font-weight: 500; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 180ms ease; }
.button:hover { background: #f7845a; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; transition: text-decoration-color 180ms ease, color 180ms ease; }
.link:hover { text-decoration-color: transparent; }

/* ---------- Cabecera: bloque de tinta con la marca y la pestaña azul hasta el eje ---------- */
.top { position: absolute; inset: 0 0 auto; z-index: 4; display: flex; align-items: stretch; height: 56px; }
.top__brand { display: flex; align-items: center; width: var(--brand-w); padding-inline: 20px; background: var(--ink); color: var(--field-3-ink); }
.marca { display: block; width: 136px; height: auto; }
.top__tab { display: flex; align-items: center; gap: clamp(18px, 1.8vw, 28px); width: auto; min-width: calc(var(--axis) - var(--brand-w)); padding-inline: 24px; background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.top__tab a { text-decoration: none; white-space: nowrap; }
.top__tab a:hover, .top__tab a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }
.top__action { margin-left: auto; min-height: 56px; }
/* entrada a la plataforma: la home vive en app.alasaustrales.com */
.top__ingresar { display: flex; align-items: center; margin-left: auto; padding-inline: 20px; background: var(--bg); color: var(--ink); font-weight: 500; text-decoration: none; }
.top__ingresar:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.top__ingresar + .top__action { margin-left: 0; }
.top__menu { display: none; }
.menu-panel { display: none; }

/* ---------- Mosaico del encabezado ---------- */
.band { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; height: 52svh; min-height: 380px; max-height: 640px; background: var(--ink); }
.band > * { min-width: 0; min-height: 0; overflow: clip; }
.band img, .band video, .mosaic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.cell--mar { grid-column: 1 / 3; grid-row: 1; }
.cell--mar img { object-position: 50% 62%; }
/* mientras llega la foto nítida se ve su miniatura difuminada (inline, la pone gen.py) */
.band figure { background-position: center; background-size: cover; background-repeat: no-repeat; }
.cell--mar { background-position: 50% 62%; }
.cell--azul { grid-column: 3; grid-row: 1 / 3; background: var(--field-1); }
.cell--bosque { grid-column: 4; grid-row: 1; }
.cell--rojo { grid-column: 6; grid-row: 1; background: var(--field-3); }
.cell--jardin { grid-column: 5; grid-row: 1; }
.cell--jardin img { object-position: 50% 55%; }
.cell--ala { grid-column: 1; grid-row: 2; background: var(--field-4); }
.cell--vendas { grid-column: 2; grid-row: 2; }
.cell--tinta { grid-column: 4; grid-row: 2; background: var(--field-3); }
.cell--baston { grid-column: 5; grid-row: 2; }
.cell--rojo2 { grid-column: 6; grid-row: 2; background: var(--field-2); }

/* Bajo el mosaico: la bajada al margen, el título desde el eje */
.hero { display: grid; grid-template-columns: calc(var(--axis) - var(--m)) minmax(0, 1fr); column-gap: 0; padding: clamp(36px, 4.5vw, 72px) var(--m) clamp(56px, 6vw, 96px); }
.hero__stand { grid-column: 1; grid-row: 1; align-self: start; max-width: 36ch; padding-top: 0.6em; padding-right: var(--gap); font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; }
.hero__more { margin-top: 20px; }
.hero__title { grid-column: 2; grid-row: 1 / span 2; font-size: var(--step-display); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; }
.hero__title .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .line > span { display: block; }
.hero__boton { display: none; }
.hero__datos { display: none; }
@media (min-width: 1280px) {
  .hero__datos { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .hero__datos li { position: relative; padding-left: 1.3em; }
  .hero__datos li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6em; height: 0.6em; background: var(--ink); }
}

/* ---------- Frases que escuchamos: tarjetas que se pliegan en lomos ---------- */
.senales { position: relative; }
.senales__stage { padding: var(--section) var(--m) 0; }
.senales__titulo { font-size: var(--step-head); }
.deck { display: grid; gap: 12px; margin-top: 40px; }
.tarjeta { position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 360px; padding: 32px; color: var(--field-1-ink); background: var(--field-1); overflow: clip; }
.tarjeta:nth-child(3n+2) { background: var(--field-2); }
.tarjeta:nth-child(3n) { background: var(--field-3); color: var(--field-3-ink); }
.tarjeta blockquote p { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; max-width: 24ch; }
.tarjeta__cuerpo { display: grid; gap: 8px; max-width: 46ch; }
.tarjeta__cuerpo b { font-weight: 600; }
.tarjeta__pie { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.senales__nota { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-bottom: 8px; }

@media (min-width: 1024px) {
  .js .senales.is-pinned { height: 250svh; }
  .js .senales.is-pinned .senales__stage { position: sticky; top: 0; height: 100svh; overflow: clip; padding-top: clamp(64px, 10vh, 112px); }
  .js .senales.is-pinned .deck { position: relative; display: block; height: min(440px, 50svh); overflow: clip; }
  .js .senales.is-pinned .tarjeta { position: absolute; top: 0; left: 0; width: min(640px, 52vw); height: 100%; transform: translateX(var(--x, 0px)); transition: transform 520ms var(--ease-expo); }
  .js .senales.is-pinned .tarjeta.is-lomo { width: 120px; cursor: pointer; }
  .js .senales.is-pinned .tarjeta.is-lomo > * { visibility: hidden; }
  .js .senales.is-pinned .tarjeta.is-lomo::before { content: attr(data-inicio); position: absolute; top: 32px; left: 32px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; white-space: nowrap; }
}

/* ---------- Cuatro formas de trabajar: mosaico de piezas distintas ---------- */
.formas { padding: var(--section) var(--m) 0; }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 8px; }
.pieza { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; overflow: clip; text-decoration: none; min-width: 0; }
a.pieza { transition: background-color 180ms ease; }
.pieza__frase { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; max-width: 26ch; }
.pieza__ir { margin-top: auto; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; }
.p-titulo { grid-column: 1 / 7; grid-row: 1 / 4; background: var(--surface); }
.p-titulo h2 { font-size: var(--step-head); max-width: 12ch; }
.p-titulo p { max-width: 40ch; margin-top: auto; }
.p-cifra { grid-column: 7 / 10; grid-row: 1 / 4; background: var(--field-2); color: var(--field-2-ink); }
.p-cifra strong { font-size: var(--step-display); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; white-space: nowrap; }
.p-talleres { grid-column: 10 / 13; grid-row: 1 / 4; background: var(--field-1); color: var(--field-1-ink); }
.p-talleres:hover { background: #abcdee; }
.p-foto { grid-column: 1 / 7; grid-row: 4 / 9; padding: 0; }
.p-jefaturas { grid-column: 7 / 13; grid-row: 4 / 7; background: var(--field-3); color: var(--field-3-ink); }
.p-jefaturas:hover { background: var(--field-4); }
.p-donde { grid-column: 7 / 10; grid-row: 7 / 9; background: var(--field-1); color: var(--field-1-ink); }
.p-donde li { line-height: 1.35; }
.p-coaching { grid-column: 10 / 13; grid-row: 7 / 9; background: var(--surface); }
.p-coaching:hover { background: #eeeeee; }
.p-cuidado { grid-column: 1 / 7; grid-row: 9 / 12; background: var(--field-2); color: var(--field-2-ink); }
.p-cuidado:hover { background: #ade9e6; }
.p-foto2 { grid-column: 7 / 13; grid-row: 9 / 12; padding: 0; }
.p-foto img, .p-foto2 img { width: 100%; height: 100%; }
.p-foto2 img { object-position: 50% 70%; }

/* ---------- Cómo trabajamos: líneas que bajan en escalera ---------- */
.pasos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; margin-top: var(--section); padding: var(--section) var(--m); background: var(--field-3); color: var(--field-3-ink); }
.paso { grid-column: 1 / -1; }
.paso:nth-child(2) { grid-column: 3 / -1; }
.paso:nth-child(3) { grid-column: 5 / -1; }
.paso:nth-child(4) { grid-column: 7 / -1; }
.paso h2, .paso h3 { font-size: var(--step-head); letter-spacing: -0.04em; line-height: 1; }
.paso:last-child h3 { color: var(--accion); }
.paso p { max-width: 36ch; margin-top: 12px; }

/* ---------- Arma tu propuesta: lo vivo de la página ---------- */
.propuesta { display: grid; grid-template-columns: calc(var(--axis) - var(--m)) minmax(0, 1fr); column-gap: 0; padding: var(--section) var(--m); background: var(--field-1); color: var(--field-1-ink); }
.propuesta__intro { grid-column: 1; padding-right: clamp(24px, 3vw, 56px); }
.propuesta__intro h2 { font-size: var(--step-head); }
.propuesta__intro > p { margin-top: 20px; max-width: 38ch; }
.armar { display: grid; gap: 28px; margin-top: 40px; }
.armar fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.armar legend { padding: 0; margin-bottom: 12px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips label { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: var(--bg); color: var(--ink); cursor: pointer; line-height: 1.25; transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out); }
.chips label:hover { background: var(--field-2); }
.chips label:active { transform: scale(0.97); }
.chips input:checked + label { background: var(--ink); color: var(--field-3-ink); }
.chips input:focus-visible + label { outline: 3px solid var(--field-1-ink); outline-offset: 2px; }
.personas { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.personas output { min-width: 4ch; font-size: var(--step-lead); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
input[type="range"] { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--ink); cursor: pointer; }
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink); }

.hoja { grid-column: 2; align-self: start; display: grid; gap: 24px; max-width: 680px; padding: clamp(24px, 3vw, 44px); background: var(--bg); color: var(--ink); }
.hoja h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.3; }
.hoja__nota { margin-top: 6px; color: var(--muted); font-size: var(--step-small); }
.hoja table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hoja th, .hoja td { padding: 12px 14px; text-align: left; vertical-align: top; }
.hoja th { width: 34%; font-weight: 500; color: var(--muted); }
.hoja tr:nth-child(odd) { background: var(--surface); }
.hoja__lunes h4 { margin: 0 0 10px; font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; }
.hoja__lunes li { position: relative; padding-left: 1.3em; }
.hoja__lunes li + li { margin-top: 6px; }
.hoja__lunes li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6em; height: 0.6em; background: var(--accion); }
.hoja__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.cambia { transition: background-color 600ms ease; }
.cambia.is-nuevo { background: var(--field-1-soft); transition: none; }

/* ---------- Trabajos recientes: la tabla ---------- */
.trabajos { padding: var(--section) var(--m) 0; }
.trabajos__titulo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); font-size: var(--step-head); }
.trabajos__titulo span { grid-column: 1 / -1; }
.trabajos__titulo span + span { grid-column: 3 / -1; }
.tabla { width: 100%; margin-top: 72px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 14px 12px; text-align: left; vertical-align: baseline; }
.tabla thead th { font-weight: 500; color: var(--muted); }
.tabla tbody tr:nth-child(even) td { background: var(--surface); }
.tabla .anio { width: 16.6%; font-weight: 600; }
.tabla .org { width: 30%; font-weight: 500; }
.tabla .fmt { text-align: right; white-space: nowrap; }
.tabla tr.grupo td { padding: 14px 0; background: none !important; }
.logos { display: grid; grid-template-columns: calc(var(--axis) - var(--m)) minmax(0, 1fr); margin-top: 96px; padding-top: 56px; padding-bottom: var(--section); }
.logos > p { padding-right: var(--gap); font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.02em; max-width: 26ch; }
.logos ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 28px 32px; align-items: center; }
.logo { display: block; width: 100%; height: 52px; object-fit: contain; transition: transform 180ms var(--ease-out); }

/* ---------- En palabras de una clienta: una carta ---------- */
.carta { display: grid; grid-template-columns: calc(var(--axis) - var(--m)) minmax(0, 34em); padding: var(--section) var(--m); background: var(--field-2); color: var(--field-2-ink); }
.carta__margen { grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding-right: var(--gap); }
.carta h2 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.3; max-width: 16ch; }
.carta__texto { grid-column: 2; display: grid; gap: 20px; font-size: var(--step-body); line-height: 1.55; }
.carta__texto .abre { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.carta__firma { margin-top: 20px; }
.carta__firma a { font-weight: 500; }
.carta__otra { max-width: 100%; }
.carta__otra p:first-child { font-size: var(--step-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.carta__otra p + p { margin-top: 16px; }

/* ---------- Quiénes somos: el ala como capitular ---------- */
.nosotros { display: grid; grid-template-columns: calc(var(--axis) - var(--m)) minmax(0, 1fr); padding: var(--section) var(--m); }
.nosotros__datos { grid-column: 1; display: grid; gap: 20px; align-content: start; padding-right: var(--gap); }
.nosotros__datos h2 { font-size: var(--step-head); }
.nosotros__datos ul { display: grid; gap: 10px; font-size: var(--step-small); color: var(--muted); }
.nosotros__texto { grid-column: 2; display: grid; gap: 1.2em; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.015em; max-width: 34em; }
.nosotros__texto p + p { color: var(--muted); }
.capitular { float: left; width: 3.6em; height: 3.6em; margin: 0.2em 0.5em 0 0; background: var(--field-1); display: grid; place-items: center; }
.capitular span { display: block; width: 72%; height: 72%; background: var(--field-1-ink); -webkit-mask: url("media/ala.png") center / contain no-repeat; mask: url("media/ala.png") center / contain no-repeat; }
.nosotros__texto a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.06em; color: var(--ink); }

/* ---------- Antes de contratar: una franja por pregunta ---------- */
.faq__cabeza { display: flex; align-items: flex-end; min-height: 40svh; padding: 56px var(--m); background: var(--field-1); color: var(--field-1-ink); }
.faq__cabeza h2 { font-size: var(--step-display); letter-spacing: -0.06em; line-height: 0.9; max-width: 11ch; }
.franja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 56px var(--m); }
.franja:nth-child(even) { background: var(--surface); }
.franja h3 { grid-column: 1 / 6; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.3; }
.franja p { grid-column: 7 / 13; max-width: 52ch; }

/* ---------- Conversemos ---------- */
.contacto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: 160px var(--m) 120px; background: var(--field-3); color: var(--field-3-ink); }
.contacto__frase { grid-column: 1 / 6; display: grid; gap: 20px; }
.contacto__frase h2 { font-size: var(--step-head); }
.contacto__frase p { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.02em; max-width: 26ch; }
.contacto__foto { grid-column: 8 / 10; aspect-ratio: 1; max-width: 170px; overflow: clip; }
.contacto__foto img { width: 100%; height: 100%; object-fit: cover; }
.contacto__vias { grid-column: 10 / 13; display: grid; gap: 12px; }
.contacto__vias p:first-child { font-weight: 500; }
.contacto__vias a { font-size: var(--step-body); overflow-wrap: anywhere; }
.contacto__vias .chico { margin-top: 8px; font-size: var(--step-small); color: var(--field-3-soft); }

/* ---------- Pie: el nombre primero ---------- */
.pie { display: grid; gap: 72px; padding: 72px var(--m) 40px; background: var(--field-1); color: var(--field-1-ink); }
.pie__nombre { display: block; width: 100%; height: auto; }
.pie__fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.pie__lugares { grid-column: 1 / 6; display: grid; gap: 8px; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.02em; }
.pie__lugares a { text-decoration: none; }
.pie__lugares a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.pie__cols { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; font-size: var(--step-small); }
.pie__cols p { margin-bottom: 10px; font-weight: 600; }
.pie__cols li + li { margin-top: 6px; }
.pie__cols a { text-decoration: none; }
.pie__cols a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 24px; font-size: var(--step-small); }

/* ---------- Páginas interiores ---------- */
.band--corta { grid-template-rows: 1fr; height: 34svh; min-height: 260px; max-height: 420px; }
.band--corta > * { grid-row: 1 !important; }
.band--corta .c1 { grid-column: 1 / 3; }
.band--corta .c2 { grid-column: 3; background: var(--field-1); }
.band--corta .c3 { grid-column: 4; }
.band--corta .c4 { grid-column: 5; background: var(--field-2); }
.band--corta .c5 { grid-column: 6; }
.texto { display: grid; grid-template-columns: calc(var(--axis) - var(--m)) minmax(0, 1fr); padding: var(--section) var(--m) 0; }
.texto > h2 { grid-column: 2; font-size: var(--step-head); }
.texto__margen { grid-column: 1; grid-row: 1 / span 3; padding-right: var(--gap); }
.texto__margen p { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.02em; max-width: 22ch; }
.texto__margen p + p { margin-top: 12px; font-size: var(--step-body); line-height: 1.5; letter-spacing: -0.005em; max-width: 30ch; color: var(--muted); }
.texto__cuerpo { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 36ch)); gap: 20px 40px; margin-top: 32px; }
.texto__cuerpo.una { grid-template-columns: minmax(0, 60ch); }
.texto__cuerpo p + p { margin-top: 0; }
.lista-marcas li { position: relative; padding-left: 1.3em; }
.lista-marcas li + li { margin-top: 10px; }
.lista-marcas li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6em; height: 0.6em; background: var(--ink); }
.texto .tabla { grid-column: 2; margin-top: 40px; }
.cta-banda { display: grid; grid-template-columns: calc(var(--axis) - var(--m)) minmax(0, 1fr); align-items: end; margin-top: var(--section); padding: 96px var(--m); background: var(--field-3); color: var(--field-3-ink); }
.cta-banda h2 { font-size: var(--step-head); max-width: 12ch; }
.cta-banda div { display: grid; gap: 20px; justify-items: start; }
.cta-banda p { max-width: 44ch; }
.catalogo { padding: var(--section) var(--m) 0; display: grid; gap: 96px; }
.area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.area h2 { font-size: var(--step-head); }
.area .tabla { margin-top: 0; max-width: 1040px; }
.area .tabla .org { width: 32%; }
.area .tabla td:last-child { text-align: right; white-space: nowrap; }

/* ---------- Movimiento (sólo con script y sin pedir menos movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .line > span { transform: translateY(105%); animation: sube-linea 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: aparece 600ms var(--ease-out) 520ms forwards; }
  .js .band > * { clip-path: inset(0 0 100% 0); animation: abre 900ms var(--ease-in-out) forwards; animation-delay: calc(var(--d, 0) * 60ms); }
  .js [data-reveal] { opacity: 0.3; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .p-foto img, .p-foto2 img, .contacto__foto img { transition: transform 1200ms var(--ease-out); }
  .p-foto:hover img, .p-foto2:hover img { transform: scale(1.04); }
  .logo:hover { transform: translateY(-2px); }
}
@keyframes sube-linea { to { transform: none; } }
@keyframes aparece { to { opacity: 1; transform: none; } }
@keyframes abre { to { clip-path: inset(0); } }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .top__tab a.ancho { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { grid-template-columns: 40% minmax(0, 1fr) !important; }
  .hero .hero__stand { grid-column: 1; grid-row: 1; }
  .hero .hero__title { grid-column: 2; grid-row: 1 / span 3; }
  .hero .hero__more { grid-column: 1; grid-row: 2; }
  .hero .hero__boton { grid-column: 1; grid-row: 3; }
  .contacto__frase { grid-column: 1 / -1; margin-bottom: 40px; }
  .contacto__foto { grid-column: 1 / 4; }
  .contacto__vias { grid-column: 5 / -1; }
}
@media (max-width: 1023px) {
  :root { --axis: 0px; }
  .tabla .fmt { white-space: normal; }
  .top { position: relative; height: 56px; background: var(--bg); }
  .top__tab { display: none; }
  .top__action { display: none; }
  .top__ingresar { display: none; }
  .top__brand { width: auto; }
  .top__menu { display: block; margin-left: auto; min-height: 56px; padding: 0 var(--m); background: none; border: 0; font-weight: 500; cursor: pointer; }
  .menu-panel { position: absolute; top: 56px; left: 0; right: 0; z-index: 10; display: grid; gap: 4px; padding: 16px var(--m) 24px; background: var(--ink); color: var(--field-3-ink); }
  .menu-panel[hidden] { display: none; }
  .menu-panel a { padding: 10px 0; font-size: var(--step-lead); text-decoration: none; }
  .menu-panel .button { margin-top: 12px; }
  .hero, .propuesta, .logos, .nosotros, .texto, .cta-banda, .area { grid-template-columns: minmax(0, 1fr); }
  .hero__stand, .hero__title, .propuesta__intro, .hoja, .nosotros__datos, .nosotros__texto, .texto > h2, .texto__margen, .texto__cuerpo, .texto .tabla { grid-column: 1; grid-row: auto; }
  .hero__title { grid-row: 1; }
  .hero__stand { grid-row: 2; max-width: 34ch; padding-top: 20px; }
  .hero__boton { display: inline-flex; grid-row: 3; margin-top: 24px; justify-self: start; }
  .propuesta__intro { padding-right: 0; }
  .hoja { margin-top: 48px; }
  .logos > p { margin-bottom: 32px; }
  .nosotros__datos { padding-right: 0; margin-bottom: 40px; }
  .carta { grid-template-columns: minmax(0, 1fr); }
  .carta__margen, .carta__texto { grid-column: 1; }
  .carta__margen { padding-right: 0; margin-bottom: 40px; gap: 32px; }
  .texto__margen { margin-bottom: 24px; }
  .area h2 { margin-bottom: 24px; }
  .cta-banda div { margin-top: 24px; }
  .cta-banda h2, .cta-banda p { max-width: none; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 767px) {
  .band { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 38svh; min-height: 260px; }
  .cell--jardin, .cell--vendas, .cell--baston, .cell--rojo2 { display: none; }
  .cell--mar { grid-column: 1 / 3; grid-row: 1; }
  .cell--azul { grid-column: 3; grid-row: 1 / 3; }
  .cell--rojo { grid-column: 1; grid-row: 2; }
  .cell--bosque { grid-column: 2; grid-row: 2; }
  .cell--ala, .cell--tinta { display: none; }
  .hero { padding-top: 28px; }
  .hero__title { font-size: var(--step-display); }
  .hero__stand { font-size: var(--step-lead); line-height: 1.3; }
  .hero__boton { width: 100%; }
  .deck { gap: 12px; }
  .tarjeta { min-height: 0; padding: 24px; }
  .tarjeta__pie { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6px; }
  .mosaic > .pieza { grid-column: 1 / -1; grid-row: auto; min-height: 180px; }
  .mosaic > .p-cifra, .mosaic > .p-donde { grid-column: span 1; aspect-ratio: 1; min-height: 0; padding: 16px; }
  .p-cifra p, .p-donde li { font-size: var(--step-small); }
  .p-titulo { order: 1; } .p-foto { order: 2; } .p-cifra { order: 3; } .p-donde { order: 4; } .p-talleres { order: 5; } .p-jefaturas { order: 6; } .p-coaching { order: 7; } .p-cuidado { order: 8; } .p-foto2 { order: 9; }
  .p-foto, .p-foto2 { aspect-ratio: 4 / 3; min-height: 0 !important; }
  .pasos { row-gap: 40px; }
  .paso, .paso:nth-child(n) { grid-column: 1 / -1; }
  .paso:nth-child(2) { padding-left: 6vw; }
  .paso:nth-child(3) { padding-left: 12vw; }
  .paso:nth-child(4) { padding-left: 18vw; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 12px 12px; }
  .tabla tbody tr:nth-child(even) { background: var(--surface); }
  .tabla tbody tr:nth-child(even) td { background: none; }
  .tabla td { padding: 0; }
  .tabla .anio:empty { display: none; }
  .tabla .anio { font-size: var(--step-lead); margin: 16px 0 8px; }
  .tabla .org, .tabla .anio { width: auto; }
  .tabla .org { font-weight: 500; }
  .tabla .trab, .tabla .fmt { display: inline; color: var(--muted); font-size: var(--step-small); text-align: left; white-space: normal; }
  .tabla .fmt::before { content: ". "; }
  .tabla tr.grupo { display: none; }
  .logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 18px; }
  .logo { height: 40px; }
  .franja { padding: 32px var(--m); row-gap: 12px; }
  .franja h3, .franja p { grid-column: 1 / -1; }
  .faq__cabeza { min-height: 30svh; }
  .contacto { padding: 96px var(--m) 72px; row-gap: 32px; }
  .contacto__frase { grid-column: 1 / -1; }
  .contacto__foto { grid-column: 1 / 5; max-width: 96px; }
  .contacto__vias { grid-column: 5 / -1; }
  .pie__lugares, .pie__cols { grid-column: 1 / -1; }
  .pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capitular { width: 4.4em; height: 4.4em; }
  .texto__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .area .tabla td:last-child { text-align: left; }
  .area .tabla .trab { display: block; margin-top: 4px; font-size: var(--step-body); color: var(--ink); }
  .area .tabla .fmt::before { content: none; }
  .area .tabla .fmt { display: block; margin-top: 8px; }
  .band--corta { height: 26svh; min-height: 200px; }
  .band--corta .c4, .band--corta .c5 { display: none; }
  .band--corta .c1 { grid-column: 1 / 3; }
  .band--corta .c2 { grid-column: 3; }
  .band--corta .c3 { display: none; }
}