/* Card con borde y fondo gradiente decorativo */
.custom-gradient-border {
  background: radial-gradient(circle at 100% 100%, #0c1120 0, #0c1120 5px, transparent 5px) 0% 0%/6px 6px no-repeat,
            radial-gradient(circle at 0 100%, #0c1120 0, #0c1120 5px, transparent 5px) 100% 0%/6px 6px no-repeat,
            radial-gradient(circle at 100% 0, #0c1120 0, #0c1120 5px, transparent 5px) 0% 100%/6px 6px no-repeat,
            radial-gradient(circle at 0 0, #0c1120 0, #0c1120 5px, transparent 5px) 100% 100%/6px 6px no-repeat,
            linear-gradient(#0c1120, #0c1120) 50% 50%/calc(100% - 2px) calc(100% - 12px) no-repeat,
            linear-gradient(#0c1120, #0c1120) 50% 50%/calc(100% - 12px) calc(100% - 2px) no-repeat,
            linear-gradient(62deg, #262626 90%, #009afa 100%);
  border-radius: 6px;
  box-sizing: border-box;
}

.custom-gradient-border-2 {
  background: radial-gradient(circle at 100% 100%, #02081a 0, #02081a 5px, transparent 5px) 0% 0%/6px 6px no-repeat,
            radial-gradient(circle at 0 100%, #02081a 0, #02081a 5px, transparent 5px) 100% 0%/6px 6px no-repeat,
            radial-gradient(circle at 100% 0, #02081a 0, #02081a 5px, transparent 5px) 0% 100%/6px 6px no-repeat,
            radial-gradient(circle at 0 0, #02081a 0, #02081a 5px, transparent 5px) 100% 100%/6px 6px no-repeat,
            linear-gradient(#02081a, #02081a) 50% 50%/calc(100% - 2px) calc(100% - 12px) no-repeat,
            linear-gradient(#02081a, #02081a) 50% 50%/calc(100% - 12px) calc(100% - 2px) no-repeat,
            linear-gradient(62deg, #262626 90%, #009afa 100%);
  border-radius: 6px;
  box-sizing: border-box;
}

/* Dots del carrusel: touch area 44×44px, visual controlado por span interno */
.dot {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}
.dot .dot-indicator {
  background: rgba(255, 255, 255, 0.4);
  transition: background 300ms ease;
}
.dot-active .dot-indicator {
  background: rgb(var(--primary));
}
/* WORKAROUND: archivo legible con estilos básicos mientras se resuelve la compilación de Tailwind
   - Contiene variables de tema, componentes esenciales y utilidades mínimas
   - Mantén este archivo; una vez que Tailwind funcione puedes revertir a la salida compilada
*/

:root {
  /* Paleta clara: fondos claros, texto oscuro, azul corporativo */
  --bg-main: 250 250 250;        /* #FAFAFA — secciones "otras" */
  --bg-header: 247 246 243;     /* #F7F6F3 — secciones "otras" */
  --bg-section: 229 236 238;     /* #E5ECEE — hero, prod/serv, empresas, contacto, footer */
  --bg-card: 255 255 255;        /* blanco puro para cards */
  --text-main: 32 32 32;         /* #202020 — titulares */
  --text-muted: 175 187 204;        /* #616161 — texto cuerpo */
  --primary: 0 85 142;          /* #00558E — acción primaria en lightmode */
  --bg-main-2: 250 250 250; /* #FAFAFA secciones "otras"*/
  --border2: 203 213 225;
  --border-header: 203 213 225;
}

.dark {
  /* Paleta oscura actual que ya venías usando */
  --bg-main: 12 17 32;      /* #0C1120 */
  --bg-header: 12 17 32;
  --bg-section: 12 17 32;
  --bg-card: 12 17 32;
  --bg-main-2: 12 17 32;    /* #0C1120 — mismo que --bg-main */
  --text-main: 248 250 252;
  --text-muted: 175 187 204;
  --primary: 0 157 255;
  --border: 30 41 59;
  --border2: 38 38 38;
  --border-header: 66 66 66;
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

/* Offset scroll targets for the fixed header */
section[id] { scroll-margin-top: 64px; }
@media (min-width: 768px) {
  section[id] { scroll-margin-top: 80px; }
}
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-color: rgb(var(--bg-main));
  color: rgb(var(--text-main));
}

/* Layout helpers (mínimos) */
.container { max-width: 1120px; margin: 0 auto; padding: 1rem 1.5rem; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.hidden { display: none; }
.grid { display: grid; }

/* Header */
.header { border-bottom: 1px solid rgb(var(--border)); }
.brand { font-weight: 700; font-size: 1.125rem; }
.header .actions { display: flex; gap: .75rem; }

/* Buttons */
.button { padding: .5rem .875rem; border-radius: 12px; border: 1px solid rgb(var(--border)); background: transparent; }
.button.primary { background: rgb(var(--primary)); color: #000; border: none; }

/* Cards */
.card { background: rgb(var(--bg-card)); border: 1px solid rgb(var(--border)); border-radius: 12px; padding: 1.5rem; }

/* Utilities */
.w-full { width: 100%; }
.h-80 { height: 20rem; }
.text-center { text-align: center; }
.text-muted { color: rgb(var(--text-muted)); }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.rounded-xl { border-radius: 12px; }


@media (min-width: 768px) {
  .md-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .md-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .md-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .md-text-5xl { font-size: 3rem; line-height: 1; }
}

/* Theme switch styles */
.theme-switch {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  position: relative;
  background: transparent; /* no visible pill */
  padding: 4px;
}

/* Updated: allow flexible width, center icons, add subtle transitions and focus styles */
.theme-option {
  background: transparent;
  border: none;
  width: 44px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--text-muted));
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
  transition: color 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}

/* Ensure svg renders as block and is centered inside the button */
.theme-option svg {
  display: block;
}

/* Active visuals: fondo + ring prominente para el modo activo */
html.dark .theme-option[data-theme="dark"][aria-pressed="true"] {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
  border-radius: 8px;
}
html:not(.dark) .theme-option[data-theme="light"][aria-pressed="true"] {
  color: #005fa3;
  background-color: rgba(0, 95, 163, 0.14);
  box-shadow: 0 0 0 2px rgba(0, 95, 163, 0.75);
  border-radius: 8px;
}

/* Hover sobre botones inactivos */
.theme-option:not([aria-pressed="true"]):hover {
  background-color: rgba(128, 128, 128, 0.18);
  border-radius: 8px;
}

/* Focus: small ring */
.theme-option:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(14,165,233,0.08);
}

/* Ensure grouping centered inside header */
.header .flex.items-center { align-items: center; }

/* Remove indicator entirely */
.theme-indicator { display: none; }

/* Language selector: strip browser disclosure triangle from <summary> */
.lang-selector summary { list-style: none; }
.lang-selector summary::-webkit-details-marker { display: none; }
.lang-selector summary::marker { display: none; }

/* Hover border helper classes (fallback for Tailwind hover:border & hover:border-header) */
.hover\:border:hover {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--border));
}

/* hover:border-header — aplica borde usando el color de header en ambos modos */
.hover\:border-header:hover {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(var(--border-header));
}

/* Nuevo: clase para borde cyan profesional */
.custom-cyan-border {
  border: 1.5px solid #009AFA;
  transition: background-color 200ms ease;
}
.custom-cyan-border:hover {
  background-color: rgba(0, 154, 250, 0.10);
}

.custom-gray-border-full {
  border-color: 1.5px solid #b4b4b4;
}

.custom-gray-text {
  color: #E0E0E0;
}

.custom-cyan-text {
  color: #009AFA;
}

.custom-gray-border {
  border-style: solid;
  border-color: #1f2937;
  border-width: 0px 0px 1.5px 0px ; /* Arriba, Derecha, Abajo, Izquierda */
}

.custom-gray-border-2 {
  border-style: solid;
  border-color: #1f2937;
  border-width: 1.5px 0px 0px 1.5px ; /* Arriba, Derecha, Abajo, Izquierda */
}

.custom-gray-border-3 {
  border-style: solid;
  border-color: #1f2937;
  border-width: 1.5px 0px 0px 0px ; /* Arriba, Derecha, Abajo, Izquierda */
}

.custom-gray-border-4 {
  border-style: solid;
  border-color: #1f2937;
  border-width: 1.5px 0px 1.5px 0px ; /* Arriba, Derecha, Abajo, Izquierda */
}

/* End workaround */

/* ===================================================== */
/* LIGHT MODE OVERRIDES                                  */
/* ===================================================== */

/* Cards con gradient-border: en lightmode → fondo #FAFAFA + borde gris */
html:not(.dark) .custom-gradient-border {
  background: #FAFAFA;
  outline: 1.5px solid #C2C2C2;
  border-radius: 6px;
}

/* Cards gradient-border-2 (Productos y servicios): fondo #E5ECEE + borde gris */
html:not(.dark) .custom-gradient-border-2 {
  background: #E5ECEE;
  outline: 1.5px solid #C2C2C2;
  border-radius: 6px;
}

/* custom-gray-text era #E0E0E0 (casi blanco) — en lightmode necesita ser oscuro */
html:not(.dark) .custom-gray-text {
  color: #374151;
}

/* Bordes divisores: gris claro en lightmode */
html:not(.dark) .custom-gray-border {
  border-color: #d1d5db;
}
html:not(.dark) .custom-gray-border-2 {
  border-color: #d1d5db;
}
html:not(.dark) .custom-gray-border-3 {
  border-color: #d1d5db;
}
html:not(.dark) .custom-gray-border-4 {
  border-color: #d1d5db;
}

/* Dots del carrusel: azul corporativo sutil en lightmode */
html:not(.dark) .dot .dot-indicator {
  background: rgba(0, 85, 142, 0.25);
}
html:not(.dark) .dot-active .dot-indicator {
  background: rgb(var(--primary));
}

/* Tipografía lightmode */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6 {
  color: #202020;
}
html:not(.dark) p {
  color: #616161;
}

/* Etiqueta de categoría en tarjetas del carrusel hero (override del p general) */
html:not(.dark) .carousel-tag {
  color: #00558E;
}

/* Logo: visibility controlada por clase .dark (no depende de Tailwind media-query) */
.logo-dark { display: block; }
.logo-light { display: none; }
html:not(.dark) .logo-dark { display: none; }
html:not(.dark) .logo-light { display: block; }

/* Iconos dark/light: mismo patrón que el logo */
.icon-dark { display: block; }
.icon-light { display: none; }
html:not(.dark) .icon-dark { display: none; }
html:not(.dark) .icon-light { display: block; }

/* Listas: los <li> no son <p>, necesitan regla propia */
html:not(.dark) li {
  color: #616161;
}

/* Botones "Ver productos/servicios" (custom-cyan-border): borde y fondo lightmode */
html:not(.dark) .custom-cyan-border {
  background-color: #FDFDFD;
  border-color: #00558E;
}
html:not(.dark) .custom-cyan-border:hover {
  background-color: rgba(0, 85, 142, 0.10);
}

/* custom-cyan-text: color azul corporativo en lightmode */
html:not(.dark) .custom-cyan-text {
  color: #00558E;
}

/* Carrusel de bancos: color del ícono prev/next en lightmode */
html:not(.dark) .carousel-control-btn {
  color: #00558E;
}
.carousel-control-btn {
  color: #009AFA;
}

/* Tab activo: clase CSS para evitar dependencia de dark: dinámicos */
.tab-btn-active {
  background-color: rgb(var(--bg-section));
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(255, 0, 0, 0.1);
  border: 2px solid #009AFA !important;
}
html:not(.dark) .tab-btn-active {
  background-color: #ffffff;
  color: #1e293b;
  border-color: #00558E !important;
}

/* Tab activo: borde azul corporativo en lightmode */
html:not(.dark) .tab-btn[aria-selected="true"] {
  border-color: #00558E !important;
}

/* Botones primarios (bg-primary): texto blanco sobre el fondo #00558E */
html:not(.dark) .bg-\[rgb\(var\(--primary\)\)\] {
  color: #ffffff;
}

/* Inputs y textarea: fondo crema y borde #c2c2c2 en lightmode */
html:not(.dark) input,
html:not(.dark) textarea {
  background-color: #F7F5F0 !important;
  border-color: #c2c2c2 !important;
}

/* Header: borde inferior #c2c2c2 en lightmode */
html:not(.dark) header {
  border-bottom-color: #c2c2c2 !important;
}

/* RRHH Enviar CV: fondo #00558E y texto blanco en lightmode */
html:not(.dark) .rrhh-cv-btn {
  background-color: #00558E;
  color: #ffffff;
  border-color: #00558E;
}
html:not(.dark) .rrhh-cv-btn:hover {
  background-color: #004070;
}

/* Hero carousel prev/next arrows: azul corporativo y sin sombra en lightmode */
html:not(.dark) #prev,
html:not(.dark) #next {
  color: #00558E;
  box-shadow: none;
}

/* Dark mode: fondo #181f36 en header, mobile menu y secciones específicas */
html.dark header,
html.dark #mobileMenu {
  background-color: #181f36;
}

html.dark .dark-alt-bg {
  background-color: #181f36;
}

html.dark .tab-btn-active {
  background-color: #181f36;
  color: #ffffff;
}

html.dark #rrhh .custom-gradient-border,
html.dark .dark-alt-bg .custom-gradient-border {
  background:
    radial-gradient(circle at 100% 100%, #181f36 0, #181f36 5px, transparent 5px) 0% 0%/6px 6px no-repeat,
    radial-gradient(circle at 0 100%,   #181f36 0, #181f36 5px, transparent 5px) 100% 0%/6px 6px no-repeat,
    radial-gradient(circle at 100% 0,   #181f36 0, #181f36 5px, transparent 5px) 0% 100%/6px 6px no-repeat,
    radial-gradient(circle at 0 0,      #181f36 0, #181f36 5px, transparent 5px) 100% 100%/6px 6px no-repeat,
    linear-gradient(#181f36, #181f36) 50% 50%/calc(100% - 2px) calc(100% - 12px) no-repeat,
    linear-gradient(#181f36, #181f36) 50% 50%/calc(100% - 12px) calc(100% - 2px) no-repeat,
    linear-gradient(62deg, #262626 90%, #009afa 100%);
}

/* ===================================================== */
/* GLOBAL ACCESSIBILITY & UX REFINEMENTS                 */
/* ===================================================== */

/* Skip-to-content link for keyboard users */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: rgb(var(--primary));
  color: #000;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Focus-visible: clear, consistent focus rings (WCAG 2.2 focus appearance) */
:focus-visible {
  outline: 3px solid rgba(0, 154, 250, 0.6);
  outline-offset: 2px;
}
html:not(.dark) :focus-visible {
  outline-color: rgba(0, 85, 142, 0.6);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  border-radius: 0.25rem;
}

/* Remove default outline when focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* Visually hidden utility for screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Minimum touch target for interactive elements (WCAG 2.5.5) */
button, a, [role="button"], input, textarea, select, label, .theme-option, .dot, .tab-btn, .carousel-control-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Limit line length for readability (WCAG 1.4.8) */
.prose p,
section p,
article p,
.card p,
footer p,
.max-prose {
  max-width: 70ch;
}

/* Improve heading spacing rhythm */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
@media (min-width: 640px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.75rem; }
}
@media (min-width: 768px) {
  h1 { font-size: 3.5rem; }
  h2 { font-size: 2.5rem; }
}

/* Reduced motion: honor user preference across all animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth scrolling only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Improve image rendering */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}
img {
  image-rendering: -webkit-optimize-contrast;
}

/* Fix overly broad list color rule to scoped readable content only */
html:not(.dark) .prose li,
html:not(.dark) section li,
html:not(.dark) article li,
html:not(.dark) .card li,
html:not(.dark) footer li {
  color: #616161;
}
html:not(.dark) li {
  color: inherit;
}

/* Ensure consistent link underlines on hover for readability */
a:hover {
  text-decoration-color: currentColor;
}

/* Improve select/input consistency in both modes */
input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Print styles: reduce ink and keep content readable */
@media print {
  header, footer, .theme-switch, .lang-selector, .no-print { display: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  body { background: #fff; color: #000; }
}

/* Dark mode: ensure high-contrast focus ring on dark backgrounds */
html.dark :focus-visible {
  outline-color: rgba(0, 154, 250, 0.85);
}

/* Consistent disabled states */
button:disabled, a[aria-disabled="true"], input:disabled, textarea:disabled, select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===================================================== */
/* REUSABLE CARD ICON COMPONENT (Product / Feature cards) */
/* ===================================================== */
/* Light mode (default) */
.card-icon-wrapper {
  background-color: #FFFFFF;
  border: 1px solid #00558E;
  border-radius: 0.75rem;
}
.card-icon {
  color: #00558E;
  font-size: 2.5rem;
  line-height: 1;
  display: inline-flex;
}
/* Dark mode */
html.dark .card-icon-wrapper {
  background-color: #181F36;
  border-color: #009AFA;
}
html.dark .card-icon {
  color: #009AFA;
}