/* ==========================================================================
   Comunidad en Tránsito · Ruta 1 "Acuarela y mar"
   Sin negro: el tono más oscuro es el petróleo.
   ========================================================================== */

:root {
  --crema: #FBF8F1;
  --blanco: #FFFFFF;
  --petroleo: #1E3D44;
  --petroleo-suave: #4F6B70;
  --gris: #6E8589;
  --turquesa: #2C7A89;
  --turquesa-hondo: #246674;
  --celeste: #A9DCE6;
  --cielo: #E3F1F4;          /* fondos celestes */
  --arena: #C8A888;
  --arena-clara: #F4ECE2;    /* fondos arena */
  --linea: #D9E7EA;
  --alerta: #B5654A;
  --alerta-clara: #F6E6DF;
  --exito-clara: #E1F0EA;

  --font-title: "Fraunces", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-s: 12px;
  --radius: 20px;
  --radius-l: 28px;
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 132px;
  --header-h-scrolled: 84px;
  --shadow: 0 18px 50px -24px rgba(30, 61, 68, .28);
  --shadow-soft: 0 10px 30px -18px rgba(30, 61, 68, .22);

  --ease: cubic-bezier(.25, .8, .25, 1);
  --t-fast: .2s;
  --t: .35s;
  --t-slow: .6s;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 106.25%; /* 17px: el cuerpo de texto de Figma */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-scrolled) + 20px); /* los anclas (#regalo, #fotos) no quedan debajo del menú */
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--petroleo);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 .45em;
  font-family: var(--font-title);
  font-weight: 600;
  line-height: 1.12;
  color: var(--petroleo);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.45rem); letter-spacing: 0; }
h4 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--turquesa);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--turquesa-hondo); }

strong, b { font-weight: 700; }

::selection { background: var(--celeste); color: var(--petroleo); }

:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 3px; border-radius: 6px; }

hr { border: 0; border-top: 1px solid var(--linea); margin: 1.5rem 0; }

/* Textos chicos con identidad */
.kicker {
  display: block;
  margin-bottom: 10px;
  font: 500 .75rem/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--turquesa);
}
.hand {
  display: block;
  margin: 0 0 .5em;
  font: 500 1.6rem/1.15 var(--font-hand);
  color: var(--turquesa);
}
.lead { font-size: clamp(1.02rem, 1.25vw, 1.12rem); line-height: 1.6; color: var(--petroleo-suave); max-width: 34em; }
.muted { color: var(--petroleo-suave); }
.small { font-size: .88rem; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .6rem 1rem; background: var(--petroleo); color: var(--crema); border-radius: var(--radius-s);
}
.skip-link:focus { top: 1rem; color: var(--crema); }

@media (max-width: 760px) {
  :root { --header-h: 72px; --header-h-scrolled: 64px; }
  .hand { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}