@font-face {
  font-family: Montserrat;
  src: url(../fuentes/montserrat-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --verde: #28968B;
  --negro: #000;
  --blanco: #fff;
  --gris: #8c8c8c;
  --m: clamp(16px, 2.2vw, 32px);
  /* Cinco tamaños. Titulares grandes con peso medio: grandes sin verse gruesos. */
  --t1: 7.4vw;
  --t2: clamp(36px, 5.2vw, 96px);
  --t3: clamp(22px, 2.2vw, 34px);
  --t4: clamp(17px, 1.25vw, 20px);
  --t5: 16px;
  --titular: 500;
  --barra: 72px;
  --curva: cubic-bezier(.23, 1, .32, 1);
  --seccion: clamp(120px, 13vw, 220px);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--barra); background: var(--negro); }
body { font-family: Montserrat, system-ui, sans-serif; font-weight: 400; font-size: var(--t4); line-height: 1.5; color: var(--blanco); background: var(--negro); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: var(--titular); letter-spacing: -.035em; line-height: 1; text-wrap: balance; }
p { max-width: 58ch; text-wrap: pretty; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
::selection { background: var(--verde); color: var(--negro); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border: 0;
  font: inherit; font-weight: 600; font-size: var(--t5); line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
  background: var(--verde); color: var(--negro); transition: transform 160ms var(--curva), background-color 160ms; touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) { .boton:hover { transform: translateY(-2px); background: #2fa99d; } }
.boton:active { transform: scale(.97); }

.saltar { position: fixed; left: var(--m); top: -80px; z-index: 30; background: var(--verde); color: var(--negro); padding: 12px 18px; font-size: var(--t5); font-weight: 600; }
.saltar:focus { top: 10px; }

/* Barra: logo real, dos enlaces y la única acción */
.barra { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--barra); padding: 0 var(--m); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--negro); }
.marca { display: block; padding: 6px 0; }
.marca img { width: clamp(150px, 15vw, 220px); }
.barra nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); font-size: var(--t5); font-weight: 500; }
.barra nav a:not(.boton) { text-decoration: none; padding: 12px 0; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) { .barra nav a:not(.boton):hover { opacity: .6; } }
.barra .boton { min-height: 44px; padding: 10px 20px; }

/* Portada: la persona al centro, datos a los lados, la frase abajo de lado a lado */
.portada {
  position: relative; min-height: max(100svh, 620px); padding: calc(var(--barra) + clamp(20px, 4vh, 44px)) var(--m) clamp(10px, 2vh, 22px);
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr auto auto; column-gap: var(--m); overflow: clip;
}
.foto { position: absolute; top: var(--barra); bottom: 0; left: 50%; translate: -50% 0; aspect-ratio: 1087 / 1447; height: auto; z-index: 0; }
.foto picture { display: block; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.portada > :not(.foto) { position: relative; z-index: 1; }
.bajada { grid-column: 1; grid-row: 1; max-width: 22em; }
.equipo { grid-column: 1; grid-row: 2; align-self: start; margin-top: 28px; max-width: 17em; font-weight: 600; }
.lista { grid-column: 4; grid-row: 1; justify-self: end; text-align: right; font-size: var(--t5); line-height: 1.75; }
.mensaje { grid-column: 1 / -1; grid-row: 3; align-self: end; font-size: var(--t3); font-weight: var(--titular); letter-spacing: -.02em; line-height: 1.15; max-width: none; }
.cta { grid-column: 3 / -1; grid-row: 2; justify-self: end; align-self: start; margin-top: 32px; }
.portada h1 { grid-column: 1 / -1; grid-row: 4; margin-top: clamp(6px, 1.4vh, 16px); font-size: var(--t1); line-height: 1.02; letter-spacing: -.045em; white-space: nowrap; color: var(--verde); }
.linea { display: inline-block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: top; }
.linea > span { display: block; }

/* Lo que pasa hoy: blanco, una idea por fila */
.problema { background: var(--blanco); color: var(--negro); padding: var(--seccion) var(--m); display: grid; gap: clamp(64px, 7vw, 120px); }
.problema article { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: end; }
.problema h2 { grid-column: 1 / 8; font-size: var(--t2); }
.problema p { grid-column: 9 / -1; font-size: var(--t4); }
.problema article:nth-child(2) h2 { grid-column: 3 / 10; }
.problema article:nth-child(2) p { grid-column: 10 / -1; }
.problema article:nth-child(3) h2 { grid-column: 5 / 12; }
.problema article:nth-child(3) p { grid-column: 1 / 5; grid-row: 1; }

/* Método 3F: las tres palabras grandes, una por fila */
.metodo { padding: var(--seccion) var(--m) clamp(56px, 6vw, 110px); overflow-x: clip; }
.cabeza { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 20px; align-items: end; margin-bottom: clamp(56px, 7vw, 120px); }
.cabeza h2 { grid-column: 1 / 7; font-size: var(--t2); color: var(--verde); }
.cabeza p { grid-column: 1 / 8; font-size: var(--t3); font-weight: var(--titular); letter-spacing: -.02em; line-height: 1.3; }
.paso { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: end; padding: clamp(28px, 3vw, 48px) 0; }
.paso h3 { grid-column: 1 / 9; font-size: var(--t1); letter-spacing: -.045em; }
.paso p { grid-column: 9 / -1; padding-bottom: .6em; }
.paso b { display: block; font-weight: 600; }

/* Quién dirige y lo publicado: una sola sección blanca, la persona junto a una pieza real */
.publicado { background: var(--blanco); color: var(--negro); padding: var(--seccion) var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 40px; align-items: end; }
.quien { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: start; margin-bottom: clamp(56px, 8vw, 150px); scroll-margin-top: clamp(24px, 4vw, 56px); }
.quien h2 { grid-column: 1 / 6; }
.bio { grid-column: 6 / -1; display: grid; gap: .9em; font-size: clamp(18px, 1.6vw, 25px); line-height: 1.5; letter-spacing: -.01em; }
.bio .remate { font-weight: 600; }
.publicado .texto { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); align-items: end; }
.publicado h2 { grid-column: 1 / 8; font-size: var(--t2); }
.publicado .texto p { grid-column: 9 / -1; }
.laminas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--m); align-items: start; margin-top: clamp(24px, 3vw, 56px); }

/* Servicios */
.servicios { padding: var(--seccion) var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--m); row-gap: 56px; align-items: start; }
.servicios > h2 { grid-column: 1 / 5; font-size: var(--t2); }
.columna { grid-column: span 4; }
.columna:nth-of-type(1) { grid-column: 5 / 9; }
.columna:nth-of-type(2) { grid-column: 9 / -1; }
.columna h3 { font-size: var(--t3); letter-spacing: -.02em; margin-bottom: 32px; color: var(--verde); }
.servicio + .servicio { margin-top: 28px; }
.efe { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gris); margin-bottom: 4px; }
.servicio h4 { font-size: var(--t4); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 6px; }

/* Cierre */
.cierre { background: var(--blanco); color: var(--negro); padding: var(--seccion) var(--m); display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(36px, 4vw, 64px); }
.cierre h2 { font-size: var(--t2); }
.cierre h2 span { display: block; }
.cierre > div { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.boton.grande { min-width: min(100%, 340px); min-height: 64px; font-size: var(--t4); }
.cierre p { font-size: var(--t5); }
.cierre p a { text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Pie: el nombre vuelve a todo lo ancho */
footer { padding: clamp(64px, 7vw, 120px) var(--m) var(--m); font-size: var(--t5); }
.logo-pie { width: 100%; margin-bottom: clamp(48px, 5vw, 80px); }
.enlaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px var(--m); }
.enlaces h3 { font-size: var(--t5); font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.enlaces a { display: block; padding: 6px 0; text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .enlaces a:hover, .final a:hover { text-decoration: underline; } }
.final { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.final a { padding: 12px 0; text-underline-offset: 3px; }

/* Entrada de la portada: solo CSS, termina visible aunque no haya JavaScript */
@keyframes entra-foto { from { opacity: 0; scale: 1.06; } }
@keyframes sube { from { transform: translateY(105%); } }
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } }
.foto { animation: entra-foto 1.8s var(--curva) both; }
.portada h1 .linea > span { animation: sube 1s var(--curva) .35s both; }
.portada h1 .linea + .linea > span { animation-delay: .45s; }
.mensaje { animation: aparece .8s var(--curva) .2s both; }
.equipo { animation: aparece .8s var(--curva) .6s both; }
.cta { animation: aparece .8s var(--curva) .7s both; }
.bajada { animation: aparece .8s var(--curva) .5s both; }
.lista { animation: aparece .8s var(--curva) .8s both; }

/* Al bajar, la foto se queda atrás y se apaga un poco (solo navegadores que lo soportan) */
@supports (animation-timeline: scroll()) {
  .foto picture { animation: deriva linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes deriva { to { transform: translateY(14%); opacity: .4; } }
  .paso h3 { animation: corre linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes corre { from { transform: translateX(6vw); } }
}

/* Entradas de las secciones: solo con JavaScript, nunca escondidas sin él */
.js [data-entra] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-entra].dentro { opacity: 1; transform: none; }
.js figure[data-entra] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--curva); transition-delay: calc(var(--i, 0) * 90ms); }
.js figure[data-entra].dentro { clip-path: inset(0 0 0 0); }
.js figure[data-entra] img { transform: scale(1.05); transition: transform 1.2s var(--curva); }
.js figure[data-entra].dentro img { transform: none; }
.js .logo-pie[data-entra] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--curva); }
.js .logo-pie[data-entra].dentro { clip-path: inset(0 0 0 0); }

@media (max-width: 860px) {
  :root { --t1: 12vw; --t2: 10.4vw; --t3: 22px; --t4: 17px; --barra: 60px; --seccion: 104px; }
  .barra nav a:not(.boton) { display: none; }
  .marca img { width: 150px; }
  .portada { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding: var(--barra) var(--m) 72px; }
  .foto { position: relative; top: auto; bottom: auto; left: auto; translate: none; align-self: center; width: calc(100% + 2 * var(--m)); max-width: 640px; height: auto; max-height: 44svh; aspect-ratio: 750 / 649; }
  /* En pantallas bajas se recorta la pared de arriba, no la cara, para que "Agencia..." entre en el primer pantallazo */
  .foto img { object-position: 50% 80%; }
  .mensaje { order: 1; margin-top: -60px; align-self: auto; }
  .portada h1 { order: 2; white-space: normal; margin-top: 8px; }
  .linea { display: block; }
  .equipo { order: 3; margin-top: 18px; }
  .cta { order: 4; margin-top: 22px; align-self: stretch; }
  .bajada { order: 5; margin-top: 22px; }
  /* En celular la lista de servicios de la portada se repite completa en Servicios: se esconde */
  .lista { display: none; }
  .problema article, .cabeza, .paso, .publicado, .servicios, .quien { display: block; }
  .problema h2 { margin-bottom: 18px; }
  .cabeza h2 { margin-bottom: 16px; }
  .quien h2 { margin-bottom: 24px; }
  .quien { margin-bottom: 88px; }
  .paso h3 { margin-bottom: 14px; }
  .paso p { padding-bottom: 0; }
  .publicado .texto { display: block; margin-bottom: 40px; }
  .publicado h2 { margin-bottom: 24px; }
  .laminas { grid-template-columns: 1fr 1fr; }
  .laminas figure:nth-child(2) { margin-top: 40px; }
  .enlaces > div:nth-child(3) { grid-column: 1 / -1; }
  .laminas figure:nth-child(3) { grid-column: 1 / -1; width: 62%; margin: 0 auto; }
  .servicios > h2 { margin-bottom: 48px; }
  .columna + .columna { margin-top: 56px; }
  .cierre h2 { font-size: 8.6vw; }
  .boton.grande { font-size: var(--t5); padding-inline: 16px; }
  .enlaces { grid-template-columns: 1fr 1fr; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .js [data-entra], .js figure[data-entra], .js .logo-pie[data-entra] { opacity: 1; transform: none; clip-path: none; transition: none; }
  .js figure[data-entra] img { transform: none; transition: none; }
  .boton, .boton:hover, .boton:active { transition: none; transform: none; }
}