/* ============================================================
   Sitioideal — Diseño «Circuito» (mantenimiento y reparación de computadoras, soporte técnico,
   redes, celulares, impresoras y cámaras) · paso 7.z.26
   Va encima de sitio.css. Tecnológico y claro: fondo gris muy claro con pistas de circuito en el color
   del negocio, el giro como línea de comandos con su cursor, el nombre en letras técnicas (Chakra Petch),
   los textos en IBM Plex Sans y las claves y precios en letra de máquina (IBM Plex Mono). La foto de
   portada va en un monitor y el ícono del sitio en un chip; los servicios son fichas técnicas y las
   fotos llevan esquinas de visor. Los títulos llevan una pista con su punto de soldadura.
   Los textos usan un tono tinta (el color principal oscurecido) para que siempre se lean.
   HTML propio: app/vistas/sitio/disenos/circuito/
   ============================================================ */

.diseno-circuito {
    --ci-titulo: "Chakra Petch", "Archivo", system-ui, sans-serif;
    --ci-letra: "IBM Plex Sans", "Archivo", system-ui, sans-serif;
    --ci-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --ci-fondo: color-mix(in srgb, var(--c-fondo) 45%, #F1F4F8);
    --ci-alterna: color-mix(in srgb, var(--c-primario) 5%, #FFFFFF);
    --ci-tinta: color-mix(in srgb, var(--c-primario) 22%, #0E1726);
    --ci-principal: var(--c-primario);
    --ci-pista: color-mix(in srgb, var(--c-primario) 16%, transparent);
    --ci-borde: color-mix(in srgb, var(--ci-tinta) 12%, transparent);
    --ci-oscuro: color-mix(in srgb, var(--c-primario) 18%, #121A27);
    --ci-sombra: 0 18px 36px -24px rgba(14, 23, 38, .45), 0 1px 2px rgba(14, 23, 38, .06);
    /* Pistas de circuito (un mosaico que se repite; se pinta con máscara del color de --ci-pista) */
    --ci-mosaico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M0 36h58l18 18h52'/%3E%3Ccircle cx='132' cy='54' r='4.5'/%3E%3Cpath d='M240 96h-46l-20 20v44'/%3E%3Ccircle cx='174' cy='164' r='4.5'/%3E%3Cpath d='M28 240v-52l18-18h38'/%3E%3Ccircle cx='88' cy='170' r='4.5'/%3E%3Cpath d='M150 0v14l22 22h30'/%3E%3Ccircle cx='206' cy='36' r='4.5'/%3E%3Cpath d='M0 120h22l14 14v34'/%3E%3Ccircle cx='36' cy='172' r='3.5'/%3E%3Cpath d='M240 210h-60l-14-14h-34'/%3E%3Ccircle cx='128' cy='196' r='4.5'/%3E%3Crect x='86' y='88' width='26' height='26' rx='3'/%3E%3Cpath d='M92 88v-8M100 88v-8M108 88v-8M92 114v8M100 114v8M108 114v8'/%3E%3C/svg%3E");

    /* Superficies (sitio.css) */
    --s-fondo: var(--ci-fondo);
    --s-alterna: var(--ci-alterna);
    --s-tarjeta: #fff;
    --s-tarjeta-alterna: #fff;
    --s-encabezado: #fff;
    --s-texto: var(--ci-tinta);
    --s-titulo: var(--ci-principal);
    --s-linea: var(--ci-borde);
    --s-linea-fuerte: color-mix(in srgb, var(--ci-tinta) 20%, transparent);

    background: var(--ci-fondo);
    font-family: var(--ci-letra);
}

/* El color principal para textos: nunca tan claro que no se lea sobre lo claro */
@supports (color: oklch(from red l c h)) {
    .diseno-circuito {
        --ci-principal: oklch(from var(--c-primario) min(l, .5) c h);
        --ci-tinta: oklch(from color-mix(in srgb, var(--c-primario) 22%, #0E1726) min(l, .28) c h);
        --ci-oscuro: oklch(from color-mix(in srgb, var(--c-primario) 18%, #121A27) min(l, .24) c h);
    }
}

/* Letras técnicas: Chakra Petch */
.diseno-circuito h1,
.diseno-circuito h2,
.diseno-circuito h3,
.diseno-circuito h4,
.diseno-circuito .logo__nombre,
.diseno-circuito .especial__titulo,
.diseno-circuito .equipo__titulo,
.diseno-circuito .persona__nombre,
.diseno-circuito .promocion__titulo,
.diseno-circuito .servicio__nombre,
.diseno-circuito .sucursal__nombre,
.diseno-circuito .redes__titulo {
    font-family: var(--ci-titulo);
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: .01em;
}

/* Rótulos en letra de máquina */
.diseno-circuito .menu a,
.diseno-circuito .horario__tabla th,
.diseno-circuito .catalogo__indice a {
    font-family: var(--ci-mono);
    font-stretch: normal;
    letter-spacing: .02em;
}

/* ---------- Encabezado ---------- */
.diseno-circuito .encabezado {
    border-bottom: 1px solid var(--ci-borde);
    background: color-mix(in srgb, #fff 92%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
}
.diseno-circuito .logo__nombre { color: var(--ci-tinta); }
.diseno-circuito .menu { column-gap: 20px; }
.diseno-circuito .menu a { color: var(--ci-tinta); font-size: .86rem; font-weight: 500; }
.diseno-circuito .menu a:hover { color: var(--ci-principal); }

/* ---------- Botones ---------- */
.diseno-circuito .boton {
    border-radius: 6px;
    font-family: var(--ci-titulo);
    font-stretch: normal;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: transform .12s ease, box-shadow .12s ease;
}
.diseno-circuito .boton--principal {
    border: 2px solid transparent;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--c-primario) 85%, #000);
}
.diseno-circuito .boton--secundario {
    border: 2px solid color-mix(in srgb, var(--ci-tinta) 75%, transparent);
    background: #fff;
    color: var(--ci-tinta);
}
.diseno-circuito .boton:hover { transform: translateY(-2px); }
.diseno-circuito .boton-chico { border-radius: 6px; font-family: var(--ci-titulo); font-weight: 700; letter-spacing: .03em; }

@media (prefers-reduced-motion: reduce) {
    .diseno-circuito .boton { transition: none; }
    .diseno-circuito .boton:hover { transform: none; }
}

/* ---------- Portada ---------- */
.ci-portada {
    position: relative;
    padding-block: clamp(44px, 7vw, 96px) clamp(54px, 7vw, 96px);
    overflow: hidden;
    background: linear-gradient(180deg, #fff, var(--ci-fondo) 85%);
    color: var(--ci-tinta);
}

/* Las pistas de circuito (solo adorno), más fuertes a la derecha */
.ci-pistas {
    position: absolute;
    inset: 0;
    background: var(--ci-pista);
    -webkit-mask: var(--ci-mosaico) 0 0 / 240px 240px, linear-gradient(90deg, transparent 10%, #000 70%);
    -webkit-mask-composite: source-in;
    mask: var(--ci-mosaico) 0 0 / 240px 240px, linear-gradient(90deg, transparent 10%, #000 70%);
    mask-composite: intersect;
    pointer-events: none;
}

.ci-portada__rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 44px;
    align-items: center;
}

@media (min-width: 900px) {
    .ci-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 60px; }
}

/* El giro como línea de comandos */
.ci-consola {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--ci-oscuro);
    color: #E8EEF6;
    font-family: var(--ci-mono);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.35;
}
.ci-consola__prompt { flex: none; color: var(--c-acento); font-weight: 600; }
.ci-consola__texto { min-width: 0; overflow-wrap: anywhere; }
.ci-cursor {
    flex: none;
    width: 9px;
    height: 1.1em;
    background: var(--c-acento);
    animation: ci-parpadeo 1.1s steps(1, end) infinite;
}
@keyframes ci-parpadeo { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ci-cursor { animation: none; }
}

.ci-portada__nombre {
    margin: 0 0 16px;
    color: var(--ci-tinta);
    font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.6rem);
    line-height: 1.02;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.ci-portada__nombre--medio { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.9rem); }
.ci-portada__nombre--largo { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.2rem); }

.ci-portada__eslogan {
    max-width: 38ch;
    margin: 0 0 28px;
    font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem);
    line-height: 1.5;
    opacity: .9;
}

.ci-portada__botones { gap: 12px; }
.ci-portada__estado { margin-top: 24px; }
.diseno-circuito .estado-ahora--claro {
    border-radius: 6px;
    border-color: var(--ci-borde);
    background: #fff;
    box-shadow: var(--ci-sombra);
}

/* El monitor con la foto, la pista y el chip con el ícono del sitio */
.ci-portada__visual {
    position: relative;
    justify-self: center;
    width: min(100%, 540px);
    padding: 0 0 18px 34px;
}

.ci-monitor { position: relative; }

.ci-monitor__marco {
    padding: 10px;
    border-radius: 14px;
    background: var(--ci-oscuro);
    box-shadow: 0 34px 50px -30px rgba(14, 23, 38, .6), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.ci-monitor__barra {
    display: flex;
    gap: 6px;
    padding: 2px 4px 9px;
}
.ci-monitor__barra span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.ci-monitor__barra span:first-child { background: var(--c-acento); }

.ci-monitor__pantalla {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 6px;
    background: #0B111B;
}
.ci-monitor__pantalla picture,
.ci-monitor__pantalla picture img { width: 100%; height: 100%; }
.ci-monitor__pantalla picture img { object-fit: cover; }

/* Sin foto: la pantalla encendida con el ícono del sitio al centro */
.ci-monitor__pantalla--encendida {
    display: grid;
    place-items: center;
    background:
        radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--c-primario) 55%, #0B111B), #0B111B 75%);
}
.ci-monitor__icono {
    width: 30%;
    max-width: 150px;
    aspect-ratio: 1;
    border-radius: 18px;
    object-fit: contain;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 0 40px color-mix(in srgb, var(--c-acento) 45%, transparent);
}

/* La base del monitor: el cuello y el pie */
.ci-monitor__base {
    position: relative;
    display: block;
    width: 34%;
    height: 34px;
    margin: 0 auto;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ci-oscuro) 85%, #fff), var(--ci-oscuro));
    clip-path: polygon(30% 0, 70% 0, 78% 70%, 100% 70%, 100% 100%, 0 100%, 0 70%, 22% 70%);
}

/* La pista del chip al monitor */
.ci-traza {
    position: absolute;
    left: 74px;
    bottom: 66px;
    width: 56px;
    height: 46px;
    border-top: 3px solid var(--c-acento);
    border-right: 3px solid var(--c-acento);
    border-top-right-radius: 10px;
    pointer-events: none;
}
.ci-traza::after {
    content: "";
    position: absolute;
    top: -7px;
    left: -6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--c-acento);
}

/* El chip con sus patitas (las patitas son dos fondos rayados detrás del chip) */
.ci-chip {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    background: var(--ci-oscuro);
    box-shadow: 0 16px 28px -16px rgba(14, 23, 38, .7);
}
.ci-chip::before,
.ci-chip::after {
    content: "";
    position: absolute;
    z-index: -1;
    background: repeating-linear-gradient(90deg, #A9B4C2 0 5px, transparent 5px 15px);
}
.ci-chip::before { inset: -9px 16px; }
.ci-chip::after { inset: 16px -9px; background: repeating-linear-gradient(180deg, #A9B4C2 0 5px, transparent 5px 15px); }
.ci-chip__icono {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
}

@media (max-width: 599.98px) {
    .ci-portada__visual { width: min(100%, 380px); padding: 0 0 14px 26px; }
    .ci-monitor__marco { padding: 8px; border-radius: 12px; }
    .ci-chip { width: 72px; height: 72px; border-radius: 10px; }
    .ci-chip::before { inset: -7px 12px; }
    .ci-chip::after { inset: 12px -7px; }
    .ci-chip__icono { width: 44px; height: 44px; }
    .ci-traza { left: 56px; bottom: 50px; width: 40px; height: 34px; }
}

/* ---------- Secciones ---------- */
.diseno-circuito .seccion { padding-block: clamp(56px, 7vw, 92px); }

.diseno-circuito .seccion h2 {
    color: var(--ci-tinta);
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
    line-height: 1.1;
}

/* Una pista con su punto de soldadura y un chip sobre cada título */
.diseno-circuito .seccion h2::before,
.ci-cabeza::before {
    content: "";
    display: block;
    width: 76px;
    height: 16px;
    margin-bottom: 12px;
    background: var(--c-primario);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 16'%3E%3Ccircle cx='6' cy='8' r='5'/%3E%3Cpath d='M10 8h26l6-6h14' fill='none' stroke='black' stroke-width='2.5'/%3E%3Crect x='58' y='0' width='16' height='16' rx='2.5'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 16'%3E%3Ccircle cx='6' cy='8' r='5'/%3E%3Cpath d='M10 8h26l6-6h14' fill='none' stroke='black' stroke-width='2.5'/%3E%3Crect x='58' y='0' width='16' height='16' rx='2.5'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
}

.ci-cabeza { margin-bottom: 26px; }
.ci-cabeza h2 { margin: 0 !important; }
/* En las secciones propias la pista va arriba de todo (sobre el antetítulo) */
.diseno-circuito .ci-cabeza h2::before { content: none; }

.ci-antetitulo {
    margin: 0 0 8px;
    color: var(--ci-principal);
    font-family: var(--ci-mono);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .02em;
}
.ci-antetitulo::before { content: "// "; color: color-mix(in srgb, var(--ci-tinta) 45%, transparent); }

/* ---------- Servicios: fichas técnicas ---------- */
.diseno-circuito .catalogo__indice a {
    border: 1.5px solid color-mix(in srgb, var(--ci-tinta) 25%, transparent);
    border-radius: 6px;
    background: #fff;
    color: var(--ci-tinta);
    font-size: .86rem;
    font-weight: 500;
}
.diseno-circuito .catalogo__indice a:hover { border-color: var(--ci-principal); color: var(--ci-principal); background: #fff; }

.ci-grupo + .ci-grupo { margin-top: 48px; }

.ci-grupo__nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--ci-tinta);
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    text-transform: uppercase;
}
.ci-grupo__nombre .icono { flex: none; width: 24px; height: 24px; color: var(--ci-principal); }
.ci-grupo__descripcion { max-width: 64ch; margin: 0 0 14px; opacity: .85; }

.ci-fichas {
    display: grid;
    gap: 22px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) {
    .ci-fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .ci-fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
}

.ci-ficha {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ci-borde);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--ci-sombra);
}
.ci-ficha--destacada { border-color: color-mix(in srgb, var(--c-primario) 55%, transparent); box-shadow: var(--ci-sombra), 0 0 0 1px color-mix(in srgb, var(--c-primario) 35%, transparent); }

/* La franja de arriba: clave, foco y «Recomendado» */
.ci-ficha__cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--ci-borde);
    background: color-mix(in srgb, var(--c-primario) 6%, #fff);
}
.ci-ficha__clave {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ci-tinta);
    font-family: var(--ci-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.ci-foco {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-acento) 25%, transparent);
}
.ci-ficha__sello {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-family: var(--ci-mono);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ci-ficha__sello .icono { width: 13px; height: 13px; fill: currentColor; }

.ci-ficha__foto {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ci-fondo);
}
.ci-ficha__foto img { width: 100%; height: 100%; object-fit: cover; }

.ci-ficha__cuerpo { flex: 1; padding: 18px 18px 4px; }
.ci-ficha__nombre { margin: 0; color: var(--ci-tinta); font-size: 1.22rem; line-height: 1.22; overflow-wrap: anywhere; }
.ci-ficha__descripcion { margin: 8px 0 0; font-size: .98rem; line-height: 1.55; opacity: .86; }
.ci-ficha__tiempo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--ci-borde);
    border-radius: 4px;
    background: var(--ci-fondo);
    color: var(--ci-tinta);
    font-family: var(--ci-mono);
    font-size: .86rem;
    font-weight: 500;
}
.ci-ficha__tiempo .icono { flex: none; width: 16px; height: 16px; color: var(--ci-principal); }
.ci-ficha .ficha-ver { margin-top: 12px; }

.ci-ficha__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 18px 0;
    padding: 14px 0 18px;
    border-top: 1px dashed var(--s-linea-fuerte);
}
.ci-ficha__precio {
    display: flex;
    flex-direction: column;
    margin: 0;
    line-height: 1.1;
}
.ci-ficha__precio small {
    font-family: var(--ci-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}
.ci-ficha__precio strong {
    color: var(--ci-principal);
    font-family: var(--ci-mono);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.ci-ficha__precio .ci-ficha__unidad { margin-top: 2px; font-size: .78rem; letter-spacing: 0; text-transform: none; opacity: .8; }
.ci-ficha__precio .ci-ficha__sin { font-size: 1.02rem; white-space: normal; }

.ci-solicitar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 6px;
    background: var(--c-primario);
    color: var(--c-sobre-primario);
    font-family: var(--ci-titulo);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.ci-solicitar .icono { width: 17px; height: 17px; }
.ci-solicitar:hover { filter: brightness(1.08); }

/* ---------- Galería: esquinas de visor ---------- */
.ci-capturas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    margin: 0;
    padding: 8px;
    list-style: none;
}
@media (min-width: 700px) {
    .ci-capturas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; }
}
@media (min-width: 960px) {
    .ci-capturas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeria__mas > .ci-capturas { margin-top: 22px; }

.diseno-circuito .ci-captura__enlace {
    position: relative;
    display: block;
    overflow: visible;
    border-radius: 0;
    background: none;
    color: var(--ci-tinta);
    text-decoration: none;
}
.diseno-circuito .ci-captura__enlace:focus-visible { outline: 3px solid var(--ci-principal); outline-offset: 8px; }

.ci-captura__foto {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ci-alterna);
}
.ci-captura__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Las cuatro esquinas de visor (afuera de la foto) */
.ci-captura__enlace::before {
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    aspect-ratio: 1;
    width: calc(100% + 14px);
    --e: var(--c-primario);
    background:
        linear-gradient(var(--e) 0 0) 0 0 / 18px 2.5px no-repeat,
        linear-gradient(var(--e) 0 0) 0 0 / 2.5px 18px no-repeat,
        linear-gradient(var(--e) 0 0) 100% 0 / 18px 2.5px no-repeat,
        linear-gradient(var(--e) 0 0) 100% 0 / 2.5px 18px no-repeat,
        linear-gradient(var(--e) 0 0) 0 100% / 18px 2.5px no-repeat,
        linear-gradient(var(--e) 0 0) 0 100% / 2.5px 18px no-repeat,
        linear-gradient(var(--e) 0 0) 100% 100% / 18px 2.5px no-repeat,
        linear-gradient(var(--e) 0 0) 100% 100% / 2.5px 18px no-repeat;
    pointer-events: none;
}

.ci-captura__pie {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 12px 2px 0;
    overflow: hidden;
    font-family: var(--ci-mono);
    font-size: .8rem;
    line-height: 1.3;
    white-space: nowrap;
}
.ci-captura__numero { flex: none; color: var(--ci-principal); font-weight: 600; }
.ci-captura__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .85; }

@media (max-width: 599.98px) {
    .ci-captura__pie { font-size: .72rem; padding-top: 10px; }
}

/* ---------- Testimonios, preguntas y lo demás: blanco con borde fino ---------- */
.diseno-circuito .testimonio,
.diseno-circuito .promocion,
.diseno-circuito .pregunta,
.diseno-circuito .contacto__item,
.diseno-circuito .sucursal,
.diseno-circuito .especial__punto,
.diseno-circuito .persona,
.diseno-circuito .servicio { border-color: var(--ci-borde); border-radius: 8px; box-shadow: var(--ci-sombra); }
.diseno-circuito .promocion__foto { border-radius: 8px 8px 0 0; }
.diseno-circuito .testimonio > .icono { color: var(--ci-principal); opacity: .25; }
.diseno-circuito .testimonio__autor strong { font-family: var(--ci-titulo); letter-spacing: .02em; }
.diseno-circuito .testimonio__iniciales,
.diseno-circuito .contacto__icono,
.diseno-circuito .especial__marca,
.diseno-circuito .persona__foto--iniciales,
.diseno-circuito .pregunta__signo { border-radius: 6px; background: color-mix(in srgb, var(--c-primario) 10%, #fff); color: var(--ci-principal); }
.diseno-circuito .pregunta__signo { font-family: var(--ci-mono); }
.diseno-circuito .nosotros__foto img { border-radius: 8px; border: 8px solid var(--ci-oscuro); }
.diseno-circuito .nosotros__desde { border-radius: 6px; background: #fff; border: 1px solid var(--ci-borde); color: var(--ci-tinta); font-family: var(--ci-mono); font-size: .9rem; }
.diseno-circuito .nosotros__desde strong,
.diseno-circuito .nosotros__desde .icono { color: var(--ci-principal); }
.diseno-circuito .galeria__ver-mas { border-radius: 6px; font-family: var(--ci-mono); }
.diseno-circuito .mapa { border: 1px solid var(--ci-borde); border-radius: 8px; box-shadow: var(--ci-sombra); }
.diseno-circuito .horario__tabla { overflow: hidden; border: 1px solid var(--ci-borde); border-radius: 8px; background: #fff; }
.diseno-circuito .horario__tabla th,
.diseno-circuito .horario__tabla td { padding-inline: 18px; font-family: var(--ci-mono); font-size: .92rem; }
.diseno-circuito .horario__tabla tr:last-child th,
.diseno-circuito .horario__tabla tr:last-child td { border-bottom: 0; }
.diseno-circuito .horario__hoy th,
.diseno-circuito .horario__hoy td { background: color-mix(in srgb, var(--c-primario) 8%, #fff); }
.diseno-circuito .horario__hoy th { box-shadow: inset 4px 0 0 var(--c-primario); }
.diseno-circuito .horario__etiqueta { border-radius: 4px; background: var(--c-primario); color: var(--c-sobre-primario); }

.diseno-circuito .pie { background: var(--ci-oscuro); color: rgba(232, 238, 246, .82); }
.diseno-circuito .barra-acciones { background: color-mix(in srgb, #fff 95%, transparent); backdrop-filter: blur(10px); }
.diseno-circuito .barra-acciones__boton { font-family: var(--ci-titulo); letter-spacing: .02em; }
.diseno-circuito .barra-acciones__boton--principal { border-radius: 6px; font-weight: 700; text-transform: uppercase; }

/* ---------- Imagen generada con IA (7.j) ---------- */
.ci-monitor__pantalla > .marca-ia--foto { bottom: 10px; }