/* Piezas que antes hacían plugins de WordPress, con el estilo de la web nueva
   (azul marino #2d3748, dorado #c5a059, Cormorant Garamond + Inter). */

/* ---------- Cursor ----------
   La cabecera de la web nueva pone `body { cursor: pointer; }` (truco para que el iPhone registre los toques
   fuera del menú). En ordenador hacía que la manita saliera en toda la página: con ratón se vuelve al normal. */
@media (hover: hover) and (pointer: fine) {
  html body { cursor: auto; }
}

/* ---------- Ajustes responsive de las páginas principales (web nueva) ----------
   (#wrapper delante para ganar a los estilos del diseñador, que van con !important) */

/* Tablet: los "principios" en 3 columnas quedaban de ~210 px con el texto justificado -> una columna */
@media (min-width: 601px) and (max-width: 900px) {
  #wrapper #nglfPrincipios .nglf-principles-grid,
  #wrapper #ngPenalPrincipios .ngdp-principles-grid,
  #wrapper #ngCivilPrincipios .ngdc-principles-grid {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Tablet: en rejillas de 2 columnas con 3 tarjetas, la tercera queda sola a la izquierda -> centrada */
@media (min-width: 601px) and (max-width: 1024px) {
  #wrapper #ngPilares .ngi-grid > :last-child:nth-child(odd),
  #wrapper #ngiCivil .ngi-grid > :last-child:nth-child(odd),
  #wrapper #ng-rev-penal .ngi-grid > :last-child:nth-child(odd),
  #wrapper #ng-rev-civil .ngi-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}

/* Tablet: Patricia (inicio) dejaba el texto en una columna de ~245 px junto a la foto ->
   se usa la versión de móvil del diseñador (texto arriba centrado, foto debajo) hasta 900 px */
@media (min-width: 768px) and (max-width: 900px) {
  #wrapper section.ngi-fir .ngi-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  #wrapper section.ngi-fir .ngi-content-col { order: 1; padding-bottom: 0 !important; text-align: center; max-width: 620px; margin: 0 auto; }
  #wrapper section.ngi-fir .ngi-img-wrapper { order: 2; justify-content: center; }
  #wrapper section.ngi-fir .ngi-img-photo { width: 70% !important; margin-left: 0 !important; max-height: 700px !important; }
  #wrapper section.ngi-fir .ngi-quote { border-left: none !important; padding-left: 0 !important; }
}

/* ---------- Logo de la cabecera (tablet y escritorio) ----------
   El PNG es cuadrado (200×200) y el dibujo solo ocupa la franja central: con la proporción de esa
   franja y object-fit se recorta el margen transparente. La altura sigue siendo la del tema
   (75 px, 60 px con scroll, 62 px en tablet), así que la cabecera no cambia; solo se ve más grande el NG. */
@media (min-width: 768px) {
  #wrapper header.ng-header a.ng-logo img {
    aspect-ratio: 200 / 108; object-fit: cover !important; object-position: center !important; max-width: none !important;
  }
}

/* ---------- Cabecera de móvil compacta con menú ☰ ----------
   La de la web nueva ponía los enlaces en dos filas (~175 px fija) y tapaba contenido. En ≤767 px:
   barra de 64 px con logo y botón; el menú se abre en un panel. Escritorio y tablet no cambian. */
.ng-menu-boton, .ng-menu-panel { display: none; }
@media (max-width: 767px) {
  #wrapper header.ng-header .ng-header-inner {
    flex-direction: row !important; justify-content: space-between !important; align-items: center !important;
    height: 64px !important; min-height: 64px !important; padding: 0 8px 0 16px !important; gap: 0 !important;
  }
  /* El PNG del logo es cuadrado con media imagen de margen transparente (arriba y abajo):
     se recorta ese margen con object-fit para que el NG se vea más grande sin agrandar la barra */
  #wrapper header.ng-header a.ng-logo img, #wrapper header.ng-header.scrolled a.ng-logo img {
    width: 96px !important; height: 50px !important; max-width: none !important; object-fit: cover !important; object-position: center !important;
  }
  #wrapper header.ng-header nav.ng-nav, #wrapper header.ng-header .ng-search-dropdown { display: none !important; }
  html.ng-menu-abierto header.ng-header { box-shadow: 0 1px 0 rgb(45 55 72 / 0.1); }

  .ng-menu-boton {
    display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; padding: 0; margin: 0;
    background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; color: #2d3748 !important;
  }
  /* (con !important: el tema pone los botones en blanco y el icono no se veía sobre el beige) */
  .ng-menu-boton span { display: block; width: 24px; height: 1.5px; background: #2d3748 !important; transition: transform 0.25s ease, opacity 0.2s ease; transform-origin: center; }
  html.ng-menu-abierto .ng-menu-boton span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  html.ng-menu-abierto .ng-menu-boton span:nth-child(2) { opacity: 0; }
  html.ng-menu-abierto .ng-menu-boton span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .ng-menu-panel {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 64px; height: calc(100vh - 64px); height: calc(100dvh - 64px);
    background: rgb(234, 227, 217); padding: 0.5rem 1.5rem 2rem; overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; z-index: 1;
  }
  html.ng-menu-abierto .ng-menu-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s; }
  html.ng-menu-abierto, html.ng-menu-abierto body { overflow: hidden !important; }
  .ng-menu-enlaces { display: flex; flex-direction: column; }
  .ng-menu-enlaces a {
    display: block; padding: 1rem 0.2rem; border-bottom: 0.5px solid rgb(45 55 72 / 0.14);
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 25px; line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase;
    color: #2d3748 !important; text-decoration: none !important;
  }
  .ng-menu-enlaces a.activo { color: #c5a059 !important; }
  .ng-menu-buscar { display: flex; margin: 1.6rem 0 1.2rem; border: 0.5px solid rgb(45 55 72 / 0.25); background: #fff; }
  .ng-menu-buscar input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: 0.9rem 1rem !important; font: 15px 'Inter', sans-serif; color: #2d3748; outline: none; box-shadow: none !important; margin: 0 !important; height: auto !important; }
  .ng-menu-buscar button { width: 52px; border: 0 !important; background: transparent !important; color: #a8853f; display: grid; place-items: center; cursor: pointer; padding: 0 !important; box-shadow: none !important; }
  .ng-menu-contacto { display: grid; gap: 0.7rem; margin-top: auto; padding-top: 1rem; }
  .ng-menu-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 1.2rem;
    background: #c5a059; color: #2d3748 !important; border: 1px solid #c5a059; text-decoration: none !important;
    font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .ng-menu-btn--borde { background: transparent; border-color: rgb(45 55 72 / 0.35); }
}
@media (max-width: 360px) {
  .ng-menu-enlaces a { font-size: 21px; padding: 0.85rem 0.2rem; }
}

/* (la zona de toque de los enlaces pequeños en móvil se amplía desde src/scripts/replica.ts,
   solo en los que no tienen relleno propio, para no cambiar el aspecto de ningún botón) */

/* ---------- Formularios antiguos: casilla de privacidad ---------- */
.submit-wrap:has(> .ng-privacidad) { flex-wrap: wrap; }
.ng-privacidad { display: block; width: 100%; flex: 0 0 100%; font-size: 12px; line-height: 1.4; margin: -6px 0 12px; padding: 0; text-align: center; }
.button-left .ng-privacidad { text-align: left; }
.button-right .ng-privacidad { text-align: right; }
.ng-privacidad label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; margin: 0; }
.ng-privacidad input { margin: 0; width: 14px; height: 14px; flex: none; }
.ng-privacidad a { color: #c5a059; text-decoration: underline; }

/* ---------- Página propia (404) ---------- */
.ng-propia__ancho { width: min(100% - 40px, 900px); margin-inline: auto; }
.ng-propia__cabecera { background: #2d3748; padding: 5.5rem 0 4.5rem; text-align: center; }
.ng-propia__cabecera h1 { color: #fff; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 4vw, 44px); margin: 0; }
.ng-propia__cabecera h1::after { content: '.'; color: #c5a059; }
.ng-propia__texto { padding: 3.5rem 0 5rem; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.75; color: #4a5568; text-align: center; }
.ng-propia__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 1.5rem; }
.ng-propia__enlaces a { color: #c5a059; text-decoration: none; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
/* En tablet y escritorio la cabecera de la web es fija (82–99 px) y tapaba el título: se baja lo mismo que mide.
   En móvil ya hay un desplazamiento de 64 px para la barra compacta. */
@media (min-width: 768px) { .ng-propia__cabecera { padding-top: calc(5.5rem + 100px); } }
/* Páginas propias cortas (404): el pie queda abajo del todo en vez de dejar una franja blanca debajo */
#viewport:has(.ng-propia) { min-height: 100vh; display: flex; flex-direction: column; }
#viewport:has(.ng-propia) > #main { flex: 1 0 auto; }
/* Todas las páginas: el contenedor del pie dejaba 10 px blancos por debajo */
.e-con-inner:has(> .elementor-element footer.ng-footer) { padding-bottom: 0 !important; }

/* ---------- Rejilla de artículos (Actualidad Jurídica) ---------- */
.ng-widget-articulos { width: 100%; }
.ng-tarjetas-blog { max-width: 1140px; margin: 0 auto 4rem; padding: 0 4px; }
.ng-tarjetas-blog .eael-entry-media a { display: block; height: 100%; }
.ng-tarjetas-blog .eael-post-grid-container { width: 100%; }

/* ---------- Aviso de cookies (antes Complianz) ---------- */
.ng-cookies {
  position: fixed; right: 20px; bottom: 20px; z-index: 99999; max-width: 420px;
  background: #fff; color: #4a5568; border-top: 2px solid #c5a059; box-shadow: 0 10px 40px rgb(45 55 72 / 0.22);
  padding: 22px 24px; font-family: 'Inter', -apple-system, sans-serif; font-size: 13.5px; line-height: 1.6;
}
.ng-cookies[hidden] { display: none; }
.ng-cookies p { margin: 0 0 14px; }
.ng-cookies a { color: #c5a059; text-decoration: underline; }
.ng-cookies__botones { display: flex; gap: 10px; justify-content: flex-end; }
/* (con !important: los estilos generales de botones de la web nueva los pisaban) */
.ng-cookies button { font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 11px !important; letter-spacing: 0.14em !important; text-transform: uppercase; padding: 11px 20px !important; cursor: pointer; border: 1px solid #c5a059 !important; border-radius: 0 !important; line-height: 1.2 !important; box-shadow: none !important; }
.ng-cookies .ng-cookies__rechazar { background: #fff !important; color: #2d3748 !important; }
.ng-cookies .ng-cookies__aceptar { background: #c5a059 !important; color: #2d3748 !important; }
.ng-cookies button:hover { background: #2d3748 !important; border-color: #2d3748 !important; color: #fff !important; }
@media (max-width: 520px) { .ng-cookies { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* Páginas antiguas (derecho laboral, mercantil, penitenciario, servicios): el título de la tarjeta principal
   pasó de h3 a h1 para Google; se mantiene exactamente el aspecto que tenía como h3 */
.familaw-feature-box h1.title { font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 500; line-height: 31.2px; letter-spacing: normal; text-transform: none; font-style: normal; color: rgb(211, 166, 81); margin: 10px 0 0; }
/* Derecho laboral y penitenciario: en pantallas grandes la cabecera fija (99 px) tapaba el título "Derecho …"
   (empezaba en el píxel 80). Se reduce el margen negativo del primer bloque (−97 → −37 px). En móvil lo recoloca el script de Replica.astro. */
@media (min-width: 1200px) {
  .elementor-19973 > .elementor-section:first-child, .elementor-19913 > .elementor-section:first-child { margin-top: -37px !important; }
}