html, body {
    margin: 0;
    padding: 0;
}
        
.cover {
  background-image: url('back.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  width: 100vw;               
  min-height: 100vh;          
  display: flex;              
  flex-direction: column;
  margin-top: -68px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 25px;          
  box-sizing: border-box;
}




    :root{
      --bb-dorado:#C7B37A;   /* dorado suave */
      --bb-sage:#7E8A6A;     /* verde salvia */
      --bb-texto:#5b5b5b;    /* gris neutro */
      --bb-fondo:#f6f5f3;    /* papel suave */
    }

    /* Contenedor principal */
    .bb-card {
      display: grid;
      place-items: center;
      padding: 28px 18px;
    }

    .bb-papel {
      width: min(460px, 92vw);
      border-radius: 18px;
      padding: 28px 22px 0px;
      position: relative;
      overflow: hidden;
    }

    /* Cruz superior */
    .bb-cruz-wrap {
      display: grid;
      place-items: center;
      margin-top: 40px;
      margin-bottom: 15px;
    }
.bb-cruz {
width: 34px;
height: 34px;
color: var(--bb-dorado);
display: block;
}

/* Título "MI BAUTIZO" */
.bb-subtitulo {
font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
color: var(--bb-sage);
text-align: center;
margin: 6px 0 18px;
}

/* Foto circular con doble aro */
.bb-foto-wrap{
width: 200px;
aspect-ratio: 1/1;
margin-inline: auto;
border-radius: 50%;
position: relative;
display: grid;
place-items: center;
isolation: isolate;
}
/* aro exterior */
.bb-foto-wrap::before{
content:"";
position:absolute; inset:-10px;
border-radius:50%;
border:2px solid #e8e5df;
z-index:0;
}
/* aro dorado interno */
.bb-foto-wrap::after{
content:"";
position:absolute; inset:-3px;
border-radius:50%;
border:5px solid var(--bb-dorado);
z-index:0;
}
    
.bb-foto{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display:block;
    z-index:1;
    background:#eee;
}

.bb-nombre{
    margin-top: 20px;
    font-family: "Great Vibes", cursive;
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1.3;
    text-align:center;
    color: #6f745f;
    font-weight: 400;
    letter-spacing: .05em;
    margin-bottom:0px;
}

@media (max-width: 360px){
  .bb-foto-wrap{ width: 210px; }
}

.bb-fecha {
  text-align: center;
  padding-bottom: 100px;
}

.bb-frase {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  color: #5b5b5b;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.bb-fecha-linea {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-family: "Montserrat", sans-serif;
  color: #6f745f;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

.bb-fecha-linea::before,
.bb-fecha-linea::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background-color: #ccc;
}

.bb-dia, .bb-mes {
  letter-spacing: 0.18em;
  font-size: 13px;
}

.bb-numero {
  font-size: 52px;
  font-weight: 700;
  color: #c7b37a;
  line-height: 1;
  margin: 0 10px;
}

.bb-anio {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #5b5b5b;
  margin-top: 8px;
  padding-bottom: 70px;
}
            
.bb-padres {
  text-align: center;
  color: #4d4d4d;
  padding:45px 20px;
  background-color: #f8ced4; /* marrón elegante */
     margin-top: -75px;
  position: relative;
  width: 100%;
}


/* Título “PADRES” */
.bb-titulo {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.3em;
  margin-bottom: 14px;
}

/* Nombres */
.bb-nombres {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  margin-bottom: 45px;
}

/* Ramita separadora dorada */
.bb-separador {
  width: 80px;
  height: 20px;
  margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent, #c7b37a 40%, transparent);
  -webkit-mask: radial-gradient(circle at 50% 50%, black 60%, transparent 70%);
  mask: radial-gradient(circle at 50% 50%, black 60%, transparent 70%);
  opacity: 0.8;
}

/* Mensaje “Los esperamos...” */
.bb-invitacion {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.8;
}

.bb-celebrar {
  display: block;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.25em;
  margin: 4px 0;
}

.bb-juntos {
  font-family: "Great Vibes", cursive;
  font-size: 36px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.03em;
  color: #f7e4b2;
  display: inline-block;
  margin-top: 4px;
}

.bb-galeria {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.bb-fila {
  display: flex;
  gap: 0;
}

.bb-foto-galeria {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

.bb-fila:first-child .bb-foto-galeria {
  width: 50%;
}

.bb-foto-abajo {
  width: 100%;
}

.bb-galeria,
.bb-fila,
.bb-foto-galeria {
  line-height: 0;
}

.bb-eventos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  margin-top: 50px;
  padding-bottom: 60px;
}

.bb-evento {
  text-align: center;
      margin-bottom: 30px;
  color: #5b5b5b;
}

.bb-icono {
  color: #c7b37a; /* dorado */
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
}

.bb-icono svg {
  width: 100%;
  height: 100%;
}

.bb-lugar {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.bb-hora {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #444;
  margin-bottom: 4px;
}

.bb-como {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
  margin-bottom: 10px;
  color: #7b7b7b;
}

.bb-boton {
  display: inline-block;
  background: linear-gradient(180deg, #d3c18d, #b89f64);
  color: white;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 8px 38px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.bb-boton:hover {
  background: linear-gradient(180deg, #b89f64, #d3c18d);
}

/* Texto “Sesión de fotos” */
.bb-fotos {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #333;
  line-height: 1.6;
}

.bb-fotos span {
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
}

/* --- RSVP --- */
.bb-rsvp{
  text-align:center;
  
    background: #c5af7826;
  padding: 60px 20px 70px;
  color:#5b5b5b;
}

.bb-script{
  font-family:"Great Vibes", cursive;
  font-weight:400;
  letter-spacing:.02em;
  color:#3f4038;
}

.bb-rsvp-titulo{
  font-size: clamp(34px, 8vw, 46px);
  margin: 0 0 6px;
}

.bb-rsvp-num{
  color:#c7b37a;
  font-family:"Montserrat", sans-serif;
  font-weight:700;
  font-size: clamp(42px, 10vw, 56px);
  line-height:1;
  margin: 2px 0 8px;
}

.bb-rsvp-div{
  display:block;
  width: 120px;
  height: 1px;
  background:#bdbdbd;
  margin: 10px auto 14px;
}

.bb-rsvp-honor{
  font-family:"Montserrat", sans-serif;
  font-weight:600;
  letter-spacing:.18em;
  font-size:14px;
  color:#6f745f;
  text-transform:uppercase;
  margin-bottom:18px;
}

.bb-rsvp-heart{
  width:52px; height:52px;
  color:#c7b37a;
  margin: 0 auto 6px;
}
.bb-rsvp-heart svg{ width:100%; height:100%; }

.bb-rsvp-conf{
  font-size: clamp(32px, 7vw, 42px);
  margin: 8px 0 0;
}

.bb-rsvp-sub{
  font-family:"Montserrat", sans-serif;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin: 6px 0 16px;
  color:#5b5b5b;
}

.bb-boton{
  display:inline-block;
  padding: 10px 38px;
  border-radius:10px;
  font-family:"Montserrat", sans-serif;
  letter-spacing:.12em;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:transform .12s ease, filter .2s ease;
  color:#fff;
}
.bb-boton-wa{
  background: linear-gradient(180deg, #d3c18d, #b89f64);
  box-shadow:0 6px 16px rgba(184,159,100,.35);
}
.bb-boton-wa:hover{ filter:brightness(1.05); transform: translateY(-1px); }

.bb-rsvp-gracias{
  margin-top:26px;
  font-size: clamp(30px, 7vw, 40px);
}