/* Chus Sanz &Co. — pasada responsive.
   El sitio está construido con estilos inline, así que estas reglas usan
   !important para poder sobreescribirlos dentro de las media queries. */

/* El contenido de <noscript> es el texto de respaldo para buscadores:
   no debe verse cuando el navegador tiene JavaScript activo. */
noscript { display: none !important; }

img, svg, video { max-width: 100%; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* Toda grilla pasa a una sola columna */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Filas horizontales que deben poder envolverse */
  [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap !important; }

  /* Paddings laterales generosos de escritorio → cómodos en móvil */
  [style*="padding: 128px"], [style*="padding:128px"],
  [style*="padding: 120px"], [style*="padding:120px"],
  [style*="padding: 112px"], [style*="padding:112px"],
  [style*="padding: 96px"],  [style*="padding:96px"] { padding: 56px 20px !important; }

  [style*="padding-left: 64px"], [style*="padding-right: 64px"],
  [style*="paddingLeft: 64px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* Anchos fijos que desbordan */
  [style*="max-width: 1180px"], [style*="maxWidth: 1180px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="width: 520px"], [style*="width: 480px"], [style*="width: 420px"],
  [style*="min-width: 520px"], [style*="min-width: 480px"], [style*="min-width: 420px"],
  [style*="minWidth: 520px"] { width: 100% !important; min-width: 0 !important; }

  /* Tipografía: bajamos los titulares grandes sin tocar el cuerpo */
  h1 { font-size: clamp(30px, 8.5vw, 44px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(19px, 5vw, 24px) !important; }

  /* Áreas táctiles mínimas */
  a[style*="padding"], button { min-height: 44px; }

  /* Espacios verticales enormes → proporcionales */
  [style*="gap: 96px"], [style*="gap:96px"] { gap: 40px !important; }
  [style*="gap: 80px"], [style*="gap:80px"] { gap: 36px !important; }
  [style*="gap: 64px"], [style*="gap:64px"] { gap: 32px !important; }

  /* Nada debe forzar scroll horizontal */
  [style*="white-space: nowrap"] { white-space: normal !important; }
}

/* ---------- Menú móvil ---------- */
#cs-nav-toggle, #cs-nav-scrim, #cs-nav-cta { display: none; }

@media (max-width: 820px) {
  #cs-nav-toggle {
    display: inline-flex !important; align-items: center; justify-content: center;
    position: fixed; top: 15px; right: 14px; z-index: 120;
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--border-on-ink, rgba(255,255,255,0.16));
    border-radius: 10px; color: var(--gold-500, #C9A048); cursor: pointer;
  }
  #cs-nav-scrim {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(17,27,44,0.55); opacity: 0; pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.22,1,0.36,1);
  }
  html.cs-nav-open #cs-nav-scrim { display: block; opacity: 1; pointer-events: auto; }

  #cs-nav-cta {
    position: fixed; z-index: 110; bottom: 24px; right: 16px;
    width: min(calc(86vw - 32px), 308px);
    display: none; align-items: center; justify-content: center;
    min-height: 48px; padding: 12px 18px;
    background: var(--gold-500, #C9A048); color: var(--ink-900, #111B2C);
    font-family: var(--font-sans); font-size: 16px; font-weight: 500;
    border-radius: 999px; text-decoration: none;
  }
  html.cs-nav-open #cs-nav-cta { display: inline-flex; }

  /* el header tiene backdrop-filter, que crearía un bloque contenedor y
     recortaría el panel fijo: lo anulamos sólo en móvil */
  header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  /* la barra de escritorio pasa a panel lateral */
  header nav {
    position: fixed !important; top: 74px; right: 0; bottom: 0;
    width: min(86vw, 340px);
    flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; flex-wrap: nowrap !important;
    gap: 0 !important; padding: 12px 8px 40px !important;
    background: var(--surface-ink, #111B2C);
    border-left: 1px solid var(--border-on-ink, rgba(255,255,255,0.16));
    overflow-y: auto; z-index: 100;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(0.22,1,0.36,1);
  }
  html.cs-nav-open header nav { transform: translateX(0); }

  header nav .cs-navitem { position: static !important; width: 100%; }
  header nav .cs-navitem > button {
    width: 100%; justify-content: space-between !important;
    padding: 14px 12px !important; font-size: 17px !important;
    min-height: 48px;
  }
  /* los submenús se muestran desplegados, no al pasar el mouse */
  header nav .cs-dropdown {
    position: static !important; display: block !important;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; min-width: 0 !important;
    background: transparent !important; border: none !important;
    border-top: 1px solid var(--border-on-ink, rgba(255,255,255,0.16)) !important;
    box-shadow: none !important; padding: 4px 0 12px 12px !important;
    margin: 0 0 6px !important;
  }
  header nav .cs-dropdown a, header nav .cs-dropdown button {
    display: block !important; width: 100%; text-align: left;
    padding: 12px !important; min-height: 44px; font-size: 16px !important;
  }
  /* deja aire para el botón del menú */
  header > div { padding-right: 66px !important; flex-wrap: nowrap !important; }
  /* el CTA de la barra se oculta: en móvil el menú lo reemplaza */
  header > div > *:not(nav):not(a:first-child) { display: none !important; }
}

@media (max-width: 520px) {
  [style*="padding: 64px"], [style*="padding:64px"],
  [style*="padding: 72px"], [style*="padding:72px"] { padding: 40px 18px !important; }
}