/* =============================================================================
   MNFweb / wwwroot / css / sitio.css                                    (p001)

   LA HOJA DE PLANO. Toda la web se dibuja como una hoja de ingeniería: papel
   milimetrado en la portada, un cajetín (el recuadro de datos de cada plano)
   con la hoja, la revisión y la fecha, y un color por área, como se rotulan
   las tuberías de una planta:
     naranja  → Ingeniería e instalaciones (la que manda: va primero y más grande)
     azul     → Tecnología, datos e IA
     verde    → Ingeniería biomédica
   Fuente: Archivo (variable en anchura y peso), autoalojada en /fonts. Sin
   nada de fuera (CSP, como GetTest). Si la fuente no está, el sistema.
   ============================================================================= */

:root {
    --papel: #EEF0EC;
    --papel-2: #E2E7E2;
    --hoja: #F7F8F5;
    --tinta: #16212B;
    --tinta-2: #46545F;
    --linea: #B7C1BB;
    --rejilla: rgba(22, 33, 43, .06);
    --naranja: #E8590C;
    --naranja-suave: #FBE3D4;
    --azul: #2450B8;
    --azul-suave: #DCE5F7;
    --verde: #127A6A;
    --verde-suave: #D4EDE8;
    --sobre-color: #FFFFFF;
    --sombra: 0 1px 0 var(--linea);
    --radio: 3px;
    --ancho: 1180px;
    --letra: "Archivo", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    color-scheme: light;
}
/* p042 — SIEMPRE EN CLARO (propietario, 06/10): en oscuro, los logos oscuros del
   plano (OpenAI, Grok, Oracle, AEAT…) casi no se ven. Fuera la paleta oscura y,
   con «only light», tampoco la oscurece el navegador por su cuenta. */
:root { color-scheme: only light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    margin: 0; background: var(--papel); color: var(--tinta);
    font-family: var(--letra); font-size: 1.0625rem; line-height: 1.6;
    font-variation-settings: "wdth" 100;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
.ancho { max-width: var(--ancho); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* §8.5 de las convenciones: párrafos justificados con partición; textos breves
   bajo un título centrado, centrados. */
.justo, .prosa p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.centro { text-align: center; }

/* ---------------------------------------------------------------- Tipografía */
h1, h2, h3, h4 { margin: 0; line-height: 1.05; font-weight: 800; letter-spacing: -.01em; }
.titular {
    font-size: clamp(2.6rem, 7.4vw, 6.2rem); font-variation-settings: "wdth" 66;
    font-weight: 850; line-height: .92; letter-spacing: -.015em; max-width: 13ch;
}
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-variation-settings: "wdth" 72; }
.h3 { font-size: 1.35rem; font-variation-settings: "wdth" 90; font-weight: 750; }
.entrada { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--tinta-2); max-width: 58ch; }
.rotulo { font-variation-settings: "wdth" 115; font-size: .82rem; font-weight: 600; color: var(--tinta-2); letter-spacing: .01em; }

/* ---------------------------------------------------------------- Botones (icono + texto) */
.btn {
    display: inline-flex; align-items: center; gap: .55em; min-height: 48px; padding: .7em 1.2em;
    border: 1.5px solid var(--tinta); border-radius: var(--radio); background: transparent; color: var(--tinta);
    font: inherit; font-weight: 650; font-variation-settings: "wdth" 96; text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s, transform .1s;
}
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn:active { transform: translateY(1px); }
.btn-pri { background: var(--naranja); border-color: var(--naranja); color: #16212B; }
.btn-pri:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.btn .ico { font-size: 1.1em; line-height: 1; }
.btn-ico { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
@media (max-width: 520px) { .btn .txt-largo { display: none; } }

/* ---------------------------------------------------------------- Cabecera */
.cabecera { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px); }
.barra { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca-sello { width: 34px; height: 34px; flex: none; }
.marca-texto { line-height: 1; font-variation-settings: "wdth" 78; font-weight: 800; font-size: 1.15rem; }
.marca-texto small { display: block; font-weight: 500; font-size: .72rem; font-variation-settings: "wdth" 112; color: var(--tinta-2); margin-top: 3px; }
.menu { display: flex; gap: 4px; }
.menu a { padding: 8px 12px; border-radius: var(--radio); text-decoration: none; font-weight: 600; font-variation-settings: "wdth" 92; font-size: .97rem; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--papel-2); }
/* p002 — por el COLOR del área (tabla Area), no por su slug: un área nueva funciona sola. */
.color-naranja { --c: var(--naranja); }
.color-azul { --c: var(--azul); }
.color-verde { --c: var(--verde); }
.menu a[data-color="naranja"] { box-shadow: inset 0 -3px 0 var(--naranja); }
.menu a[data-color="azul"] { box-shadow: inset 0 -3px 0 var(--azul); }
.menu a[data-color="verde"] { box-shadow: inset 0 -3px 0 var(--verde); }
.hamburguesa { display: none; }
.menu-movil { position: fixed; inset: 0; z-index: 40; background: var(--papel); padding: calc(20px + env(safe-area-inset-top, 0px)) 24px 24px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.menu-movil[hidden] { display: none; }
.menu-movil a { font-size: 1.6rem; font-weight: 800; font-variation-settings: "wdth" 70; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.menu-movil .cerrar { align-self: flex-end; }
@media (max-width: 980px) {
    .menu, .cabecera .btn-reserva { display: none; }
    .hamburguesa { display: inline-flex; }
}

/* ---------------------------------------------------------------- Portada: la hoja */
.hoja {
    position: relative; overflow: hidden; border-bottom: 1px solid var(--linea);
    background-color: var(--hoja);
    background-image:
        linear-gradient(var(--rejilla) 1px, transparent 1px),
        linear-gradient(90deg, var(--rejilla) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--rejilla) 60%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--rejilla) 60%, transparent) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}
.hoja-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(36px, 7vw, 88px) 0 clamp(28px, 5vw, 56px); }
.hoja-texto .entrada { margin: 22px 0 30px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.dibujo { width: 100%; height: auto; color: var(--tinta); }
.dibujo .trazo { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dibujo .fino { stroke-width: .9; opacity: .55; }
.dibujo .cota { stroke: var(--tinta-2); stroke-width: .8; fill: none; }
.dibujo .cota-txt { fill: var(--tinta-2); font: 600 11px var(--letra); font-variation-settings: "wdth" 110; }
.dibujo .ing { stroke: var(--naranja); }
.dibujo .tec { stroke: var(--azul); }
.dibujo .bio { stroke: var(--verde); }
.dibujo .relleno-ing { fill: var(--naranja); stroke: none; }
.dibujo .relleno-tec { fill: var(--azul); stroke: none; }
.dibujo .relleno-bio { fill: var(--verde); stroke: none; }
/* El único movimiento que no pide nadie: el plano se dibuja una vez al cargar. */
.dibujo.animar .trazo { stroke-dasharray: var(--l, 1200); stroke-dashoffset: var(--l, 1200); animation: trazar 2.2s cubic-bezier(.6, .1, .2, 1) forwards; animation-delay: var(--d, 0s); }
.dibujo.animar .aparece { opacity: 0; animation: aparecer .6s ease forwards; animation-delay: var(--d, 1.6s); }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dibujo.animar .trazo, .dibujo.animar .aparece { animation: none; stroke-dashoffset: 0; opacity: 1; } }
@media (max-width: 860px) { .hoja-cuerpo { grid-template-columns: 1fr; } .dibujo { max-width: 560px; margin: 0 auto; } }

/* El cajetín: la tabla de datos de cada plano. Aquí, con datos de verdad. */
.cajetin { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1.2fr; border: 1.5px solid var(--tinta); background: var(--hoja); margin-bottom: clamp(24px, 4vw, 40px); }
.cajetin > div { padding: 8px 12px; border-left: 1px solid var(--tinta); min-width: 0; }
.cajetin > div:first-child { border-left: 0; }
.cajetin dt { font-size: .7rem; font-variation-settings: "wdth" 115; color: var(--tinta-2); font-weight: 600; }
.cajetin dd { margin: 2px 0 0; font-weight: 700; font-variation-settings: "wdth" 88; font-size: .95rem; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .cajetin { grid-template-columns: 1fr 1fr; }
    .cajetin > div { border-left: 0; border-top: 1px solid var(--tinta); }
    .cajetin > div:nth-child(-n+2) { border-top: 0; }
    .cajetin > div:nth-child(even) { border-left: 1px solid var(--tinta); }
    .cajetin > div:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--tinta); }
    .cajetin > div:nth-child(2) { border-left: 0; }
    .cajetin > div:nth-child(3) { border-top: 0; border-left: 1px solid var(--tinta); }
}

/* ---------------------------------------------------------------- Secciones */
.seccion { padding: clamp(56px, 8vw, 104px) 0; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.seccion-alt { background: var(--papel-2); }
.cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.cabeza .entrada { margin: 0; }
@media (max-width: 860px) { .cabeza { grid-template-columns: 1fr; } }

/* Las tres áreas: Ingeniería ocupa el doble. */
.areas { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.area { position: relative; background: var(--hoja); border: 1px solid var(--linea); border-top: 6px solid var(--c); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.area:hover { border-color: var(--c); }
.areas .area:first-child { grid-row: span 2; }   /* p002 — la primera por Orden (Ingeniería) */
.area h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-variation-settings: "wdth" 74; }
.area .lema { margin: 0; color: var(--tinta-2); font-size: 1.05rem; }
.area ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.area li { padding: 9px 0; border-top: 1px solid var(--linea); font-weight: 600; font-variation-settings: "wdth" 92; display: flex; gap: 10px; align-items: baseline; }
.area li::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--c); transform: translateY(-1px); }
.areas .area:first-child ul { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.area .mas { margin-top: auto; font-weight: 700; display: inline-flex; gap: .5em; align-items: center; }
@media (max-width: 860px) { .areas { grid-template-columns: 1fr; } .areas .area:first-child { grid-row: auto; } }
@media (max-width: 560px) { .areas .area:first-child ul { grid-template-columns: 1fr; } }

/* El proceso llave en mano: una secuencia real, por eso va numerada. */
.proceso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); counter-reset: paso; position: relative; }
.proceso::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; border-top: 2px dashed var(--naranja); }
.proceso li { counter-increment: paso; position: relative; padding: 0 10px 0 0; }
.proceso li::before { content: counter(paso); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--papel-2); border: 2px solid var(--naranja); font-weight: 800; font-size: 1.15rem; position: relative; margin-bottom: 14px; }
.proceso b { display: block; font-variation-settings: "wdth" 84; font-size: 1.05rem; }
.proceso span { color: var(--tinta-2); font-size: .93rem; display: block; line-height: 1.4; margin-top: 2px; }
@media (max-width: 900px) {
    .proceso { grid-template-columns: 1fr; gap: 16px; }
    .proceso::before { left: 23px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--naranja); }
    .proceso li { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; }
    .proceso li::before { margin: 0; grid-row: span 2; }
}

/* ---------------------------------------------------------------- Productos */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filtro { font: inherit; font-weight: 600; font-variation-settings: "wdth" 94; font-size: .95rem; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--hoja); color: var(--tinta); cursor: pointer; min-height: 40px; }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.producto { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: 22px; min-height: 210px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--hoja); position: relative; }
.producto:hover { background: var(--papel); }
.producto:focus-visible { outline: 3px solid var(--naranja); outline-offset: -3px; }
.producto[hidden] { display: none; }
.producto .nombre { font-size: 1.45rem; font-weight: 800; font-variation-settings: "wdth" 76; line-height: 1.05; }
.producto .codigo { font-size: .78rem; color: var(--tinta-2); font-variation-settings: "wdth" 112; font-weight: 600; }
.producto .resumen { color: var(--tinta-2); font-size: .97rem; line-height: 1.45; }
.producto .producto-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 650; font-variation-settings: "wdth" 100; }
.estado::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--e); }
.estado-produccion { --e: #2BA84A; }
.estado-piloto { --e: var(--azul); }
.estado-desarrollo { --e: var(--naranja); }
.estado-idea { --e: var(--linea); }

/* ---------------------------------------------------------------- Ventana emergente (§8.5) */
.emergente { border: 0; padding: 0; background: transparent; max-width: min(680px, 94vw); width: 100%; color: var(--tinta); }
.emergente::backdrop { background: rgba(16, 23, 29, .55); }
.emergente-caja { background: var(--hoja); border: 1.5px solid var(--tinta); border-top: 6px solid var(--naranja); padding: clamp(22px, 4vw, 34px); position: relative; max-height: 88vh; overflow-y: auto; }
.emergente-caja .cerrar { position: absolute; top: 10px; right: 10px; }
.emergente h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-variation-settings: "wdth" 74; margin: 6px 48px 10px 0; }
.emergente ul { padding-left: 1.1em; }
.emergente li { margin: 4px 0; }
.emergente .acciones { margin-top: 18px; }

/* ---------------------------------------------------------------- Guardia SQL */
.guardia { background: var(--tinta); color: var(--papel); }
.guardia .entrada, .guardia .rotulo { color: color-mix(in srgb, var(--papel) 75%, transparent); }
.guardia .btn { border-color: var(--papel); color: var(--papel); }
.guardia .btn:hover { background: var(--papel); color: var(--tinta); }
.guardia .btn-pri { color: #16212B; border-color: var(--naranja); }
.en-linea { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-variation-settings: "wdth" 104; font-size: .9rem; }
.en-linea::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3DDC6E; box-shadow: 0 0 0 0 rgba(61, 220, 110, .6); animation: latido 2.4s infinite; }
@keyframes latido { 70% { box-shadow: 0 0 0 10px rgba(61, 220, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 110, 0); } }
@media (prefers-reduced-motion: reduce) { .en-linea::before { animation: none; } }
.modalidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid color-mix(in srgb, var(--papel) 30%, transparent); margin-bottom: 28px; }
.modalidad { all: unset; box-sizing: border-box; cursor: pointer; padding: 20px; border-left: 1px solid color-mix(in srgb, var(--papel) 30%, transparent); display: flex; flex-direction: column; gap: 6px; }
.modalidad:first-child { border-left: 0; }
.modalidad:focus-visible { outline: 3px solid var(--naranja); outline-offset: -3px; }
.modalidad[aria-pressed="true"] { background: color-mix(in srgb, var(--naranja) 18%, transparent); box-shadow: inset 0 4px 0 var(--naranja); }
.modalidad b { font-size: 1.25rem; font-variation-settings: "wdth" 80; }
.modalidad .precio { font-size: 1.9rem; font-weight: 850; font-variation-settings: "wdth" 70; }
.modalidad .precio small { font-size: .85rem; font-weight: 500; font-variation-settings: "wdth" 100; opacity: .75; }
.modalidad span { opacity: .8; font-size: .93rem; line-height: 1.45; }
@media (max-width: 760px) { .modalidades { grid-template-columns: 1fr; } .modalidad { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--papel) 30%, transparent); } .modalidad:first-child { border-top: 0; } }

.agenda { background: var(--hoja); color: var(--tinta); border-radius: var(--radio); padding: clamp(16px, 3vw, 26px); }
.agenda-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.agenda-cab h3 { margin-right: auto; font-size: 1.3rem; font-variation-settings: "wdth" 84; }
.dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dia { border-top: 2px solid var(--tinta); padding-top: 8px; min-width: 0; }
.dia h4 { font-size: .95rem; font-variation-settings: "wdth" 92; font-weight: 750; margin-bottom: 8px; }
.dia h4 small { display: block; font-weight: 500; color: var(--tinta-2); font-size: .8rem; }
.hueco { all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; padding: 9px 4px; margin-bottom: 6px; border: 1.5px solid var(--linea); border-radius: var(--radio); font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; }
.hueco:hover { border-color: var(--naranja); background: var(--naranja-suave); }
.hueco:focus-visible { outline: 3px solid var(--naranja); outline-offset: 1px; }
.hueco[aria-pressed="true"] { background: var(--naranja); border-color: var(--naranja); color: #16212B; }
.sin-huecos { color: var(--tinta-2); font-size: .88rem; }
.agenda-pie { margin-top: 12px; color: var(--tinta-2); font-size: .88rem; text-align: center; }
@media (max-width: 760px) { .dias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 4px; font-weight: 600; font-size: .93rem; }
.form input, .form textarea, .form select { font: inherit; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--papel); color: var(--tinta); min-height: 44px; }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--naranja); outline: none; }
.form .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form fieldset { border: 1.5px solid var(--linea); border-radius: var(--radio); padding: 10px 14px; margin: 0; }
.form legend { font-weight: 650; font-size: .93rem; padding: 0 4px; }
.form .opcion { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; margin: 6px 0; }
.form .opcion input { min-height: 0; margin-top: 5px; }
.form .resumen-reserva { background: var(--papel-2); padding: 12px 14px; border-left: 4px solid var(--naranja); font-weight: 600; }
.form .error { color: #B3261E; font-weight: 600; }
@media (max-width: 560px) { .form .dos { grid-template-columns: 1fr; } }
.instrucciones-pago { background: var(--papel-2); padding: 14px; border-radius: var(--radio); }
.instrucciones-pago code { font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Evento IAMCP */
.evento { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; border: 1.5px solid var(--tinta); background: var(--hoja); padding: clamp(18px, 3vw, 28px); }
.evento .fecha { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 850; font-variation-settings: "wdth" 64; line-height: .9; color: var(--naranja); }
.evento .fecha small { display: block; font-size: .95rem; font-variation-settings: "wdth" 110; color: var(--tinta); font-weight: 650; margin-top: 4px; }
.evento p { margin: 6px 0 0; }
@media (max-width: 760px) { .evento { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Transparencia */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); margin: 0; }
.ficha > div { padding: 16px 18px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--hoja); }
.ficha dt { font-size: .8rem; color: var(--tinta-2); font-weight: 600; font-variation-settings: "wdth" 110; }
.ficha dd { margin: 4px 0 0; font-weight: 700; font-size: 1.08rem; font-variation-settings: "wdth" 92; }
.ficha dd.cifra { font-size: 2rem; font-weight: 850; font-variation-settings: "wdth" 68; }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; background: var(--hoja); font-variant-numeric: tabular-nums; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); text-align: left; }
.tabla td.num, .tabla th.num { text-align: right; }
.tabla thead th { font-size: .85rem; color: var(--tinta-2); font-variation-settings: "wdth" 108; border-bottom: 2px solid var(--tinta); }
.nota { font-size: .9rem; color: var(--tinta-2); }

/* ---------------------------------------------------------------- Historia */
.linea-tiempo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 2px solid var(--tinta); }
.linea-tiempo li { padding: 18px 24px 0 0; }
.linea-tiempo b { font-size: 2rem; font-variation-settings: "wdth" 66; font-weight: 850; display: block; }
@media (max-width: 700px) { .linea-tiempo { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Contacto y boletín */
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; } }
.datos-contacto { list-style: none; padding: 0; margin: 0; }
.datos-contacto li { padding: 12px 0; border-top: 1px solid var(--linea); display: flex; gap: 12px; }

/* ---------------------------------------------------------------- Página interior */
.cab-pagina { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--linea); background: var(--hoja); }
.cab-pagina .titular { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 16ch; }
.cab-pagina .entrada { margin-top: 18px; }
.cab-pagina[class*="color-"] { border-top: 8px solid var(--c); }
.capacidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.capacidad { padding: 24px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--hoja); }
.capacidad h3 { font-size: 1.3rem; font-variation-settings: "wdth" 84; margin-bottom: 8px; }
.capacidad p { margin: 0; color: var(--tinta-2); text-align: justify; hyphens: auto; }
.prosa { max-width: 72ch; }
.prosa h2 { font-size: 1.6rem; font-variation-settings: "wdth" 80; margin: 1.6em 0 .5em; }

/* ---------------------------------------------------------------- Pie */
.pie { border-top: 1.5px solid var(--tinta); padding: 36px 0 calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--papel); }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.pie h4 { font-size: .95rem; font-variation-settings: "wdth" 100; margin-bottom: 10px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: .85rem; text-align: center; }
@media (max-width: 860px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie-rejilla { grid-template-columns: 1fr; } }

/* Aviso breve (confirmaciones) */
.aviso { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--tinta); color: var(--papel); padding: 12px 18px; border-radius: var(--radio); font-weight: 600; z-index: 60; max-width: 92vw; text-align: center; }
.aviso[hidden] { display: none; }

/* p001 — añadidos tras montar las vistas */
.dibujo .tubo { stroke-width: 4.5; }
.oculto-visual:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 14px; }
@media (min-width: 901px) { .proceso-corto { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* p001 — tras revisar capturas: que aguante sin la fuente condensada (sistema). */
.titular { font-size: clamp(2.4rem, 5.4vw, 5rem); max-width: 15ch; }
.btn, .menu a { white-space: nowrap; }
@media (max-width: 1240px) { .cabecera .btn-reserva { display: none; } }
@media (max-width: 1100px) and (min-width: 981px) { .menu a { padding: 8px 8px; } }
.dia.pasado { opacity: .45; }

/* p003 — las áreas testimoniales, más discretas: título más pequeño. */
.areas .area:not(:first-child) h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }

/* =============================================================================
   p004 — NEW FRONTIERS
   ============================================================================= */
/* La marca: «New Frontiers» manda; «Maperón», encima y pequeño. */
.marca-texto { font-size: 1.25rem; font-variation-settings: "wdth" 74; }
.marca-texto small { margin: 0 0 2px; font-variation-settings: "wdth" 115; font-size: .7rem; letter-spacing: .02em; }
/* Antetítulo de la portada, como la línea de frontera del dibujo. */
.frontier { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 700; font-variation-settings: "wdth" 115; color: var(--azul); font-size: .95rem; }
.frontier::before { content: ""; width: 46px; border-top: 2px dashed currentColor; }

/* La portada con el dibujo grande: el texto, más estrecho. */
.hoja-cuerpo { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.hoja .titular { font-size: clamp(2.3rem, 4.6vw, 4.4rem); max-width: 14ch; }
@media (max-width: 960px) { .hoja-cuerpo { grid-template-columns: 1fr; } .hoja .titular { max-width: 18ch; } }


/* ---------------------------------------------------------------- iconos de asunto */
.ico-asunto { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-asunto.grande { width: 40px; height: 40px; color: var(--c); }
.ico-asunto.enorme { width: 88px; height: 88px; color: var(--c); stroke-width: 1.5; }

/* ---------------------------------------------------------------- áreas con sus asuntos */
.area h3 a { text-decoration: none; }
.area h3 a:hover { text-decoration: underline; }
.asuntos-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.areas .area:first-child .asuntos-lista { grid-template-columns: 1fr; }
.area .asuntos-lista li { padding: 0; border-top: 1px solid var(--linea); display: block; }
.area .asuntos-lista li::before { content: none; }
.asuntos-lista a { display: grid; grid-template-columns: 22px 2.4em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; text-decoration: none; }
.asuntos-lista a:hover .t { text-decoration: underline; }
.asuntos-lista .ico-asunto { color: var(--c); }
.asuntos-lista .n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.asuntos-lista .t { font-weight: 650; font-variation-settings: "wdth" 92; line-height: 1.3; }
.asuntos-lista small { color: var(--tinta-2); font-size: .8rem; white-space: nowrap; }
@media (max-width: 420px) { .asuntos-lista a { grid-template-columns: 22px 2.2em minmax(0, 1fr); } .asuntos-lista small { grid-column: 3; } }

/* ---------------------------------------------------------------- tarjetas y página de asunto */
.tarjetas-asunto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.asunto-tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--hoja); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); border-top: 4px solid var(--c); text-decoration: none; }
.asunto-tarjeta:hover { background: var(--papel); }
.asunto-tarjeta .desc { color: var(--tinta-2); font-size: .95rem; line-height: 1.45; }
.asunto-tarjeta .pie-tarjeta { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; font-weight: 650; font-size: .9rem; color: var(--c); }
.cab-asunto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 640px) { .cab-asunto { grid-template-columns: 1fr; gap: 12px; } .ico-asunto.enorme { width: 64px; height: 64px; } }
.ofertas, .fronteras { list-style: none; margin: 0; padding: 0; }
.ofertas li { padding: 12px 0; border-top: 1px solid var(--linea); display: grid; gap: 2px; }
.ofertas a { text-decoration: none; } .ofertas a:hover b { text-decoration: underline; }
.ofertas span, .fronteras span { color: var(--tinta-2); }
.fronteras li { padding: 14px 0; border-top: 2px dashed var(--linea); display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.fronteras .ico-asunto { color: var(--azul); margin-top: 2px; }
.fronteras div { display: grid; gap: 2px; }
.estatutos { margin: 12px 0; padding: 12px 16px; border-left: 4px solid var(--linea); color: var(--tinta-2); font-style: italic; }
.chips { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1.5px solid var(--c); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .93rem; background: var(--hoja); }
.chip .ico-asunto { color: var(--c); width: 18px; height: 18px; }
.chip:hover { background: var(--c); color: var(--sobre-color); }
.chip:hover .ico-asunto { color: var(--sobre-color); }
.anterior-siguiente { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- avance de la transparencia */
.avance { list-style: none; counter-reset: av; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.avance li { counter-increment: av; padding: 20px; background: var(--hoja); border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: grid; gap: 6px; }
.avance li::before { content: counter(av); font-weight: 850; font-size: 1.6rem; font-variation-settings: "wdth" 66; color: var(--linea); }
.avance span { color: var(--tinta-2); }

/* ---------------------------------------------------------------- producto en uso */
.en-uso { color: #1E7B3A; font-weight: 650; font-size: .88rem; }
.en-uso a { color: inherit; }
/* p004 — tras revisar capturas: etiquetas legibles en el ordenador y dibujo más
   grande en el móvil (allí sobra el margen de las cotas de fuera, que se ocultan). */
.hoja-cuerpo { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
@media (max-width: 960px) { .hoja-cuerpo { grid-template-columns: 1fr; } }
/* p004 — Qué hacemos: la primera área (Tecnología) a todo el ancho y con sus
   asuntos en columnas; las demás, debajo, una junto a otra. */
.areas { grid-template-columns: 1fr 1fr; }
.areas .area:first-child { grid-column: 1 / -1; grid-row: auto; }
.areas .area:first-child .asuntos-lista { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); column-gap: 32px; }
@media (max-width: 860px) { .areas { grid-template-columns: 1fr; } }
/* p004 — el cajetín tiene ahora seis casillas: en el móvil, rejilla de dos con
   las líneas dibujadas por el hueco (así no depende de cuántas casillas haya). */
@media (max-width: 720px) {
    .cajetin { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--tinta); }
    .cajetin > div, .cajetin > div:nth-child(n) { border: 0; background: var(--hoja); }
    .cajetin > div:first-child { grid-column: 1 / -1; }
}

/* =============================================================================
   p005 — EL PLANO DE LADO, otra vez (el anillo del p004 se retira: «muy
   abigarrado, todas las líneas se cruzan»). Más elementos y un globo por asunto.
   ============================================================================= */
.plano-marco { min-width: 0; }
.plano { display: block; width: 100%; height: auto; }
.plano .grueso { stroke-width: 2.4; }
.plano .cota-txt { font-size: 12.5px; }
.plano .cota-area { font-size: 15px; font-weight: 750; fill: var(--azul); }
.plano .destacado { font-size: 15px; font-weight: 800; fill: var(--azul); }
.plano .guia { fill: none; stroke: var(--tinta-2); stroke-width: .9; }
.plano .globo-plano circle { fill: var(--hoja); stroke: var(--c, var(--tinta)); stroke-width: 2; transition: fill .15s; }
.plano .globo-plano text { fill: var(--tinta); font: 800 13px var(--letra); font-variant-numeric: tabular-nums; }
.plano .globo-plano:hover circle, .plano .globo-plano:focus-visible circle { fill: var(--c); }
.plano .globo-plano:hover text, .plano .globo-plano:focus-visible text { fill: #fff; }
.plano .globo-plano:focus-visible { outline: none; }
.plano .globo-plano:focus-visible circle { stroke: var(--tinta); stroke-width: 3; }
.plano-pista { display: none; }
/* En el móvil, el plano no se encoge hasta no leerse: se desliza de lado. */
@media (max-width: 640px) {
    .plano-marco { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * clamp(18px, 4vw, 40px)); padding: 0 clamp(18px, 4vw, 40px) 8px; }
    .plano { min-width: 720px; }
    .plano-pista { display: block; margin: 0 0 6px; text-align: center; font-size: .82rem; font-weight: 600; color: var(--tinta-2); }
}
/* El texto vuelve a tener más sitio que en el p004: el plano es apaisado. */
.hoja-cuerpo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 960px) { .hoja-cuerpo { grid-template-columns: 1fr; } }
/* p005 — la portada, en dos pisos: arriba el titular (título a la izquierda,
   entradilla y botones a la derecha); debajo, el plano a todo el ancho de la
   hoja. Apaisado, en media columna no se leía. */
.hoja-cuerpo { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 36px); padding-top: clamp(32px, 5vw, 64px); }
.hoja-texto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 8px clamp(24px, 4vw, 56px); align-items: end; }
.hoja-texto .frontier { grid-column: 1 / -1; }
.hoja-texto .titular { grid-row: 2 / span 2; max-width: 16ch; }
.hoja-texto .entrada { margin: 0; }
.hoja-texto .acciones { margin: 0; }
@media (max-width: 860px) {
    .hoja-texto { grid-template-columns: 1fr; }
    .hoja-texto .titular { grid-row: auto; }
    .hoja-texto .entrada { margin: 18px 0 22px; }
}
@media (max-width: 720px) { .cajetin > div:last-child:nth-child(even) { grid-column: 1 / -1; } }
/* p005 — seis casillas en el cajetín (p004): seis columnas en el ordenador. */
@media (min-width: 721px) { .cajetin { grid-template-columns: 2.2fr repeat(5, minmax(0, 1fr)); } }

/* p005 — el catálogo, filtrado por tipo de cliente; la ficha, con «A quién va dirigido». */
.filtros { align-items: center; }
.filtros-rotulo { font-weight: 700; font-variation-settings: "wdth" 110; color: var(--tinta-2); margin-right: 4px; }
.ficha-sub { font-size: 1.05rem; font-variation-settings: "wdth" 96; margin: 18px 0 6px; }
.perfiles { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--linea); }
.perfiles li { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.6fr); gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.perfiles b { font-variation-settings: "wdth" 92; }
.perfiles span { color: var(--tinta-2); }
@media (max-width: 560px) { .perfiles li { grid-template-columns: 1fr; } }
.emergente .perfiles { padding-left: 0; }
.emergente .perfiles li { margin: 0; }
/* p005 — tipo de cliente sin productos todavía (Industria): marca «pronto» y aviso. */
.filtro .pronto { margin-left: 6px; font-size: .72rem; font-weight: 700; color: var(--naranja); font-variation-settings: "wdth" 110; }
.filtro[aria-pressed="true"] .pronto { color: inherit; opacity: .8; }
.sin-productos { border: 1px dashed var(--linea); background: var(--hoja); padding: 22px; }
.sin-productos[hidden] { display: none; }
.sin-productos .ofertas { margin: 8px 0 14px; }

/* p005 — «DESARROLLANDO EL ÁREA»: se ve, pero con su marca. Borde discontinuo,
   como la frontera: es lo que todavía estamos cruzando. */
.en-desarrollo { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1.5px dashed var(--naranja); border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 700; font-variation-settings: "wdth" 108; color: var(--naranja); white-space: nowrap; vertical-align: 1px; }
.en-desarrollo.grande { margin: 0 0 10px; font-size: .85rem; padding: 3px 12px; }
.seccion-avance { background: var(--naranja-suave); border-top: 2px dashed var(--naranja); border-bottom: 2px dashed var(--naranja); }
.plano .globo-plano.desarrollo circle { stroke-dasharray: 4 3; }
/* p005 — el holograma de la realidad aumentada: alámbrico y discontinuo, como lo que aún no es sólido. */
.plano .holo path { fill: none; stroke: var(--azul); stroke-width: 1.4; stroke-dasharray: 3 2.5; }
/* p005 — vídeo autoalojado (páginas de asunto y fichas de producto). */
.video { display: block; width: 100%; max-width: 960px; height: auto; aspect-ratio: 16 / 9; background: var(--tinta); border: 1px solid var(--linea); margin: 0 auto; }
.emergente .video { margin: 12px 0; }
/* p005 — EN EL MÓVIL, el plano se ve ENTERO DE ARRIBA ABAJO y solo se desliza de
   lado (propietario, 05/10). La altura manda (cabe siempre en la pantalla) y el
   ancho sale de la proporción del dibujo (1140 × 510, p007). */
@media (max-width: 640px) {
    .plano-marco { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: thin; }
    .plano { min-width: 0; height: min(56svh, 400px); width: calc(min(56svh, 400px) * 2.2353); max-width: none; }
}
.plano .cota-bio { fill: var(--verde); font-weight: 700; }
/* p006 — el rótulo de la nube híbrida, en el azul de la tecnología. */
.plano .hibrida { fill: var(--azul); font-weight: 700; }
/* p012 — rótulos pequeños dentro del dibujo (migraciones, almacén). */
.plano .mini { font-size: 10px; font-weight: 700; }
.plano .mini { font-size: 9.5px; }

/* p013 — EL CAJETÍN, PEQUEÑO, en la esquina del plano, en la misma línea que la
   leyenda. Tres casillas en una fila, también en el móvil. */
.pie-plano { display: flex; justify-content: flex-end; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 8px 0 clamp(20px, 3vw, 32px); }
.cajetin.cajetin-mini, .cajetin.cajetin-mini > div:nth-child(n) { margin: 0; }
.cajetin.cajetin-mini { display: inline-grid; grid-template-columns: repeat(3, auto); gap: 0; margin-left: auto; border: 1px solid var(--tinta); background: var(--hoja); }
.cajetin.cajetin-mini > div:nth-child(n) { grid-column: auto; padding: 4px 10px; border: 0; border-left: 1px solid var(--tinta); background: var(--hoja); }
.cajetin.cajetin-mini > div:first-child { border-left: 0; }
.cajetin.cajetin-mini dt { font-size: .62rem; }
.cajetin.cajetin-mini dd { font-size: .8rem; margin-top: 0; white-space: nowrap; }
/* El pie del plano, pegado al dibujo (en la rejilla de la portada es otra fila con su hueco). */
.hoja-cuerpo > .pie-plano { margin-top: calc(-1 * clamp(20px, 3vw, 36px) + 4px); }
@media (max-width: 520px) {
    .cajetin.cajetin-mini { width: 100%; grid-template-columns: minmax(0, 1fr) auto auto; }
    .cajetin.cajetin-mini > div:first-child dd { white-space: normal; }
}
/* p015 — una oferta que aún no hacemos: se lee, pero no se pulsa. */
.ofertas li.no-disponible b { color: var(--tinta-2); }
.ofertas li.no-disponible span { opacity: .85; }
/* p016 — el cajetín, aún más pequeño: dos casillas, letra menor, también en el móvil. */
.cajetin.cajetin-mini { grid-template-columns: repeat(2, auto); border-width: 1px; }
.cajetin.cajetin-mini > div:nth-child(n) { padding: 2px 8px; }
.cajetin.cajetin-mini dt { font-size: .56rem; }
.cajetin.cajetin-mini dd { font-size: .7rem; }
@media (max-width: 520px) { .cajetin.cajetin-mini { width: auto; grid-template-columns: repeat(2, auto); } .cajetin.cajetin-mini > div:first-child dd { white-space: nowrap; } }
/* p016 — sin hueco de sobra bajo el plano. */
.hoja .hoja-cuerpo { padding-bottom: clamp(16px, 2.5vw, 28px); }
.pie-plano { margin-bottom: 0; }
/* p025 — sin logo (NAV, AX), su nombre en el hueco. */
.plano .marca-texto { font: 800 9.5px var(--letra); fill: var(--tinta-2); letter-spacing: .02em; }
/* p029 — los nombres de la migración, algo más pequeños para que quepan en la mesa. */
.plano .nombre-migra { font-size: 8.5px; }
/* p033 — sin logo, el nombre del modelo, pequeño para que quepan dos por fila en el panel. */
.plano .marca-texto.modelo { font-size: 6.4px; font-weight: 800; letter-spacing: 0; fill: var(--azul); }
/* p034 — sin logo, el nombre de cada base de datos, muy pequeño: caben tres por fila en el cilindro. */
.plano .marca-texto.bd { font-size: 4.4px; font-weight: 800; letter-spacing: 0; fill: var(--azul); }
/* p037 — Copilot, destacado: halo azul suave y rótulo en el azul de la tecnología. */
.plano .halo-copilot { fill: var(--azul-suave); stroke: var(--azul); stroke-width: .8; stroke-dasharray: 2 2.5; }
.plano .destacado-mini { fill: var(--azul); font-weight: 800; }
/* p038 — los algoritmos de las ranuras de la IA y las siglas de AEAT y TGSS en la pantalla. */
.plano .algoritmo { font-size: 6.6px; font-weight: 700; fill: var(--azul); }
.plano .marca-texto.org { font-size: 10px; font-weight: 800; fill: var(--tinta); letter-spacing: .04em; }
/* p041 — el euro de la moneda del beneficio. */
.plano .euro { font-size: 13px; font-weight: 800; fill: var(--naranja); }

/* p046 — GUARDIA SQL: emergencia o planificada, la lista de precios por hora y las garantías. */
.tipo-modalidad { display: inline-block; align-self: flex-start; margin-bottom: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.tipo-modalidad.emergencia { background: var(--naranja); color: #fff; }
.tipo-modalidad.planificada { background: var(--azul-suave); color: var(--azul); }
.tarifas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 32px; align-items: start; margin: 0 0 28px; }
@media (max-width: 860px) { .tarifas { grid-template-columns: 1fr; } }
.tabla-tarifas { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla-tarifas caption { text-align: left; font-weight: 800; padding-bottom: 8px; }
.tabla-tarifas th, .tabla-tarifas td { padding: 9px 10px 9px 0; border-top: 1px solid currentColor; border-color: rgba(127,127,127,.35); vertical-align: top; text-align: left; }
.tabla-tarifas th { font-weight: 800; white-space: nowrap; }
.tabla-tarifas .precio-hora { font-weight: 800; white-space: nowrap; text-align: right; font-size: 1.1rem; }
.tabla-tarifas .precio-hora small { font-weight: 600; font-size: .75rem; opacity: .8; }
.garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.garantias li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 6px; font-weight: 600; line-height: 1.45; }
.garantia-pago { margin: 14px 0 0; font-weight: 600; }
.nota-tarifas { margin: 8px 0 0; font-size: .88rem; opacity: .85; }

/* =============================================================================
   p048 — PÁGINAS NUEVAS: producto, tipos de cliente, condiciones, casos y novedades.
   ============================================================================= */
.puntos { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.perfiles-pagina { border-top: 1px solid var(--linea); }
.perfiles-pagina a { color: inherit; }
.tipos-cliente { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.tipo-cliente { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--linea); background: var(--hoja); color: inherit; text-decoration: none; transition: border-color .15s; }
.tipo-cliente:hover, .tipo-cliente:focus-visible { border-color: var(--azul); }
.tipo-cliente b { font-size: 1.1rem; }
.tipo-cliente span { color: var(--tinta-2); }
.tipo-cliente small { color: var(--azul); font-weight: 700; }
.destacado-texto { border-left: 4px solid var(--azul); padding-left: 16px; }
.texto-legal { max-width: 820px; }
.texto-legal h2, .texto-legal h3 { margin: 26px 0 8px; }
.texto-legal p { line-height: 1.65; }
.garantias-claras li { font-weight: 600; }
.publicaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.publicacion { padding: 18px; border: 1px solid var(--linea); background: var(--hoja); display: grid; gap: 8px; align-content: start; }
.publicacion h3 { margin: 0; font-size: 1.15rem; }
.publicacion h3 a { color: inherit; }
.publicacion p { margin: 0; }
.tipo-publicacion { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; text-transform: uppercase; background: var(--azul-suave); color: var(--azul); }
.tipo-publicacion.caso { background: var(--naranja); color: #fff; }
.imagen-publicacion { display: block; width: 100%; height: auto; margin: 0 0 18px; border: 1px solid var(--linea); }

/* =============================================================================
   p049 — LA ADMINISTRACIÓN: sobria, sin la hoja ni el plano.
   ============================================================================= */
body.admin { background: var(--papel); }
.admin-cabecera { background: var(--tinta); color: #fff; padding: 10px 0; }
.admin-fila { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.admin-marca { color: #fff; text-decoration: none; margin-right: auto; }
.admin-menu { display: flex; gap: 14px; flex-wrap: wrap; }
.admin-menu a { color: #fff; text-decoration: none; font-weight: 600; opacity: .9; }
.admin-menu a:hover { opacity: 1; text-decoration: underline; }
.admin-salir { margin: 0; }
.admin-salir .btn { padding: 4px 12px; }
.admin-cuerpo { padding-top: 28px; padding-bottom: 60px; }
.admin-aviso { background: var(--azul-suave); border-left: 4px solid var(--azul); padding: 10px 14px; font-weight: 600; }
.admin-error:empty { display: none; }
.admin-error { background: #FDECEA; border-left: 4px solid #C0392B; padding: 10px 14px; margin-bottom: 14px; }
.admin-error ul { margin: 0; padding-left: 1.1em; }
.admin-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.admin-tarjeta { display: grid; gap: 6px; padding: 18px; background: var(--hoja); border: 1px solid var(--linea); color: inherit; text-decoration: none; }
.admin-tarjeta:hover { border-color: var(--azul); }
.admin-tarjeta span { color: var(--tinta-2); }
.admin-tabla { width: 100%; border-collapse: collapse; background: var(--hoja); }
.admin-tabla th, .admin-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
.admin-tabla th { font-size: .85rem; color: var(--tinta-2); }
.admin-form { display: grid; gap: 16px; }
.admin-form.estrecho { max-width: 460px; }
.admin-form fieldset { border: 1px solid var(--linea); background: var(--hoja); padding: 14px 16px; display: grid; gap: 12px; }
.admin-form legend { font-weight: 800; padding: 0 6px; }
.admin-form label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
.admin-form label.opcion { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.admin-form input:not([type=checkbox]), .admin-form textarea, .admin-form select { width: 100%; padding: 7px 9px; border: 1px solid var(--linea); background: #fff; font: inherit; font-weight: 400; color: var(--tinta); }
.admin-form textarea { resize: vertical; line-height: 1.5; }
.admin-fila-lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 90px; gap: 8px 12px; padding: 10px 0; border-top: 1px dashed var(--linea); align-items: end; }
.admin-fila-lista .ancho-total { grid-column: 1 / 3; }
.admin-fila-lista .corto { grid-column: 3; }
.admin-fila-lista .borrar span { color: #C0392B; }
@media (max-width: 720px) { .admin-fila-lista { grid-template-columns: 1fr; } .admin-fila-lista .ancho-total, .admin-fila-lista .corto { grid-column: auto; } }
.admin-guardar { position: sticky; bottom: 0; background: var(--papel); padding: 10px 0; margin: 0; }
.admin-recuadro { background: var(--hoja); border: 2px solid var(--azul); padding: 16px 18px; margin-bottom: 20px; }
.admin-codigos { columns: 2; list-style: none; padding: 0; font-size: 1.1rem; }
.admin-dos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 720px) { .admin-dos { grid-template-columns: 1fr; } }
.admin-qr { display: block; background: #fff; padding: 8px; border: 1px solid var(--linea); image-rendering: pixelated; }
.admin-clave { font-size: 1.05rem; letter-spacing: .04em; }
.admin-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-acciones form { margin: 0; }
.admin-salir .btn { color: #fff; background: transparent; border-color: rgba(255,255,255,.6); }
.admin-salir .btn:hover { background: rgba(255,255,255,.12); }
.admin .h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
/* p054 — «Ver tecnología», «Ver ingeniería»…, sin subrayado (propietario, 21/10); al pasar el ratón o con el teclado, sí, como los títulos de las áreas. */
.area .mas { text-decoration: none; }
.area .mas:hover, .area .mas:focus-visible { text-decoration: underline; }
/* p057 — dominios: inactivos, apagados; los que caducan pronto, en rojo. */
.admin-tabla tr.admin-inactivo td { opacity: .5; }
.admin-tabla .admin-caduca { color: #C0392B; font-weight: 800; }
.admin-tabla small { color: var(--tinta-2); }

/* p058 — la portada, en tercios (propietario, 21/10): el titular en el primer
   tercio, arriba; la entradilla y los botones, en los dos tercios restantes. */
.hoja-texto { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; row-gap: 0; }
.hoja-texto .titular { grid-column: 1; grid-row: 2 / span 2; max-width: none; font-size: clamp(2.2rem, 3.7vw, 3.9rem); hyphens: manual; }
.hoja-texto .entrada { grid-column: 2; grid-row: 2; max-width: none; margin: .35em 0 26px; }
.hoja-texto .acciones { grid-column: 2; grid-row: 3; }
@media (max-width: 860px) {
    .hoja-texto { grid-template-columns: 1fr; }
    .hoja-texto .titular, .hoja-texto .entrada, .hoja-texto .acciones { grid-column: 1; grid-row: auto; }
    .hoja-texto .entrada { margin: 18px 0 22px; }
}

/* p060 — la vuelta del pago con tarjeta */
.pago-estado { display: grid; gap: 16px; max-width: 70ch; margin-top: 8px; }
.pago-estado .h3 { margin-top: 12px; }

/* p062 — Guardia SQL: las flechas de la agenda se veían blancas sobre blanco
   (heredaban el botón claro de la sección oscura); dudas antes de reservar. */
.guardia .agenda .btn { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.guardia .agenda .btn:hover:not(:disabled) { background: var(--tinta); color: var(--papel); }
.guardia .agenda .btn:disabled { opacity: .3; cursor: default; }
.agenda-aviso { margin: 0 0 12px; padding: 8px 12px; background: var(--papel-2); border-left: 4px solid var(--naranja); font-size: .92rem; }
.agenda-dudas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 18px; padding: 16px 20px; border: 1px solid color-mix(in srgb, var(--papel) 35%, transparent); }
.agenda-dudas p { margin: 0; }
.agenda-dudas .acciones { flex-wrap: wrap; }

/* p063 — /admin/transparencia */
.admin-corto { width: 6em; }
.admin-tabla textarea { width: 100%; margin-top: 6px; }

/* p066 — las certificaciones del personal */
.certificaciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 8px 32px; margin: 12px 0; }
.cert-grupo ul { margin: 6px 0 16px; padding-left: 1.1em; }
.cert-grupo li { margin: 4px 0; }
.cert-grupo small, .cert-anteriores small { color: var(--tinta-2); white-space: nowrap; }
.cert-anteriores { margin: 8px 0 20px; }
.cert-anteriores summary { cursor: pointer; color: var(--tinta-2); }

/* p067 — certificaciones: el emisor (si no es Microsoft) y en la página de un asunto */
.cert-emisor { margin: -2px 0 4px; font-size: .88rem; color: var(--tinta-2); }
.cert-titulo { margin-top: 28px; }
.dos-col .certificaciones { grid-template-columns: 1fr; }

/* p068 — documentos en /admin/transparencia */
.en-linea-form { display: inline; margin: 0; }

/* p069 — certificaciones por área (informática / ingeniería), cada grupo plegable */
.certificaciones-areas { margin: 12px 0 24px; }
.cert-botones { margin: 0 0 12px; }
.btn-peq { min-height: 36px; padding: 6px 14px; font-size: .92rem; }
.cert-area { margin: 0 0 20px; }
.cert-area-t { font-size: 1.15rem; margin: 18px 0 8px; padding-left: 10px; border-left: 4px solid var(--c, var(--tinta)); }
.cert-grupo { border-top: 1px solid var(--linea); padding: 8px 0; }
.cert-grupo summary { cursor: pointer; list-style-position: outside; padding: 4px 0; }
.cert-grupo summary small { color: var(--tinta-2); margin-left: 6px; }
.cert-grupo ul { margin: 6px 0 10px; padding-left: 1.1em; }
.cert-grupo li { margin: 4px 0; }
.cert-grupo li small { color: var(--tinta-2); }
.cert-anteriores summary b { font-weight: 600; color: var(--tinta-2); }
.en-linea span { line-height: 1.35; }
/* p070 — la agenda de lunes a domingo */
.dias.siete { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dias.siete { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dias.siete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* p072 — la emergencia, sin agenda: el botón rojo, como la etiqueta EMERGENCIA */
.emergencia-ahora { background: var(--papel); color: var(--tinta); padding: clamp(18px, 3vw, 32px); border-left: 8px solid var(--naranja); }
.emergencia-ahora .nota { color: var(--tinta-2); }
.emergencia-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 1.15rem; }
.emergencia-titulo .tipo-modalidad { margin: 0; }
.btn-emergencia, .guardia .btn-emergencia {
    background: var(--naranja); border-color: var(--naranja); color: #fff;
    border-radius: 999px; text-transform: uppercase; font-weight: 800; letter-spacing: .03em;
    padding-inline: 26px; box-shadow: 0 0 0 0 rgba(232, 89, 12, .55); animation: latido-emergencia 2.4s infinite;
}
.btn-emergencia:hover, .guardia .btn-emergencia:hover { background: #C2410C; border-color: #C2410C; color: #fff; }
@keyframes latido-emergencia { 0% { box-shadow: 0 0 0 0 rgba(232, 89, 12, .55); } 70% { box-shadow: 0 0 0 14px rgba(232, 89, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); } }
@media (prefers-reduced-motion: reduce) { .btn-emergencia, .guardia .btn-emergencia { animation: none; } }
/* p074 — técnicos ocupados: el botón se ve, apagado, con el aviso */
.btn-emergencia:disabled, .guardia .btn-emergencia:disabled { background: #9AA3A8; border-color: #9AA3A8; color: #fff; animation: none; box-shadow: none; cursor: not-allowed; }
.aviso-ocupados { margin: 0 0 12px; padding: 10px 14px; background: var(--naranja-suave); border-left: 4px solid var(--naranja); font-weight: 600; }
.admin-guardia { padding: 20px; margin: 12px 0 20px; border: 2px solid var(--linea); max-width: 560px; }
.admin-guardia.ocupados { border-color: var(--naranja); background: var(--naranja-suave); }
.admin-guardia-estado { font-size: 1.2rem; font-weight: 700; }
.admin-guardia-boton { width: 100%; min-height: 64px; font-size: 1.15rem; justify-content: center; }
.admin-resultado { padding: 10px 14px; background: var(--papel-2); border-left: 4px solid var(--azul); }

/* p080 — certificaciones: los grupos, sangrados bajo su área (propietario, 21/10:
   «¿no se podría indentar mejor?»). La flecha, dentro del bloque (antes colgaba a la
   izquierda del título del área) y la lista, sangrada bajo el nombre del grupo. */
.cert-area > .cert-grupo { margin-left: 14px; }
.cert-grupo summary { list-style: none; display: block; position: relative; padding-left: calc(1em + 8px); }
.cert-grupo summary::-webkit-details-marker { display: none; }
.cert-grupo summary::before { content: "▸"; position: absolute; left: 0; width: 1em; text-align: center; color: var(--c, var(--tinta-2)); transition: transform .15s; }
.cert-grupo[open] > summary::before { transform: rotate(90deg); }
.cert-grupo > .cert-emisor, .cert-grupo > ul { margin-left: calc(1em + 8px); }
.cert-grupo > ul { padding-left: 1.1em; }
@media (prefers-reduced-motion: reduce) { .cert-grupo summary::before { transition: none; } }

/* p081 — NADA MÁS ANCHO QUE LA PANTALLA (propietario, 21/10: la ficha de un producto
   salía descentrada en el móvil). La causa: el botón rojo «Pedir la emergencia ahora»
   (en mayúsculas y sin partir, `.btn` es nowrap) era más ancho que la pantalla; la
   página se podía arrastrar de lado y las ventanas emergentes se centraban en esa
   página más ancha.
   1. Un botón nunca pasa del ancho de su caja y, en pantallas estrechas, parte en
      dos líneas si hace falta.
   2. El botón rojo, en el móvil, a todo el ancho y centrado.
   3. Por si algo más se escapa: la página no se desplaza de lado (clip no crea
      contenedor de desplazamiento, así que la cabecera sigue fija al subir). */
.btn { max-width: 100%; }
@media (max-width: 560px) {
    .btn:not(.btn-ico) { white-space: normal; text-align: center; }
    .btn-emergencia, .guardia .btn-emergencia { width: 100%; justify-content: center; padding-inline: 16px; letter-spacing: .01em; }
}
.emergente .btn { white-space: normal; }
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

/* p082 — las sociedades científicas de las que somos miembros */
.sociedades { list-style: none; padding: 0; margin: 8px 0 24px; border-top: 1px solid var(--linea); }
.sociedades li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--linea); margin: 0; }
.sociedad-siglas { font-weight: 850; font-variation-settings: "wdth" 80; letter-spacing: .02em; color: var(--c, var(--verde)); }
.sociedades a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sociedades-area { margin-top: 36px; max-width: 760px; }
@media (max-width: 420px) { .sociedades li { grid-template-columns: 1fr; gap: 2px; } }

/* p083 — LOS PRECIOS EN EL MÓVIL (propietario, 21/10: «se ven muy mal»): la tabla de
   tres columnas no cabía (nombre sin partir, condición y precio) y el precio quedaba
   fuera de la pantalla. En pantallas estrechas, cada fila es un bloque: el nombre y el
   precio en la primera línea; la condición, debajo y a todo el ancho. */
@media (max-width: 640px) {
    .tabla-tarifas, .tabla-tarifas tbody { display: block; width: 100%; }
    .tabla-tarifas caption { display: block; }
    .tabla-tarifas tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-top: 1px solid rgba(127,127,127,.35); }
    .tabla-tarifas th, .tabla-tarifas td { padding: 0; border: 0; }
    .tabla-tarifas th { white-space: normal; grid-column: 1; grid-row: 1; }
    .tabla-tarifas .precio-hora { grid-column: 2; grid-row: 1; }
    .tabla-tarifas td:not(.precio-hora) { grid-column: 1 / -1; grid-row: 2; opacity: .85; }
}