/*
Theme Name: Carta Miau
Author: David
Description: Carta de amor interactiva estilo Frutiger Aero, hecha para Margie.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carta-miau
*/

/* ---------- Base ---------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; color: #08365a; overflow-x: hidden; min-height: 100vh; line-height: 1.5; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid #0b5891; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Fondo y burbujas ---------- */
.fondo { position: fixed; inset: 0; z-index: -2; background: linear-gradient(180deg, #8fd9ff 0%, #c4ecff 30%, #e8faff 60%, #d6f6df 85%, #a9e7b8 100%); }
.fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 5%, rgba(255,255,255,.9), transparent 30%), radial-gradient(circle at 85% 20%, rgba(255,255,255,.6), transparent 25%); }
.cielo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bur { position: absolute; bottom: -130px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 25%, rgba(120,210,255,.18) 60%, rgba(255,255,255,.6) 100%); animation: sube linear forwards; }
.pb { position: fixed; z-index: 20; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; cursor: pointer; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 10px 26px rgba(0,90,160,.3); background: linear-gradient(135deg, #d6f4ff, #9fdcff 50%, #d4f7de); }
.pb img { width: 100%; height: 100%; object-fit: cover; }
.pb::after,
.gb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.9), transparent 28%); }
.gota { position: fixed; z-index: 21; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.95); border: 1px solid #9fdcff; }

/* ---------- Animaciones ---------- */
@keyframes sube { to { transform: translate(40px, -125vh); } }
@keyframes flota { 50% { translate: 0 -10px; } }
@keyframes flotaVentana { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: .7deg; } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } }
.ap { opacity: 0; transform: translateY(50px) scale(.95); transition: opacity 1s, transform 1s cubic-bezier(.2,.8,.2,1); }
.ap.vis { opacity: 1; transform: none; }

/* ---------- Secciones ---------- */
main { position: relative; z-index: 2; }
.seccion { min-height: 100vh; min-height: 100svh; padding: 90px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.oscuro { color: #08365a; text-shadow: 0 1px 0 rgba(255,255,255,.8); text-align: center; }
.portada__pre { font-size: 1.1rem; font-weight: 700; }
.portada__titulo { font-size: clamp(4rem, 18vw, 8rem); font-weight: 800; line-height: 1.1; background: linear-gradient(180deg, #0f5c99 0%, #0a4a80 50%, #062f55 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(255,255,255,.9)); animation: flota 4s ease-in-out infinite; }
.portada__sub { font-size: 1.15rem; font-weight: 700; margin-top: 10px; }
.portada__pista { font-size: .9rem; margin-top: 6px; }
.portada__flecha { display: block; width: 64px; height: 64px; margin-top: 40px; border-radius: 50%; animation: flota 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0,80,150,.35)); transition: scale .25s; }
.portada__flecha:hover { scale: 1.1; }
.portada__flecha svg { width: 100%; height: 100%; display: block; }
.titulo-seccion { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 800; margin-bottom: 12px; }
.sub-seccion { font-size: 1rem; margin-bottom: 40px; }

/* ---------- Ventanas Aero ---------- */
.marco { width: 100%; display: flex; justify-content: center; }
.ventana { width: 100%; max-width: 480px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid #fff; box-shadow: 0 15px 40px rgba(0,80,150,.22), inset 0 1px 0 #fff; }
.ventana--flota { animation: flotaVentana 6s ease-in-out infinite; }
.ventana__barra { display: flex; align-items: center; gap: 7px; padding: 10px 14px; color: #fff; font-weight: 800; font-size: .9rem; background: linear-gradient(180deg, #3b93cf 0%, #14679f 50%, #0b5891 51%, #1d6fa8 100%); }
.ventana__titulo { flex: 1; }
.punto { width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: radial-gradient(circle at 35% 30%, #fff, #7fd0ff 40%, #1a7cc4); }
.boton-cerrar { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 1rem; line-height: 1; border: 1px solid rgba(255,255,255,.9); background: linear-gradient(180deg, #e88a9e, #b8244f 50%, #a01d44 51%, #c94a6a); }
.ventana__contenido { padding: 20px; font-size: 1rem; line-height: 1.7; }
.ventana__contenido h3 { margin: 6px 0; font-size: 1.25rem; font-weight: 800; color: #0a4d82; }
.ventana__contenido p + p { margin-top: 10px; }

/* ---------- Recuerdos ---------- */
.lista-recuerdos { display: flex; flex-direction: column; align-items: center; gap: 70px; width: 100%; }
.foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 14px; cursor: zoom-in; background: linear-gradient(135deg, #d6f4ff, #9fdcff 50%, #d4f7de); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }
.foto--vacia { cursor: default; }
.etiqueta { display: inline-block; padding: 3px 14px; border-radius: 20px; font-size: .8rem; font-weight: 800; color: #174a0c; border: 1px solid #fff; background: linear-gradient(180deg, #e6fbd9, #bdeea3 50%, #a8e48b 51%, #c9f2b3); }

/* ---------- Gustos ---------- */
.lista-gustos { display: grid; grid-template-columns: repeat(3, auto); gap: 22px; justify-content: center; }
.gb { position: relative; width: 120px; height: 120px; border-radius: 50%; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; text-align: center; font-weight: 800; font-size: .95rem; color: #08365a; border: 2px solid #fff; background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.92), rgba(200,238,255,.85)); box-shadow: 0 8px 22px rgba(0,90,160,.22); animation: flota 5s ease-in-out infinite; transition: scale .3s; }
.gb:hover { scale: 1.1; }
.gb__icono { font-size: 1.8rem; }

/* ---------- Sobre y carta ---------- */
.sobre { position: relative; width: 260px; height: 170px; margin-bottom: 16px; }
.sobre__cuerpo { position: absolute; inset: 0; border-radius: 12px; border: 2px solid #fff; background: linear-gradient(180deg, #e9f9ff, #a9e3ff); box-shadow: 0 15px 35px rgba(0,80,150,.3); }
.sobre__tapa { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 3; border-left: 130px solid transparent; border-right: 130px solid transparent; border-top: 95px solid #5bbdf0; transform-origin: top; transition: transform .8s; }
.sobre__corazon { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 2.2rem; transition: opacity .4s; }
.sobre.abierto .sobre__tapa { transform: rotateX(180deg); z-index: 0; }
.sobre.abierto .sobre__corazon { opacity: 0; }
.sobre__pista { font-weight: 800; }
.carta { display: none; width: 100%; }
.carta.vis { display: flex; animation: pop .8s; }
.carta .ventana__contenido { font-family: 'Dancing Script', cursive; font-size: clamp(1.25rem, 4.5vw, 1.5rem); line-height: 1.7; color: #0a3d66; }
.carta__firma { text-align: right; margin-top: 16px; }

/* ---------- Pregunta ---------- */
.pregunta { font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800; margin-bottom: 30px; }
.boton-aero { display: inline-block; margin: 8px; padding: 12px 38px; border-radius: 40px; font-size: 1.25rem; font-weight: 800; border: 1px solid #fff; box-shadow: 0 8px 20px rgba(0,80,150,.25), inset 0 1px 0 #fff; transition: transform .3s; touch-action: manipulation; }
.boton-aero--si { color: #123f0a; background: linear-gradient(180deg, #e6fbd9, #bdeea3 50%, #a2e283 51%, #c9f2b3); }
.boton-aero--no { color: #08365a; background: linear-gradient(180deg, #e6f6ff, #b5e2fb 50%, #9dd6f7 51%, #c4e9fc); }
.mensaje-final { display: none; font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800; animation: pop 1s; }

/* ---------- Música ---------- */
.musica { position: fixed; top: 14px; right: 14px; z-index: 30; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 28px); padding: 6px 8px; border-radius: 30px; font-size: .8rem; font-weight: 700; color: #08365a; border: 1px solid #fff; background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.85)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(0,80,150,.22); }
.musica__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.boton-redondo { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; color: #fff; font-size: .95rem; border: 1px solid #fff; background: linear-gradient(180deg, #3b93cf, #0b5891); }
.panel-musica { position: fixed; top: 64px; right: 14px; z-index: 30; max-width: 360px; display: none; animation: pop .4s; }
.panel-musica.vis { display: block; }
.panel-musica .ventana__contenido { padding: 12px; font-size: .9rem; }

/* ---------- Navegación ---------- */
.nav { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 25; display: flex; flex-direction: column; gap: 10px; }
.nav a { position: relative; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; text-decoration: none; border: 1px solid #fff; background: linear-gradient(180deg, #fff, #dcf4ff); box-shadow: 0 4px 12px rgba(0,80,150,.2); transition: scale .25s; }
.nav a:hover { scale: 1.12; }
.nav a.activo { background: linear-gradient(180deg, #3b93cf, #0b5891); }
.nav a::after { content: attr(data-label); position: absolute; right: 56px; white-space: nowrap; padding: 4px 10px; border-radius: 12px; font-size: .8rem; font-weight: 800; color: #fff; background: #0b5891; opacity: 0; pointer-events: none; transition: opacity .2s; }
.nav a:hover::after { opacity: 1; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(4,40,70,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal.vis { display: flex; }
.modal .ventana { max-height: 90vh; overflow: auto; animation: pop .4s; }

/* ---------- Pie ---------- */
.pie { position: relative; z-index: 2; text-align: center; padding: 24px 20px 110px; font-size: .8rem; line-height: 1.6; color: #123f0a; }
.pie__enlace { font-weight: 800; text-decoration: underline; color: #123f0a; }
.pie__privacidad { display: none; max-width: 480px; margin: 12px auto 0; text-align: left; padding: 12px 16px; border-radius: 12px; border: 1px solid #fff; background: rgba(255,255,255,.85); }
.pie__privacidad.vis { display: block; }

/* ---------- Barra de administración de WordPress ---------- */
.admin-bar .musica { top: 46px; }
.admin-bar .panel-musica { top: 96px; }

/* ---------- Celular ---------- */
@media (max-width: 782px) {
  .admin-bar .musica { top: 60px; }
  .admin-bar .panel-musica { top: 110px; }
}
@media (max-width: 700px) {
  .seccion { padding: 80px 16px; }
  .nav { top: auto; bottom: 12px; right: 50%; transform: translateX(50%); flex-direction: row; gap: 8px; padding: 8px 10px; border-radius: 30px; border: 1px solid #fff; background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 18px rgba(0,80,150,.25); }
  .nav a { width: 44px; height: 44px; }
  .nav a::after { display: none; }
  .musica { left: 14px; right: 14px; justify-content: space-between; }
  .musica__titulo { flex: 1; max-width: none; }
  .panel-musica { left: 14px; right: 14px; max-width: none; }
  .lista-gustos { grid-template-columns: repeat(2, auto); gap: 18px; }
  .gb { width: 108px; height: 108px; }
  .pb { width: 90px; height: 90px; }
  .lista-recuerdos { gap: 56px; }
}

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