/* ═══ COMPONENTES: botones, títulos, doodles, iconos ═══ */

/* ── Botones ──
   Primario: amarillo + marino (9.9:1). Secundario: contorno.
   Táctil: mínimo 48px de alto. Sin urgencia, siempre invitación. */
.boton {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .85rem 1.7rem;
  border-radius: 99px; border: 2px solid transparent;
  font: 500 var(--paso-0)/1 var(--fuente-sans);
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur-micro) var(--curva-salida),
              box-shadow var(--dur-micro) var(--curva-salida),
              background-color var(--dur-micro) var(--curva-suave),
              color var(--dur-micro) var(--curva-suave);
}
.boton:hover  { transform: translateY(-2px) scale(1.02); }
.boton:active { transform: translateY(0) scale(.98); }

.boton--primario {
  background: var(--accion); color: var(--accion-texto);
  border-color: var(--accion);
  box-shadow: 0 6px 18px rgba(18, 61, 85, .18);
}
.boton--primario:hover { box-shadow: 0 10px 26px rgba(18, 61, 85, .26); }

.boton--contorno { background: transparent; color: var(--marino); border-color: currentColor; }
.boton--contorno:hover { background: var(--marino); color: var(--crema); border-color: var(--marino); }

.seccion--oscura .boton--contorno { color: var(--crema); }
.seccion--oscura .boton--contorno:hover { background: var(--crema); color: var(--marino); border-color: var(--crema); }

.boton .icono { width: 1.25em; height: 1.25em; flex: none; }

/* ── Título de sección con acento manuscrito ── */
.titulo { font-size: var(--paso-4); }
.titulo--grande { font-size: var(--paso-5); }
.acento-mano {
  display: block;
  font-family: var(--fuente-mano); font-weight: 600;
  font-size: .58em; line-height: 1;
  transform: rotate(-2deg);
  margin-bottom: .35em;
}
/* Variante remate: va después del titular, no encima (nada de eyebrows) */
.acento-mano--tras { margin: .45em 0 0; transform: rotate(-1.5deg); }

/* ── Subrayado ondulado (trazo de marca, decorativo) ── */
.ondita { position: relative; white-space: nowrap; }
.ondita > svg {
  position: absolute; left: 0; right: 0; bottom: -.06em;
  width: 100%; height: .2em; overflow: visible;
  /* El trazo lleva onda de sobra a los lados para que la deriva no tenga
     costura: se recorta solo en horizontal. En vertical queda libre, si no
     el grosor del trazo perdería un pelo arriba y abajo. */
  clip-path: polygon(0 -200%, 100% -200%, 100% 300%, 0 300%);
}
.ondita path {
  fill: none; stroke: currentColor;
  stroke-width: 6; stroke-linecap: round;
}

/* ── Iconos de trazo (SVG propios, 2px redondeado) ── */
.icono { width: 1.5rem; height: 1.5rem; }
.icono path, .icono circle, .icono rect, .icono line, .icono polyline {
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icono--relleno path { fill: currentColor; stroke: none; }

/* ── Doodles flotantes (símbolos de marca, nunca diseños de producto) ── */
.doodle { position: absolute; pointer-events: none; user-select: none; }

/* ── Tarjeta base ── */
.tarjeta {
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
}

/* ── Etiqueta manuscrita (solo donde el doc la pide) ── */
.etiqueta-mano {
  font-family: var(--fuente-mano); font-weight: 600;
  font-size: var(--paso-2); line-height: 1;
  transform: rotate(-2deg); display: inline-block;
}

/* ── Ola divisoria entre secciones (trazo continuo) ──
   El sobrante lateral del trazo se sale del ancho de página; lo recorta el
   overflow-x: clip de html/body (ver 01-base.css). */
.ola-divisoria { display: block; width: 100%; height: 34px; overflow: visible; }
.ola-divisoria path {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linecap: round;
}

/* Las olas derivan sin parar: conviene su propia capa para no repintar el
   trazo entero en cada cuadro. Solo donde el bucle es perpetuo. */
@media (prefers-reduced-motion: no-preference) {
  .ola-divisoria path { will-change: transform; }
}