/* Extra page components (Plano técnico). */

/* Soporte TI (page 19): included vs separately quoted cells. */
.it .inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--ln);background:#fff}
.it .inc>div{display:flex;flex-direction:column;gap:14px;padding:24px}
.it .inc>div+div{border-left:1px solid var(--ln)}
.it .inc .mono{font-size:11px;color:var(--tqd)}
.it .inc ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.it .inc li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--ink);font-weight:400}
.it .inc li::before{content:"";flex:none;width:6px;height:6px;margin-top:8px;background:var(--tq)}
@media (max-width:640px){.it .inc{grid-template-columns:minmax(0,1fr)}.it .inc>div+div{border-left:0;border-top:1px solid var(--ln)}}

/* Quiénes somos (page 15): five numbered commitment cells. */
.it .prom{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#fff}
.it .prom>div{display:flex;flex-direction:column;gap:14px;padding:32px 24px;border-right:1px solid var(--ln)}
.it .prom>div:last-child{border-right:0}
.it .prom .pn{font:500 40px/1 "IBM Plex Mono",monospace;color:var(--tq);letter-spacing:-.04em}
.it .prom h3{font-size:18px}
.it .prom p{font-size:14px;line-height:1.55;color:var(--mut)}
@media (max-width:980px){.it .prom{grid-template-columns:repeat(2,minmax(0,1fr))}.it .prom>div{border-bottom:1px solid var(--ln)}.it .prom>div:nth-child(2n){border-right:0}.it .prom>div:last-child{grid-column:1/-1;border-right:0;border-bottom:0}}
@media (max-width:640px){.it .prom{grid-template-columns:minmax(0,1fr)}.it .prom>div{border-right:0;border-bottom:1px solid var(--ln)}.it .prom>div:last-child{grid-column:auto;border-bottom:0}}

/* Preguntas frecuentes (page 25): details/summary accordions. */
.it .faqs{background:#fff}
.it .faq{border-bottom:1px solid var(--ln)}
.it .faq:last-child{border-bottom:0}
.it .faq summary{display:flex;align-items:center;gap:14px;padding:22px 28px;cursor:pointer;list-style:none;font-size:16.5px;line-height:1.45;color:var(--ink);font-weight:400}
.it .faq summary::-webkit-details-marker{display:none}
.it .faq summary::before{content:"+";flex:none;width:16px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:19px;line-height:1;color:var(--tq)}
.it .faq summary:hover{color:var(--tqd)}
.it .faq[open] summary{color:var(--tqd)}
.it .faq p{padding:0 28px 24px 70px;max-width:840px;font-size:15.5px;line-height:1.65;color:var(--txt)}
@media (max-width:640px){.it .faq summary{padding:18px 20px}.it .faq p{padding:0 20px 20px 48px}}

/* Contacto (page 27): form controls, right-cell paragraphs, mailto. */
.it .it-f form{display:flex;flex-direction:column;gap:18px}
.it .it-f label{display:block;margin-bottom:8px;font-size:13px;font-weight:400;color:var(--ink)}
.it .it-f input:not([type=checkbox]):not([type=submit]),.it .it-f select,.it .it-f textarea{width:100%;padding:13px 16px;border:1px solid var(--ln);border-radius:0;background:#fff;font:300 15px/1.5 "Merriweather Sans",system-ui,sans-serif;color:var(--ink)}
.it .it-f textarea{min-height:150px;resize:vertical}
.it .it-f input:focus,.it .it-f select:focus,.it .it-f textarea:focus{outline:0;border-color:var(--tq);box-shadow:0 0 0 3px rgba(19,182,236,.15)}
.it .it-f input[type=checkbox]{flex:none;width:auto;accent-color:var(--tq)}
.it .it-f input[type=submit],.it .it-f button{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:fit-content;padding:16px 22px;border:1px solid var(--tq);border-radius:0;background:var(--tq);color:#06222c;font:600 13px/1 "Encode Sans Semi Condensed",sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.it .it-f input[type=submit]:hover,.it .it-f button:hover{background:#0fa3d6;color:#06222c}
.it .close-l .it-f{margin-top:32px}
.it .close-r p{font-size:14px;line-height:1.6;color:var(--mut)}
.it .close-r a{color:var(--tqd);text-decoration:none}

/* Single post (Plano técnico): meta line, cover, pagination. */
.it .g-head .post-meta-line{font-size:12px;color:var(--tqd);letter-spacing:.06em;text-transform:uppercase}
.it .g-head .post-meta-line a{color:var(--tqd);text-decoration:none}
.it .post-cover{margin-top:24px;overflow:hidden;background:#fff}
.it .post-cover img{display:block;width:100%;height:auto}
.it .prose .page-links{margin-top:32px;font-size:14px;color:var(--mut)}
.it .prose .page-links a{color:var(--tqd);text-decoration:none}
.it .frame .lab-list{padding:16px 40px}
.it .frame .lab-list .post:last-child{border-bottom:0}
.it .pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.it .pagination .page-numbers{display:inline-flex;align-items:center;padding:12px 16px;border:1px solid var(--ln);font:600 13px/1 "Encode Sans Semi Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.it .pagination a.page-numbers:hover{border-color:var(--tq);color:var(--tqd)}
.it .pagination .current{background:var(--tq);border-color:var(--tq);color:#06222c}

/* Comments (Plano técnico): area, list, body, respond form. 90° corners, ln borders, submit like .btn. */
.it .comments-area{margin-top:56px;padding:48px 56px;border:1px solid var(--ln);background:#fff}
.it .comments-area h2,.it #respond h3{font-size:22px;margin-bottom:24px}
.it .comment-list{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.it .comment-list .children{margin:20px 0 0;padding:0 0 0 24px;border-left:1px solid var(--ln);list-style:none}
.it .comment-body{padding:24px;border:1px solid var(--ln);background:var(--soft)}
.it .comment-meta{margin-bottom:14px;font-size:12px;color:var(--mut)}
.it .comment-author{font-weight:600;color:var(--ink)}
.it .comment-body p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--txt)}
.it .comment-body p:last-child{margin-bottom:0}
.it .comment-body a{color:var(--tqd);text-decoration:none}
.it .comment-navigation{margin-top:24px;font-size:13px}
.it .comment-navigation a{color:var(--tqd);text-decoration:none}
.it #respond{margin-top:40px}
.it #respond p{margin:0 0 18px}
.it #respond label{display:block;margin-bottom:8px;font-size:13px;color:var(--ink)}
.it #respond textarea,.it #respond input[type=text],.it #respond input[type=email],.it #respond input[type=url]{width:100%;padding:13px 16px;border:1px solid var(--ln);border-radius:0;background:#fff;font:300 15px/1.5 "Merriweather Sans",system-ui,sans-serif;color:var(--ink)}
.it #respond textarea{min-height:150px;resize:vertical}
.it #respond textarea:focus,.it #respond input[type=text]:focus,.it #respond input[type=email]:focus,.it #respond input[type=url]:focus{outline:0;border-color:var(--tq);box-shadow:0 0 0 3px rgba(19,182,236,.15)}
.it #respond .submit{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:16px 22px;border:1px solid var(--tq);border-radius:0;background:var(--tq);color:#06222c;font:600 13px/1 "Encode Sans Semi Condensed",sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.it #respond .submit:hover{background:#0fa3d6;color:#06222c}
.it .comments-area .nocomments,.it .comments-area .no-comments{font-size:15px;color:var(--mut)}
@media (max-width:640px){.it .comments-area{padding:28px 20px}.it .frame .lab-list{padding:8px 20px}}

/* Article tables (single posts): real table on desktop, each row becomes a card up to 640px. */
.it .prose table.it-table{width:100%;border-collapse:collapse;border:1px solid var(--ln)}
.it .prose table.it-table th,.it .prose table.it-table td{padding:10px 12px;border-bottom:1px solid var(--lnn);text-align:left}
.it .prose table.it-table th{font:400 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;color:var(--mut);background:var(--soft)}
@media (max-width:640px){
.it .prose table.it-table{border:0}
.it .prose table.it-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.it .prose table.it-table,.it .prose table.it-table tbody,.it .prose table.it-table tr,.it .prose table.it-table td{display:block}
.it .prose table.it-table tr{margin-bottom:12px;border:1px solid var(--ln);border-radius:0;background:#fff}
.it .prose table.it-table td{display:grid;grid-template-columns:42% 1fr;gap:12px;padding:12px;border-bottom:1px solid var(--lnn)}
.it .prose table.it-table td:last-child{border-bottom:0}
.it .prose table.it-table td::before{content:attr(data-label);font:400 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;color:var(--mut)}
.it .prose table.it-table td:first-child{font-family:Poppins,system-ui,sans-serif;font-weight:500;color:var(--ink)}
}

/* Correcciones del cliente, ronda 1 */

/* 1) Menú principal: IBM Plex Mono en mayúsculas (header, submenú y menú móvil). */
.site-header .primary-nav a,.site-header .primary-nav summary,.primary-nav a,.primary-nav summary{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.primary-nav .service-submenu a{font-size:13px}
/* Que el cambio de fuente no rompa el header en 1024px: gap y padding laterales compactos. */
@media (max-width:1120px){.site-header .primary-nav ul{gap:16px;flex-wrap:wrap}.site-header .primary-nav a,.site-header .primary-nav summary{padding-inline:9px}}
@media (max-width:980px){.site-header .primary-nav a,.site-header .primary-nav summary{padding-inline:0}}

/* 2) Grillas sin cierre: hero-model como rectángulo cerrado con marcas de esquina. */
.it .hero-model{position:relative;margin:40px;border:1px solid var(--ln)}
.it .hero-model::before{content:"";position:absolute;inset:-5px;pointer-events:none;background:linear-gradient(var(--tq),var(--tq)) 0 0/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 0 0/1px 11px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 0/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 0/1px 11px no-repeat,linear-gradient(var(--tq),var(--tq)) 0 100%/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 0 100%/1px 11px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 100%/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 100%/1px 11px no-repeat}
@media (max-width:980px){.it .hero-model{margin:0;border:0}.it .hero-model::before{content:none}}
/* .road suelto (Quiénes somos), sin marco alrededor: cerrarlo con borde propio. */
.it .road:not(.frame){border:1px solid var(--ln)}

/* 3) Botones: principal con degradado y texto blanco; secundario fantasma turquesa. */
.it .btn.btn,
.it .it-f input[type=submit],.it .it-f button,.it #respond .submit{position:relative;background:linear-gradient(135deg,#0A7EA8 0%,#13B6EC 100%);background-size:200% 100%;background-position:0 0;background-repeat:no-repeat;color:#fff;border:1px solid #0A7EA8;border-radius:0;box-shadow:none;filter:none;transform:none;transition:background-position .35s ease,color .35s ease}
.it .btn.btn:hover,.it .btn.btn:focus-visible,
.it .it-f input[type=submit]:hover,.it .it-f button:hover,.it #respond .submit:hover{background-position:100% 0;color:#fff}
.it .btn.btn:focus-visible,
.it .it-f input[type=submit]:focus-visible,.it .it-f button:focus-visible,.it #respond .submit:focus-visible{outline:2px solid #0A7EA8;outline-offset:3px}
.it .btn svg{transition:transform .25s}
.it .btn:hover svg{transform:translateX(4px)}
/* Secundario: transparente, borde y texto turquesa oscuro; hover relleno. */
.it .btn.btn-ghost,.it .btn.btn-ghost:hover{background:none;box-shadow:none;filter:none}
.it .btn.btn-ghost{border:1px solid #0A7EA8;color:#0A7EA8}
.it .btn.btn-ghost:hover,.it .btn.btn-ghost:focus-visible{background:#0A7EA8;color:#fff}
/* Sobre fondos oscuros, el secundario va en blanco. */
.it .dark .btn.btn-ghost,.it .model-foot .btn.btn-ghost{border-color:#fff;color:#fff}
.it .dark .btn.btn-ghost:hover,.it .model-foot .btn.btn-ghost:hover{background:#fff;color:var(--dark)}
/* Efectos heredados (evil-buttons/thruster) que chocaran con lo anterior: fuera. */
.it .btn[class*="btn-"]{transform:none!important;box-shadow:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
.it .btn,.it .btn:hover,.it .btn svg,.it .btn:hover svg,.it .btn-ghost,.it .it-f input[type=submit],.it .it-f button,.it #respond .submit{transition:none!important;transform:none!important}
.it .btn:hover svg{transform:none!important}
}

/* Fotos con crédito */
.it .it-photo{position:relative;margin:0;height:380px;overflow:hidden;background:#fff;border-radius:0;box-shadow:none}
.it .it-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.it .it-photo::after{content:"";position:absolute;inset:0;background:rgba(19,182,236,.05);pointer-events:none}
.it .it-photo figcaption{position:absolute;right:0;bottom:0;z-index:1}
.it .it-photo figcaption a{display:block;padding:3px 7px;background:rgba(14,26,31,.55);color:#fff;font:400 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;text-decoration:none}
.it .it-photo figcaption a:hover{text-decoration:underline}
.it .wrap>.it-photo{margin-top:24px}
.it .frame.about>.it-photo{grid-column:1/-1;border-top:1px solid var(--ln)}
@media (max-width:640px){.it .it-photo{height:220px}}

/* Correcciones ronda 2 */

/* Franja bajo el hero: siempre con línea superior de cierre (1px var(--ln)).
   Arriba de la franja solo hay .hero-grid: .toc cierra sin borde (a:last-child border-bottom:0),
   .hero-model lleva margin:40px y su propio marco no toca la franja, y .hero-copy solo cierra
   en columna (≤980px) donde ya no es vecina inmediata. El !important gana a los border-top
   inline (home y page-15) para que haya UNA sola línea, no dos, en las 4 plantillas. */
.it .hero-strip{border-top:1px solid var(--ln)!important}

/* Footer ronda 3 */

/* A) Tipografía: todo el footer en IBM Plex Mono, igual que el menú principal. */
.it-ftr{font-family:"IBM Plex Mono",ui-monospace,monospace}
.it-ftr .ftr-cols a{font-family:inherit;font-size:11px;font-weight:500;letter-spacing:0;text-transform:uppercase}
.it-ftr .ftr-main p{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:400;font-size:13px;line-height:1.7;text-transform:none}
.it-ftr .ftr-bottom{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}
/* Para que las columnas no se rompan entre 980 y 1280px ni en móvil. */
@media (max-width:1280px){.it-ftr .ftr-cols{gap:40px;flex:1 1 auto}.it-ftr .ftr-main>div:first-child{flex:0 1 300px}.it-ftr .ftr-main p{max-width:none}}
@media (max-width:980px){.it-ftr .ftr-main{gap:32px}.it-ftr .ftr-cols{width:100%;gap:32px}.it-ftr .ftr-cols>div{flex:1 1 calc(50% - 32px)}}
@media (max-width:640px){.it-ftr .ftr-cols>div{flex:1 1 100%}}
/* ACCESOS DIRECTOS: ITLAB SPA y LEGAL comparten un único título; el espacio entre las dos
   listas es el mismo gap que .ftr-cols usa en cada breakpoint (gap no se hereda). */
.it-ftr .ftr-group{min-width:0}
.it-ftr .ftr-group-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}
@media (max-width:1280px){.it-ftr .ftr-group-cols{gap:40px}}
@media (max-width:980px){.it-ftr .ftr-group-cols{gap:32px}}
@media (max-width:640px){.it-ftr .ftr-group-cols{grid-template-columns:1fr}}

/* B) Logo animado del footer: gradiente turquesa barrido a través del webp como máscara. */
.it-ftr .ftr-logo{display:inline-block;width:116px;aspect-ratio:204/42;background:linear-gradient(100deg,#0e1a1f 0%,#0e1a1f 35%,#13b6ec 50%,#0a7ea8 60%,#0e1a1f 75%,#0e1a1f 100%);background-size:300% 100%;animation:ftr-logo-sweep 7s ease-in-out infinite alternate;-webkit-mask:url(../images/itlab-logo.webp) no-repeat;mask:url(../images/itlab-logo.webp) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
@keyframes ftr-logo-sweep{from{background-position:100% 0}to{background-position:0 0}}
.it-ftr .ftr-logo img{opacity:0}
.it-ftr .brand:hover .ftr-logo{animation-duration:2.5s}
@media (prefers-reduced-motion:reduce){.it-ftr .ftr-logo{animation:none;background:none;background-color:#0e1a1f}}
@supports not ((mask-image:url(x)) or (-webkit-mask-image:url(x))){
.it-ftr .ftr-logo{display:inline;background:none;animation:none;-webkit-mask:none;mask:none}
.it-ftr .ftr-logo img{opacity:1}
}

/* Aire en bandas oscuras */
/* La caja interior de la banda de leyes la dibuja la regla legacy de style.css
   .law{padding:1.2rem 1.3rem;border-left:2px solid var(--cyan-bright);background:#ffffff0b}
   aplicada sobre div.wrap.law (front-page.php y parts/page-15.php). Se respeta el fondo y la
   línea de acento; solo se corrige el aire interior. .atk (bandas de cierre de servicio) y
   .close-r (columna derecha de las cajas de cierre) tenían el contenido a menos de 40px. */
.it .law,.it .atk{padding:64px 72px}
.it .close-r>div{padding:28px 72px 28px 36px}
@media (max-width:980px){
.it .law,.it .atk{padding:48px 40px}
.it .close-r>div{padding:28px 40px}
}
@media (max-width:640px){
.it .law,.it .atk{padding:36px 24px}
.it .close-r>div{padding:24px}
}

/* Índice en caja y volver */

/* Navegación de vuelta: scroll suave y aire bajo el header fijo para los destinos del índice. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.it [id]{scroll-margin-top:96px}

/* El índice (.toc) como rectángulo cerrado con marcas de esquina, igual que .hero-model.
   La última fila ya no lleva borde inferior propio (plano.css .toc a:last-child), así no se duplica. */
.it .toc{position:relative;align-self:center;margin:40px;border:1px solid var(--ln)}
.it .toc::before{content:"";position:absolute;inset:-5px;pointer-events:none;background:linear-gradient(var(--tq),var(--tq)) 0 0/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 0 0/1px 11px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 0/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 0/1px 11px no-repeat,linear-gradient(var(--tq),var(--tq)) 0 100%/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 0 100%/1px 11px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 100%/11px 1px no-repeat,linear-gradient(var(--tq),var(--tq)) 100% 100%/1px 11px no-repeat}
@media (max-width:980px){.it .toc{margin:0;border:0}.it .toc::before{content:none}}

/* Enlace de vuelta al índice, al pie de la columna de texto de cada sección destino. */
.it .to-top{display:inline-flex;margin-top:28px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tqd);text-decoration:none}
.it .to-top:hover{text-decoration:underline}
.it .dark .to-top{color:var(--tq)}

/* Volver al índice después de un botón: va en su propia línea, debajo del botón. */
.it .btn + .to-top{display:flex;width:max-content;margin-top:28px}

/* Barrido en botones */

/* Mismo lenguaje del logo del footer (ftr-logo-sweep): barrido de 7s ease-in-out infinite
   alternate, acelerando a 2.5s en hover. El !important gana a la regla de arriba
   .it .btn[class*="btn-"]{animation:none!important} por ir despues con la misma especificidad. */
@keyframes btn-sweep{from{background-position:100% 0}to{background-position:0 0}}

/* A) Principal: reflejo de luz cruzando sobre el degradado, via ::after. */
.it .btn.btn,.it .it-f input[type=submit],.it .it-f button,.it #respond .submit{overflow:hidden}
.it .btn.btn::after,.it .it-f input[type=submit]::after,.it .it-f button::after,.it #respond .submit::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent 0%,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%,transparent 100%);background-size:300% 100%;background-repeat:no-repeat;animation:btn-sweep 7s ease-in-out infinite alternate}
.it .btn.btn:hover::after,.it .it-f input[type=submit]:hover::after,.it .it-f button:hover::after,.it #respond .submit:hover::after{animation-duration:2.5s}
/* Flecha por encima del reflejo, no velada. */
.it .btn.btn>svg{position:relative;z-index:1}

/* B) Secundario: el texto con el barrido del logo, recortado con background-clip:text. */
.it .btn.btn-ghost{background-image:linear-gradient(100deg,#0A7EA8 0%,#0A7EA8 35%,#13B6EC 50%,#0e1a1f 60%,#0A7EA8 75%,#0A7EA8 100%);background-size:300% 100%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:btn-sweep 7s ease-in-out infinite alternate!important}
/* La flecha SVG (stroke currentColor) necesita color propio: con el texto transparent quedaria invisible. */
.it .btn.btn-ghost>svg{color:#0A7EA8}
/* Hover: estado solido de antes (relleno turquesa, texto blanco, sin clip). */
.it .btn.btn-ghost:hover,.it .btn.btn-ghost:focus-visible{background:#0A7EA8;color:#fff;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;animation:none!important}
.it .btn.btn-ghost:hover>svg,.it .btn.btn-ghost:focus-visible>svg{color:#fff}
/* Fondos oscuros: blanco en lugar de #0A7EA8 en el degradado. */
.it .dark .btn.btn-ghost,.it .model-foot .btn.btn-ghost{color:transparent;background-image:linear-gradient(100deg,#fff 0%,#fff 35%,#13B6EC 50%,#0e1a1f 60%,#fff 75%,#fff 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text}
.it .dark .btn.btn-ghost>svg,.it .model-foot .btn.btn-ghost>svg{color:#fff}
.it .dark .btn.btn-ghost:hover,.it .model-foot .btn.btn-ghost:hover{background:#fff;color:var(--dark);background-image:none;-webkit-background-clip:border-box;background-clip:border-box;animation:none!important}
.it .dark .btn.btn-ghost:hover>svg,.it .model-foot .btn.btn-ghost:hover>svg{color:var(--dark)}

/* D) Botones de un mismo grupo desfasados, para que no destellen a la vez. */
.it .btn+.btn::after{animation-delay:1.2s}
.it .btn+.btn.btn-ghost{animation-delay:1.2s}

/* C) Movimiento reducido: sin animacion, colores solidos. */
@media (prefers-reduced-motion:reduce){
.it .btn.btn::after,.it .it-f input[type=submit]::after,.it .it-f button::after,.it #respond .submit::after{animation:none!important;background:none}
.it .btn.btn-ghost,.it .dark .btn.btn-ghost,.it .model-foot .btn.btn-ghost{animation:none!important;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:#0A7EA8}
.it .dark .btn.btn-ghost,.it .model-foot .btn.btn-ghost{color:#fff}
.it .btn.btn-ghost>svg{color:inherit}
.it .btn+.btn::after,.it .btn+.btn.btn-ghost{animation-delay:0s}
}

/* Títulos en móvil */
/* Los clamp de plano.css (h1 40-66px, h2 32-52px) partían o tocaban el borde a 375px.
   Cálculo: contenido útil 327px (375 - 2×24px de padding, ya vigente en móvil).
   Palabra más larga "Ciberseguridad" (14 car): 14×(0.62-0.03)em=8.26em → h1 a 8.6vw
   (32.25px) = 266px, "infraestructura" (15) = 285px; h2 a 7vw (26.25px) = 217px. Todas caben.
   hyphens:auto con lang="es" parte con guion sin abrir palabras; break-word solo es red
   de seguridad para palabras sin diccionario. home.css no está encolado, .it cubre la home. */
@media (max-width:640px){
.it .hero h1,.it.it-svc .hero h1,.it .g-head h1{
font-size:clamp(30px,8.6vw,38px);letter-spacing:-.03em;
hyphens:auto;overflow-wrap:break-word}
.it .sec-head h2,.it .cto h2,.it .law h2,.it .atk h2,.it .about-l h2,.it .close-l h2{
font-size:clamp(24px,7vw,30px);
hyphens:auto;overflow-wrap:break-word}
}

/* Botones como el logo */

/* Mismo degradado exacto del logo del footer (ftr-logo-sweep): base casi negra #083a4d con el
   barrido turquesa crujiéndola por encima. El !important en animation gana a
   .it .btn[class*="btn-"]{animation:none!important} por ir después con la misma especificidad
   (igual que hacía el bloque de reflejo). btn-sweep ya existe: background-position 100%→0.
   Bandas oscuras del tema: .dark, .law, .atk, .close, .model-foot. */

/* A) Principal: el barrido ES el fondo (antes era un reflejo ::after sobre degradado turquesa).
   El texto blanco se lee también cuando pasa el turquesa: text-shadow sutil de la propia base. */
.it .btn.btn,.it .it-f input[type=submit],.it .it-f button,.it #respond .submit{
background:linear-gradient(100deg,#083a4d 0%,#083a4d 35%,#0c8ab6 50%,#0b6887 60%,#083a4d 75%,#083a4d 100%);
background-size:300% 100%;background-repeat:no-repeat;
animation:btn-sweep 7s ease-in-out infinite alternate!important;
color:#fff;text-shadow:0 0 1px rgba(14,26,31,.35);border:1px solid #083a4d}
/* El reflejo blanco ::after ya sobra: el barrido es el propio fondo. */
.it .btn.btn::after,.it .it-f input[type=submit]::after,.it .it-f button::after,.it #respond .submit::after{content:none}
/* Hover: solo acelera a 2.5s; sin desplazamiento de background-position que choque con la
   animación (la animación manda sobre background-position, así que no hay conflicto visual).
   La flecha sigue avanzando 4px con la regla de .it .btn:hover svg de arriba. */
.it .btn.btn:hover,.it .btn.btn:focus-visible,
.it .it-f input[type=submit]:hover,.it .it-f button:hover,.it #respond .submit:hover{animation-duration:2.5s;color:#fff}

/* B) Secundario: base #083a4d con el barrido del logo recortado en el texto; borde de la misma
   base. La animation:btn-sweep !important ya la pone el bloque de arriba; solo se cambian color. */
.it .btn.btn-ghost{border-color:#083a4d;
background-image:linear-gradient(100deg,#083a4d 0%,#083a4d 35%,#0c8ab6 50%,#0b6887 60%,#083a4d 75%,#083a4d 100%)}
.it .btn.btn-ghost>svg{color:#083a4d}
/* Hover: relleno de la base, texto blanco sólido (el background shorthand resetea clip/barrido). */
.it .btn.btn-ghost:hover,.it .btn.btn-ghost:focus-visible{background:#083a4d;color:#fff}
.it .btn.btn-ghost:hover>svg,.it .btn.btn-ghost:focus-visible>svg{color:#fff}

/* C) Sobre bandas oscuras el principal usa la misma fórmula con base #0a7ea8 y borde #13b6ec,
   para que el casi negro no desaparezca; el secundario va con base blanca y barrido turquesa. */
.it .dark .btn.btn,.it .law .btn.btn,.it .atk .btn.btn,.it .close .btn.btn,.it .model-foot .btn.btn,
.it .dark .it-f input[type=submit],.it .dark .it-f button,.it .dark #respond .submit{
background:linear-gradient(100deg,#083a4d 0%,#083a4d 35%,#0c8ab6 50%,#0b6887 60%,#083a4d 75%,#083a4d 100%);
border-color:#13b6ec}
.it .dark .btn.btn-ghost,.it .law .btn.btn-ghost,.it .atk .btn.btn-ghost,.it .close .btn.btn-ghost,.it .model-foot .btn.btn-ghost{
border-color:#fff;
background-image:linear-gradient(100deg,#fff 0%,#fff 35%,#13b6ec 50%,#0a8bb8 60%,#fff 75%,#fff 100%)}
.it .dark .btn.btn-ghost>svg,.it .law .btn.btn-ghost>svg,.it .atk .btn.btn-ghost>svg,.it .close .btn.btn-ghost>svg,.it .model-foot .btn.btn-ghost>svg{color:#fff}
/* Hover del secundario sobre oscuro: relleno blanco, texto oscuro (gana al hover claro por
   especificidad). */
.it .dark .btn.btn-ghost:hover,.it .law .btn.btn-ghost:hover,.it .atk .btn.btn-ghost:hover,.it .close .btn.btn-ghost:hover,.it .model-foot .btn.btn-ghost:hover{background:#fff;color:var(--dark)}
.it .dark .btn.btn-ghost:hover>svg,.it .law .btn.btn-ghost:hover>svg,.it .atk .btn.btn-ghost:hover>svg,.it .close .btn.btn-ghost:hover>svg,.it .model-foot .btn.btn-ghost:hover>svg{color:var(--dark)}

/* D) Segundo botón del grupo desfasado 1.2s. Lleva !important porque el animation:...!important
   de arriba (shorthand) reinicia animation-delay y ganaría sin él. */
.it .btn+.btn,.it .btn+.btn.btn-ghost{animation-delay:1.2s!important}

/* Movimiento reducido: sin animación, colores sólidos (claro #083a4d, oscuro #0a7ea8). */
@media (prefers-reduced-motion:reduce){
.it .btn.btn,.it .it-f input[type=submit],.it .it-f button,.it #respond .submit{animation:none!important;background:#083a4d;color:#fff;border-color:#083a4d;text-shadow:none}
.it .dark .btn.btn,.it .law .btn.btn,.it .atk .btn.btn,.it .close .btn.btn,.it .model-foot .btn.btn{
background:#0a7ea8;border-color:#13b6ec}
.it .btn.btn-ghost{animation:none!important;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:#083a4d;border-color:#083a4d}
.it .btn.btn-ghost>svg{color:inherit}
.it .dark .btn.btn-ghost,.it .law .btn.btn-ghost,.it .atk .btn.btn-ghost,.it .close .btn.btn-ghost,.it .model-foot .btn.btn-ghost{animation:none!important;background-image:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;border-color:#fff}
.it .btn+.btn,.it .btn+.btn.btn-ghost{animation-delay:0s!important}
}

/* Secondary button: logo sweep clipped to the text (outranks the primary's fill above). */
.it .btn.btn-ghost:not(:hover):not(:focus-visible){-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
.it :is(.dark,.law,.atk,.close,.model-foot) .btn.btn-ghost:not(:hover):not(:focus-visible){background-image:linear-gradient(100deg,#fff 0%,#fff 35%,#13b6ec 50%,#0a8bb8 60%,#fff 75%,#fff 100%)!important}
.it .btn.btn-ghost:is(:hover,:focus-visible){-webkit-text-fill-color:#fff!important}
.it :is(.dark,.law,.atk,.close,.model-foot) .btn.btn-ghost:is(:hover,:focus-visible){-webkit-text-fill-color:var(--dark)!important}
@media (prefers-reduced-motion:reduce){.it .btn.btn-ghost:not(:hover):not(:focus-visible){-webkit-background-clip:border-box!important;background-clip:border-box!important;background-image:none!important;color:#083a4d!important;-webkit-text-fill-color:#083a4d!important}}
/* Every button sweeps: some variants reset background-size via the shorthand. */
.it .btn,.it .btn.btn-ghost,.it .it-f [type=submit],.it #respond .submit{background-size:300% 100%!important}
/* .finds grids wrap to several rows: each cell draws its right/bottom line, the frame draws top/left. */
.it .finds,.it .flow{border:0;border-top:1px solid var(--ln);border-left:1px solid var(--ln)}
.it .finds>div,.it .finds>div+div,.it .flow>div,.it .flow>div+div{border:0;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln)}
/* 4 items read better as 2x2 than as 3+1. */
@media (min-width:641px){.it .finds:has(>div:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Hero sections: clip only sideways (decorative circles); keep the bottom corner marks of .frame and leave room before the next section. */
.it .hero,.it .hero-g,.it.it-svc .hero{overflow-x:clip;overflow-y:visible;padding-bottom:40px}
@media (max-width:640px){.it .hero,.it .hero-g,.it.it-svc .hero{padding-bottom:28px}}


/* Home: Desde el lab, serie viva */
.it .lab-serie{background:#fff}
.it .lab-serie-head,.it .lab-serie-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding:18px 28px;font-size:12px;letter-spacing:.08em;color:var(--mut)}
.it .lab-serie-head{border-bottom:1px solid var(--ln)}
.it .lab-serie-foot{border-top:1px solid var(--ln);letter-spacing:.02em}
.it .lab-serie-tag{display:inline-flex;align-items:center;gap:10px;color:var(--tqd);font-weight:500}
.it .lab-dot{display:inline-block;width:8px;height:8px;background:var(--tq)}
.it .lab-serie-upd{text-transform:uppercase}
.it .lab-serie-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.it .lab-card{display:flex;flex-direction:column;gap:14px;padding:32px 28px;border-top:2px solid transparent;color:inherit;text-decoration:none;transition:background .2s}
.it .lab-card+.lab-card{border-left:1px solid var(--ln)}
.it .lab-card.is-new{border-top-color:var(--tq)}
.it .lab-card:is(:hover,:focus-visible){background:var(--soft)}
.it .lab-card-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.it .lab-card-date{font-size:12px;color:var(--tqd)}
.it .lab-card-st{padding:5px 8px;border:1px solid var(--tq);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tqd)}
.it .lab-card h3{font-size:20px;line-height:1.3;color:var(--ink)}
.it .lab-card p{font-size:14.5px;line-height:1.6;color:var(--mut)}
.it .lab-card-go{margin-top:auto}
.it .lab-card-go svg{width:16px;height:16px;transition:transform .2s}
.it .lab-card:is(:hover,:focus-visible) .lab-card-go svg{transform:translateX(4px)}
@media (max-width:980px){.it .lab-serie-grid{grid-template-columns:minmax(0,1fr)}.it .lab-card+.lab-card{border-left:0;border-top:1px solid var(--ln)}}
@media (max-width:640px){.it .lab-wrap{width:calc(100% - 32px)}.it .lab-serie-head,.it .lab-serie-foot{padding:16px}.it .lab-card{padding:24px 16px}}
.it .lab-card{background:#fff}
/* Archive lists: .frame and .lab-list are the same element, so the padding rule needs both classes on one node. */
.it .frame.lab-list{padding:16px 40px}
@media (max-width:640px){.it .frame.lab-list{padding:8px 20px}}

/* Category blocks on the lab pages are links now. */
.it .sectors a{display:block;color:inherit;text-decoration:none;transition:background .2s}
.it .sectors a:is(:hover,:focus-visible){background:var(--soft)}
.it .sectors a{padding:26px 28px;border-bottom:1px solid var(--ln);font-size:15px;color:var(--ink);font-weight:400}
.it .sectors a:nth-child(odd){border-right:1px solid var(--ln)}
@media (max-width:980px){.it .sectors a{border-right:0!important}}
/* Post header: category as a visible blue tag, with room below the date line. */
.it .g-head .post-meta-line{margin:0 0 22px}
.it .g-head .post-meta-line a{display:inline-block;padding:5px 10px;background:var(--tq);color:#fff;text-decoration:none;letter-spacing:.08em}
.it .g-head .post-meta-line a:is(:hover,:focus-visible){background:var(--tqd)}

/* Desde el lab / From the lab y categorías: informes destacados (is-informe/is-tabla), artículos y noticias en rejilla ligera, paginación. Marcado en parts/lab-publicaciones.php, archive.php e itlab_next_lab_card(). */
.it .lab-pubs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:0;border-top:1px solid var(--ln);border-left:1px solid var(--ln)}
.it .lab-item{display:flex;flex-direction:column;gap:12px;min-width:0;padding:28px;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln);color:inherit;text-decoration:none;transition:background .2s}
.it .lab-item:is(:hover,:focus-visible){background:var(--soft)}
.it .lab-item-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;font-size:12px;color:var(--tqd)}
.it .lab-item-type{letter-spacing:.08em;text-transform:uppercase}
.it .lab-item-title{font-size:19px;line-height:1.3;overflow-wrap:anywhere}
.it .lab-item p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mut)}
.it .lab-item-go{margin-top:auto;padding-top:4px}
.it .lab-item-go svg{width:16px;height:16px;transition:transform .2s}
.it .lab-item:is(:hover,:focus-visible) .lab-item-go svg{transform:translateX(4px)}
/* Informes: piezas de referencia. Dos columnas, fondo blanco, filete superior turquesa, etiqueta llena y número grande. */
.it .lab-pubs-ref{grid-template-columns:repeat(2,minmax(0,1fr))}
.it .lab-item:is(.is-informe,.is-tabla){gap:14px;padding:36px 32px;background:#fff;box-shadow:inset 0 3px 0 var(--tq)}
.it .lab-item:is(.is-informe,.is-tabla):is(:hover,:focus-visible){background:var(--soft)}
.it .lab-item:is(.is-informe,.is-tabla) .lab-item-type{padding:5px 8px;background:var(--tqd);color:#fff}
.it .lab-item:is(.is-informe,.is-tabla) .lab-item-title{font-size:23px}
.it .lab-item-num{font:500 44px/1 "IBM Plex Mono",monospace;letter-spacing:-.04em;color:var(--tq)}
/* Artículos y noticias: etiqueta con borde fino, sin relleno. */
.it .lab-item:is(.is-articulo,.is-pagina,.is-noticia) .lab-item-type{padding:4px 7px;border:1px solid var(--ln)}
.it .lab-pager-note{margin:-32px 0 16px;font-size:12px;color:var(--mut)}
.it .lab-more{display:flex;flex-wrap:wrap;gap:8px 24px;margin:24px 0 0;padding:0;list-style:none;font-size:13px}
.it .lab-more a{color:var(--tqd)}
.it .pagination .page-numbers.dots{border-color:transparent}
@media (max-width:980px){.it .lab-pubs{grid-template-columns:repeat(2,minmax(0,1fr))}.it .lab-pager-note{margin-top:-24px}}
@media (max-width:640px){.it .lab-pubs,.it .lab-pubs-ref{grid-template-columns:minmax(0,1fr)}.it .lab-item{padding:24px 18px}.it .lab-item:is(.is-informe,.is-tabla){padding:28px 18px}.it .lab-item:is(.is-informe,.is-tabla) .lab-item-title{font-size:20px}.it .lab-item-num{font-size:36px}}

/* Selector de idioma ES | EN (cajita del encabezado). */
.it .lang-toggle,.site-header .lang-toggle{display:inline-flex;align-items:stretch;border:1px solid var(--ln,rgba(19,182,236,.28));font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;margin-left:auto;flex:none}
.lang-toggle a,.lang-toggle span{display:block;padding:9px 11px;color:var(--tqd,#0a7ea8);text-decoration:none}
.lang-toggle a:hover{background:var(--soft,#f6fafc)}
.lang-toggle [aria-current=true]{background:var(--ink,#0f1b20);color:#fff}

/* Móvil: botón de menú centrado entre logo y selector de idioma. */
@media (max-width:980px){.site-header .header-row{position:relative}.site-header .menu-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}}

/* Menú: letras más pequeñas y espaciado más ajustado. */
.site-header .primary-nav > ul.menu > li > a,.site-header .primary-nav summary{font-size:12px!important;letter-spacing:0!important}
.site-header .primary-nav .service-submenu a{font-size:12px!important;letter-spacing:0!important}

/* Llamada a la acción sin panel lateral (Desde el lab). */
.it .close.close-solo{grid-template-columns:minmax(0,1fr)}
.it .close.close-solo .close-l{border-right:0}

/* Cómo trabajamos: texto más claro sobre las tarjetas oscuras, para mejorar el contraste. */
.it .step h3{color:#fff}
.it .step p{color:#d4e2e6}
.it .step p.step-out{color:#fff;border-top-color:rgba(127,216,234,.45)}
.it .step-out span{color:#7fd8ea}

/* Hero: título principal más pequeño en escritorio y tarjeta de la derecha centrada en su columna. */
@media (min-width:641px){.it .hero h1,.it.it-svc .hero h1,.it-home .hero h1{font-size:clamp(38px,4vw,54px)}}
@media (min-width:981px){.it .hero-model{margin:0;align-self:center;justify-self:center;width:min(100% - 80px,480px)}}
@media (min-width:981px){.it .hero-grid{column-gap:0}.it .hero-copy{max-width:none;align-self:stretch}}

/* Paginación del listado: un solo marco, sin cajas dentro de cajas. */
.it .navigation.pagination,.it .pagination .nav-links{border:0;padding:0;margin:0;background:none}
.it .pagination .page-numbers span{border:0;padding:0;margin:0;background:none}
.it .pagination .page-numbers.prev,.it .pagination .page-numbers.next{gap:8px}

/* Pie: línea de países bajo la descripción de ITLAB. */
.it-ftr .ftr-main p.ftr-atiende{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:none;margin:14px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;line-height:1.4;letter-spacing:0;text-transform:uppercase;color:#52656d}
.it-ftr .ftr-atiende .ftr-flag{width:auto;height:12px;flex:none;border:1px solid rgba(15,27,32,.12)}

/* Mosaico Desde el lab del home: filete horizontal entre filas. */
.it .lab-serie-grid .lab-card{border-bottom:1px solid var(--ln)}

/* Paginación del listado Desde el lab: separación respecto al marco de artículos. */
#articulos .pagination{margin-top:56px}

/* Aviso de idioma (solo ES, para navegador en inglés). */
.lang-hint{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:0;padding:12px 20px;background:var(--soft,#f6fafc);border-bottom:1px solid var(--ln,rgba(19,182,236,.28));font:400 14px/1.5 "Merriweather Sans",system-ui,sans-serif;color:var(--ink,#0f1b20)}
.lang-hint[hidden]{display:none}
.lang-hint p{margin:0}
.lang-hint-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.lang-hint a{color:var(--tqd,#0a7ea8);font-weight:600}
.lang-hint button{background:none;border:0;padding:0;font:inherit;color:var(--mut,#66767d);text-decoration:underline;cursor:pointer}

/* Links legales del footer: separación entre enlaces (se imprimen pegados sin esto). */
.it-ftr .ftr-legal{display:flex;flex-wrap:wrap;gap:8px 28px}