/*
  Stylesheet for ACODEMI website
  Designed for a prestigious legal association with a sober aesthetic.
  Author: ChatGPT (UI expert for legal firms)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Source+Serif+4:wght@400;600;700&display=swap');

/* CSS custom properties for colours, spacing and fonts */
:root {
  /* Brand colours */
  /*
    Se sustituye el morado por un azul elegante para adecuar la paleta a un tono más sobrio y corporativo.
    --brand define el color principal utilizado en títulos, botones y enlaces destacados.
    --hover es una variación más oscura para estados activos.
    --footer-bg establece el fondo del pie de página.
    --footer-text ajusta el color de texto del footer para garantizar contraste suficiente.
  */
  /*
    Redefine colours for a premium, trustworthy look suitable for
    firmas de abogados. Utilizamos un azul marino como color
    principal, acompañado de neutros fríos y un gris pizarra para el
    texto. El pie de página hereda el tono más oscuro del brand.
  */
  --brand: #081b32; /* azul marino profundo */
  --text: #192536; /* gris pizarra oscuro para legibilidad */
  --muted: #6b7280; /* gris medio para textos secundarios */
  /*
    Ajustamos el color de fondo a un blanco puro para que todas las áreas de la página tengan
    un aspecto más claro y limpio. El objetivo es que el sitio transmita ligereza y claridad,
    por lo que sustituimos el gris muy claro original por un blanco total.
  */
  --background: #ffffff; /* blanco puro para fondos */
  --surface: #ffffff; /* tarjetas y elementos en blanco */
  --border: #e5e7eb; /* contornos sutiles */
  --focus: #0B2545; /* azul medio para estados de enfoque */
  --hover: #091f32; /* azul aún más oscuro para hover */
  --footer-bg: #0b2545; /* coincide con brand para el pie de página */
  --footer-text: #eceff4; /* gris muy claro para texto sobre fondo oscuro */
  /* Typography */
  --font-heading: 'Source Serif 4', serif;
  --font-body: 'Inter', sans-serif;
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  /* Components */
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  --transition: all 0.2s ease-in-out;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--background);
  line-height: 1.6;
}

/*
  Marca de agua con el logo de ACODEMI.
  Se coloca como pseudo‑elemento fijo detrás de todo el contenido para aportar textura sin distraer.
  Ajusta la opacidad y el tamaño según sea necesario para obtener un resultado sutil.
*/
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url('../assets/logo-watermark.png') center/600px no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Aseguramos que el contenido (cabecera, secciones, pie) esté por encima de la marca de agua */
header.site-header,
main,
footer.site-footer {
  position: relative;
  z-index: 1;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-4);
  background: var(--brand);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-2);
}

/* Social sidebar */
.social-sidebar {
  position: fixed;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 999;
}
.social-sidebar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.social-sidebar a:hover,
.social-sidebar a:focus {
  transform: scale(1.05);
  outline: none;
}
.social-sidebar img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Site header */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 998;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
.site-header img {
  /* El logo se ajusta para ocupar un mayor protagonismo sin desbordar el encabezado */
  height: 160px;
  width: auto;
}
@media (max-width: 768px) {
  .site-header img {
    height: 120px;
  }
}

/* Navigation */
.main-nav {
  position: relative;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
.main-nav li {
  position: relative;
}
.main-nav a { color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  /* Usamos flex para alinear verticalmente el texto y el caret */
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
}
.main-nav a:hover,
.main-nav a:focus {
  background: var(--surface);
  text-decoration: underline;
}

/* Dropdowns */
.dropdown > a::after {
  content: "▼";
  font-size: 0.6em;
  margin-left: 4px;
  display: inline-block;
  transition: var(--transition);
}
.dropdown[aria-expanded="true"] > a::after {
  transform: rotate(180deg);
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-2) 0;
  display: none;
  min-width: 200px;
  z-index: 997;
}
.submenu li a {
  padding: var(--space-2) var(--space-3);
  font-weight: 400;
}
.dropdown[aria-expanded="true"] .submenu {
  display: block;
}

/* Asegúrese de que los submenús permanezcan ocultos cuando la sección principal no esté expandida. */
.dropdown[aria-expanded="false"] .submenu {
  display: none;
}

/* Hero section */
.hero {
  position: relative;
  height: 80vh;
  min-height: 400px;
  /* Use a high‑quality hero image featuring ACODEMI members. */
  background: url('../assets/hero.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Suaviza la imagen de fondo para garantizar que el texto del eslogan sea legible.
     Se aplica un gradiente con más opacidad en el centro. */
  background: linear-gradient(var(--background) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.7) 60%, var(--background) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
}
.hero h1 {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--brand);
  margin-bottom: var(--space-4);
}
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--hover);
  border-color: var(--hover);
}
.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.btn-outline:hover,
.btn-outline:focus {
  background: var(--brand);
  color: #fff;
}

/* Carousel */
.carousel {
  position: relative;
  max-width: 1200px;
  margin: var(--space-7) auto;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slides img {
  width: 100%;
  flex-shrink: 0;
  height: 400px;
  object-fit: cover;
}
.carousel button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.carousel button:hover {
  background: rgba(255,255,255,1);
}
.carousel .prev {
  left: var(--space-3);
}
.carousel .next {
  right: var(--space-3);
}
.dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
}
.dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
}
.dots button.active {
  background: var(--brand);
}

/* Sections and cards */
section {
  /*
    Además del espaciado existente, aseguramos que todas las secciones utilicen un
    fondo claro coherente con el nuevo color de fondo del cuerpo. Esto proporciona
    uniformidad visual y evita zonas grises en el diseño.
  */
  padding: var(--space-7) var(--space-4);
  background-color: var(--background);
}

/* Centrar el contenido de las secciones para que no se vea recostado sobre el borde de la pantalla.
   Se excluyen la cabecera de héroe y el carrusel porque necesitan ocupar el ancho completo. */
main > section:not(.hero):not(.carousel) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.section-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--brand);
  margin-bottom: var(--space-5);
  text-align: center;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.card-body {
  padding: var(--space-4);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--brand);
  margin-bottom: var(--space-2);
}
.card-text {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: var(--space-3);
}
.card .btn {
  align-self: flex-start;
}

/* Modal pop-up */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal.show {
  display: flex;
}
.modal-content {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  /*
    Reducimos aún más el ancho máximo del modal para mejorar la usabilidad y facilitar que
    la imagen se visualice por completo sin necesidad de hacer scroll. También limitamos
    su altura para adaptarla al alto de la ventana.
  */
  max-width: 360px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  text-align: center;
}
.modal-content img {
  /*
    Escalamos la imagen para que siempre se adapte a los límites del modal y sea visible
    en un solo pantallazo. Utilizamos object-fit: contain y limitamos la altura.
  */
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}
.modal-content button {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  font-weight: 600;
}
.modal-content button:hover {
  background: var(--hover);
}

/* Forms */
.form-container {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}
.form-container h2 {
  font-family: var(--font-heading);
  color: var(--brand);
  margin-bottom: var(--space-4);
  text-align: center;
}
.form-group {
  margin-bottom: var(--space-4);
}
.form-group label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--text);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}
.form-group button {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: var(--space-3);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
}
.form-group button:hover {
  background: var(--hover);
}
.download-section {
  margin-top: var(--space-5);
  text-align: center;
}
.download-section button {
  background: var(--outline-bg, transparent);
  color: var(--brand);
  border: 1px solid var(--brand);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
}
.download-section button:hover {
  background: var(--brand);
  color: #fff;
}

/* Footer */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--space-6) var(--space-4);
}
.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-5);
}
.site-footer h3 {
  font-family: var(--font-heading);
  margin-bottom: var(--space-3);
  color: #fff;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer a { color: var(--brand);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer .legal {
  margin-top: var(--space-5);
  font-size: 0.8rem;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .main-nav ul {
    display: none;
    flex-direction: column;
    gap: 0;
    background: #fff;
    position: absolute;
    top: 100%;
    right: 0;
    /* Tomar todo el ancho disponible para no quedar flotando en un costado */
    width: 100%;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .main-nav.open ul {
    display: flex;
  }
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
    font-size: 1.4rem;
  }
  .dropdown > a::after {
    display: none;
  }
  .submenu {
    position: static;
    border: none;
    box-shadow: none;
  }
}

/* ------------------------------------------------------------------ */
/*
  Ajustes de estilo para el modal de eventos (clases `nr-modal`), que se
  definen en theme.css de manera independiente. Al incluir estas reglas al
  final de nuestra hoja de estilos garantizamos que prevalezcan sobre las
  definiciones originales. El objetivo es que el pop up sea más pequeño,
  utilice un fondo claro y permita visualizar la imagen completa sin
  desplazarse.
*/
.nr-modal {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 20px;
  /* Limita la anchura máxima y altura para que el modal no ocupe la mayor parte de la pantalla */
  max-width: 360px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  /* Usa la sombra definida en las variables para mantener consistencia con el resto del sitio */
  box-shadow: var(--shadow);
}
.nr-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  color: var(--text);
}
.nr-modal__body {
  padding: 16px;
  color: var(--text);
}
.nr-modal__body img {
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.nr-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.nr-modal__close {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}


/* === Responsive & Stacking fixes for header === */
.site-header{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5000; /* above all layout content; modals remain higher */
}

.header-inner{
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  overflow: hidden; /* prevent accidental horizontal overflow */
}

.site-header img,
.site-header .logo,
.site-header .brand img{
  height: auto;
  max-height: 96px;
  max-width: 100%;
  width: auto;
}

@media (max-width: 768px){
  .site-header img,
  .site-header .logo,
  .site-header .brand img{
    max-height: 56px; /* keep logo inside viewport on small screens */
  }
  .header-inner{
    padding-left: 12px;
    padding-right: 12px;
  }
  .main-nav{
    max-width: 100%;
    overflow-x: auto;
  }
}
/* === End header fixes === */



/* === Header Responsive (no submenus / no hamburger) — applied 2025-10-19 21:54 === */
.site-header { position: sticky; top: 0; z-index: 500; background: #fff; }
.site-header .header-inner { 
  display: flex; align-items: center; justify-content: space-between; 
  flex-wrap: wrap; gap: 12px; padding: 10px 16px; 
}
/* Logo sizing */
.site-header .header-inner > a img { height: 44px; width: auto; display: block; }

/* Base nav layout: visible, wrapping */
.main-nav { width: 100%; }
.main-nav ul { 
  display: flex; flex-wrap: wrap; 
  gap: var(--space-3, 12px) var(--space-3, 12px);
  align-items: center; margin: 0; padding: 0; list-style: none;
}
.main-nav li { position: relative; }
.main-nav a { 
  display: inline-block; text-decoration: none; font-weight: 600;
  padding: 10px 12px; border-radius: 10px; color: var(--text, #111);
}
.main-nav a:hover { background: rgba(0,0,0,0.05); }

/* Remove hamburger everywhere */
.menu-toggle { display: none !important; }

/* Kill any leftover submenu styling (defensive) */
.submenu { display: none !important; }
.dropdown { position: static !important; }

/* Medium screens: two-line comfortable layout */
@media (max-width: 1024px) {
  .site-header .header-inner > a img { height: 38px; }
  .main-nav { width: 100%; }
  .main-nav ul { row-gap: 8px; }
  .main-nav a { padding: 10px 12px; }
}

/* Small screens: switch to horizontal scroll if very tight */
@media (max-width: 480px) {
  .main-nav ul { 
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .main-nav li { flex: 0 0 auto; }
  .main-nav a { padding: 10px 10px; }
}

/* Provide scroll-margin for in-page anchors so header doesn't cover them */
[id] { scroll-margin-top: 72px; }
@media (max-width: 768px) { [id] { scroll-margin-top: 64px; } }
/* === End Header Responsive === */


/* === Footer text white + Mobile header visibility fix — 2025-10-19 22:08 === */

/* Footer: text and links to white */
footer, footer * { color: #fff !important; }
footer a { color: #fff !important; text-decoration: none; }
footer a:hover { opacity: .9; }
footer svg *, footer .icon, footer .icon * { fill: #fff !important; }

/* Header: fixed and visible across devices */
:root { --header-h: 72px; }
@media (max-width: 768px) { :root { --header-h: 64px; } }

.site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 5000; background: #fff; }
.site-header .header-inner { 
  display: flex; align-items: center; justify-content: space-between; 
  flex-wrap: wrap; gap: 8px; padding: 10px 16px; overflow: visible !important;
}
/* Offset page content so header no ocluye el inicio */
body { padding-top: var(--header-h); }

/* Nav always visible, responsive */
.main-nav { width: 100%; }
.main-nav ul { display: flex !important; gap: 10px 12px; align-items: center; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.main-nav li { position: relative; }
.main-nav a { display: inline-block; padding: 10px 12px; border-radius: 10px; font-weight: 600; color: var(--text, #111); }
.main-nav a:hover { background: rgba(0,0,0,0.05); }

/* Very small screens: switch to horizontal scroll instead of wrapping to 3+ lines */
@media (max-width: 480px) {
  .main-nav ul { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .main-nav li { flex: 0 0 auto; }
}

/* Defensive: remove any hidden submenu remnants */
.submenu { display: none !important; }
/* === End fixes === */