/* ==========================================================================
   Gasomarshal · Fortinet · Seguridad informática y Anexo 21 RMF 2026
   Hoja de estilos exclusiva para fortinet-anexo21.html.
   Reutiliza variables base de partner-odoo.css. La página debe enlazar
   AMBAS: partner-odoo.css y fortinet-anexo21.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Paleta Fortinet (rojo/negro) inyectada para esta página
   -------------------------------------------------------------------------- */
.po-page.fn-page {
    --fn-red:        #da291c;
    --fn-red-dark:   #b21f15;
    --fn-red-soft:   #fde7e5;
    --fn-ink:        #0b1e2d;
    --fn-ink-soft:   #1f3344;
    --fn-slate:      #475569;
    --fn-amber:      #f59e0b;
    --fn-blue:       #2e70c9;
    --fn-teal:       #0e7490;
    --fn-purple:     #6d28d9;
    --fn-green:      #15803d;
}

/* --------------------------------------------------------------------------
   Hero · banner oscuro con acento rojo Fortinet
   -------------------------------------------------------------------------- */
.fn-page .fn-hero-banner {
    background:
        radial-gradient(closest-side at 90% 0%, rgba(218, 41, 28, 0.28), transparent 70%),
        linear-gradient(135deg, #0b1e2d 0%, #1f3344 100%);
    color: #ffffff;
    border-radius: 18px;
    padding: 40px 36px;
    margin-top: 14px;
    position: relative;
    overflow: hidden;
}
.fn-page .fn-hero-banner .fn-hero-eyebrow {
    color: #ff8079;
    font-weight: 700;
    letter-spacing: 4px;
    font-size: 13px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}
.fn-page .fn-hero-banner h2 {
    color: #ffffff;
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.2;
}
.fn-page .fn-hero-banner h2 b {
    color: var(--fn-red);
    font-weight: 800;
}
.fn-page .fn-hero-banner p {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 720px;
}
.fn-page .fn-hero-banner .fn-hero-pills {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.fn-page .fn-hero-banner .fn-hero-pill {
    background: rgba(218, 41, 28, 0.16);
    color: #fbb6b1;
    border: 1px solid rgba(218, 41, 28, 0.5);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   Banner-cita comercial estilo Fortinet (testimonio / claim)
   -------------------------------------------------------------------------- */
.fn-page .fn-claim-band {
    background: var(--fn-ink);
    color: #ffffff;
    border-radius: 16px;
    padding: 30px 28px;
    text-align: center;
    box-shadow: 0 12px 28px rgba(11, 30, 45, 0.18);
}
.fn-page .fn-claim-band .fn-claim-text {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: #ffffff;
    margin: 0 auto;
    max-width: 720px;
}
.fn-page .fn-claim-band .fn-claim-text b {
    color: var(--fn-red);
    font-weight: 700;
}
.fn-page .fn-claim-band .fn-claim-attr {
    margin-top: 14px;
    color: #cbd5e1;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Tarjetas de pilares de seguridad Anexo 21
   -------------------------------------------------------------------------- */
.fn-page .fn-pillar {
    background: #ffffff;
    border-radius: 16px;
    padding: 26px 24px 22px;
    height: 100%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    border-top: 5px solid var(--fn-red);
    position: relative;
}
.fn-page .fn-pillar.fn-pillar--ink   { border-top-color: var(--fn-ink); }
.fn-page .fn-pillar.fn-pillar--blue  { border-top-color: var(--fn-blue); }
.fn-page .fn-pillar .fn-pillar-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--fn-red-soft);
    color: var(--fn-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}
.fn-page .fn-pillar.fn-pillar--ink .fn-pillar-icon {
    background: rgba(11, 30, 45, 0.08);
    color: var(--fn-ink);
}
.fn-page .fn-pillar.fn-pillar--blue .fn-pillar-icon {
    background: rgba(46, 112, 201, 0.12);
    color: var(--fn-blue);
}
.fn-page .fn-pillar h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--fn-ink);
    margin: 0 0 8px;
}
.fn-page .fn-pillar p {
    color: var(--fn-slate);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Catálogo de productos Fortinet (cards con imagen real)
   -------------------------------------------------------------------------- */
.fn-page .fn-product {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}
.fn-page .fn-product:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10);
}
.fn-page .fn-product .fn-product-img {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.fn-page .fn-product .fn-product-img img {
    max-width: 80%;
    max-height: 90%;
    height: auto;
    object-fit: contain;
}
.fn-page .fn-product .fn-product-body {
    padding: 18px 22px 22px;
    flex: 1;
}
.fn-page .fn-product .fn-product-tag {
    color: var(--fn-red);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.fn-page .fn-product h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--fn-ink);
    margin: 0 0 8px;
}
.fn-page .fn-product p {
    color: var(--fn-slate);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Checklist de cumplimiento Anexo 21 (estilo Fortinet)
   -------------------------------------------------------------------------- */
.fn-page .fn-check-block {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    height: 100%;
    border-left: 6px solid var(--fn-red);
}
.fn-page .fn-check-block.fn-check-block--ink { border-left-color: var(--fn-ink); }
.fn-page .fn-check-block h4 {
    font-size: 16px;
    font-weight: 800;
    color: var(--fn-ink);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(218, 41, 28, 0.25);
    display: flex;
    align-items: center;
    gap: 10px;
}
.fn-page .fn-check-block h4 i {
    color: var(--fn-red);
    font-size: 22px;
}
.fn-page .fn-check-block.fn-check-block--ink h4 {
    border-bottom-color: rgba(11, 30, 45, 0.18);
}
.fn-page .fn-check-block.fn-check-block--ink h4 i { color: var(--fn-ink); }
.fn-page .fn-check-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fn-page .fn-check-block ul li {
    padding: 9px 0 9px 30px;
    position: relative;
    font-size: 13px;
    color: var(--fn-ink);
    line-height: 1.45;
    border-top: 1px solid #f1f5f9;
}
.fn-page .fn-check-block ul li:first-child { border-top: none; }
.fn-page .fn-check-block ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fn-red-soft);
    border: 2px solid var(--fn-red);
}
.fn-page .fn-check-block ul li:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--fn-red-dark);
    border-bottom: 2px solid var(--fn-red-dark);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Beneficios de continuidad de negocio
   -------------------------------------------------------------------------- */
.fn-page .fn-benefit {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px 22px 20px;
    height: 100%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.05);
    text-align: left;
    transition: transform .2s ease;
}
.fn-page .fn-benefit:hover { transform: translateY(-3px); }
.fn-page .fn-benefit .fn-benefit-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fn-red);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 14px;
    box-shadow: 0 8px 18px rgba(218, 41, 28, 0.28);
}
.fn-page .fn-benefit.fn-benefit--ink  .fn-benefit-icon { background: var(--fn-ink); box-shadow: 0 8px 18px rgba(11, 30, 45, 0.25); }
.fn-page .fn-benefit.fn-benefit--blue .fn-benefit-icon { background: var(--fn-blue); box-shadow: 0 8px 18px rgba(46, 112, 201, 0.25); }
.fn-page .fn-benefit.fn-benefit--teal .fn-benefit-icon { background: var(--fn-teal); box-shadow: 0 8px 18px rgba(14, 116, 144, 0.25); }
.fn-page .fn-benefit.fn-benefit--amber .fn-benefit-icon { background: var(--fn-amber); box-shadow: 0 8px 18px rgba(245, 158, 11, 0.28); }
.fn-page .fn-benefit.fn-benefit--purple .fn-benefit-icon { background: var(--fn-purple); box-shadow: 0 8px 18px rgba(109, 40, 217, 0.25); }
.fn-page .fn-benefit h5 {
    font-size: 16px;
    font-weight: 800;
    color: var(--fn-ink);
    margin: 0 0 8px;
}
.fn-page .fn-benefit p {
    color: var(--fn-slate);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Servicios profesionales (numerados, estilo "stack")
   -------------------------------------------------------------------------- */
.fn-page .fn-service-row {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    border-left: 6px solid var(--fn-red);
    transition: transform .2s ease, box-shadow .2s ease;
}
.fn-page .fn-service-row:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.fn-page .fn-service-row .fn-service-num {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--fn-red);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 1px;
}
.fn-page .fn-service-row .fn-service-content { flex: 1; }
.fn-page .fn-service-row h5 {
    font-size: 16px;
    font-weight: 800;
    color: var(--fn-ink);
    margin: 0 0 4px;
}
.fn-page .fn-service-row p {
    color: var(--fn-slate);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 575px) {
    .fn-page .fn-service-row { flex-direction: column; gap: 10px; }
}

/* --------------------------------------------------------------------------
   Banda de KPI / stats para liderazgo de Fortinet
   -------------------------------------------------------------------------- */
.fn-page .fn-leadership-band {
    background: linear-gradient(135deg, var(--fn-ink) 0%, var(--fn-ink-soft) 100%);
    border-radius: 16px;
    padding: 30px 24px;
    color: #ffffff;
}
.fn-page .fn-leadership-stat {
    text-align: center;
    padding: 12px 8px;
}
.fn-page .fn-leadership-stat .fn-leadership-num {
    font-size: 40px;
    font-weight: 800;
    color: var(--fn-red);
    line-height: 1;
    letter-spacing: 1px;
}
.fn-page .fn-leadership-stat .fn-leadership-lbl {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
    margin-top: 12px;
    display: block;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   Banda de riesgo (similar al de fueldbox pero con paleta Fortinet)
   -------------------------------------------------------------------------- */
.fn-page .fn-risk-band {
    background: linear-gradient(135deg, #fef2f2 0%, #fff7f6 100%);
    border-left: 6px solid var(--fn-red);
    border-radius: 14px;
    padding: 22px 26px;
    margin-top: 12px;
}
.fn-page .fn-risk-band h4 {
    color: var(--fn-red-dark);
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fn-page .fn-risk-band h4 i {
    color: var(--fn-red);
    font-size: 22px;
}
.fn-page .fn-risk-band p {
    color: #7c2d12;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}

/* --------------------------------------------------------------------------
   CTA con paleta Fortinet (rojo)
   -------------------------------------------------------------------------- */
.fn-page .fn-cta-band {
    background: linear-gradient(135deg, var(--fn-red) 0%, var(--fn-red-dark) 100%);
    border-radius: 18px;
    padding: 36px 30px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 12px 32px rgba(218, 41, 28, 0.28);
    position: relative;
    z-index: 2;
}
.fn-page .fn-cta-band h3 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.fn-page .fn-cta-band p {
    color: #ffe5e3;
    font-size: 15px;
    margin: 0 auto 22px;
    max-width: 720px;
    line-height: 1.55;
}
.fn-page .fn-cta-band p b { color: #ffffff; font-weight: 800; }
.fn-page .fn-cta-band .po-btn {
/*     background: #ffffff;
    color: var(--fn-red-dark);
    border-color: #ffffff;
 */
    display: inline-block;
    background: #ffffff;
    color: var(--fn-red-dark);
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: 1px;
    margin: 0 6px 8px;
    transition: transform .2s ease, background-color .2s ease;
    border: 2px solid #ffffff;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
.fn-page .fn-cta-band .po-btn:hover {
    background: #ffe5e3;
    color: var(--fn-red-dark);
}
.fn-page .fn-cta-band .po-btn.po-btn--outline {
    background: transparent;
    color: #ffffff;
}
.fn-page .fn-cta-band .po-btn.po-btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Logo Fortinet en hero (centrado y correctamente espaciado)
   -------------------------------------------------------------------------- */
.fn-page .fn-partner-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.fn-page .fn-partner-row img {
    max-height: 60px;
    height: auto;
}
.fn-page .fn-partner-row .fn-partner-id {
    color: var(--fn-slate);
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1.55;
}
.fn-page .fn-partner-row .fn-partner-id b {
    color: var(--fn-red);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .fn-page .fn-hero-banner { padding: 28px 22px; }
    .fn-page .fn-hero-banner h2 { font-size: 26px; }
    .fn-page .fn-claim-band .fn-claim-text { font-size: 18px; }
    .fn-page .fn-leadership-stat .fn-leadership-num { font-size: 30px; }
}