/* ============ CORAZÓN CONECTADO — ESTILOS FRONT-END ============ */
/* Mismos tokens de color/tipografía y animaciones que la landing page */
:root{
  --blush: #F8DCE6;
  --blush-deep: #EFC1D3;
  --wine: #6E1E33;
  --wine-dark: #3A0F1E;
  --gold: #C6A15B;
  --gold-light: #F0DBA0;
  --cream: #FFF8F2;
  --ink: #3A222C;
  --f-script: 'Alex Brush', cursive;
  --f-display: 'Playfair Display', serif;
  --f-read: 'Cormorant Garamond', serif;
  --f-ui: 'Poppins', sans-serif;
}

.cc-pareja-page, .cc-formulario, .cc-password-box{
  font-family: var(--f-ui);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}
.cc-pareja-page ::selection{ background: var(--gold-light); color: var(--wine-dark); }

/* ---------- ANIMACIÓN DE APARICIÓN AL HACER SCROLL ---------- */
.cc-reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.cc-reveal.cc-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .cc-reveal{ opacity:1; transform:none; transition:none; }
  .cc-pareja-page *{ animation-duration:.001ms !important; }
}

/* ---------- HERO ---------- */
.cc-hero{
  min-height: 78vh;
  background-size: cover;
  background-position: center;
  background-color: var(--blush);
  background-image: radial-gradient(ellipse at 50% 20%, var(--blush) 0%, var(--blush-deep) 55%, #E3A9C0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cc-hero-particulas{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.cc-particula{
  position:absolute; font-size:1.3rem; color: var(--gold); opacity:.55;
  animation: cc-flotar 14s linear infinite;
  filter: drop-shadow(0 0 6px rgba(198,161,91,.5));
}
@keyframes cc-flotar{
  0%{ transform: translateY(110%) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.6; }
  90%{ opacity:.5; }
  100%{ transform: translateY(-15%) translateX(40px) rotate(360deg); opacity:0; }
}
.cc-hero-overlay{
  background: linear-gradient(180deg, rgba(58,15,30,0.08), rgba(58,15,30,0.55));
  width: 100%; height: 100%; min-height: 78vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 24px; position:relative; z-index:2;
}
.cc-nombres{
  font-family: var(--f-script);
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1;
  margin: 0 0 22px 0;
  background: linear-gradient(100deg, var(--gold-light) 20%, #fff 45%, var(--gold-light) 65%, #fff 85%);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: cc-brillo 7s ease-in-out infinite;
  text-shadow: 0 2px 30px rgba(0,0,0,.15);
}
@keyframes cc-brillo{ 0%,100%{ background-position:0% center; } 50%{ background-position:100% center; } }

/* ---------- CONTADOR ---------- */
.cc-contador{ display:flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cc-contador .cc-num-box{
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(240,219,160,.55);
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 74px;
  color:#fff;
  backdrop-filter: blur(6px);
  transition: transform .25s ease;
}
.cc-contador .cc-num-box:hover{ transform: translateY(-4px); }
.cc-contador .cc-num-box strong{
  display:block; font-size: 1.7rem; font-family: var(--f-display); color: var(--gold-light);
}
.cc-contador .cc-num-box span{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }

/* ---------- SECCIONES GENERALES ---------- */
.cc-seccion{ max-width: 860px; margin: 0 auto; padding: 64px 20px; }
.cc-seccion h2{
  font-family: var(--f-display); color: var(--wine); text-align:center;
  font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 32px; position:relative;
}
.cc-seccion h2::after{
  content:"✦"; display:block; color: var(--gold); font-size:.9rem; margin-top:10px;
}
.cc-historia .cc-texto{ font-family: var(--f-read); font-size: 1.15rem; line-height: 1.85; }

/* ---------- LÍNEA DEL TIEMPO ---------- */
.cc-timeline-lista{ position: relative; padding-left: 26px; border-left: 3px solid var(--blush-deep); }
.cc-timeline-item{ margin-bottom: 30px; position: relative; padding-left: 16px; }
.cc-timeline-item::before{
  content:""; position:absolute; left:-32px; top:6px;
  width:15px; height:15px; border-radius:50%;
  background: var(--gold); border: 3px solid var(--cream);
  box-shadow: 0 0 0 3px var(--blush-deep);
  transition: transform .3s ease;
}
.cc-timeline-item:hover::before{ transform: scale(1.3); }
.cc-timeline-fecha{ font-size:.8rem; color: var(--gold); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.cc-timeline-item h3{ font-family: var(--f-display); color: var(--wine); margin: 4px 0; }
.cc-timeline-item p{ font-family: var(--f-read); font-size:1.05rem; color:#7A5A66; }

/* ---------- GALERÍA ANIMADA ---------- */
.cc-galeria-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cc-galeria-foto{
  position:relative; border-radius: 14px; overflow:hidden; display:block;
  opacity:0; transform: scale(.85); transition: opacity .7s ease, transform .7s ease;
}
.cc-galeria-foto.cc-visible{ opacity:1; transform: scale(1); }
.cc-galeria-foto img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 1/1.05; display:block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.cc-galeria-foto:hover img{ transform: scale(1.14) rotate(1deg); }
.cc-galeria-foto::before{
  content:""; position:absolute; inset:8px; border:1.5px solid rgba(255,255,255,.75); border-radius:10px;
  opacity:0; transition: opacity .4s ease; pointer-events:none; z-index:2;
}
.cc-galeria-foto:hover::before{ opacity:1; }

/* ---------- CARTAS (acordeón) ---------- */
.cc-acordeon-item{ border-bottom: 1px solid var(--blush-deep); }
.cc-acordeon-titulo{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family: var(--f-display); font-size: 1.15rem; color: var(--wine);
  padding: 18px 4px; transition: color .25s ease, padding-left .25s ease;
}
.cc-acordeon-titulo:hover{ color: var(--gold); padding-left: 8px; }
.cc-acordeon-contenido{ max-height:0; overflow:hidden; transition: max-height .4s ease; font-family: var(--f-read); font-size:1.08rem; }
.cc-acordeon-item.abierto .cc-acordeon-contenido{ max-height: 700px; padding-bottom: 18px; }

/* ---------- AUDIOS ---------- */
.cc-audio-item{
  background: var(--blush); border-radius: 14px; padding: 16px; margin-bottom: 14px;
  border-left: 3px solid var(--gold);
}
.cc-audio-item p{ font-family: var(--f-display); color: var(--wine); margin-bottom:6px; }
.cc-audio-item audio{ width: 100%; margin-top:6px; }

/* ---------- QR ---------- */
.cc-seccion-qr{ text-align:center; }
.cc-qr-box{
  display:inline-block; background:#fff; padding:24px; border-radius:18px;
  box-shadow: 0 10px 34px rgba(110,30,51,.18); border: 1px solid var(--blush-deep);
  transition: transform .3s ease;
}
.cc-qr-box:hover{ transform: translateY(-4px); }
.cc-qr-img{ display:block; margin: 0 auto 12px; border-radius: 10px; }
.cc-qr-caption{ font-family: var(--f-read); font-style: italic; font-size:.95rem; color: var(--wine); margin-bottom: 14px; }

/* ---------- BOTONES ---------- */
.cc-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 30px; border-radius: 40px;
  font-family: var(--f-ui); font-weight: 500; font-size:.95rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.cc-btn-primary{
  background: linear-gradient(135deg, var(--wine), var(--wine-dark));
  color: var(--gold-light);
  box-shadow: 0 10px 26px rgba(110,30,51,.3);
}
.cc-btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(110,30,51,.4); }
.cc-btn-outline{ background: transparent; border: 1.5px solid var(--gold); color: var(--wine); }
.cc-btn-outline:hover{ background: var(--wine); color: var(--gold-light); }
.cc-btn-grande{ width:100%; justify-content:center; font-size:1.05rem; padding: 17px; }

/* ---------- CONTRASEÑA ---------- */
.cc-password-wrap{
  min-height: 68vh; display:flex; align-items:center; justify-content:center;
  padding: 24px; background: radial-gradient(ellipse at 50% 30%, var(--blush) 0%, var(--blush-deep) 100%);
}
.cc-password-box{
  background:#fff; padding: 44px; border-radius: 20px; text-align:center; max-width: 420px;
  box-shadow: 0 16px 44px rgba(110,30,51,.18); border-top: 3px solid var(--gold);
}
.cc-password-box h2{ font-family: var(--f-display); color: var(--wine); margin-bottom:6px; }
.cc-password-box p{ font-family: var(--f-read); color:#7A5A66; }
.cc-password-box input[type="password"]{
  width:100%; padding:13px; border-radius:10px; border:1px solid var(--blush-deep); margin: 14px 0; font-family: var(--f-ui);
}
.cc-password-box input[type="submit"]{
  background: linear-gradient(135deg, var(--wine), var(--wine-dark)); color: var(--gold-light);
  border:none; padding: 13px 28px; border-radius: 40px; cursor:pointer; font-family: var(--f-ui); font-weight:500;
}

/* ---------- FORMULARIO FRONT-END ---------- */
.cc-formulario{ max-width: 720px; margin: 0 auto; padding: 40px 24px; }
.cc-formulario h2{
  font-family: var(--f-display); color: var(--wine); margin-top: 36px; font-size:1.4rem;
  border-bottom: 1px solid var(--blush-deep); padding-bottom: 10px;
}
.cc-campo{ margin-bottom: 18px; }
.cc-campo label{ display:block; font-weight:500; margin-bottom:7px; font-size:.88rem; color: var(--wine); }
.cc-campo input[type=text], .cc-campo input[type=url], .cc-campo input[type=date], .cc-campo textarea, .cc-campo input[type=file]{
  width:100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--blush-deep);
  font-family: var(--f-ui); transition: border-color .25s ease, box-shadow .25s ease; background:#fff;
}
.cc-campo input:focus, .cc-campo textarea:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,161,91,.18); }
.cc-repeater-row{
  background: var(--blush); border-radius: 14px; padding: 16px; margin-bottom: 14px;
  display:flex; flex-direction:column; gap:10px; border-left: 3px solid var(--gold);
}
.cc-repeater-row input, .cc-repeater-row textarea{ padding: 11px; border-radius: 10px; border: 1px solid var(--blush-deep); font-family: var(--f-ui); }
.cc-btn-quitar{ align-self:flex-end; background: none; border: none; color: var(--wine); text-decoration: underline; cursor:pointer; font-size:.8rem; }
.cc-galeria-existente{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom: 14px; }
.cc-foto-existente{ text-align:center; font-size:.75rem; }
.cc-foto-existente img{ border-radius: 10px; display:block; margin-bottom: 5px; }
.cc-aviso{
  max-width:600px; margin: 70px auto; text-align:center; background: var(--blush);
  padding: 34px; border-radius: 16px; font-family: var(--f-read); font-size:1.1rem; color: var(--wine);
}
.cc-aviso a{ color: var(--wine); text-decoration: underline; font-weight:600; }

/* ---------- FOOTER DE LA PÁGINA DE PAREJA ---------- */
.cc-footer-pareja{
  text-align:center; padding: 36px 20px; font-family: var(--f-read); font-style: italic;
  color:#7A5A66; background: var(--blush);
}
.cc-footer-pareja a{ color: var(--wine); font-weight:600; }

/* ---------- LIGHTBOX GALERÍA ---------- */
.cc-lightbox{
  position:fixed; inset:0; background: rgba(58,15,30,.9); z-index:999;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition: opacity .35s ease;
}
.cc-lightbox.cc-abierto{ opacity:1; pointer-events:auto; }
.cc-lightbox img{
  max-width: min(90vw, 640px); max-height: 82vh; border-radius: 16px; border: 4px solid var(--gold);
  transform: scale(.9); transition: transform .35s ease; box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.cc-lightbox.cc-abierto img{ transform: scale(1); }
.cc-lightbox-cerrar{
  position:absolute; top:26px; right:26px; color: var(--gold-light); font-size:2.2rem;
  cursor:pointer; background:none; border:none; line-height:1;
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 640px){ .cc-galeria-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){
  .cc-galeria-grid{ grid-template-columns: repeat(4, 1fr); }
  .cc-seccion{ padding: 80px 20px; }
}