/* ==========================================================================
   Mis Dulces Sueños — base.css
   Fichas, reinicio, tipografía y motivos de marca.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------
     Azul y crema salen del logotipo (#849AA5 / #ECE3D4). El crema real
     medido en los PNG es #EEE3D3: se usa ese valor para que las imágenes
     del logotipo encajen sin costura. El azul del logotipo es un tono medio
     y no alcanza contraste AA ni con texto blanco ni con texto marrón, así
     que las llamadas a la acción usan --c-azul-fuerte, el mismo tono (201°)
     oscurecido hasta 6.2:1 con texto crema. El azul claro conserva todo el
     detalle decorativo: arcos, filetes, iconos y fondos tenues.           */
  --c-fondo:          #FBF8F3;
  --c-crema:          #EEE3D3;
  --c-beige:          #E2D5C3;
  --c-azul:           #849AA5;
  --c-azul-fuerte:    #4A6472;
  --c-azul-hondo:     #3C5260;
  --c-azul-tenue:     #EAF0F2;
  --c-marron:         #5B4636;
  --c-marron-suave:   #6E5945;
  --c-marron-tenue:   #8A7260;
  --c-marron-hondo:   #473628;
  --c-crema-claro:    #C9BBA6;

  /* --- Tipografía ------------------------------------------------------ */
  --f-display: "Prata", "Iowan Old Style", Georgia, serif;
  --f-texto:   "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-base:   1.0625rem;  /* 17px */
  --t-plomo:  clamp(1.125rem, 1.6vw, 1.3125rem);
  --t-h1:     clamp(2.1rem, 4.4vw, 3.5rem);
  --t-h2:     clamp(1.7rem, 3.1vw, 2.5rem);
  --t-h3:     clamp(1.2rem, 1.75vw, 1.45rem);
  --t-pq:     1rem;
  --t-mini:   0.8125rem;

  /* --- Ritmo ----------------------------------------------------------- */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2.5rem;  --e7: 3.75rem; --e8: 5rem;
  --e9: 6.5rem;  --e10: 9rem;

  --seccion: clamp(5.5rem, 10.5vw, 10rem);
  --env-max: 1320px;
  --env-pad: clamp(1.25rem, 5vw, 4.75rem);

  /* Separaciones de títulos, iguales en toda la web */
  --sep-titulo: clamp(1.3rem, 2vw, 1.8rem);   /* título → su texto */
  --sep-bloque: clamp(3rem, 5.5vw, 5rem);     /* título de sección → su contenido */

  /* --- Materia --------------------------------------------------------- */
  --r-pq:  6px;
  --r-md:  12px;
  --r-gr:  20px;

  --filete: 1px solid var(--c-beige);
  --sombra-suave: 0 2px 4px rgba(91, 70, 54, .04), 0 10px 26px rgba(91, 70, 54, .06);
  --sombra-alta:  0 4px 8px rgba(91, 70, 54, .06), 0 18px 40px rgba(91, 70, 54, .10);

  --cab-alto: 80px;
  --salida: cubic-bezier(.16, .84, .32, 1);
}

@media (min-width: 60em) { :root { --t-base: 1.125rem; --cab-alto: 96px; } }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--cab-alto);  /* lo que tapa la cabecera fija */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-marron);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--c-marron);
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-h1); line-height: 1.12; }
h2 { font-size: var(--t-h2); line-height: 1.18; }
h3 { font-size: var(--t-h3); line-height: 1.3; }

p  { margin: 0 0 1.4rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--c-azul-fuerte); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--c-azul); }

button { font: inherit; color: inherit; }

blockquote { margin: 0; }
figure { margin: 0; }

::selection { background: var(--c-azul-tenue); color: var(--c-marron); }

:focus-visible {
  outline: 2px solid var(--c-azul-fuerte);
  outline-offset: 3px;
  border-radius: var(--r-pq);
}

/* Barras de desplazamiento, cursor y demás superficies del navegador */
html { scrollbar-color: var(--c-beige) var(--c-fondo); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--c-fondo); }
::-webkit-scrollbar-thumb {
  background: var(--c-beige);
  border: 3px solid var(--c-fondo);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-marron-tenue); }

/* --------------------------------------------------------------------------
   Tipografía de apoyo
   -------------------------------------------------------------------------- */
.plomo {
  font-size: var(--t-plomo);
  line-height: 1.52;
  color: var(--c-marron);
}

.nota {
  font-size: var(--t-pq);
  color: var(--c-marron-suave);
  max-width: 62ch;
}

.precio {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--c-azul-fuerte);
  letter-spacing: -0.015em;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.precio--gr { font-size: clamp(2.6rem, 5vw, 3.9rem); }

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
.vo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: absolute; left: var(--e4); top: -5rem; z-index: 200;
  background: var(--c-azul-fuerte); color: #fff;
  padding: var(--e3) var(--e5); border-radius: var(--r-pq);
  text-decoration: none; font-weight: 600;
  transition: top .2s var(--salida);
}
.saltar:focus { top: var(--e4); }

.env {
  width: 100%;
  max-width: var(--env-max);
  margin-inline: auto;
  padding-inline: var(--env-pad);
}
.env--estrecho { max-width: 780px; }

/* --------------------------------------------------------------------------
   Aparición de secciones
   -------------------------------------------------------------------------- */
.js [data-revela] {
  opacity: 0;
  transform: translateY(18px);
}
.js [data-revela].visto {
  opacity: 1;
  transform: none;
  transition: opacity .85s var(--salida), transform .85s var(--salida);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-revela] { opacity: 1; transform: none; }
}