@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");
@import url("https://fonts.googleapis.com/css?family=Frank Ruhl Libre");

body {
  font-size: 100%;
  margin: 0;
  padding: 0;
}

/************************/
/*****Header Section*****/
/************************/

#header {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  background-image: url('../images/FONDO-WEB-PONY.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /**/
}

/*.HContainer1*/
#header .HContainer1 {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#header .HContainer2 {
  width: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*aspect-ratio: 7 / 5; */
  margin: 0;  
  padding-top: 3em;
  overflow: hidden;
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed Yellow;*/
}

/***Wedding Icon Block***/
#header .HContainer1 .HTitle {
  width: 100%;
  height: 60%;
  padding: 1em;
  margin: 0;  
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;     /* centra verticalmente */
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#header .HContainer1 .HTitle .HWeddingLogo {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0; 
  /**/
  /*outline: 1px dashed darkred;*/
}

/***Counter Block***/
#header .HContainer1 .HCounter {
  width: 100%;
  height: 40%;
  padding: 0;
  margin: 0;  
  display: block;
  position: relative;
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#header .HContainer1 .HCounter .HCountdownCont {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Frank Ruhl Libre';
  gap: 2em;
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

.HCountdownCont .CountDownLbl {
  font-size: clamp(1rem, 2.5vw, 2rem);
  color: #ffffff; /*Fuente color blanco*/
  /*font-size: 1.5em;*/
  margin-right: 1em;
  /**/
  /*outline: 1px dashed darkred;*/
}

.HCountdownCont .CountDownItem {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /**/
  /*outline: 1px dashed darkred;*/
}

.CountDownItem .CountDownNum {
  margin: 0;
  padding: 0;
  font-size: clamp(1rem, 2.5vw, 3rem);
  color: #ffffff; /*Fuente color blanco*/
  /*font-size: 2em;*/
  font-weight: bold;
  display: block;
  /**/
  /*outline: 1px dashed darkred;*/
}

.CountDownItem .CountDownTxt {
  margin: 0;
  padding: 0;
  font-size: clamp(1rem, 2.5vw, 2rem);
  color: #ffffff; /*Fuente color blanco*/
  /*font-size: 1em;*/
  /**/
  /*outline: 1px dashed darkred;*/
}


/**Count Down Zero Event**/

.DayZero {
  font-size: clamp(1rem, 2.5vw, 2rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #ffffff;
  box-sizing: border-box; 
  text-align: center;
  font-family: 'Frank Ruhl Libre';
}

/************************/

/***Header RSVP Button Container***/

#header .HContainer1 .HCounter .HRSVPBlock {
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: right;
  font-family: 'Frank Ruhl Libre';
  overflow: hidden;
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

.HCounter .HRSVPBlock .HRSVPBlockSec1 {
  width: 66.66%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

.HCounter .HRSVPBlock .HRSVPBlockSec1 .Hh1 {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
  position: relative;
  text-align: right;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #ffffff; /*Fuente color blanco*/
  font-family: 'Frank Ruhl Libre';
  /**/
  /*outline: 1px dashed darkred;*/
}

.HCounter .HRSVPBlock .HRSVPBlockSec1 .Hh2 {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
  position: relative;
  text-align: right;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  /*font-size: 2em;*/
  font-weight: normal;
  color: #ffffff; /*Fuente color blanco*/
  font-family: 'Frank Ruhl Libre';
  /**/
  /*outline: 1px dashed darkred;*/
}

.HCounter .HRSVPBlock .HRSVPBlockSec2 {
  width: 33.33%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

/*Button RSVP Style*/
.HRSVPBlock .HRSVPBlockSec2 .RSVPGoToButton {
  width: 80%;
  height: 60%;
  margin: 0;
  padding: 1%;
  display: flex;
  align-items: center;   /* centra verticalmente */
  justify-content: center; 
  font-size: clamp(1rem, 2.5vw, 2rem);
  color: #ffffff;
  overflow: hidden;
  box-sizing: border-box; 
  background-color: #5d245b;
  text-decoration: none;
  /**/
  /*outline: 1px dashed darkred;*/
}

/**********************************/

/***Wedding Drawing Block***/
#header .HContainer2 .imgHDrawing {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  position: relative;
  display: block;
  /**/
  /*outline: 1px dashed darkred;*/
}
/***************************/

/*Header Section*/
/*Responsive Block*/

/*---------------------------*/

/* XLarge */
@media screen and (max-width: 1680px) {

}

/* Large */
@media screen and (max-width: 1140px) {

  #header {
    flex-direction: column;
  }

  #header .HContainer1 {
    width: 100%;
    /*height: 100vh;*/
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100); /* Pa que jale Shingon en el  iOS Safari viejon */
  }

  #header .HContainer2 {
    width: 100%;
  }
  
  #header .HContainer1 .HTitle {
    height: 60%;
  }

  #header .HContainer1 .HCounter {
    height: 40%;
  }

  #header .HContainer1 .HCounter .HCountdownCont {
    height: 50%;
    gap: 1em;
  }

  /* font adjustment  */
  #header .HContainer1 .HCounter .HCountdownCont .CountDownLbl {
    font-size: 1.5rem;
  }

  #header .HContainer1 .HCounter .HCountdownCont .CountDownItem .CountDownNum {
    font-size: 2rem;
  }

  #header .HContainer1 .HCounter .HCountdownCont .CountDownItem .CountDownTxt {
    font-size: 1.2rem;
  }

  .DayZero {
    font-size: 1.5rem;
  }
  /*------------------*/


  #header .HContainer1 .HCounter .HRSVPBlock {
    height: 50%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec1{
    height: 100%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec2{
    height: 100%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec2 .RSVPGoToButton {
    height: 30%;
  }

}

/* Medium */
@media screen and (max-width: 980px) {

  #header {
    flex-direction: column;
  }

  #header .HContainer1 {
    width: 100%;
    /*height: 100vh;*/
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100); /* Pa que jale Shingon en el  iOS Safari viejon */
  }

  #header .HContainer2 {
    width: 100%;
  }
  
  #header .HContainer1 .HTitle {
    height: 60%;
  }

  #header .HContainer1 .HCounter {
    height: 40%;
  }

  #header .HContainer1 .HCounter .HCountdownCont {
    height: 50%;
    gap: 1em;
  }

  /* font adjustment  */
  #header .HContainer1 .HCounter .HCountdownCont .CountDownLbl {
    font-size: 1.5rem;
  }

  #header .HContainer1 .HCounter .HCountdownCont .CountDownItem .CountDownNum {
    font-size: 2rem;
  }

  #header .HContainer1 .HCounter .HCountdownCont .CountDownItem .CountDownTxt {
    font-size: 1.2rem;
  }

  .DayZero {
    font-size: 1.5rem;
  }
  /*------------------*/

  #header .HContainer1 .HCounter .HRSVPBlock {
    height: 50%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec1{
    height: 100%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec2{
    height: 100%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec2 .RSVPGoToButton {
    height: 30%;
  }

}

/* Small*/
@media screen and (max-width: 768px) {

  #header {
    flex-direction: column;
  }

  #header .HContainer1 {
    width: 100%;
    /*height: 100vh;*/
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100); /* Pa que jale Shingon en el  iOS Safari viejon */
  }

  #header .HContainer2 {
    width: 100%;
  }
  
  #header .HContainer1 .HTitle {
    height: 60%;
  }

  #header .HContainer1 .HCounter {
    height: 40%;
  }

  #header .HContainer1 .HCounter .HCountdownCont {
    height: 50%;
    gap: 1em;
  }

  /* font adjustment  */
  #header .HContainer1 .HCounter .HCountdownCont .CountDownLbl {
    font-size: 1.5rem;
  }

  #header .HContainer1 .HCounter .HCountdownCont .CountDownItem .CountDownNum {
    font-size: 2rem;
  }

  #header .HContainer1 .HCounter .HCountdownCont .CountDownItem .CountDownTxt {
    font-size: 1.2rem;
  }

  .DayZero {
    font-size: 1.5rem;
  }
  /*------------------*/

  #header .HContainer1 .HCounter .HRSVPBlock {
    height: 50%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec1{
    height: 100%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec2{
    height: 100%;
  }

  #header .HContainer1 .HCounter .HRSVPBlock .HRSVPBlockSec2 .RSVPGoToButton {
    height: 30%;
  }

}

/*---------------------------*/

/***********************/
/***Recepcion Section***/
/***********************/

#Reception {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  box-sizing: border-box; 
  overflow: hidden;
  background-color: #F5F5F5; /*Fondo gris Figma Joselito*/
  /**/
  /*background-color: #4686a0;*/
  /*outline: 1px dashed darkred;*/
}

/*.RContainer1*/
#Reception .RContainer1 {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3em;
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Reception .RContainer1 .ThePlaceLogo {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Reception .RContainer1 .FOFOFORMAL {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Reception .RContainer1 .Rh1 {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  font-size: clamp(1rem, 4vw, 2rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #949494;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Reception .RContainer1 .Rh2 {
  width: 100%;
  margin: 0;
  padding: 0; 
  position: relative;
  text-align: right;
  font-size: clamp(.75rem, 4vw, 1.5rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #db9c70;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Reception .RContainer1 .Rh3 {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: right;
  font-size: clamp(.5rem, 4vw, 1rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #000000;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Reception .RContainer1 .Rh4 {
  font-size: clamp(1rem, 2.5vw, 1rem);
  /*font-size: 2em;*/
  font-weight: normal;
  color: #9D9D9D;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Reception .RContainer2 {
  width: 66.66%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5em;
  box-sizing: border-box; 
  /**/
  /*outline: 1px dashed darkred;*/
}

.RContainer2 .SalonImgGrid {
  margin: 0;
  padding: 0;
  display: grid;
  box-sizing: border-box; 
  grid-template-columns: repeat(3, auto); /* 3 columnas iguales */
  grid-template-rows: repeat(2, auto);    /* 2 filas iguales */
  gap: .5em; /* espacio entre imágenes */
  width: auto;
  height: auto;
  /**/
  /*outline: 1px dashed darkred;*/
}

.RContainer2 .SalonImgGrid img {
  margin: 0;
  padding: 0;
  width: 100%;
  aspect-ratio: 4 / 3; /*Mantiene proporcion de IMG*/
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  /**/
  /*outline: 1px dashed darkred;*/
}

/**********************************/

/*Recepcion Section*/
/*Responsive Block*/

/*---------------------------*/

/* XLarge */
@media screen and (max-width: 1680px) {
}

/* Large */
@media screen and (max-width: 1140px) {

  #Reception {
    flex-direction: column;
  }
    
  #Reception .RContainer1{
    padding: 2em;
    width: 100%;
  }

  #Reception .RContainer2 {
    width: 100%;
    padding: 1em;
  }

  .RContainer2 .SalonImgGrid {
    grid-template-columns: repeat(2, auto);
  }

}

/* Medium */
@media screen and (max-width: 980px) {

  #Reception {
    flex-direction: column;
  }
    
  #Reception .RContainer1{
    padding: 2em;
    width: 100%;
  }

  #Reception .RContainer2 {
    width: 100%;
    padding: 1em;
  }

  .RContainer2 .SalonImgGrid {
    grid-template-columns: repeat(2, auto);
  }

}

/* Small*/
@media screen and (max-width: 768px) {

  #Reception {
    flex-direction: column;
  }
    
  #Reception .RContainer1{
    padding: 2em;
    width: 100%;
  }

  #Reception .RContainer2 {
    width: 100%;
    padding: 1em;
  }

  .RContainer2 .SalonImgGrid {
    grid-template-columns: repeat(2, auto);
  }

}

/*---------------------------*/

/***********************/
/***Itinerario Section***/
/***********************/

#Itinerario {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*background-color: #4686a0;*/ /*Azul para pruebas*/
  /*outline: 1px dashed darkred;*/
}

/*.IContainer1*/
#Itinerario .IContainer1 {
  order: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7em;
  box-sizing: border-box;  
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Itinerario .IContainer1 .ICollection1 {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  position: relative;
  display: block; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

/*.IContainer2*/
#Itinerario .IContainer2 {
  order: 2;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  padding: 1em;
  box-sizing: border-box;  
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Itinerario .IContainer2 .TheDetailsLogo {
  width: auto;
  height: auto;
  max-height: 50%;
  max-width: 50%;
  padding: 0;
  margin: 0; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Itinerario .IContainer2 .NOFOFOS {
  width: auto;
  height: auto;
  max-height: 55%;
  max-width: 55%;
  padding: 0;
  margin: 0; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Itinerario .IContainer2 .Ih1 {
  width: 100%;
  margin: 0;
  margin-bottom: 1em;
  padding: 0;
  box-sizing: border-box; 
  position: relative;
  text-align: left;
  font-size: clamp(1rem, 2.5vw, 2rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #949494;
  font-family: 'Frank Ruhl Libre';
  /**/
  /*outline: 1px dashed darkred;*/
}

#Itinerario .IContainer2 .Ih2 {
  width: 100%;
  margin: 0;
  margin-bottom: 0.5em;
  padding: 0;
  box-sizing: border-box; 
  position: relative;
  text-align: left;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #5580c6;
  font-family: 'Frank Ruhl Libre';
  /**/
  /*outline: 1px dashed darkred;*/
}

#Itinerario .IContainer2 .Ih3 {
  width: 100%;
  margin: 0;
  margin-bottom: 0.5em;
  padding: 0;
  box-sizing: border-box; 
  position: relative;
  text-align: left;
  font-size: clamp(1rem, 2.5vw, 1rem);
  /*font-size: 2em;*/
  font-weight: normal;
  color: #9D9D9D;
  font-family: 'Frank Ruhl Libre';
  /**/
  /*outline: 1px dashed darkred;*/
}

/*Itinerario Section*/
/* Responsive Block */

/*---------------------------*/

/* XLarge */
@media screen and (max-width: 1680px) {
}

/* Large */
@media screen and (max-width: 1140px) {

  #Itinerario {
    flex-direction: column;
  }
    
  #Itinerario .IContainer1 {
    order: 2;
    width: 100%;
    padding: 1em;
  }

  #Itinerario .IContainer2 {
    order: 1;
    width: 100%;
    padding: 1em;
    align-items: center;
    justify-content: center;
  }

  #Itinerario .IContainer2 .TheDetailsLogo {
    max-height: 100%;
    max-width: 100%;
  }

  #Itinerario .IContainer2 .NOFOFOS {
    max-height: 100%;
    max-width: 100%;
  }

}

/* Medium */
@media screen and (max-width: 980px) {

  #Itinerario {
    flex-direction: column;
  }
    
  #Itinerario .IContainer1 {
    order: 2;
    width: 100%;
    padding: 1em;
  }

  #Itinerario .IContainer2 {
    order: 1;
    width: 100%;
    padding: 1em;
    align-items: center;
    justify-content: center;
  }

  #Itinerario .IContainer2 .TheDetailsLogo {
    max-height: 100%;
    max-width: 100%;
  }

  #Itinerario .IContainer2 .NOFOFOS {
    max-height: 100%;
    max-width: 100%;
  }

}

/* Small*/
@media screen and (max-width: 768px) {

  #Itinerario {
    flex-direction: column;
  }
    
  #Itinerario .IContainer1 {
    order: 2;
    width: 100%;
    padding: 1em;
  }

  #Itinerario .IContainer2 {
    order: 1;
    width: 100%;
    padding: 1em;
    align-items: center;
    justify-content: center;
  }

  #Itinerario .IContainer2 .TheDetailsLogo {
    max-height: 100%;
    max-width: 100%;
  }

  #Itinerario .IContainer2 .NOFOFOS {
    max-height: 100%;
    max-width: 100%;
  }

}

/*---------------------------*/

/**************************/
/***Confirmacion Section***/
/**************************/

#Confirmacion {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  box-sizing: border-box; 
  overflow: hidden;
  background-color: #F5F5F5; /*Fondo gris Figma Joselito*/
  /**/
  /*background-color: #4686a0;*/
}

/*.CContainer1*/
#Confirmacion .CContainer1 {
  order: 1;
  width: 50%;
  margin: 0;
  padding: 1em;
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer1 .C1SubContainer1{
  width: 60%;
  margin: 0;
  padding: 2em;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer1 .C1SubContainer2{
  width: 40%;
  margin: 0;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion  .CGatito1 {
  width: 100%;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  position: relative;
  display: block; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .Ch1 {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  font-size: clamp(1rem, 4vw, 2rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #771972;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  overflow: hidden;
  /**/
}

#Confirmacion .Ch2 {
  width: 100%;
  margin: 0;
  padding: 0; 
  position: relative;
  text-align: left;
  font-size: clamp(.75rem, 2.5vw, 1.5rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #771972;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .Ch3 {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  font-size: clamp(.7rem, 3.5vw, 1.4rem);
  /*font-size: 2em;*/
  font-weight: normal;
  color: #5d245b;
  /*color: #9D9D9D;*/
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box;
  overflow: hidden; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .Ch4 {
  font-size: clamp(.5rem, 2.5vw, 1rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #9D9D9D;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

/*.CContainer2*/
#Confirmacion .CContainer2 {
  order: 2;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5em;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

/*.RSVPCont*/
#Confirmacion .CContainer2 .RSVPCont {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer2 .RSVPCont .RSVP_Header {
  width: 100%;
  margin: 0;
  padding: .5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer2 .RSVPCont .RSVP_Header .TheSeeYouLogo {
  width: auto;
  height: auto;
  max-height: 80%;
  max-width: 80%;
  padding: 0;
  margin: 0; 
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer2 .RSVPCont .RSVPCont_Row {
  width: 100%;
  margin: 0;
  padding: .5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer2 .RSVPCont .RSVPCont_Row_P1 {
  width: 100%;
  margin: 0;
  padding: .5em;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
}

#Confirmacion .CContainer2 .RSVPCont .RSVPCont_Lbl {
  width: 20%;
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
}

#Confirmacion .CContainer2 .RSVPCont .RSVPLbl {
  font-size: clamp(.5rem, 2.5vw, 1.2rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #000000;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer2 .RSVPCont .RSVPCont_TBox {
  width: 80%;
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Confirmacion .CContainer2 .RSVPCont .RSVPCont_Row .RSVPCont_CheckBox {
  width: 80%;
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
}

#Confirmacion .CContainer2 .RSVPCont input[type="text"] {
  all: unset; 
  width: 80%;
  font-size: clamp(.5rem, 2.5vw, 1.2rem);
  /*font-size: 2em;*/
  font-weight: bold;
  color: #000000;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  overflow: hidden;
  border: none;
  border-bottom: 1px solid #000000;
  /**/
}

#Confirmacion .CContainer2 .RSVPCont .RSVP_ButtonBlock {
  width: 100%;
  margin: 0;
  padding: 1em 0 0 0.5em;
  display: flex;
  flex-direction: row;
  align-items: left;
  justify-content: left;
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

/*Button RSVP Style*/
#Confirmacion .CContainer2 .RSVPCont .RSVPConfirmButton {
  width: 35%;
  margin: 0;
  padding: .2em;
  display: flex;
  align-items: center;   /* centra verticalmente */
  justify-content: center; 
  font-size: clamp(1rem, 2.5vw, 2rem);
  color: #ffffff;
  overflow: hidden;
  box-sizing: border-box; 
  background-color: #771972;
  text-decoration: none;
  /**/
  /*outline: 1px dashed darkred;*/
}


/*Ocultar Row PLus 1*/
#Plus1 {
  /*display: none !important;*/
}

/*Confirmacion Section*/
/* Responsive Block */

/*---------------------------*/

/* XLarge */
@media screen and (max-width: 1680px) {
}

/* Large */
@media screen and (max-width: 1140px) {

  #Confirmacion {
    flex-direction: column;
  }
    
  #Confirmacion .CContainer1 {
    order: 2;
    width: 100%;
    padding: 1em;
  }

  #Confirmacion .CContainer2 {
    order: 1;
    width: 100%;
    padding: 1em;
  }

  #Confirmacion .CContainer2 .RSVPCont input[type="text"] {
    width: 100%;
    /**/
  }

}

/* Medium */
@media screen and (max-width: 980px) {

  #Confirmacion {
    flex-direction: column;
  }
    
  #Confirmacion .CContainer1 {
    order: 2;
    width: 100%;
    padding: 1em;
  }

  #Confirmacion .CContainer2 {
    order: 1;
    width: 100%;
    padding: 1em;
  }

  #Confirmacion .CContainer2 .RSVPCont input[type="text"] {
    width: 100%;
    /**/
  }

}

/* Small*/
@media screen and (max-width: 768px) {

  #Confirmacion {
    flex-direction: column;
  }
    
  #Confirmacion .CContainer1 {
    order: 1;
    width: 100%;
    padding: 1em;
  }

  #Confirmacion .CContainer2 {
    order: 2;
    width: 100%;
    padding: 1em;
  }

  #Confirmacion .CContainer2 .RSVPCont input[type="text"] {
    width: 100%;
    /**/
  }

}

/*---------------------------*/

/**************************/
/***Footer Section***/
/**************************/

#Footer {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  box-sizing: border-box; 
  overflow: hidden;
  background-color: #771972; /*Fondo Morado Figma Joselito*/
  /**/
  /*background-color: #4686a0;*/
}

/*.FContainer1*/
#Footer .FContainer1 {
  width: 100%;
  margin: 0;
  padding: 1em;
  position: relative; 
  display: flex;
  flex-direction: row;
  justify-content: center; 
  box-sizing: border-box; 
  overflow: hidden;
  /**/
  /*outline: 1px dashed darkred;*/
}

#Footer .Fh1 {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  font-size: clamp(0.01rem, 1.5vw, .7rem);
  /*font-size: 2em;*/
  font-weight: normal;
  color: #ffffff;
  font-family: 'Frank Ruhl Libre';
  box-sizing: border-box; 
  overflow: hidden;
  /**/
}