/*
  The Coach Scribe landing page stylesheet
  This file defines the colour palette, typography and layout rules for
  the responsive marketing site. It uses CSS variables for easy
  theming and includes styles for cards, grids, modals and more.
*/

:root {
  --coral: #ff6b6b;
  --navy: #274c77;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --bg-light: #ffffff;
  --bg-section: #f9fafb;
  --border-color: #e2e8f0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-light);
}

a {
  text-decoration: none;
  color: var(--navy);
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  width: auto;
  margin-right: 10px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.nav-menu a {
  color: var(--navy);
  font-weight: 500;
  padding: 0.5rem;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.nav-menu a:hover {
  background-color: var(--coral);
  color: #ffffff;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.language-selector button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

main section {
  padding: 80px 16px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.hero {
  /* The hero layout is now controlled by the inner container (.hero-inner).
   * Provide vertical spacing and a neutral background only. */
  padding: 4rem 0;
  background: var(--bg);
}

/* .hero-text sizing is now defined in .hero-inner */
.hero-text {
  /* allow the text column to grow while respecting the max-width defined in
   * .hero-inner. No flex properties here because .hero-inner manages
   * the layout. */
}

.hero-text h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.btn-primary {
  background-color: var(--coral);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: #ff5a5a;
}

.btn-secondary {
  background-color: #fff;
  color: var(--coral);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--coral);
  cursor: pointer;
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: var(--coral);
  color: #fff;
}

.hero-image {
  flex: 1 1 400px;
  text-align: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  /* Reduce maximum height of hero image to prevent giant mockup */
  max-height: 380px;
  border-radius: 1rem;
  object-fit: contain;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.stat {
  flex: 1;
  text-align: center;
  background: var(--bg-section);
  padding: 1rem;
  border-radius: 0.75rem;
}

.stat h3 {
  font-size: 2rem;
  color: var(--coral);
  margin: 0;
}

.stat p {
  margin: 0.2rem 0 0;
  color: var(--text-secondary);
}

section h2 {
  font-size: 2rem;
  color: var(--navy);
  text-align: center;
  margin-bottom: 1rem;
}

section .lead {
  max-width: 700px;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 1rem;
}

.features-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.feature {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.feature h3 {
  font-size: 1.125rem;
  color: var(--navy);
  margin: 0;
}

.feature p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  flex-grow: 1;
}

.feature a {
  color: var(--coral);
  font-weight: 600;
  font-size: 0.9rem;
}

.how-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.how-step {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.how-step span.number {
  background: var(--coral);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/*
 * Pricing grid
 *
 * On large screens we show three plan cards per row.  Using
 * repeat(3, 1fr) creates three equal columns regardless of viewport
 * width. For tablets we collapse to two columns and for small
 * screens we drop to a single column to keep cards legible. The
 * gap controls the spacing between cards.
 */
.pricing-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}

/* Two columns on tablet screens */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* One column on mobile */
@media (max-width: 600px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.plan {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.plan.popular {
  border-color: var(--coral);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.plan .badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--coral);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.plan h3 {
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
}

.plan .price {
  font-size: 1.75rem;
  color: var(--coral);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.plan .usage {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.plan .features {
  flex-grow: 1;
  /*
   * Ensure a consistent minimum height for the features block so
   * that all pricing cards align their call‑to‑action buttons on
   * the same horizontal line. Without a min-height the number of
   * feature items can make some cards shorter than others,
   * misaligning the buttons.
   */
  /* Increase min-height slightly so that pricing buttons align even when plans
     have different numbers of feature bullets. This prevents the CTA buttons
     from appearing at different vertical positions. */
  min-height: 180px;
}

.plan .features li {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  list-style-type: disc;
  margin-left: 1rem;
}

.plan button {
  align-self: stretch;
  padding: 0.75rem;
  border-radius: 999px;
  border: none;
  background: var(--coral);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  margin-top: 1rem;
}

.plan button:hover {
  background: #ff5a5a;
}

.plan .small {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.faq {
  max-width: 800px;
  margin: 0 auto;
}

.faq details {
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  margin-bottom: 0.75rem;
}

.faq details summary {
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  position: relative;
  padding-right: 1rem;
}

.faq details summary::-webkit-details-marker {
  display: none;
}

.faq details p {
  margin-top: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.about {
  background: var(--bg-section);
}

.about-grid {
  display: grid;
  gap: 1.5rem;
  /*
   * Use auto-fit here so the grid will create between one and three
   * columns depending on available width while keeping each card at
   * least 280px wide.  The container itself has a maximum width and
   * is centered with margin auto, which ensures the cards are
   * visually centered on large screens.  On smaller screens the
   * container will naturally shrink and the cards will stack.
   */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* Center the cards horizontally in the available space */
  justify-content: center;
  margin-top: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.about-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.about-card h3 {
  margin-top: 0;
  color: var(--navy);
  font-size: 1.125rem;
}

.about-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.separator {
  /* A decorative separator used between sections. A gradient line fades
   * from the brand coral colour into transparency. The increased width
   * and subtle shadow create a pleasing visual break without drawing
   * too much attention. */
  width: 200px;
  height: 3px;
  background: linear-gradient(90deg, var(--coral), rgba(255, 107, 107, 0));
  margin: 3rem auto;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(255, 107, 107, 0.2);
}

footer {
  background: #fff;
  border-top: 1px solid var(--border-color);
  padding: 2rem 1rem;
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-col {
  flex: 1 1 200px;
}

.footer-col h4 {
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.footer-col ul li a:hover {
  color: var(--coral);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-brand img {
  /* Ensure the logo in the footer retains its aspect ratio and
   * doesn't stretch. Constrain the maximum width and let the
   * height scale automatically. The block display removes extra
   * inline spacing and the margin creates breathing room below.
   */
  max-width: 160px;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
}

/* Language selector styles */
.language-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.language-selector .lang-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
}

.language-selector .lang-btn:hover {
  filter: brightness(0.8);
}

.footer-bottom {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.legal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.legal-modal.active {
  display: flex;
}

.legal-content {
  background: #fff;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
}

.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4,
.legal-content h5,
.legal-content h6 {
  color: var(--navy);
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
}

/*
 * Language dropdown styles
 *
 * The language picker in the header collapses all available
 * languages into a dropdown to save horizontal space. Only the
 * currently selected language is visible in the header; clicking it
 * toggles the options panel. Each option lists a flag and the
 * language name. Options expand downwards and align to the right.
 */
.language-dropdown {
  position: relative;
  display: inline-block;
}
.language-dropdown .selected-language {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
}
.language-dropdown .language-options {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  z-index: 1000;
  min-width: 180px;
}
.language-dropdown .language-options.show {
  display: flex;
  flex-direction: column;
}
.language-dropdown .language-options .lang-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.language-dropdown .language-options .lang-btn:hover {
  background: var(--bg-section);
  color: var(--coral);
}

/* Contact section styles */
.contact {
  padding: 4rem 0;
  background: var(--bg-section);
}
.contact h2 {
  text-align: center;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.contact .lead {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 1rem;
  resize: vertical;
}
.contact-form button {
  align-self: center;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.contact-form button:hover {
  background: #ff5a5a;
}

/* Download section: center the call-to-action button */
#download {
  padding: 4rem 0;
  text-align: center;
  background: var(--bg-section);
}
#download .hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Hero inner layout and media for the updated hero section */
.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

/* Left side of the hero (headline and buttons).  The max-width
 * ensures the text column doesn't stretch too wide on very large
 * screens, maintaining readability. */
.hero-text {
  flex: 1 1 50%;
  max-width: 540px;
}

/* Right side of the hero: stacked stats and carousel */
.hero-media {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Social proof counters in hero */
.hero-stats {
  display: flex;
  gap: 2rem;
  justify-content: center;
}
.hero-stats .stat h3 {
  margin: 0;
  font-size: 2rem;
  color: var(--coral);
}
.hero-stats .stat p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Carousel image in hero */
.hero-carousel img {
  width: 100%;
  height: auto;
  max-width: 400px;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for hero */
@media (max-width: 768px) {
  .hero-text,
  .hero-media {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: center;
  }
  .hero-stats {
    gap: 1rem;
  }
}

.legal-content a {
  color: var(--coral);
}

/*
 * Responsive rules for small screens were originally applied to the hero,
 * stats and pricing grid in the old layout. These properties are now
 * managed by dedicated classes (see .hero-inner and responsive
 * breakpoints for the pricing grid). We comment out the old rules to
 * prevent them from overriding the new grid definitions.
 */
/* @media (max-width: 768px) {
  .hero {
    flex-direction: column;
  }
  .stats {
    flex-direction: column;
  }
  .pricing-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .features-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
} */
/* Forzar texto negro en las tarjetas About */
.about-card,
.about-card * {
  color: #333333 !important;
}
/* Ajustes mockup y título */
.hero-carousel img,
.hero .mockup img {
    transform: scale(1.2);
    transform-origin: center;
}

.hero-text h1,
.hero .hero-title {
    text-align: center;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .hero-carousel img,
    .hero .mockup img {
        transform: scale(1.25);
    }
    .hero-text h1,
    .hero .hero-title {
        margin-bottom: 16px;
    }
}
/* No tapar los números (desktop) */
.hero-image { margin-left: 64px; }         /* desplaza el cel a la derecha */
.hero-image img { max-height: 620px; }     /* tamaño del mockup */
.stats { position: relative; z-index: 3; } /* cards por delante del cel */

/* Responsive */
@media (max-width: 1024px){
  .hero-image { margin-left: 0; }
  .hero-image img { max-height: 520px; }
}
/* Ocultar menú de idiomas en el header */
.language-selector { 
  display: none !important; 
}
/* Colorear también los textos dentro de los cuadros */
.feature p {
  color: var(--navy);   /* el mismo azul de los títulos */
}
/* Forzar que los textos dentro de los cuadros tengan el mismo azul que los títulos */
.feature p {
  color: #274C77;   /* Azul fijo */
}