:root{
  /* Paleta playera */
  --warm-1:#f0faf9;   /* aqua muy claro, color de respaldo de la página */
  --warm-2:#cdf0ea;   /* turquesa suave para franjas y secciones */
  --accent:#12b3a8;   /* turquesa/mar, color principal */
  --accent-dark:#0b6e68; /* teal oscuro para títulos */
  --accent-2:#ff7a59; /* coral/atardecer, para detalles */
  --text-dark:#173c3a;
  --text-muted:#4f7c78;
  --card-bg:#ffffff;
  --shadow:0 6px 18px rgba(11,110,104,0.12);
  --radius:14px;

  /* Texto sobre la foto de fondo (sin tarjeta blanca detrás):
     claro, con sombra oscura para que se lea sobre cualquier foto */
  --text-on-photo:#ffffff;
  --text-on-photo-muted:rgba(255,255,255,0.92);
  --shadow-on-photo:0 2px 10px rgba(0,0,0,0.55);

  /* Foto de fondo de la página: reemplaza el nombre del archivo
     por el tuyo (colócala dentro de la carpeta /images) */
  --bg-photo:url('images/fondo.jpg');
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text-dark);
  background-color:var(--warm-1);
  background-image:linear-gradient(rgba(10,20,15,0.32), rgba(10,20,15,0.42)), var(--bg-photo);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  line-height:1.6;
}

h1,h2,h3{
  font-family:Georgia, 'Times New Roman', serif;
  margin:0;
}

a{color:inherit;text-decoration:none;}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(240,250,249,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(11,110,104,0.15);
}

.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{display:flex;align-items:center;gap:10px;}
.brand-icon{height:38px;width:auto;display:block;}
.brand h1{font-size:1.4rem;color:var(--accent-dark);}

.main-nav ul{
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
}

.main-nav a{
  font-weight:600;
  font-size:0.95rem;
  color:var(--text-dark);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s;
}

.main-nav a:hover{border-color:var(--accent);}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  font-size:1.6rem;
  cursor:pointer;
  color:var(--text-dark);
}

/* Hero */
.hero{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
}

.hero-content h2{
  font-size:2.4rem;
  color:var(--text-on-photo);
  max-width:700px;
  margin:0 auto 14px;
  text-shadow:var(--shadow-on-photo);
}

.hero--compact{
  min-height:auto;
  padding:26px 20px 14px;
}

.hero--compact .hero-content h2{font-size:1.8rem;margin-bottom:6px;}
.hero--compact .hero-content p{font-size:0.95rem;}

.hero-content p{
  font-size:1.15rem;
  color:var(--text-on-photo-muted);
  text-shadow:var(--shadow-on-photo);
}

/* Cumpleaños */
.birthday-section{
  display:flex;
  justify-content:center;
  padding:6px 20px 26px;
}

.birthday-card{
  position:relative;
  background:
    radial-gradient(circle at 12% 20%, rgba(236,72,153,0.14) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 16%, rgba(31,41,55,0.12) 0 4px, transparent 5px),
    radial-gradient(circle at 20% 88%, rgba(236,72,153,0.12) 0 5px, transparent 6px),
    radial-gradient(circle at 85% 85%, rgba(31,41,55,0.1) 0 4px, transparent 5px),
    radial-gradient(circle at 50% 96%, rgba(202,160,66,0.22) 0 3.5px, transparent 4.5px),
    linear-gradient(160deg, #fff5f9, #fff 55%, #fdf1f6);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(219,39,119,0.18);
  padding:26px 24px 20px;
  max-width:420px;
  width:100%;
  text-align:center;
  overflow:hidden;
}

/* Globos dibujados con CSS (rosa con lunares blancos + negro con lunares) */
.bday-balloon{
  position:absolute;
  width:28px;
  height:36px;
  border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  z-index:2;
}
.bday-balloon-string{
  position:absolute;
  left:50%;
  top:100%;
  width:1px;
  height:22px;
  background:rgba(0,0,0,0.22);
  transform:translateX(-50%);
}
.bday-balloon--tl{top:10px;left:18px;transform:rotate(-10deg);}
.bday-balloon--tr{top:10px;right:18px;transform:rotate(9deg);}

.bday-flower{
  position:absolute;
  font-size:1.6rem;
}
.bday-flower--bl{bottom:8px;left:16px;transform:rotate(-12deg);}
.bday-flower--br{bottom:8px;right:16px;transform:rotate(10deg);}

.bday-balloon--pink{
  background:
    radial-gradient(circle at 30% 65%, rgba(255,255,255,0.85) 0 2.3px, transparent 3px),
    radial-gradient(circle at 62% 42%, rgba(255,255,255,0.85) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.75) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 35% 30%, #ffffff 0%, #f8bbd0 22%, #ec4899 70%, #db2777 100%);
}
.bday-balloon--dot{
  background:
    radial-gradient(circle at 30% 65%, rgba(255,255,255,0.9) 0 2.3px, transparent 3px),
    radial-gradient(circle at 62% 42%, rgba(255,255,255,0.9) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.8) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 35% 28%, #4b5563 0%, #1f2937 55%, #111827 100%);
}

.bday-heart{
  position:absolute;
  font-size:0.85rem;
  color:#ec4899;
  opacity:0.75;
}
.bday-heart--1{top:24px;left:56px;transform:rotate(-15deg);}
.bday-heart--2{top:30px;right:62px;transform:rotate(12deg);color:#1f2937;}

.birthday-decor{
  font-size:1.2rem;
  letter-spacing:6px;
  margin-bottom:10px;
}

.birthday-photo-wrap{
  position:relative;
  width:120px;
  margin:0 auto 14px;
}

.birthday-photo{
  width:120px;
  height:150px;
  object-fit:cover;
  object-position:center top;
  border-radius:18px;
  border:4px solid #fff;
  outline:3px solid #ec4899;
  box-shadow:0 10px 22px rgba(219,39,119,0.3);
  display:block;
}

.birthday-age-badge{
  position:absolute;
  bottom:-10px;
  right:-12px;
  background:linear-gradient(135deg, #d4af37, #c9a227);
  color:#fff;
  font-size:0.78rem;
  font-weight:700;
  padding:5px 11px;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(202,160,66,0.4);
  border:2px solid #fff;
}

.birthday-script{
  font-family:'Dancing Script', cursive;
  color:#db2777;
  font-size:2rem;
  font-weight:700;
  line-height:1.15;
  margin-bottom:8px;
  position:relative;
}

.birthday-msg{
  color:var(--text-muted);
  font-size:0.85rem;
  position:relative;
}

/* Sections */
.section{
  max-width:1100px;
  margin:0 auto;
  padding:70px 20px;
}

.alt-bg{background:rgba(205,240,234,0.9);max-width:100%;}
.alt-bg > *{max-width:1100px;margin-left:auto;margin-right:auto;}

/* Por defecto el texto de título/descripción va claro (está sobre la foto).
   Dentro de .alt-bg hay un panel claro detrás, así que ahí va oscuro. */
.section-title{
  font-size:1.9rem;
  color:var(--text-on-photo);
  text-shadow:var(--shadow-on-photo);
  margin-bottom:8px;
  text-align:center;
}

.section-desc{
  text-align:center;
  color:var(--text-on-photo-muted);
  text-shadow:var(--shadow-on-photo);
  margin-bottom:34px;
}

.alt-bg .section-title{color:var(--accent-dark);text-shadow:none;}
.alt-bg .section-desc{color:var(--text-muted);text-shadow:none;}

/* Gallery */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:16px;
}

.gallery-item{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow);
  aspect-ratio:4/3;
  background:#eee;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s;
  display:block;
}

.gallery-item:hover img{transform:scale(1.06);}

.gallery-caption{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.6), transparent);
  color:#fff;
  font-size:0.85rem;
}

/* Videos */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:24px;
}

.video-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.video-card video, .video-card iframe{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  border:none;
}

.video-caption{padding:12px 14px;font-size:0.9rem;color:var(--text-muted);}

/* Stories */
.stories-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.story-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 26px;
}

.story-card h3{color:var(--accent-dark);font-size:1.2rem;margin-bottom:6px;}
.story-date{font-size:0.8rem;color:var(--text-muted);margin-bottom:10px;display:block;}
.story-card p{margin:0;color:var(--text-dark);}

/* Timeline */
.timeline{
  position:relative;
  padding-left:26px;
  border-left:3px solid var(--accent);
}

.timeline-item{
  position:relative;
  margin-bottom:30px;
  padding-left:20px;
}

.timeline-item::before{
  content:'';
  position:absolute;
  left:-32px;
  top:4px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent-2);
  border:3px solid var(--warm-2);
}

.timeline-date{
  font-weight:700;
  color:var(--text-on-photo);
  text-shadow:var(--shadow-on-photo);
  font-size:0.9rem;
}

.timeline-item h3{font-size:1.1rem;margin:4px 0 6px;}
.timeline-item p{margin:0;color:var(--text-on-photo-muted);text-shadow:var(--shadow-on-photo);font-size:0.95rem;}

.timeline-item h3 a{
  color:var(--text-on-photo);
  text-shadow:var(--shadow-on-photo);
  border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
}
.timeline-item h3 a:hover{
  color:var(--accent-2);
  border-color:var(--accent-2);
}

.alt-bg .timeline-date{color:var(--accent-dark);text-shadow:none;}
.alt-bg .timeline-item p{color:var(--text-muted);text-shadow:none;}
.alt-bg .timeline-item h3 a{color:var(--accent-dark);text-shadow:none;}

/* Footer — va directo sobre la foto de fondo, sin franja de color detrás */
.site-footer{
  text-align:center;
  padding:26px;
  color:var(--text-on-photo-muted);
  text-shadow:var(--shadow-on-photo);
  font-size:0.85rem;
  background:transparent;
  border-top:none;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(20,15,10,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:20px;
}

.lightbox.hidden{display:none;}

.lightbox img{
  max-width:90vw;
  max-height:80vh;
  border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.lightbox-caption{color:#fff;margin-top:14px;font-size:0.95rem;}

.lightbox-close{
  position:absolute;
  top:20px;right:26px;
  background:none;
  border:none;
  color:#fff;
  font-size:1.8rem;
  cursor:pointer;
}

/* Responsive */
@media (max-width:760px){
  /* En iPhone/Safari, background-attachment:fixed muchas veces no pinta
     la foto de fondo — en móvil la dejamos scroll normal. */
  body{background-attachment:scroll;}
  .nav-toggle{display:block;}
  .main-nav ul{
    position:absolute;
    top:64px;
    right:20px;
    background:var(--warm-1);
    flex-direction:column;
    gap:0;
    box-shadow:var(--shadow);
    border-radius:10px;
    overflow:hidden;
    display:none;
  }
  .main-nav ul.open{display:flex;}
  .main-nav ul li{border-bottom:1px solid #eadfd2;}
  .main-nav ul li a{display:block;padding:12px 18px;}
  .hero-content h2{font-size:1.7rem;}
}

/* Login */
body.login-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.login-hero{
  min-height:0;
  padding:0;
  display:block;
  flex:1;
}

.login-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 16px;
  max-width:230px;
  width:calc(100% - 40px);
  position:fixed;
  top:84px;
  right:20px;
  margin:0;
  text-align:center;
  z-index:10;
}

.login-card h2{
  color:var(--accent-dark);
  font-size:1.15rem;
  margin-bottom:4px;
}

.login-card p.login-desc{
  color:var(--text-muted);
  font-size:0.78rem;
  margin-bottom:14px;
}

.login-form{display:flex;flex-direction:column;gap:10px;text-align:left;}

.login-form label{
  font-size:0.75rem;
  font-weight:600;
  color:var(--text-dark);
  margin-bottom:3px;
  display:block;
}

.login-form input{
  width:100%;
  padding:8px 10px;
  border:1px solid #cbd8d6;
  border-radius:8px;
  font-size:0.9rem;
  font-family:inherit;
}

.login-form input:focus{
  outline:none;
  border-color:var(--accent);
}

.login-btn{
  margin-top:4px;
  padding:9px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-size:0.9rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s;
}

.login-btn:hover{background:var(--accent-dark);}

.login-error{
  background:#fdeceb;
  color:#a83232;
  border:1px solid #f2b9b4;
  border-radius:8px;
  padding:10px 12px;
  font-size:0.85rem;
  margin-bottom:16px;
}

.logout-link{
  font-size:0.85rem;
  opacity:0.85;
}