/* Estación del Valle — sitio público
   Los valores salen del manual de marca: https://claude.ai/artifact/98nExcisX9imKUzPDfr9ha
   Si cambia un color o un tamaño, se cambia ACÁ ARRIBA y en ningún otro lado. */

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

:root {
  /* color */
  --pino: #23392D;          --pino-profundo: #17241C;
  --salvia: #5C7A66;        --sol: #C0692B;
  --ocre: #A8551E;          --ocre-texto: #8A4417;   --durazno: #E3B58F;
  --marfil: #F5F0E6;        --arena: #EBE4D5;        --lino: #DDD4C3;
  --blanco: #FFFFFF;        --borde-campo: #A9A08C;
  --tinta: #1C2A22;         --tinta-suave: #3F4D45;  --musgo: #56635B;  --niebla: #C9D3C8;
  --error: #9B2C1C;         --exito: #2F6B45;
  /* tipografía */
  --font-display: "Fraunces", Georgia, serif;
  --font-texto: "Instrument Sans", system-ui, sans-serif;
  /* forma y ritmo */
  --radius-sm: 8px;         --radius-md: 12px;
  --margen: 80px;           /* margen lateral de escritorio */
  --aire: 96px;             /* aire vertical de cada sección */
  --ancho: 1280px;          /* ancho máximo del contenido */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-texto); font-size: 16px; line-height: 1.55; color: var(--tinta); background: var(--marfil); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--ocre-texto); }
a:hover { color: #5F2E0E; }
:focus-visible { outline: 3px solid var(--durazno); outline-offset: 3px; border-radius: 4px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--marfil); color: var(--tinta); padding: 12px 16px; border-radius: var(--radius-sm); }
.saltar:focus { top: 16px; }

.contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: var(--aire); }
.seccion--arena { background: var(--arena); }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--margen); align-items: center; }

/* ---------- tipografía ---------- */
.portada { font-family: var(--font-display); font-weight: 600; font-size: clamp(46px, 6.2vw, 84px); line-height: 1.03; letter-spacing: -0.01em; }
.titulo { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; }
.subtitulo { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.2; }
.destacado { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; }
.cuerpo-l { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--tinta-suave); }
.detalle { font-size: 14px; color: var(--musgo); }
.sobretitulo { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ocre-texto); }
.pila { display: flex; flex-direction: column; gap: 24px; }
.pila--chica { gap: 16px; }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: var(--radius-sm); border: 1.5px solid transparent; font: 600 17px/1 var(--font-texto); text-decoration: none; cursor: pointer; white-space: nowrap; }
.boton--principal { background: var(--ocre); color: var(--blanco); }
.boton--principal:hover { background: #8F4718; color: var(--blanco); }
.boton--borde { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton--borde:hover { background: var(--tinta); color: var(--marfil); }
.boton--borde-claro { background: transparent; color: var(--marfil); border-color: var(--marfil); }
.boton--borde-claro:hover { background: var(--marfil); color: var(--pino); }
.boton--pino { background: var(--pino); color: var(--marfil); }
.boton--pino:hover { background: var(--pino-profundo); color: var(--marfil); }
.boton--chico { min-height: 46px; padding: 0 20px; font-size: 16px; }
.boton[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- portada (hero) ---------- */
.hero { position: relative; min-height: min(920px, 100svh); color: var(--blanco); display: flex; flex-direction: column;
  background-color: var(--pino-profundo);
  background-image: linear-gradient(180deg, rgba(15,24,19,0.66) 0%, rgba(15,24,19,0.42) 50%, rgba(15,24,19,0.04) 74%), url("../img/01-hero-tranquera-valle.jpg");
  background-size: cover; background-position: center 45%; }
.encabezado { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 32px; }
.encabezado__logo img { height: 60px; width: auto; }
.nav { display: flex; align-items: center; gap: 36px; font-weight: 500; white-space: nowrap; }
.nav a:not(.boton) { color: inherit; text-decoration: none; padding-block: 12px; }
.nav a:not(.boton):hover { text-decoration: underline; text-underline-offset: 6px; }
.nav__enlaces { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.hero__texto { padding-block: 64px 360px; max-width: 760px; }
.hero__texto .destacado { max-width: 620px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 16px; }
.parada-linea { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.parada-linea::before { content: ""; width: 48px; height: 2px; background: var(--durazno); }
.parada-linea span::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 2px solid var(--durazno); border-radius: 50%; margin-right: 16px; vertical-align: middle; }

/* ---------- franja de datos ---------- */
.datos { background: var(--pino); color: var(--marfil); padding-block: 40px; }
.datos__grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; }
.datos dt { font-family: var(--font-display); font-weight: 600; font-size: clamp(21px, 2.3vw, 32px); line-height: 1.2; }
.datos dd { margin: 6px 0 0; font-size: 15px; color: var(--niebla); }
.datos__item { display: flex; flex-direction: column; }

/* ---------- el loteo ---------- */
.lista-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; list-style: none; margin: 0; padding: 0; }
.lista-check li { display: flex; gap: 12px; align-items: center; }
.lista-check svg, .lista-icono svg { flex-shrink: 0; color: var(--ocre-texto); }
.foto { width: 100%; object-fit: cover; border-radius: var(--radius-md); }
.foto-con-sol { position: relative; }
.foto-con-sol::before { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: var(--sol); top: -44px; right: -44px; }
.foto-con-sol img { position: relative; height: 448px; }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.galeria img { height: 470px; }
.galeria + .detalle { margin-top: 16px; }

/* ---------- financiación: línea con paradas ---------- */
.recorrido { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 48px 0; padding: 0; counter-reset: parada; }
.recorrido li { counter-increment: parada; padding-right: 40px; }
.recorrido li::before { content: counter(parada); display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid var(--ocre-texto); border-radius: 50%; background: var(--arena); font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--ocre-texto); position: relative; z-index: 1; }
.recorrido li { position: relative; }
.recorrido li::after { content: ""; position: absolute; top: 25px; left: 52px; right: 0; height: 2px; background: var(--ocre-texto); }
.recorrido li:last-child { padding-right: 0; }
.recorrido li:last-child::after { right: 6px; }
.recorrido li:last-child .recorrido__fin { position: absolute; top: 20px; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ocre-texto); }
.recorrido h3 { font-size: 21px; font-weight: 600; margin: 22px 0 10px; }
.recorrido p { color: var(--tinta-suave); }

/* ---------- ubicación ---------- */
.lista-icono { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: 17px; }
.lista-icono li { display: flex; gap: 14px; align-items: center; }
.mapa { border: 1px solid var(--lino); border-radius: var(--radius-md); overflow: hidden; background: var(--marfil); }
.mapa__lienzo { display: block; width: 100%; height: 280px; border: 0; background: #EFE8DA; }
.mapa__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.mapa__lugar { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; }

/* ---------- contacto ---------- */
.sierra { display: block; width: 100%; height: clamp(36px, 5.6vw, 80px); margin-bottom: -1px; color: var(--pino); }
.contacto { background: var(--pino); color: var(--marfil); padding-block: 66px var(--aire); }
.contacto .sobretitulo { color: var(--durazno); }
.contacto .cuerpo-l { color: var(--niebla); }
.contacto__grilla { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: start; }
.contacto__grilla > :last-child { grid-column: 3; }
.contacto .lista-icono svg { color: var(--durazno); }
.ya-cliente { border: 1px solid #4A6455; border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ya-cliente p { font-size: 15px; color: var(--niebla); }
.tarjeta-form { background: var(--marfil); color: var(--tinta); border-radius: var(--radius-md); padding: 40px; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 600; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--borde-campo); border-radius: var(--radius-sm); background: var(--blanco); font: 16px/1.4 var(--font-texto); color: var(--tinta); }
.campo textarea { min-height: 112px; padding-block: 12px; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--ocre); outline-offset: 1px; }
.campo [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.campo__error { font-size: 13px; color: var(--error); }
.campo__error:empty { display: none; }
.campo label.consentimiento { font-weight: 400; }
.consentimiento { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--tinta-suave); }
.consentimiento input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--pino); }
.trampa { position: absolute; left: -9999px; }            /* campo anti-spam: los humanos no lo ven */
.form__aviso { font-size: 15px; color: var(--error); }
.form__aviso:empty { display: none; }
.enviado { display: flex; flex-direction: column; gap: 20px; padding-block: 40px; align-items: flex-start; }
.enviado svg { color: var(--exito); }
[hidden] { display: none !important; }

/* ---------- pie ---------- */
.pie { background: var(--pino-profundo); color: var(--niebla); padding-block: 64px 40px; font-size: 15px; }
.pie__grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pie__logo img { height: 56px; width: auto; }
.pie h2 { font: 600 15px/1.4 var(--font-texto); color: var(--marfil); margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pie a { color: inherit; text-decoration: none; display: inline-block; padding-block: 6px; }
.pie a:hover { color: var(--marfil); text-decoration: underline; }
.pie__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid #2E4236; font-size: 14px; color: #9FAE9F; }

/* ---------- página de texto (privacidad) ---------- */
.barra { background: var(--pino); color: var(--blanco); }
.barra .encabezado { padding-block: 26px; }
.barra .encabezado__logo img { height: 56px; }
.prosa { max-width: 800px; padding-block: 80px 96px; display: flex; flex-direction: column; gap: 40px; }
.prosa h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; margin-top: 16px; }
.prosa h2 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.prosa p { font-size: 17px; line-height: 1.65; color: var(--tinta-suave); }

/* ---------- tableta y móvil ---------- */
@media (max-width: 960px) {
  :root { --margen: 40px; --aire: 72px; }
  .nav__enlaces { display: none; }
  .contacto__grilla { grid-template-columns: 1fr; gap: 40px; }
  .contacto__grilla > :last-child { grid-column: auto; }
}
@media (max-width: 760px) {
  :root { --margen: 20px; --aire: 56px; }
  .dos-columnas, .galeria, .recorrido, .form__fila, .lista-check { grid-template-columns: 1fr; }
  .dos-columnas { gap: 32px; }
  .encabezado { padding-block: 16px; }
  .encabezado__logo img, .barra .encabezado__logo img { height: 42px; }
  .nav { gap: 8px; }
  .nav .boton { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .hero { min-height: 700px; background-position: 42% center; }
  .hero__texto { padding-block: 40px 300px; }
  .hero__acciones .boton { width: 100%; }
  .hero__acciones .boton--borde-claro { display: none; }
  .parada-linea { font-size: 12px; } .parada-linea::before { width: 28px; }
  .datos__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .datos dd { font-size: 13px; }
  .foto-con-sol::before { width: 96px; height: 96px; top: -24px; right: -8px; }
  .foto-con-sol img { height: 230px; }
  .galeria { gap: 12px; } .galeria img { height: 200px; }
  /* la línea de paradas baja en vertical */
  .recorrido { margin-block: 24px; }
  .recorrido li { padding: 0 0 32px 60px; min-height: 76px; }
  .recorrido li::before { position: absolute; left: 0; top: 0; width: 44px; height: 44px; font-size: 21px; }
  .recorrido li::after { top: 44px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; }
  .recorrido li:last-child::after { right: auto; bottom: 10px; }
  .recorrido li:last-child .recorrido__fin { top: auto; bottom: 0; left: 16px; right: auto; }
  .recorrido h3 { font-size: 19px; margin: 8px 0; }
  .mapa__lienzo { height: 220px; }
  .mapa__pie { flex-direction: column; align-items: stretch; padding: 16px; }
  .tarjeta-form { padding: 24px 20px; }
  .pie__grilla { grid-template-columns: 1fr 1fr; }
  .pie__logo { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .hero { min-height: 0; } .nav, .tarjeta-form { display: none; } }