/* Complejo Campo y Mar — base y variables (único lugar donde viven colores, fuentes y sombras) */

:root {
  /* Paleta del sello */
  --cream: #F3EDE0;
  --ivory: #FAF7F0;
  --sand: #E4D6BC;
  --sand-deep: #C9B38C;
  --green: #23412F;
  --green-deep: #172C20;
  --olive: #6B7650;
  --ink: #1D2620;
  --muted: #5E665F;
  --white: #FFFFFF;
  --wa: #25D366;
  --clay: #C9734F;
  --clay-soft: #F2C6A8;

  /* Transparencias derivadas */
  --line: rgba(35, 65, 47, .16);
  --line-strong: rgba(35, 65, 47, .32);
  --line-light: rgba(243, 237, 224, .18);
  --cream-06: rgba(243, 237, 224, .06);
  --cream-12: rgba(243, 237, 224, .12);
  --cream-35: rgba(243, 237, 224, .35);
  --cream-55: rgba(243, 237, 224, .55);
  --cream-78: rgba(243, 237, 224, .78);
  --cream-90: rgba(243, 237, 224, .9);
  --ivory-glass: rgba(250, 247, 240, .9);
  --ivory-solid: rgba(250, 247, 240, .96);
  --green-10: rgba(35, 65, 47, .1);
  --shade-15: rgba(23, 44, 32, .15);
  --shade-45: rgba(23, 44, 32, .45);
  --shade-55: rgba(23, 44, 32, .55);
  --shade-88: rgba(23, 44, 32, .88);
  --night-96: rgba(15, 24, 18, .96);
  --night-50: rgba(15, 24, 18, .5);
  --focus-ring: rgba(228, 214, 188, .35);

  /* Sombras */
  --shadow-soft: 0 10px 30px rgba(23, 44, 32, .12);
  --shadow-lift: 0 22px 50px rgba(23, 44, 32, .2);
  --shadow-float: 0 10px 30px rgba(23, 44, 32, .28);
  --shadow-photo: 0 30px 60px rgba(0, 0, 0, .35);
  --shadow-stamp: 0 8px 14px rgba(0, 0, 0, .25);

  /* Tipografía */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Medidas y movimiento */
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(84px, 12vw, 150px);
  --radius: 4px;
  --radius-lg: 8px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .9, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--green); color: var(--cream);
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }