/* base.css */

/* Tipografía y estructura global */



/* General fade behavior */
body {
  font-family: 'Inter', system-ui, sans-serif;
  margin: 0;
  line-height: 1.6;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

/* Smooth fade-out when leaving */
body.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Header fade (optional) */
#site-header {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#site-header.loaded {
  opacity: 1;
}
 
h1, h2, h3, h4, h5, h6 {
  font-family: 'bebas-neue-by-fontfabric', sans-serif;
  font-weight: 400;   /* Regular weight */
  letter-spacing: 0.5px;
  font-style: normal;
  text-transform: uppercase; /* Optional: gives that signature look */
}
header{
  padding: 0.5rem 0 0;/* drastically reduce top/bottom padding */
}

header h1,
header h2 {
  margin: 0;
  line-height: 1.1; /* brings them visually closer */
}

header h1 {
line-height: 1;     /* remove extra space */
margin-bottom: 0rem;  /* tiny gap below h1 */
transform: translateY(-0.2rem); 
}

header h2 {
  margin-top: 0; /* no unnecessary top margin */
  padding-top: 0; 
}

main{
padding-left: 0px;
padding-right: 0px;

}

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

/* Footer container styling */
footer {
  text-align: center;               /* Centers all text content */
  padding: 1.5rem 1rem;            /* Adds space inside footer (top/bottom, left/right) */
  font-size: 0.9rem;               /* Sets smaller font size for copyright text */ 
}

/* Container for all footer buttons */
.footer-buttons {
  display: flex;                    /* Arranges buttons in a row */
  justify-content: center;          /* Centers buttons horizontally */
  align-items: center;             /* Centers buttons vertically */
  gap: 2rem;                       /* Space between buttons */
  margin-bottom: 1.5rem;           /* Space below buttons before copyright text */
  flex-wrap: wrap;                 /* Allows buttons to wrap on small screens */
}

/* Individual button container styling */
.btn-footer {
  width: 10rem;
  min-width: 5rem;
  height: auto;
  transition: transform 0.3s ease; /* Smooth scaling animation on hover */ 
  border-radius: 12px;             /* Rounded corners */
  padding: 8px;                    /* Space inside button around image */
  border-color:  #F2D2A2;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow effect */
  display: flex;                   /* Ensures proper image alignment */
  align-items: center;             /* Centers image vertically */
  justify-content: center;         /* Centers image horizontally */
}

/* Hover effect for buttons */
.btn-footer:hover {
  transform: scale(1.05);          /* Slight zoom effect on hover */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
}

/* Base styling for all footer images */
.footer-img {
  height: auto;                    /* Sets consistent height */
  width: auto;                     /* Maintains original aspect ratio */
  display: block;                  /* Removes extra space below image */
  cursor: pointer;                 /* Shows hand cursor on hover */
  border-radius: 8px;              /* Slightly rounded image corners */
}

/* Specific styling for Instagram button */
.btn-insta { 
  object-fit: contain;             /* Ensures image fits without distortion */
}

/* Specific styling for document buttons (WhatsApp and Register) */
.btn-doc { 
  object-fit: contain;             /* Ensures image fits without distortion */
}

/* Responsive design for tablets and smaller screens */
@media (max-width: 768px) {
  .footer-buttons {
    gap: 1rem;                     /* Reduces space between buttons */
  }
  
  .footer-img {
    height: 45px;                  /* Slightly smaller images on mobile */
  } 
  
  .btn-footer {
    padding: 6px;                  /* Slightly less padding */
    border-radius: 10px;           /* Slightly smaller border radius */
  }
}

/* Responsive design for very small screens */
@media (max-width: 480px) {
  .footer-buttons {
    gap: 0.8rem;                   /* Even smaller gap between buttons */
  }
  
  .footer-img {
    height: 40px;                  /* Even smaller images */
  }
   
  .btn-footer {
    padding: 5px;                  /* Minimal padding */
    border-radius: 8px;            /* Smaller rounded corners */
  }
}

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

section {
padding-left: 0px;
padding-right: 0px;
justify-content: center;
  align-items: center;

}
.description{
  padding-left: 1rem;
  padding-right: 1rem;
}
nav {
  margin-top: 0.4rem;
}
.title{
  margin-top: 0px;
  text-transform: uppercase;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 2px;
}
 
h1, h2{
  margin-bottom: 1rem;
  text-align: center;
}


p {
  text-align: center;
  margin-bottom: 2rem;
}

img {
  max-width: 100%;
  height: auto;
}

.container-cristo-wp {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cristo-wp {
  width: 50%;          /* Use percentage instead of viewport units */
  max-width: 600px;    /* Optional: set a maximum width */
  display: block;
  border-radius: 8px;
  
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0 auto;      /* This will center the image */
}
a {
  text-decoration: none;
  cursor: pointer;
}






/* Botones */
.btn {
  border: none;
  border-radius: 8px;
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.cta {
  text-align: center;
  margin: 3rem 0;
}
/* VIDEO - Simple Fixed Height Method */
.video-wrapper {
  width: 90%;                    /* Takes 90% of parent width */
  max-width: 800px;              /* Maximum width for larger screens */
  margin: 2rem auto;             /* Centers the video block */
  display: flex;
  justify-content: center;       /* Centers iframe horizontally */
}

.video-wrapper iframe {
  width: 100%;                   /* Full width of container */
  height: 450px;                 /* Fixed height for desktop */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Responsive design */
@media (max-width: 768px) {
  .video-wrapper {
    width: 95%;
  }
  
  .video-wrapper iframe {
    height: 400px;               /* Slightly smaller for tablets */
  }
}

@media (max-width: 480px) {
  .video-wrapper {
    width: 100%;
    margin: 1.5rem auto;
  }
  
  .video-wrapper iframe {
    height: 250px;               /* Smaller for mobile */
  }
}
/* === ITINERARIO SECTION (main wrapper) === */
.section-itinerario {
  display: flex;                /* Enables flexbox for layout */
  flex-direction: column;       /* Stacks all .day blocks vertically */
  align-items: center;          /* Centers them horizontally as a group */
  justify-content: center;      /* Centers vertically if parent allows space */
  gap: 2rem;                    /* Adds equal spacing between each day block */
  padding: 2rem 0;              /* Adds vertical breathing room */
}

/* === EACH DAY BLOCK === */
.day {
  display: flex;                /* Makes .day-label and .container-events align side-by-side */
  align-items: stretch;         /* Keeps them same height */
  justify-content: center;      /* Ensures content stays centered within each day */
  margin: 0;                    /* Removes unwanted external spacing */
  padding: 0;                   /* Resets padding that caused indentation */
  width: 100%;                  /* Makes all day blocks equal width */
  max-width: 700px;             /* Prevents them from being too wide on large screens */ 
}

/* === DAY LABEL COLUMN === */
.day-label {
  writing-mode: vertical-rl;    /* Makes text vertical (top-to-bottom) */
  text-orientation: mixed;
  transform: rotate(180deg);    /* Flips vertical text to read bottom-up */
  display: flex;
  align-items: center;          /* Centers text vertically in its area */
  justify-content: center;      /* Centers horizontally */
  font-weight: 700;
  letter-spacing: 1px;
  color: #0e2233;
  font-size: 1rem;
  margin-right: 1rem;           /* Small spacing between label and events */
}

/* === EVENTS LIST === */
.container-events {
  border-left: 3px solid var(--dorado, #d4a537); /* Decorative left line */
  padding-left: 1rem;           /* Small indent inside event list */
  margin: 0;                    /* Removes external margins */
  list-style: none;             /* No bullets */
  flex: 1;                      /* Takes remaining space in row */
}

/* === INDIVIDUAL EVENTS === */
.container-events li {
  line-height: 1.6;
  padding: 0.3rem 0;
}


/* You didn’t center the <li>s themselves.
Instead, you:

made both columns (.day-label and .container-events) equal height, and

told .day-label to center its own text within that height.

So the label naturally aligns to the middle of all its corresponding events — perfectly centered — without ever touching the <li> elements. */


.day ul {
  list-style: none; 
  margin: 0;
  padding-inline-start: 10px;
}

.day li {
  padding: 0.3rem 0;
  line-height: 1.5;
}

.day li strong {
  color: #0e2233;
  font-weight: 700;
}

.note {
  text-align: center;
  font-style: italic;
  color: #444;
  margin-top: 2rem;
}
/* === COSTOS SECTION (overall container) === */
.costos {
  color: #fff3d9;            /* Sets all text to a soft cream tone for good contrast */
  font-family: 'Poppins', sans-serif; /* Applies your modern, clean font */
  text-align: center;        /* Centers all text and inline elements horizontally */
}

/* === MAIN TITLE ABOVE THE SECTION === */

/* === WRAPPER FOR ALL CONTENT INSIDE THE SECTION === */
.costos-content {
  max-width: 700px;          /* Restrains the section width so it doesn’t stretch too wide */
  margin: 0 auto;            /* Centers the block within the page horizontally */
 
  align-items: center;       /* Centers them horizontally as a group */
  gap: 2rem;                 /* Adds vertical spacing between each stacked element */
}

/* === PRICE BLOCK === */
.costos-precio {
  background-color: transparent; /* Keeps background clean and consistent */
}

.precio {
  font-size: 6rem;           /* Makes the price large and prominent */
  font-weight: 700;          /* Bold text for emphasis */
  margin: 0;                 /* Removes default spacing around the heading */
  color: #fff3d9;            /* Keeps the price in the same cream color as the section */
  text-shadow: 0 2px 4px rgba(0,0,0,0.25); /* Adds a subtle shadow for depth */
}

/* === "Incluye" LIST CONTAINER === */
.costos-incluye {
  text-align: center;        /* Centers text in this part */
}

.costos-incluye h2 {
  font-size: 3rem;         /* Medium size for the “Incluye” subheading */
  text-transform: uppercase; /* Capital letters for consistency with main title */
  margin-top: 0px; 
  margin-bottom: 1rem;       /* Adds space below before list items */
  color: #fff3d9;            /* Matches the cream tone for cohesion */
}

/* === LIST OF INCLUDED ITEMS === */
.costos-incluye ul {
  list-style: none;          /* Removes default bullets */
  padding: 0;                /* Removes browser default left padding */
  margin: 0;                 /* Removes default top and bottom margins */
  line-height: 1.8;          /* Increases line spacing for readability */
  font-size: 1rem;           /* Comfortable text size */
}

.costos-incluye li {
  margin-bottom: 0.8rem;     /* Adds space between each line item */
}

/* === IMAGE INSIDE LAST LIST ITEM === */
.imagenes {
  display: flex;             /* Uses flexbox for easy centering */
  justify-content: center;   /* Centers the image horizontally */
  align-items: center;       /* Centers vertically (useful if multiple images later) */
  margin-top: 1rem;          /* Adds space above the image */
}

.imagenes img {
  max-width:  240px;              /* Sets a clear, consistent image size */
  height: auto;              /* Keeps the image’s aspect ratio */
  display: block;            /* Removes inline spacing under the image */
}

/* === RESPONSIVE ADJUSTMENTS (for mobile screens) === */
@media (max-width: 600px) {
  .precio {
    font-size: 5rem;       /* Slightly reduces price size on small devices */
  }

  .costos-incluye h2 {
    font-size: 2.5rem;       /* Makes subheading smaller for better fit */
  }

  .imagenes img {
    width: 180px;            /* Shrinks image slightly on narrow screens */
  }
}

/* === PAGOS SECTION === */
.plan-pagos {
  background-color: var(--azul-gris, #0e2233);
  color: #fff3d9;
  font-family: 'Poppins', sans-serif; 
  text-align: center;
}

.plan-pagos h1 {
  text-transform: uppercase;
  font-size: 2.2rem;
  letter-spacing: 2px;
  margin-bottom: 2rem;
}

.pagos-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.pagos-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 500px;
  font-size: 1rem;
  background-color: transparent;
}

.pagos-table th,
.pagos-table td {
  border: 2px solid #fff3d9;
  padding: 0.8rem 1rem;
}

.pagos-table th {
  text-transform: uppercase;
  font-weight: 600;
}

.pagos-table td {
  text-align: center;
}

.nota {
  font-size: 0.9rem;
  color: #fff3d9;
  line-height: 1.6;
  text-align: center;
  margin-top: 1rem;
}