/* Variables globales de color, fondo y sombras para mantener consistencia visual en todo el sitio. */
:root { --azul:#0f4761; --azul-claro:#44f4bc; --verde-azul:#4dd897 ; --celeste:#ffd1e4; --gris:#f4f6f8; --texto:#161d21; --blanco:#ffffff; --sombra:0 8px 24px rgba(0,0,0,.10); }

/* Reinicio básico para evitar diferencias de márgenes entre navegadores. */
* { box-sizing:border-box; margin:0; padding:0; }

/* Estilos generales del cuerpo del sitio. */
body { font-family:Arial, Helvetica, sans-serif; color:var(--texto); background:var(--gris); line-height:1.6; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* Contenedor central que limita el ancho máximo del contenido. */
.container { width:min(1100px,92%); margin:auto; }

/* Cabecera fija superior y navegación principal. */
.header { background:var(--blanco); box-shadow:var(--sombra); position:sticky; top:0; z-index:10;}
.nav { display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:24px; padding:14px 0;}
.brand-box { display:flex; align-items:center; justify-content:flex-start; min-width:180px;}
.menu-box { display:flex; justify-content:center; min-width:0;}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; color:var(--azul); font-size:1.35rem;}
.brand-img, .logo { width:auto; min-width: 70px; height:46px; border-radius:25%;}
.brand-img { object-fit:contain; }
.logo { background:var(--azul); color:white; display:grid; place-items:center; font-weight:bold; }

/* Menú principal y estado activo de la página actual. */
.menu { display:flex; gap:16px; list-style:none; align-items:center; justify-content:center; flex-wrap:wrap;}
.menu a { padding:8px 10px; border-radius:8px; font-weight:600; }
.menu a:hover, .menu a.active { background:var(--celeste); color:var(--azul); }
.hamburger { display:none; background:var(--azul); color:var(--blanco); border:none; padding:8px 12px; border-radius:8px; font-size: 1.5rem; cursor:pointer; place-items:center;}

/* Sección hero o banner principal de cada página. */
.hero { background:linear-gradient(135deg,var(--azul),var(--azul-claro)); color:white; padding:80px 0; text-align:center; }
.hero h1 { font-size:clamp(2rem,5vw,4rem); margin-bottom:12px; }
.hero p { max-width:760px; margin:0 auto 24px; font-size:1.15rem; }

/* Botones reutilizables del sitio. */
.btn { display:inline-block; background:var(--azul); color:white; padding:12px 18px; border-radius:10px; font-weight:700; border:none; cursor:pointer; margin:6px; }
.btn.secondary { background:white; color:var(--azul); }

/* Secciones, grillas y tarjetas de contenido. */
.section { padding:54px 0; }
.section h2 { color:var(--azul); margin-bottom:18px; font-size:2rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.card { background:rgb(246, 191, 220); border-radius:16px; padding:22px; box-shadow:var(--sombra); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-3px); }
.card h3 { color:var(--azul); margin-bottom:10px; }

/* Miniaturas de documentos PDF. */
.thumb { width:100%; height:120px; object-fit:contain; background:var(--celeste); border-radius:12px; padding:16px; margin-bottom:12px; }

/* Tablas de precios. */
.price-table { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; box-shadow:var(--sombra); margin:20px 0; }
.price-table th, .price-table td { padding:14px; border-bottom:1px solid #dde6ea; text-align:left; }
.price-table th { background:var(--azul); color:white; }

/* Formularios y mensajes de validación. */
.form { background:rgb(255, 213, 235); padding:24px; border-radius:16px; box-shadow:var(--sombra); display:grid; gap:14px; }
.form label { font-weight:700; color:var(--azul); }
.form input, .form select, .form textarea, #buscador { width:100%; padding:12px; border:1px solid #ff03a3; border-radius:8px; font:inherit; }
#buscador { margin-bottom:20px; }
.message { padding:12px; border-radius:8px; display:none; }
.message.ok { background:#dff6e4; color:#145c2e; display:block; }
.message.error { background:#ffe3e3; color:#8a1f1f; display:block; }

/* Vista previa de documentos PDF. */
.pdf-preview { width:100%; height:260px; border:1px solid #d5dfe5; border-radius:10px; background:#fafafa; margin:12px 0; }

/* Pie de página y botón volver arriba. */
.footer { background:var(--azul); color:white; padding:32px 0; margin-top:40px; }
.footer .grid { align-items:start; }
.footer-icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin-right: 6px;}
.top-btn { position:fixed; right:18px; bottom:18px; display:none; border:none; border-radius:50%; width:46px; height:46px; background:var(--azul); color:white; font-size:1.2rem; cursor:pointer; box-shadow:var(--sombra); }
.top-btn.show { display:block; }

/* Accesibilidad: foco visible solo cuando se navega con teclado. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--verde-azul); outline-offset:3px; }

/* Responsive: transforma el menú horizontal en menú hamburguesa en pantallas pequeñas y respeta hidden para lectores de pantalla. */

@media (max-width:820px) { 
  .nav {position:relative; display:flex; align-items:center; justify-content:center;}
  .brand {margin:0 auto; justify-content:center;}
  .hamburger {display:block; position:absolute; right:0; width: 50px;}
  .menu {position:absolute; left:0; right:0; top:74px; background:white; flex-direction:column; padding:16px; box-shadow:var(--sombra);}
  .menu[hidden] { display:none;}
  .menu.open {display:flex;}
  .menu a {width:100%; text-align:center;}
}

/* Submenús jerárquicos para Servicios, Libros y Resúmenes. */
.has-submenu { position:relative; }
.submenu { display:none; position:absolute; top:100%; left:0; min-width:190px; background:white; list-style:none; padding:10px; border-radius:12px; box-shadow:var(--sombra); }
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu { display:block; }
.submenu a { display:block; white-space:nowrap; }
@media (max-width:820px) { .submenu { position:static; display:block; box-shadow:none; padding:0; background:transparent; } .submenu a { font-size:.95rem; padding-left:22px; } }