/* assets/css/style.css */

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans', sans-serif;
  color: #7F8C8D;
  background-color: #FFFFFF;
  line-height: 1.6;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Navigation Bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFFFFF;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.navbar-left {
  margin-left: 0;
}
.navbar .brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: left;
}
.navbar .brand .logo {
  max-height: 30px;
  width: auto;
  margin-right: 1px;
}
.navbar .brand span {
  font-size: 1.3em;
  color: #1ABC9C;
  margin-left: 1px;
}

/* Menú de navegación */
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu .nav-item {
  margin-left: 20px;
}
.nav-menu .nav-link {
  text-decoration: none;
  color: #7F8C8D;
  font-weight: 600;
  transition: color 0.3s, background-color 0.3s;
}
.nav-menu .nav-link:hover {
  color: #1ABC9C;
  background-color: rgba(26, 188, 156, 0.1);
  padding: 5px;
  border-radius: 5px;
}

/* Botón hamburguesa */
.menu-toggle {
  display: none;
  cursor: pointer;
  margin-left: 20px;
}
.menu-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #1ABC9C;
  transition: all 0.3s;
}

/* Media Query para móviles/tablets */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 54px;
    right: 5px;
    background-color: #FFFFFF;
    width: 150px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
  }
  .nav-menu.active {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
}

/* Hero Section */
.hero {
  background-color: #3498DB;
  color: #FFFFFF;
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
}
.hero h1, 
.hero p {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.hero h1 {
   font-size: 16px;
}
.hero .cta {
  background-color: #1ABC9C;
  color: yellow;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 800;
  margin-top: 20px;
  display: inline-block;
}

/* Video Presentation Section */
.video-presentation {
  padding: 40px 0;
  text-align: center;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 0 auto;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Features Section */
.features {
  background-color: #F7F7F7;
  padding: 40px 0;
  text-align: center;
}

.features .cta {
  background-color: #1ABC9C;
  color: yellow;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 800;
  margin-top: 20px;
  display: inline-block;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}
.feature-item {
  background: #FFFFFF;
  border: 1px solid #DDD;
  padding: 20px;
  border-radius: 5px;
}

/* Screenshot Section */
.screenshot {
  padding: 40px 0;
}
.screenshot img {
  max-width: 100%;
  height: auto;
}

/* Testimonials Section */
.testimonials {
  padding: 40px 0;
  background-color: #FFFFFF;
  text-align: center;
}
.carousel {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.carousel-item {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.carousel-item.active {
  opacity: 1;
  position: relative;
}
.carousel-item img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}

/* FAQs Section */
.faqs {
  background-color: #F7F7F7;
  padding: 40px 0;
}
.faq-item {
  border-bottom: 1px solid #DDD;
  padding: 10px 0;
}
.faq-question {
  cursor: pointer;
  font-weight: 600;
  color: #1ABC9C;
}
.faq-answer {
  display: none;
  padding: 10px 0;
  color: #7F8C8D;
}

/* Request Form Section */
.request-form {
  padding: 40px 0;
  background-color: #FFFFFF;
}
.request-form form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif;
}
.btn-submit {
  background-color: #1ABC9C;
  color: yellow;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
}

/* Footer */
footer {
  background-color: #2C3E50; /* Fondo más oscuro para mejor contraste */
  color: #FFFFFF;
  padding: 20px 0;
  text-align: center;
}
footer a {
  color: #FFFFFF;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* Footer Links en letras pequeñas */
.footer-small {
  font-size: 0.8em;
  color: #B0B0B0;
  margin: 5px 0;
}
.footer-link {
  color: #B0B0B0;
  text-decoration: none;
}
.footer-link:hover {
  text-decoration: underline;
}

/* Planes Section */
.planes {
  padding: 40px 0;
  background-color: #F7F7F7;
}
.planes h2 {
  text-align: center;
  margin-bottom: 20px;
}
.planes-img-container {
  text-align: center;
}
.planes-img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border: 1px solid #DDD;
  border-radius: 5px;
}

/* Sección Comparativa: ¿Por qué GT-NutriForm? */
.comparativa {
  padding: 40px 0;
  background-color: #F7F7F7;
}
.comparativa h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.8em;
  color: #1ABC9C;
}
.comparativa-wrapper {
  width: 100%;
  overflow-x: auto;
}
.comparativa-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #DDD;
}
.comparativa-row {
  display: contents;
}
.comparativa-cell {
  padding: 10px;
  border-bottom: 1px solid #DDD;
  border-right: 1px solid #DDD;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}
.comparativa-row.header .comparativa-cell {
  background-color: #3498DB;
  color: #FFFFFF;
  font-weight: bold;
  border-bottom: 2px solid #1ABC9C;
}
.comparativa-cell:last-child {
  border-right: none;
}
.comparativa-row:last-child .comparativa-cell {
  border-bottom: none;
}
.comparativa-cell.advantage {
  text-align: left;
  font-weight: 600;
}
.check {
  color: green;
  font-size: 1.4em;
}
.cross {
  color: red;
  font-size: 1.4em;
}

/* Sección CTA Extra */
.cta-extra {
  padding: 40px 0;
  background-color: #F7F7F7;
  text-align: center;
}
.cta-extra-text {
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #333;
}
.cta-extra .cta {
  background-color: #1ABC9C;
  color: yellow;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
}

/* Ajustes adicionales para mayor contraste (opcional) */
/* Puedes agregar text-shadow para mejorar la legibilidad si lo consideras necesario */


/* ========================= */
/* Estado de carga para el botón de envío */
/* ========================= */
.btn-loading {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}


/* ================================ */
/*  Estilo del iframe de YouTube    */
/* ================================= */ 

lite-youtube {
    background-color: #000;
    position: relative;
    display: block;
    contain: content;
    background-position: center center;
    background-size: cover;
    cursor: pointer;
    max-width: 720px;
}

/* gradient */
lite-youtube::before {
    content: attr(data-title);
    display: block;
    position: absolute;
    top: 0;
    /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
    background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
    height: 99px;
    width: 100%;
    font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
    color: hsl(0deg 0% 93.33%);
    text-shadow: 0 0 2px rgba(0,0,0,.5);
    font-size: 18px;
    padding: 25px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

lite-youtube:hover::before {
    color: white;
}

/* responsive iframe with a 16:9 aspect ratio
    thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
    content: "";
    display: block;
    padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}

/* play button */
lite-youtube > .lyt-playbtn {
    display: block;
    /* Make the button element cover the whole area for a large hover/click target… */
    width: 100%;
    height: 100%;
    /* …but visually it's still the same size */
    background: no-repeat center/68px 48px;
    /* YT's actual play button svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
    position: absolute;
    cursor: pointer;
    z-index: 1;
    filter: grayscale(100%);
    transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
    border: 0;
}

lite-youtube:hover > .lyt-playbtn,
lite-youtube .lyt-playbtn:focus {
    filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
    cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lyt-playbtn {
    opacity: 0;
    pointer-events: none;
}

.lyt-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }