/* ==========================================================================
   DevSEOMaker — layout.css
   --------------------------------------------------------------------------
   Estructura común a TODAS las páginas:
     1. Contenedores y secciones
     2. Cabecera (logo + menú con desplegables)
     3. Menú móvil
     4. Pie de página
     5. Barra fija inferior en móvil (WhatsApp + Auditoría)

   Punto de corte principal: 1024px.
     - Menos de 1024px → menú hamburguesa + barra inferior.
     - 1024px o más    → menú horizontal con desplegables.
   ========================================================================== */

/* ---- 1. Contenedores y secciones ----------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.section {
  padding-block: var(--space-section);
}

/* Variantes de fondo para alternar secciones como en el diseño */
.section--soft { background: var(--color-sky-soft); }
.section--sky  { background: var(--color-sky); }
.section--dark { background: var(--color-navy); color: var(--color-white); }

/* Rejilla de dos columnas: texto a la izquierda, contenido a la derecha.
   En móvil se apilan. */
.split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

/* Sin esto, un hijo con contenido ancho (formularios, fieldset) ensancha
   la rejilla y provoca scroll horizontal en móvil. */
.split > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }
  .split--center { align-items: center; }
}

/* ---- 2. Cabecera ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Cabecera translúcida con desenfoque SOLO en escritorio.
   En móvil no se usa porque backdrop-filter convierte la cabecera en
   referencia de los elementos "position: fixed" de dentro, y el panel
   del menú móvil dejaría de ocupar toda la pantalla. */
@media (min-width: 1024px) {
  .site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
  }
}

/* main.js añade .is-scrolled al bajar: aparece una línea inferior sutil */
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-height);
}

/* Logo: imagen SVG (img/brand/logo-devseomaker.svg).
   Se controla solo la ALTURA; el ancho se calcula solo y mantiene la
   proporción. En móvil es algo más pequeño para dejar sitio al menú. */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.logo img {
  width: auto;
  height: 28px;
}

@media (min-width: 1024px) {
  .logo img { height: 34px; }
}

/* ---- Menú principal (escritorio) ------------------------------------------ */
.main-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__list li + li {
  margin-top: 0;
}

.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.main-nav__link:hover,
.main-nav__link[aria-expanded="true"] {
  background: var(--color-sky-soft);
}

/* Página actual: main.js no la marca; se pone a mano con aria-current="page" */
.main-nav__link[aria-current="page"] {
  color: var(--color-blue);
}

/* Flecha del desplegable: gira 180º cuando está abierto */
.main-nav__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--transition);
}

[aria-expanded="true"] > .main-nav__chevron {
  transform: rotate(180deg);
}

/* Submenú desplegable. main.js le pone el atributo "hidden" al cargar;
   main.js lo muestra/oculta y sincroniza aria-expanded en el botón. */
.dropdown {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
}

.dropdown a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.dropdown a:hover {
  background: var(--color-sky-soft);
}

/* Descripción corta debajo de cada opción del submenú */
.dropdown small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/* Primera opción del submenú ("Ver todo…") separada del resto */
.dropdown__all {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
}

/* Botón hamburguesa (solo móvil) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;   /* 44px = tamaño mínimo táctil recomendado */
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

/* Icono: tres rayas cuando está cerrado, aspa cuando está abierto */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---- 3. Menú móvil (< 1024px) --------------------------------------------- */
@media (max-width: 1023px) {
  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 99;
    overflow-y: auto;
    padding: var(--space-4) var(--gutter) var(--space-7);
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
  }

  /* El menú se cierra con el atributo "hidden", que añade main.js al cargar
     (no está en el HTML: si el JS fallara, el menú seguiría visible). */

  .main-nav__list > li {
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-4) 0;
    font-size: var(--text-lg);
    border-radius: 0;
  }

  .main-nav__link:hover,
  .main-nav__link[aria-expanded="true"] {
    background: none;
  }

  .dropdown {
    padding: 0 0 var(--space-3) var(--space-3);
  }

  .header__cta {
    width: 100%;
    margin-top: var(--space-5);
  }

  /* Evita que la página de fondo se desplace con el menú abierto */
  body.nav-open {
    overflow: hidden;
  }
}

/* ---- Menú de escritorio (≥ 1024px) ----------------------------------------- */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  /* En escritorio el menú siempre está visible: main.js nunca le pone
     "hidden" en este tamaño (y se lo quita si se pasa de móvil a escritorio). */
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .main-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }

  /* Botón "Pide tu auditoría" de la cabecera: más compacto que los botones
     del contenido para no competir con el menú, y siempre en una línea.
     (".main-nav" delante para ganar a .btn, que se carga después.) */
  .main-nav .header__cta {
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .main-nav .header__cta svg { width: 16px; height: 16px; }

  .has-dropdown {
    position: relative;
  }

  .dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    min-width: 280px;
    transform: translateX(-50%);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  /* Puente invisible entre el botón y el submenú para que no se cierre
     al mover el ratón por el hueco de 10px. */
  .dropdown::before {
    content: "";
    position: absolute;
    inset: -12px 0 auto 0;
    height: 12px;
  }

  /* Plan B sin JavaScript: el <head> añade la clase "js" a <html>.
     Si no está (JS desactivado o con error), los submenús se abren al pasar
     el ratón o al llegar con el teclado. */
  html:not(.js) .dropdown { display: none; }
  html:not(.js) .has-dropdown:hover .dropdown,
  html:not(.js) .has-dropdown:focus-within .dropdown { display: block; }
}

/* Portátiles pequeños (1024–1199 px): el menú va justo de espacio. Se quita
   la flecha del botón y se acercan las opciones para que nada se parta. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .main-nav .header__cta svg { display: none; }
  .main-nav { gap: var(--space-3); }
  .main-nav__link { padding-inline: var(--space-2); }
}

/* ---- 4. Pie de página ------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 700px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); }
}

.footer__brand p {
  max-width: 32ch;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.footer__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li + li { margin-top: var(--space-2); }

.footer__list a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__legal li + li { margin-top: 0; }

.footer__legal a {
  color: var(--color-text-muted);
}

/* ---- 5. Barra fija inferior (solo móvil) ------------------------------------ */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  height: var(--mobile-bar-height);
  padding: var(--space-2) var(--gutter);
  /* Respeta la zona inferior del iPhone (barra de gestos) */
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(18, 46, 67, 0.06);
}

.mobile-bar .btn {
  min-height: 0;
  padding-block: 0;
  font-size: var(--text-sm);
}

@media (min-width: 1024px) {
  .mobile-bar { display: none; }
}