/* ============================================================================
   CielTechno SAS — hoja de estilos propia
   ----------------------------------------------------------------------------
   Complementa (no reemplaza) el kit vendorizado Now UI Design System Pro.
   Debe cargarse DESPUÉS de now-design-system-pro.css para poder sobrescribir.

   Referencia: DESIGN.md — "The Audit-Ready Lab"
     Sky CTA      #2ca8ff   · única acción primaria (The One CTA Rule)
     Navy         #344767   · estructura y autoridad
     Terracota    #f05f3e   · acento, nunca CTA
     Steel        #7f8fa6   · texto informativo
     Tipografía   Montserrat únicamente (The Weight-Only Rule)
     Elevación    0 5px 10px 0 rgba(0,0,0,.08) — solo en .card

   Índice
     1. Hero de portada .............. .ct-hero      (templates/header.html)
     2. Tarjetas de servicio ......... .ct-card-*    (templates/homepage.html)
     3. Arrhenius Study .............. .ar-*         (templates/arrhenius.html)
     4. Accesibilidad global ......... prefers-reduced-motion

   Todo el movimiento es CSS puro: no hay JavaScript asociado a esta hoja.
   ========================================================================== */


/* ============================================================================
   1. HERO DE PORTADA — "Panel de Instrumentos"
   ----------------------------------------------------------------------------
   Fondo compuesto para .page-header.min-vh-60 en templates/header.html.
   Capas: campo profundo · papel milimetrado · panel de datos (Arrhenius +
   estabilidad) · traza de telemetría · registros de lote · grano · scrim.
   Cada capa codifica uno de los servicios ofrecidos.
   ========================================================================== */

.ct-hero {
    --ct-navy: #344767;
    --ct-navy-deep: #0d1b30;
    --ct-navy-mid: #1a2a47;
    --ct-sky: #2ca8ff;
    --ct-terracotta: #f05f3e;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--ct-navy-deep);
    background-image:
        radial-gradient(1100px 620px at 74% 12%, rgba(44, 168, 255, .22), transparent 62%),
        radial-gradient(760px 560px at 8% 92%, rgba(240, 95, 62, .13), transparent 60%),
        linear-gradient(152deg, var(--ct-navy-deep) 0%, var(--ct-navy-mid) 48%, var(--ct-navy) 100%);
}

/* El kit no define .min-vh-60 (solo min-vh-75 y min-vh-100). */
.ct-hero.min-vh-60 { min-height: 60vh; }

/* --- Capa 1: papel milimetrado de laboratorio --------------------------- */
.ct-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(rgba(44, 168, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 168, 255, .10) 1px, transparent 1px);
    background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
    -webkit-mask-image: radial-gradient(120% 100% at 70% 0%, #000 12%, rgba(0, 0, 0, .35) 62%, transparent 92%);
    mask-image: radial-gradient(120% 100% at 70% 0%, #000 12%, rgba(0, 0, 0, .35) 62%, transparent 92%);
}

/* --- Capa 2: registros de lote (BPMPro / MyBatch) ----------------------- */
.ct-hero__records {
    position: absolute;
    z-index: 0;
    left: -4%;
    bottom: -12%;
    width: 46%;
    max-width: 620px;
    opacity: .5;
    pointer-events: none;
}

/* --- Capa 3: panel de datos (Arrhenius + estabilidad) ------------------- */
.ct-hero__panel {
    position: absolute;
    z-index: 0;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: 58%;
    max-width: 780px;
    pointer-events: none;
}

/* --- Capa 4: traza de telemetría (T° / HR) ------------------------------ */
.ct-hero__telemetry {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 132px;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ct-hero__telemetry svg {
    display: block;
    width: 200%;
    height: 100%;
    animation: ct-scroll 34s linear infinite;
}

/* --- Capa 5: grano ------------------------------------------------------ */
.ct-hero__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Capa 6: scrim de legibilidad (contraste AA sobre el texto) --------- */
.ct-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9, 18, 33, .90) 0%, rgba(9, 18, 33, .74) 38%, rgba(9, 18, 33, .18) 68%, transparent 100%),
        linear-gradient(0deg, rgba(9, 18, 33, .55) 0%, transparent 42%);
}

.ct-hero .container { position: relative; z-index: 2; }

/* --- Chips de servicio -------------------------------------------------- */
.ct-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .32rem .85rem;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 30px;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ct-chip--next {
    color: #ffd7cc;
    border-color: rgba(240, 95, 62, .55);
    background: rgba(240, 95, 62, .14);
}
.ct-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ct-sky);
    flex: 0 0 auto;
}
.ct-chip--next .ct-chip__dot {
    background: var(--ct-terracotta);
    animation: ct-pulse 2.6s ease-in-out infinite;
}

.ct-eyebrow {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(44, 168, 255, .95);
}
.ct-rule {
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--ct-sky), rgba(44, 168, 255, 0));
}

/* --- Animaciones del hero ----------------------------------------------- */
@keyframes ct-scroll { to { transform: translate3d(-50%, 0, 0); } }
@keyframes ct-pulse  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes ct-draw   { to { stroke-dashoffset: 0; } }
@keyframes ct-point  { to { opacity: 1; transform: none; } }
@keyframes ct-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.ct-draw {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: ct-draw 2.6s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ct-point {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.2);
    animation: ct-point .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.ct-fade { opacity: 0; animation: ct-point .9s ease-out forwards; }

.ct-hero__title,
.ct-hero__sub,
.ct-hero__actions,
.ct-hero__chips { animation: ct-rise .8s cubic-bezier(.22, 1, .36, 1) both; }
.ct-hero__title   { animation-delay: .05s; }
.ct-hero__sub     { animation-delay: .18s; }
.ct-hero__actions { animation-delay: .30s; }
.ct-hero__chips   { animation-delay: .42s; }

@media (max-width: 991.98px) {
    .ct-hero__panel   { width: 92%; right: -14%; opacity: .5; }
    .ct-hero__records { display: none; }
    .ct-hero__scrim   { background: linear-gradient(180deg, rgba(9, 18, 33, .72) 0%, rgba(9, 18, 33, .86) 100%); }
}
@media (max-width: 575.98px) {
    .ct-hero__telemetry { height: 90px; }
}


/* ============================================================================
   2. TARJETAS DE SERVICIO (homepage)
   ----------------------------------------------------------------------------
   Las imágenes de las tarjetas tienen relaciones de aspecto distintas
   (4:3 las fotos, 1.83:1 el logo de Arrhenius). Se normalizan a una caja 4:3
   para que los cuerpos de las cuatro tarjetas arranquen a la misma altura.
   ========================================================================== */

.ct-card-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    background-color: #fff;
}


/* ============================================================================
   3. ARRHENIUS STUDY — landing page
   ----------------------------------------------------------------------------
   Paleta tomada del logotipo: navy #001c38 · teal #00a88c / #008c8c.
   El teal es acento de producto, NUNCA color de acción: la CTA sigue siendo
   sky #2ca8ff conforme a The One CTA Rule de DESIGN.md.
   ========================================================================== */

.ar {
    --ar-navy: #001c38;
    --ar-navy-soft: #0d2846;
    --ar-teal: #00a88c;
    --ar-teal-deep: #008c8c;
    --ar-sky: #2ca8ff;
    --ar-terracotta: #f05f3e;
    --ar-surface: #f7f8fa;
}

/* Recorte del blanco sobrante de los PNG del logotipo. El contenido está
   centrado en ambos archivos, por eso object-fit:cover + object-position:center
   recorta exacto sin generar assets nuevos. */
.ar-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
}
.ar-logo-wide  { aspect-ratio: 1061 / 414; max-width: 420px; }
.ar-logo-stack { aspect-ratio: 537 / 613;  max-width: 190px; }

/* --- Hero --------------------------------------------------------------- */
.ar-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--ar-navy);
    background-image:
        radial-gradient(900px 560px at 82% 22%, rgba(0, 168, 140, .26), transparent 62%),
        radial-gradient(700px 520px at 6% 92%, rgba(44, 168, 255, .16), transparent 60%),
        linear-gradient(150deg, #00121f 0%, var(--ar-navy) 46%, #0d2846 100%);
}
.ar-hero__grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(rgba(0, 168, 140, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 140, .14) 1px, transparent 1px);
    background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
    -webkit-mask-image: radial-gradient(120% 100% at 76% 8%, #000 10%, rgba(0, 0, 0, .3) 60%, transparent 92%);
    mask-image: radial-gradient(120% 100% at 76% 8%, #000 10%, rgba(0, 0, 0, .3) 60%, transparent 92%);
}
.ar-hero__plot {
    position: absolute; z-index: 0; right: -3%; top: 50%;
    transform: translateY(-50%);
    width: 54%; max-width: 720px; pointer-events: none;
}
.ar-hero__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 10, 20, .92) 0%, rgba(0, 10, 20, .72) 40%, rgba(0, 10, 20, .14) 72%, transparent 100%),
        linear-gradient(0deg, rgba(0, 10, 20, .5) 0%, transparent 40%);
}
.ar-hero .container { position: relative; z-index: 2; }

/* Los PNG del logotipo tienen fondo blanco opaco: sobre el hero oscuro se
   presentan en una placa blanca en vez de forzar un recorte falso con
   filter:invert(), que volvería el teal magenta. */
.ar-hero__plate {
    display: inline-block;
    background: #fff;
    border-radius: .625rem;
    padding: .9rem 1.35rem;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .18);
}
.ar-hero__plate .ar-logo { max-width: 300px; }

.ar-eyebrow {
    font-size: .75rem; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: #6fe3c8;
}
.ar-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .34rem .9rem; border-radius: 30px;
    font-size: .75rem; font-weight: 500; letter-spacing: .02em;
    color: #ffd7cc; background: rgba(240, 95, 62, .16);
    border: 1px solid rgba(240, 95, 62, .55);
}
.ar-badge__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ar-terracotta); animation: ar-pulse 2.6s ease-in-out infinite;
}

/* --- Métricas ----------------------------------------------------------- */
.ar-metric { border-left: 2px solid rgba(0, 168, 140, .5); padding-left: 1rem; }
.ar-metric__n { font-size: 2rem; font-weight: 300; line-height: 1.1; color: var(--ar-navy); }
.ar-metric__l { font-size: .8rem; color: #7f8fa6; margin: 0; }

/* --- Tarjetas de módulo ------------------------------------------------- */
.ar-card {
    height: 100%;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: .625rem;
    padding: 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .08);
    border-color: rgba(0, 168, 140, .45);
}
.ar-card__ix {
    font-size: .7rem; font-weight: 500; letter-spacing: .12em;
    color: var(--ar-teal-deep);
}
.ar-card h5 { margin: .35rem 0 .5rem; }
.ar-card p  { color: #7f8fa6; margin: 0; font-size: .925rem; }

/* --- Flujo de trabajo --------------------------------------------------- */
.ar-step { position: relative; padding-left: 3.25rem; padding-bottom: 2rem; }
.ar-step:last-child { padding-bottom: 0; }
.ar-step::before {
    content: attr(data-step);
    position: absolute; left: 0; top: 0;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 500; color: #fff;
    background: var(--ar-navy);
}
.ar-step::after {
    content: ''; position: absolute; left: 17px; top: 40px; bottom: 6px;
    width: 1px; background: linear-gradient(180deg, rgba(0, 168, 140, .55), rgba(0, 168, 140, .08));
}
.ar-step:last-child::after { display: none; }
.ar-step h5 { margin-bottom: .35rem; }
.ar-step p  { color: #7f8fa6; margin: 0; }

/* --- Bloque normativo --------------------------------------------------- */
.ar-reg {
    background: var(--ar-surface);
    border-radius: .625rem;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--ar-teal);
    height: 100%;
}
.ar-reg h6 { color: var(--ar-navy); margin-bottom: .35rem; }
.ar-reg p  { color: #7f8fa6; margin: 0; font-size: .9rem; }

/* --- CTA final ---------------------------------------------------------- */
.ar-cta {
    background-color: var(--ar-navy);
    background-image:
        radial-gradient(680px 380px at 88% 10%, rgba(0, 168, 140, .3), transparent 62%),
        radial-gradient(520px 340px at 4% 96%, rgba(44, 168, 255, .18), transparent 60%);
    border-radius: .625rem;
    overflow: hidden;
    position: relative;
}

/* --- Animaciones de la landing ------------------------------------------ */
@keyframes ar-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes ar-draw  { to { stroke-dashoffset: 0; } }
@keyframes ar-in    { to { opacity: 1; transform: none; } }

.ar-draw {
    stroke-dasharray: 1200; stroke-dashoffset: 1200;
    animation: ar-draw 2.4s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ar-in {
    opacity: 0; transform: translateY(16px);
    animation: ar-in .8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ar-pt {
    opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2);
    animation: ar-in .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@media (max-width: 991.98px) {
    .ar-hero__plot  { width: 96%; right: -18%; opacity: .42; }
    .ar-hero__scrim { background: linear-gradient(180deg, rgba(0, 10, 20, .74), rgba(0, 10, 20, .9)); }
}


/* ============================================================================
   4. ACCESIBILIDAD — movimiento reducido
   ----------------------------------------------------------------------------
   WCAG 2.1 AA (baseline recomendado en PRODUCT.md), criterio 2.3.3.
   Un único bloque para todas las animaciones de esta hoja.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ct-hero__telemetry svg,
    .ct-chip--next .ct-chip__dot,
    .ar-badge__dot {
        animation: none;
    }
    .ct-draw,
    .ar-draw {
        stroke-dashoffset: 0;
        animation: none;
    }
    .ct-point,
    .ct-fade,
    .ar-in,
    .ar-pt {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .ct-hero__title,
    .ct-hero__sub,
    .ct-hero__actions,
    .ct-hero__chips {
        animation: none;
    }
    .ar-card { transition: none; }
}