/* InfObradoiro — hoja de estilo única.
   Concepto: foto de CPD a sangre en la portada; el resto, papel frío y tinta azul noche,
   con etiquetas en monoespaciada como las de un rack. Un solo aspecto (no cambia con el tema del sistema). */

@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-var.woff2") format("woff2"); font-weight: 200 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  /* Color */
  --noche: #0b1520;        /* tinta azul noche: cabecera, pie, fondos oscuros */
  --noche-2: #13212f;
  --papel: #f2f5f7;        /* fondo general, gris frío */
  --blanco: #ffffff;
  --tinta: #15212c;        /* texto */
  --gris: #586878;         /* texto secundario */
  --linea: #d6dee5;
  --azul: #2a5d8a;         /* azul de la marca (el del cloud) */
  --led: #7cc0ff;          /* azul LED, solo sobre oscuro */
  --whatsapp: #1f8f4e;
  /* Tipo */
  --f-titular: "Montserrat", "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
  --f-texto: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-etiqueta: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* Escala */
  --t-xs: 0.78rem; --t-s: 0.9rem; --t-m: 1.0625rem; --t-l: 1.35rem; --t-xl: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); --t-xxl: clamp(2.4rem, 1.2rem + 4.8vw, 5.6rem);
  --ancho: 160rem;
  --margen: clamp(1rem, 5vw, 7rem);
  --sangria-seccion: clamp(4rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-texto); font-size: var(--t-m); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--led); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-titular); font-weight: 300; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
p { margin: 0; }
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.saltar { position: absolute; left: -999px; top: 0; background: var(--blanco); color: var(--tinta); padding: 0.6rem 1rem; z-index: 100; }
.saltar:focus { left: 1rem; top: 1rem; }
.etiqueta { font-family: var(--f-etiqueta); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }

/* Cabecera */
.cabecera { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background-color .35s ease, box-shadow .35s ease; }
.cabecera.solida, .cabecera.siempre-solida { background: rgba(11, 21, 32, 0.92); box-shadow: 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.logo { display: block; flex-shrink: 0; }
.logo img { width: clamp(8.5rem, 7rem + 5vw, 13rem); }
.menu { display: flex; align-items: center; gap: clamp(0.75rem, 2.5vw, 2rem); }
.menu a { color: #e8eef4; text-decoration: none; font-family: var(--f-titular); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.menu a:hover { color: var(--blanco); text-decoration: underline; }
.menu .boton-soporte { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid rgba(255,255,255,.7); padding: 0.55rem 1rem; color: var(--blanco); }
.menu .boton-soporte:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.menu .boton-soporte .punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #5fe08f; box-shadow: 0 0 0 3px rgba(95,224,143,.18); }
@media (max-width: 40rem) { .menu .secundario { display: none; } }

/* Portada */
.portada { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: var(--blanco); background: var(--noche); overflow: hidden; isolation: isolate; }
/* Portada: cuatro fotos a página completa que se funden despacio (28 s el ciclo, 7 s cada una). La primera está visible en reposo. */
.diapositivas { position: absolute; inset: 0; z-index: -2; }
.diapo { position: absolute; inset: 0; opacity: 0; animation: diapo 28s linear infinite; }
.diapo:nth-child(1) { opacity: 1; animation-delay: -1.2s; }
.diapo:nth-child(2) { animation-delay: 5.8s; }
.diapo:nth-child(3) { animation-delay: 12.8s; }
.diapo:nth-child(4) { animation-delay: 19.8s; }
.diapo .foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@keyframes diapo {
  0%    { opacity: 0; transform: scale(1.08); }
  4.5%  { opacity: 1; }
  25%   { opacity: 1; }
  29.5% { opacity: 0; transform: scale(1); }
  100%  { opacity: 0; transform: scale(1); }
}

.portada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,21,32,.55) 0%, rgba(11,21,32,0) 30%, rgba(11,21,32,.15) 55%, rgba(11,21,32,.8) 100%); }
.portada .envoltura { padding-block: 8rem clamp(3rem, 8vh, 6rem); display: grid; gap: 1.5rem; }
.portada .etiqueta { color: var(--led); }
/* Lemas: uno por foto, con el mismo ritmo que las diapositivas. */
.lemas { display: grid; }
.lema { grid-area: 1 / 1; align-self: end; display: grid; gap: 1.5rem; opacity: 0; animation: lema 28s linear infinite; }
.lema:nth-child(1) { opacity: 1; animation-delay: -1.2s; }
.lema:nth-child(2) { animation-delay: 5.8s; }
.lema:nth-child(3) { animation-delay: 12.8s; }
.lema:nth-child(4) { animation-delay: 19.8s; }
.lema-titulo { margin: 0; font-family: var(--f-titular); font-size: var(--t-xxl); font-weight: 200; line-height: 1.15; letter-spacing: -0.015em; max-width: 13em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.lema-largo { font-size: clamp(2rem, 1rem + 3.6vw, 4.4rem); max-width: none; }
/* Carrusel con JavaScript (web.js añade .con-js): las fotos cambian solas y también con las rayitas o deslizando el dedo.
   Sin JavaScript se queda la animación de CSS de arriba. */
.indicadores { display: none; gap: .4rem; position: absolute; z-index: 1; right: var(--margen); bottom: clamp(3rem, 8vh, 6rem); }
@media (max-width: 40rem) { .indicadores { right: var(--margen); bottom: 1.25rem; } }
.indicadores button { width: 1.75rem; height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.indicadores span { position: relative; display: block; width: 100%; height: 1.5px; background: rgba(255,255,255,.35); overflow: hidden; }
.indicadores span::after { content: ""; position: absolute; inset: 0; background: var(--blanco); transform: scaleX(0); transform-origin: left; }
.indicadores .activo span::after { animation: progreso 7s linear forwards; }
.indicadores .activo.quieto span::after { animation: none; transform: none; }
.indicadores button:focus-visible { outline: 2px solid var(--blanco); outline-offset: 2px; }
@keyframes progreso { to { transform: none; } }
.con-js .indicadores { display: flex; }
.con-js .diapo { animation: none; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 8.5s linear; }
.con-js .diapo.activa { opacity: 1; transform: none; }
.con-js .lema { animation: none; opacity: 0; transform: translateY(.6rem); transition: opacity .9s ease, transform .9s ease; visibility: hidden; }
.con-js .lema.activa { opacity: 1; transform: none; visibility: visible; }
@keyframes lema {
  0%    { opacity: 0; transform: translateY(.6rem); }
  4.5%  { opacity: 1; transform: none; }
  25%   { opacity: 1; }
  29.5% { opacity: 0; }
  100%  { opacity: 0; }
}
.portada .entrada { font-size: var(--t-l); font-weight: 300; color: #e3ebf2; max-width: 72rem; line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3rem; padding: 0.75rem 1.4rem; border-radius: 999px; font: 500 var(--t-s)/1 var(--f-texto); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s; }
.boton-marco { border: 1px solid var(--blanco); border-radius: 0; color: var(--blanco); font-family: var(--f-titular); letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; padding-inline: 1.8rem; }
.boton-marco:hover { background: var(--blanco); color: var(--noche); }
.boton-claro { background: var(--blanco); color: var(--noche); }
.boton-claro:hover { background: #dbe8f3; }
.boton-linea { border-color: rgba(255,255,255,.55); color: var(--blanco); }
.boton-linea:hover { background: rgba(255,255,255,.1); }
.boton-azul { background: var(--azul); color: var(--blanco); }
.boton-azul:hover { background: #224c72; }

/* Secciones */
.seccion { padding-block: var(--sangria-seccion); }
.cabeza-seccion { display: grid; gap: 0.9rem; max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.centrada { margin-inline: auto; text-align: center; justify-items: center; }
.centrada h2::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--azul); margin: 1.1rem auto 0; }
.cabeza-seccion h2 { font-size: var(--t-xl); }
.cabeza-seccion p { color: var(--gris); }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(19rem, 30%)), 1fr)); border-top: 1px solid var(--linea); }
.servicio { display: grid; grid-template-rows: auto auto 1fr; gap: 0.75rem; padding: 2rem 2rem 2.25rem 0; border-bottom: 1px solid var(--linea); min-width: 0; }
.servicio .u { font-family: var(--f-etiqueta); font-size: var(--t-xs); color: var(--azul); letter-spacing: 0.1em; }
.servicio h3 { font-size: 1.45rem; }
.servicio p { color: var(--gris); font-size: var(--t-s); line-height: 1.65; max-width: 30rem; }

/* Banda de empresa */
.empresa { background: var(--noche); color: #dbe5ee; position: relative; overflow: hidden; isolation: isolate; }
.empresa .fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.empresa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,21,32,.97) 0%, rgba(11,21,32,.85) 45%, rgba(11,21,32,.35) 100%); }
.empresa .envoltura { display: grid; gap: 1.5rem; }
.empresa .etiqueta { color: var(--led); }
.empresa h2 { font-size: var(--t-xl); color: var(--blanco); max-width: 16em; }
.empresa .texto { display: grid; gap: 1rem; max-width: 38rem; }
.datos-empresa { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-family: var(--f-etiqueta); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: #9fb4c6; }
.datos-empresa li { display: flex; gap: 0.6rem; align-items: baseline; }
.datos-empresa strong { color: var(--blanco); font-weight: 500; }

/* Contacto */
.contacto-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.dato { background: var(--blanco); padding: 1.75rem; display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.dato .valor { font-family: var(--f-titular); font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.4rem); color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; line-height: 1.3; }
a.valor:hover { color: var(--azul); }
.dato .nota { color: var(--gris); font-size: var(--t-s); }
.dato address { font-style: normal; }
.mapa { margin-top: 0.25rem; font-size: var(--t-s); }

/* Pie */
.pie { background: var(--noche); color: #9fb4c6; font-size: var(--t-s); padding-block: 3rem calc(3rem + env(safe-area-inset-bottom, 0px)); }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.pie img { width: 9rem; opacity: .85; }
.pie a { color: #dbe5ee; }
.pie nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Soporte */
.portada-soporte { position: relative; color: var(--blanco); background: var(--noche); overflow: hidden; isolation: isolate; }
.portada-soporte .foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.portada-soporte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,21,32,.45), rgba(11,21,32,.82)); }
.portada-soporte .envoltura { padding-block: 9rem 4rem; display: grid; gap: 1.1rem; }
.portada-soporte .etiqueta { color: var(--led); }
.portada-soporte h1 { font-size: var(--t-xxl); font-weight: 200; }
.portada-soporte p { color: #d5e0ea; font-size: var(--t-l); font-weight: 300; max-width: 36rem; }

.canales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-top: -2.5rem; position: relative; }
.canal { background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 1.6rem; display: grid; gap: 0.6rem; align-content: start; box-shadow: 0 18px 40px -28px rgba(11,21,32,.45); min-width: 0; }
.canal .valor { font-family: var(--f-titular); font-size: 1.35rem; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; line-height: 1.25; }
.canal a.valor:hover { color: var(--azul); }
.canal .nota { color: var(--gris); font-size: var(--t-s); }
.canal .enlace-whatsapp { color: var(--whatsapp); font-weight: 500; font-size: var(--t-s); }

.remoto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; counter-increment: paso; }
.pasos li::before { content: counter(paso); font-family: var(--f-etiqueta); font-size: var(--t-s); color: var(--azul); border: 1px solid var(--linea); border-radius: 50%; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--blanco); }
.pasos h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.pasos p { color: var(--gris); font-size: var(--t-s); }

.conectar { background: var(--noche); color: #dbe5ee; border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.1rem; min-width: 0; }
.conectar h2 { color: var(--blanco); font-size: 1.7rem; }
.conectar label { font-family: var(--f-etiqueta); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--led); }
.campo { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.campo input { flex: 1 1 12rem; min-width: 0; min-height: 3.25rem; border-radius: 10px; border: 1px solid #3a4f63; background: var(--noche-2); color: var(--blanco); font: 500 1.5rem/1 var(--f-etiqueta); letter-spacing: .25em; text-align: center; padding: 0.5rem 1rem; }
.campo input::placeholder { color: #5f7488; letter-spacing: .1em; font-size: 1.1rem; }
.campo .boton { flex: 0 0 auto; }
.aviso { font-size: var(--t-s); min-height: 1.5em; }
.aviso.error { color: #ffb4a8; }
.aviso a { color: var(--led); }
.conectar .alternativa { border-top: 1px solid #263646; padding-top: 1.1rem; font-size: var(--t-s); color: #9fb4c6; display: grid; gap: 0.75rem; }
.conectar .alternativa .boton { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .diapo { animation: none; }
  .portada:not(.con-js) .diapo:nth-child(n+2) { display: none; }
  .lema { animation: none; }
  .portada:not(.con-js) .lema:nth-child(n+2) { display: none; }
  * { transition: none !important; }
}
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Páginas legales */
.legal { padding-block: 8rem 5rem; background: var(--blanco); }
.texto-legal { max-width: 48rem; display: grid; gap: 1rem; }
.texto-legal h1 { font-size: var(--t-xl); margin-bottom: 0.25rem; }
.texto-legal h2 { font-size: 1.35rem; margin-top: 1.5rem; }
.texto-legal p, .texto-legal li, .texto-legal dd { color: #2f3d4a; }
.texto-legal ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.actualizado { font-family: var(--f-etiqueta); font-size: var(--t-xs); color: var(--gris); letter-spacing: .06em; }
.ficha { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0.5rem 1.5rem; margin: 0; padding: 1.25rem; background: var(--papel); border: 1px solid var(--linea); }
.ficha dt { font-family: var(--f-etiqueta); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--gris); padding-top: 0.2rem; }
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .ficha { grid-template-columns: 1fr; } .ficha dd { margin-bottom: 0.5rem; } }
.tabla-datos { width: 100%; border-collapse: collapse; font-size: var(--t-s); display: block; overflow-x: auto; }
.tabla-datos th, .tabla-datos td { text-align: left; vertical-align: top; padding: 0.75rem; border-bottom: 1px solid var(--linea); min-width: 9rem; }
.tabla-datos th { font-family: var(--f-etiqueta); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); font-weight: 500; }
mark.pendiente { background: #fff1a8; color: #5a4a00; padding: 0 0.25rem; }
.nota-privacidad { margin-top: 1.5rem; font-size: var(--t-xs); color: var(--gris); max-width: 52rem; line-height: 1.6; }
.nota-remoto { font-size: var(--t-xs); color: #9fb4c6; margin-top: 0.75rem; }
.nota-remoto a { color: var(--led); }
.legal-enlaces { width: 100%; display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: var(--t-xs); }