/* Componentes reciclables, con el aspecto del tema de cumpleaños de la referencia. */
.pagina { width: var(--pagina); margin-inline: auto; }


.titulo { font: 400 clamp(2.35rem, 5.2vw, 4.4rem)/1.04 var(--f-titulo); letter-spacing: -0.005em; text-wrap: balance; color: var(--tinta); }
.titulo em { display: block; font-style: normal; color: var(--vino); }
.entradilla { max-width: 620px; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.65; color: var(--suave); }
.encabezado { display: grid; gap: 18px; max-width: 760px; }
.encabezado.centro { margin-inline: auto; justify-items: center; text-align: center; }
.encabezado.centro .entradilla { margin-inline: auto; }
.nota { font: 400 1.25rem/1.3 var(--f-nota); color: var(--vino); }

.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; border: 0; border-radius: 999px; background: var(--vino); color: var(--boton-texto); font: 600 16px/1.2 var(--f-ui); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; box-shadow: var(--sombra-boton); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s; -webkit-tap-highlight-color: transparent; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -18px rgba(142, 36, 51, 0.8); }
.boton:active { transform: translateY(0) scale(0.99); }
.boton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.boton:hover svg { transform: translateX(3px); }
.boton:disabled, .boton[aria-busy="true"] { opacity: 0.55; cursor: default; transform: none; }
.boton.fantasma { background: transparent; color: var(--tinta); border: 1px solid rgba(51, 32, 61, 0.22); box-shadow: none; }
.boton.fantasma:hover { background: rgba(255, 255, 255, 0.6); }
.boton.ancho { width: 100%; }
.boton.pequeno { min-height: 44px; padding: 10px 20px; font-size: 15px; box-shadow: none; }
.enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--vino); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.enlace:hover { text-decoration-color: currentColor; }

.campo { display: grid; gap: 8px; font: 600 13px/1.3 var(--f-ui); color: var(--suave); }
.campo :is(input, textarea, select) { min-height: 50px; padding: 0 16px; border: 1px solid rgba(51, 32, 61, 0.16); border-radius: 16px; background: var(--blanco); color: var(--tinta); font: 600 16px/1.2 var(--f-ui); }
.campo textarea { min-height: 8rem; padding: 14px 16px; resize: vertical; font-weight: 400; line-height: 1.5; }
.campo .ayuda, .campo .error { margin: 0; font: 400 13px/1.4 var(--f-ui); }
.campo .error { color: var(--vino); font-weight: 600; }
.campo[data-invalido] :is(input, textarea, select) { border-color: var(--vino); }
.aviso { padding: 12px 16px; border-radius: 16px; background: var(--blanco); font: 400 14.5px/1.45 var(--f-ui); color: var(--tinta); box-shadow: var(--sombra-tarjeta); }
.aviso:empty { visibility: hidden; }

/* Contador de edad: píldora blanca con más y menos. */
.edad { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--blanco); box-shadow: 0 12px 28px -18px rgba(51, 32, 61, 0.5); font-size: 13px; font-weight: 600; color: var(--suave); white-space: nowrap; }
.edad button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--lino); color: var(--tinta); font: 700 18px/1 var(--f-ui); cursor: pointer; transition: background 0.2s, transform 0.2s var(--ease); }
@media (pointer: coarse) { .edad button { width: 44px; height: 44px; } }
.edad button:hover { background: #f1d6e0; transform: scale(1.06); }
.edad output { min-width: 2ch; text-align: center; font: 400 20px/1 var(--f-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Tarjeta pastel con un objeto 3D; --tinte pone el color. */
.escena { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 24px 26px; overflow: hidden; border-radius: var(--radio); background: var(--tinte, var(--lino)); box-shadow: 0 1px #ffffffe6 inset, var(--sombra-tarjeta); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.escena:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -32px rgba(51, 32, 61, 0.5); }
.escena .objeto { display: block; height: 150px; margin-bottom: 4px; }
.escena .objeto img { width: 100%; height: 100%; object-fit: contain; object-position: 0% 50%; filter: drop-shadow(0 14px 14px rgba(51, 32, 61, 0.16)); transition: transform 0.6s var(--ease); }
.escena:hover .objeto img { transform: translateY(-6px) rotate(-3deg); }
.escena h3 { font: 400 1.55rem/1.1 var(--f-titulo); color: var(--tinta); }
.escena p { font-size: 14.5px; line-height: 1.55; color: var(--suave); }

/* Movimiento compartido. */
.flota { animation: flotar 5.8s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes aparecer { from { scale: 0.6; opacity: 0; } to { scale: 1; opacity: 1; } }

/* Pantallas de 360 px: la píldora y el botón principal caben en una línea. */
@media (max-width: 24rem) {
  .boton { padding-inline: 20px; gap: 8px; }
}
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rotulo { font: 800 12px/1.4 var(--f-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta); }

/* Enlaces de cabecera y pie: el texto no cambia, pero el dedo tiene 44 px donde tocar. */
.cabecera .marca, .cabecera-acciones .enlace, .legal-cabecera :is(.marca, .volver), .legal-pie a { position: relative; }
.cabecera .marca::after, .cabecera-acciones .enlace::after, .legal-cabecera :is(.marca, .volver)::after, .legal-pie a::after { content: ""; position: absolute; inset: -10px -6px; }