/* ContaScript — sitio público (rediseño 2026): encabezado, pie, Inicio y Contacto.
   Todo vive bajo la clase .cs-sitio para no chocar con la plantilla Porto del tema.
   Tipografías: Bricolage Grotesque 600/800 (títulos) y Figtree 400-700 (texto), cargadas en Head.cshtml. */

/* ---------- Base ---------- */
.cs-sitio {
    --cs-navy: #072F5F;
    --cs-hero: #061F40;
    --cs-azul: #0F70B9;
    --cs-azul-txt: #0D5F98;
    --cs-azul-hover: #073263;
    --cs-claro: #CFE2F4;
    --cs-fondo: #F4F6F5;
    --cs-borde: #DCE3E0;
    --cs-txt: #33434F;
    --cs-gris: #4A5A66;
    --cs-pie: #BFD0DB;
    font-family: 'Figtree', system-ui, sans-serif;
    font-size: 16px;
    line-height: normal;
    color: var(--cs-navy);
    text-align: left;
}
.cs-sitio, .cs-sitio *, .cs-sitio *::before, .cs-sitio *::after { box-sizing: border-box; }

/* Reinicio frente a Porto (bootstrap + theme-elements + colors): dentro de .cs-sitio los elementos no heredan color, mayúsculas,
   tracking, interlineado ni márgenes de la plantilla. Especificidad (0,1,1): gana a los selectores de elemento de Porto
   (h1 {...}, p {...}, a {...}, li {...}, form label {...}) sin forzar prioridad; las clases de abajo (.cs-sitio .cs-x) lo reemplazan donde la referencia pide otra cosa. */
.cs-sitio h1, .cs-sitio h2, .cs-sitio h3, .cs-sitio h4, .cs-sitio h5, .cs-sitio h6 {
    margin: 0; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; font-style: normal;
    font-weight: 700; line-height: normal; letter-spacing: normal; text-transform: none; text-shadow: none; text-decoration: none; -webkit-font-smoothing: auto;
}
.cs-sitio p {
    margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; text-shadow: none;
}
.cs-sitio ul, .cs-sitio ol { margin: 0; padding: 0; list-style: none; }
.cs-sitio li { margin: 0; padding: 0; color: inherit; line-height: inherit; text-transform: none; }
.cs-sitio a, .cs-sitio a:hover, .cs-sitio a:focus, .cs-sitio a:active {
    color: inherit; background: none; text-decoration: none; text-transform: none; letter-spacing: normal; text-shadow: none;
}
.cs-sitio label { margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; }
.cs-sitio button, .cs-sitio input, .cs-sitio select, .cs-sitio textarea {
    font-family: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; text-decoration: none;
}
.cs-sitio img { max-width: 100%; border: 0; }
.cs-sitio strong { font-weight: 700; color: inherit; }
/* Porto quita el contorno de los enlaces con prioridad máxima (body a): el foco se marca con sombra para que siempre se vea */
.cs-sitio a:focus-visible { box-shadow: 0 0 0 3px #5BA6E6; border-radius: 4px; }
.cs-sitio button:focus-visible, .cs-sitio input:focus-visible, .cs-sitio select:focus-visible, .cs-sitio textarea:focus-visible {
    outline: 3px solid #5BA6E6; outline-offset: 2px;
}
.cs-sitio .cs-titulo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }

/* Contenedores como en las referencias: 1200 px de contenido más 24 px de relleno por lado (content-box). Con border-box el contenido
   mediría 1152 px y todo el texto de las secciones se acomodaría distinto. */
.cs-sitio .cs-enc__in, .cs-sitio .cs-imp__in, .cs-sitio .cs-hero__in, .cs-sitio .cs-banda__in, .cs-sitio .cs-sec,
.cs-sitio .cs-contacto, .cs-sitio .cs-pie__in, .cs-sitio .cs-pie__copy, .cs-sitio .cs-form, .cs-sitio .cs-exito { box-sizing: content-box; }

/* ---------- Botones ---------- */
.cs-sitio .cs-btn, .cs-sitio .cs-btn:hover, .cs-sitio .cs-btn:focus {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1.5px solid transparent;
    font-family: inherit; font-size: 16px; font-weight: 600; line-height: normal; text-align: center; cursor: pointer;
    text-decoration: none;
}
.cs-sitio .cs-btn--pri, .cs-sitio .cs-btn--pri:hover, .cs-sitio .cs-btn--pri:focus { background: var(--cs-azul); border-color: var(--cs-azul); color: #FFFFFF; font-weight: 700; }
.cs-sitio .cs-btn--pri:hover { background: #0C5F9E; border-color: #0C5F9E; }
.cs-sitio .cs-btn--borde, .cs-sitio .cs-btn--borde:hover, .cs-sitio .cs-btn--borde:focus { background: transparent; border-color: var(--cs-navy); color: var(--cs-navy); }
.cs-sitio .cs-btn--borde:hover { background: #EEF3F8; }
.cs-sitio .cs-btn--navy, .cs-sitio .cs-btn--navy:hover, .cs-sitio .cs-btn--navy:focus { background: var(--cs-navy); border-color: var(--cs-navy); color: #FFFFFF; font-weight: 700; }
.cs-sitio .cs-btn--navy:hover { background: #0A3F7F; border-color: #0A3F7F; }
.cs-sitio .cs-btn--blanco, .cs-sitio .cs-btn--blanco:hover, .cs-sitio .cs-btn--blanco:focus { background: #FFFFFF; border-color: #FFFFFF; color: var(--cs-navy); font-weight: 700; }
.cs-sitio .cs-btn--blanco:hover { background: #E8F1FA; border-color: #E8F1FA; }
.cs-sitio .cs-btn--linea-blanca, .cs-sitio .cs-btn--linea-blanca:hover, .cs-sitio .cs-btn--linea-blanca:focus { background: transparent; border-color: #FFFFFF; color: #FFFFFF; font-weight: 700; }
.cs-sitio .cs-btn--linea-blanca:hover { background: rgba(255,255,255,0.12); }
.cs-sitio .cs-btn--linea-hero, .cs-sitio .cs-btn--linea-hero:hover, .cs-sitio .cs-btn--linea-hero:focus { background: transparent; border-color: #5E7A8E; color: #FFFFFF; font-weight: 600; }
.cs-sitio .cs-btn--linea-hero:hover { background: rgba(255,255,255,0.08); }
.cs-sitio .cs-btn--lg { min-height: 54px; padding: 0 26px; border-radius: 12px; font-size: 18px; }
.cs-sitio .cs-btn--bloque { display: flex; width: 100%; }

/* ---------- Franja de impersonación ---------- */
.cs-imp { background: #FEF3C7; border-bottom: 1px solid #F3D38A; }
.cs-imp__in { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.cs-imp__txt { display: flex; align-items: center; gap: 12px; color: #6B3A04; font-size: 17px; line-height: normal; min-width: 0; }
.cs-imp__txt svg { flex: none; }
.cs-imp__txt strong { font-weight: 700; }
.cs-sitio .cs-imp__btn, .cs-sitio .cs-imp__btn:hover, .cs-sitio .cs-imp__btn:focus {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px;
    background: #6B3A04; color: #FFFFFF; font-weight: 700; text-align: center;
}
.cs-sitio .cs-imp__btn:hover { background: #55300A; }

/* ---------- Encabezado ---------- */
.cs-enc { background: #FFFFFF; border-bottom: 1px solid var(--cs-borde); position: relative; z-index: 50; }
.cs-enc--imp { border-bottom: 2px solid #B45309; }
.cs-enc__in { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.cs-enc__logo { display: flex; align-items: center; }
.cs-enc__logo img { height: 52px; width: auto; display: block; }
.cs-enc__menu { display: contents; }
.cs-enc__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-weight: 600; font-size: 16px; }
.cs-sitio .cs-enc__link, .cs-sitio .cs-enc__link:hover, .cs-sitio .cs-enc__link:focus {
    display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-navy); font-weight: 600;
}
.cs-sitio .cs-enc__link:hover { color: var(--cs-azul-hover); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cs-sitio .cs-enc__link[aria-current="page"], .cs-sitio .cs-enc__link[aria-current="page"]:hover {
    color: var(--cs-azul-txt); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.cs-enc__sep { width: 1px; height: 28px; background: #C9D3CF; }
.cs-sitio .cs-enc__admin, .cs-sitio .cs-enc__admin:hover, .cs-sitio .cs-enc__admin:focus {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; background: var(--cs-navy); color: #FFFFFF; font-weight: 600;
}
.cs-sitio .cs-enc__admin:hover { background: #0A3F7F; }
.cs-enc__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cs-pill {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 6px; border-radius: 999px;
    background: #E4EEF8; font-weight: 600; color: var(--cs-navy);
}
.cs-pill__ini {
    width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--cs-navy); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.cs-pill--staff .cs-pill__ini { background: var(--cs-azul); }
.cs-pill--imp { background: #FEF3C7; border: 1.5px solid #B45309; color: #6B3A04; }
.cs-pill--imp .cs-pill__ini { background: #B45309; }
.cs-sitio .cs-enc__salir, .cs-sitio .cs-enc__salir:hover, .cs-sitio .cs-enc__salir:focus {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--cs-gris); font-weight: 600;
}
.cs-sitio .cs-enc__salir:hover { color: var(--cs-navy); text-decoration: underline; }
.cs-sitio .cs-enc__toggle {
    display: none; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px;
    border: 1.5px solid var(--cs-navy); border-radius: 10px; background: #FFFFFF; color: var(--cs-navy);
    font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}

/* ---------- Portada ---------- */
.cs-pagina { background: var(--cs-fondo); }
.cs-hero { background: var(--cs-hero); color: #FFFFFF; position: relative; overflow: hidden; }
/* Líneas de circuito: siempre detrás del contenido (.cs-hero__in tiene z-index 1) y fuera del bloque de texto.
   Tres piezas con su propio viewBox: un motivo a la derecha (detrás de la tarjeta, solo si el texto y la tarjeta van lado a lado)
   y dos franjas en las orillas superior e inferior, dentro del relleno de la portada, donde no hay texto. */
.cs-hero__circ { position: absolute; pointer-events: none; z-index: 0; opacity: 0.55; }
.cs-hero__circ--der { display: none; top: 0; right: 0; width: min(48%, 680px); height: 100%; }
.cs-hero__circ--arriba { top: 0; left: 0; width: 100%; height: 72px; }
.cs-hero__circ--abajo { bottom: 0; left: 0; width: 100%; height: 80px; }
.cs-hero__in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 96px 24px 104px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.cs-hero__texto { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cs-chip {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: rgba(91,166,230,0.16); border: 1px solid rgba(91,166,230,0.45); color: var(--cs-claro); font-weight: 600; font-size: 15px;
}
.cs-chip__punto { width: 8px; height: 8px; border-radius: 50%; background: #5BE0A8; flex: none; }
.cs-chip--chico { padding: 6px 12px; font-size: 14px; }
.cs-sitio .cs-hero__h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(46px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.04em; }
.cs-sitio .cs-hero__lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: #D5E0E7; max-width: 560px; }
.cs-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.cs-hero .cs-btn--lg { padding: 0 28px; }
.cs-hero__checks { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 12px; font-size: 16px; color: var(--cs-pie); }
.cs-hero__chat { flex: 1 1 380px; min-width: 0; max-width: 440px; position: relative; }
.cs-chat { background: #F2F5F8; color: var(--cs-navy); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.12); }
.cs-chat__cab { background: #FFFFFF; padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #E1E7EC; }
.cs-chat__cab img { height: 30px; width: auto; }
.cs-chat__quien { display: flex; flex-direction: column; }
.cs-chat__nombre { font-weight: 700; font-size: 16px; }
.cs-chat__estado { font-size: 13px; color: var(--cs-verde, #1F7A4D); }
.cs-chat__cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.45; }
.cs-burbuja { padding: 10px 14px; box-sizing: content-box; }
.cs-burbuja--yo { align-self: flex-end; max-width: 80%; background: #D9FDD3; border-radius: 16px 16px 4px 16px; }
.cs-burbuja--ellos { align-self: flex-start; max-width: 86%; background: #FFFFFF; border-radius: 16px 16px 16px 4px; }
.cs-burbuja--archivo { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: #FFFFFF; border-radius: 14px; border: 1px solid #E1E7EC; }
.cs-burbuja--archivo span { font-weight: 600; font-size: 15px; }
.cs-hero__sello {
    position: relative; margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; color: var(--cs-navy);
    padding: 12px 16px; border-radius: 14px; box-shadow: 0 16px 32px rgba(0,0,0,0.3); font-weight: 700; font-size: 15px;
}
@media (min-width: 1005px) {
    .cs-hero__circ--der { display: block; }
    .cs-hero__sello { position: absolute; left: -28px; bottom: -22px; margin-top: 0; }
    /* el sello entra 30 px en la tarjeta: el último mensaje queda por encima de él */
    .cs-chat__cuerpo { padding-bottom: 48px; }
}
.cs-hero__sello-ico { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #1F7A4D; display: flex; align-items: center; justify-content: center; }

/* ---------- Franja SW sapien ---------- */
.cs-banda { background: #FFFFFF; border-bottom: 1px solid var(--cs-borde); }
.cs-banda__in { max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: center; font-size: 16px; color: var(--cs-txt); text-align: center; }
.cs-banda__in strong { font-weight: 700; color: var(--cs-navy); }

/* ---------- Secciones ---------- */
.cs-sec { max-width: 1200px; margin: 0 auto; padding: 56px 24px; }
.cs-sec--somos { padding: 96px 24px 40px; }
.cs-sec--palabra { padding: 40px 24px; }
.cs-sec--servicios { padding: 40px 24px; }
.cs-sec--precios { padding: 72px 24px; }
.cs-sec--ref { padding: 40px 24px 0; }
.cs-sec--cierre { padding: 56px 24px 96px; }
.cs-sec__cab { display: flex; flex-direction: column; gap: 14px; max-width: 720px; padding-bottom: 40px; }
.cs-sec__cab--corta { gap: 12px; padding-bottom: 28px; }
.cs-sec__kicker { font-weight: 700; color: var(--cs-azul-txt); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-sitio .cs-h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(32px, 4vw, 46px); line-height: normal; letter-spacing: -0.02em; }
.cs-sitio .cs-sec--somos .cs-h2 { line-height: 1.08; }
.cs-sitio .cs-h2--m { font-size: clamp(30px, 3.6vw, 40px); }
.cs-sitio .cs-h2--s { font-size: clamp(28px, 3.4vw, 38px); }
.cs-sitio .cs-lead { font-size: 19px; line-height: 1.6; color: var(--cs-txt); }
.cs-sitio .cs-lead--18 { font-size: 18px; line-height: 1.55; }

.cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; }
.cs-card { background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.cs-card h3 { font-size: 21px; font-weight: 700; }
.cs-card p { font-size: 17px; line-height: 1.55; color: var(--cs-txt); }

/* Tú tienes la última palabra */
.cs-palabra { background: var(--cs-hero); color: #FFFFFF; border-radius: 24px; padding: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.cs-palabra__izq { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-palabra__izq .cs-h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.04; letter-spacing: -0.03em; }
.cs-palabra__izq p { font-size: 19px; line-height: 1.55; color: #D5E0E7; }
.cs-palabra__der { flex: 1.3 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cs-punto { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 22px; }
.cs-punto__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--cs-azul); display: flex; align-items: center; justify-content: center; }
.cs-punto__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-punto h3 { font-size: 21px; font-weight: 700; }
.cs-punto p { font-size: 17px; line-height: 1.5; color: var(--cs-claro); }

/* Así de fácil empezamos */
.cs-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.cs-paso { display: flex; gap: 18px; align-items: flex-start; }
.cs-paso__num { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--cs-navy); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.cs-paso__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cs-paso h3 { font-size: 20px; font-weight: 700; }
.cs-paso p { font-size: 17px; line-height: 1.55; color: var(--cs-txt); }
.cs-sitio .cs-sec > .cs-h2--m.cs-h2--titulo { margin-bottom: 32px; }

/* Regímenes */
.cs-regimenes { background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 20px; padding: clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 32px; }
.cs-regimenes__izq { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-regimenes__izq p { font-size: 18px; line-height: 1.55; color: var(--cs-txt); }
.cs-regimenes__der { flex: 2 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.cs-reg { padding: 18px; border-radius: 12px; background: var(--cs-fondo); }
.cs-reg__nom { font-weight: 700; font-size: 18px; }
.cs-reg__sub { font-size: 16px; color: var(--cs-gris); }

/* Y también te ayudamos con */
.cs-servs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; }
.cs-serv { background: var(--cs-navy); color: #FFFFFF; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.cs-serv h3 { font-size: 20px; font-weight: 700; }
.cs-serv p { font-size: 16px; line-height: 1.5; color: var(--cs-claro); }
.cs-sitio .cs-nota { margin: 18px 0 0; font-size: 15px; color: var(--cs-gris); }
.cs-sitio .cs-nota a, .cs-sitio .cs-nota a:hover { color: var(--cs-azul-txt); text-decoration: underline; }
.cs-sitio .cs-nota a:hover { color: var(--cs-azul-hover); }

/* Precios */
.cs-sec__cab--centro { text-align: center; align-items: center; max-width: none; gap: 12px; }
.cs-sec__cab--centro p { font-size: 19px; color: var(--cs-txt); max-width: 620px; }
.cs-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; max-width: 980px; margin: 0 auto; }
.cs-plan { border-radius: 22px; padding: 36px; display: flex; flex-direction: column; gap: 20px; }
.cs-plan--oscuro { background: var(--cs-navy); color: #FFFFFF; }
.cs-plan--claro { background: #FFFFFF; border: 1.5px solid var(--cs-navy); }
.cs-plan__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-plan h3 { font-size: 24px; font-weight: 700; }
.cs-plan__tag { padding: 6px 12px; border-radius: 999px; background: var(--cs-azul); font-size: 14px; font-weight: 700; color: #FFFFFF; }
.cs-plan__sub { font-size: 16px; }
.cs-plan--oscuro .cs-plan__sub { color: var(--cs-pie); }
.cs-plan--claro .cs-plan__sub { color: var(--cs-gris); }
.cs-plan__precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cs-plan__monto { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 56px; letter-spacing: -0.03em; }
.cs-plan__per { font-size: 17px; }
.cs-plan--oscuro .cs-plan__per { color: var(--cs-pie); }
.cs-plan--claro .cs-plan__per { color: var(--cs-gris); }
.cs-plan__lista { display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.cs-sitio .cs-aviso { margin: 24px auto 0; text-align: center; font-size: 15px; color: var(--cs-gris); }

/* Del blog */
.cs-blog__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 28px; }
.cs-sitio .cs-blog__todos, .cs-sitio .cs-blog__todos:hover { font-weight: 700; font-size: 17px; color: var(--cs-azul-txt); display: inline-flex; align-items: center; min-height: 44px; }
.cs-sitio .cs-blog__todos:hover { color: var(--cs-azul-hover); text-decoration: underline; }
.cs-blog__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.cs-sitio .cs-post, .cs-sitio .cs-post:hover, .cs-sitio .cs-post:focus {
    color: var(--cs-navy); background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 10px;
}
.cs-sitio .cs-post:hover { border-color: #B7C9D8; box-shadow: 0 8px 24px rgba(7,47,95,0.08); }
.cs-post__meta { font-size: 14px; font-weight: 700; color: var(--cs-azul-txt); }
.cs-post__titulo { font-size: 20px; font-weight: 700; line-height: 1.3; }

/* Recomiéndanos */
.cs-ref { background: #FFFFFF; border: 1.5px solid var(--cs-claro); border-radius: 22px; padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.cs-ref__ico { flex: none; width: 88px; height: 88px; border-radius: 22px; background: #E4EEF8; display: flex; align-items: center; justify-content: center; }
.cs-ref__txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-ref__txt .cs-h2 { font-size: clamp(26px, 3vw, 34px); }
.cs-ref__txt p { font-size: 18px; line-height: 1.55; color: var(--cs-txt); }

/* Cierre */
.cs-cierre { background: var(--cs-azul); color: #FFFFFF; border-radius: 24px; padding: clamp(32px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.cs-cierre__txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-cierre__txt .cs-h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.08; }
.cs-cierre__txt p { font-size: 19px; line-height: 1.5; color: #E1EEF9; }
.cs-cierre__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Pie ---------- */
.cs-pie { background: var(--cs-navy); color: var(--cs-pie); }
.cs-pie__in { max-width: 1200px; margin: 0 auto; padding: 56px 24px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 32px; font-size: 16px; }
.cs-pie__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-pie__marca img { height: 64px; width: auto; align-self: flex-start; }
.cs-pie__tit { color: #FFFFFF; font-weight: 700; }
.cs-sitio.cs-pie a, .cs-sitio.cs-pie a:hover, .cs-sitio.cs-pie a:focus { color: var(--cs-pie); }
.cs-sitio.cs-pie a:hover { color: #FFFFFF; text-decoration: underline; }
.cs-pie__copy { max-width: 1200px; margin: 0 auto; padding: 20px 24px 32px; border-top: 1px solid #1C4777; font-size: 14px; }
.cs-pie__copy-in { max-width: 1200px; margin: 0 auto; }

/* ---------- Contacto ---------- */
.cs-contacto { max-width: 1200px; margin: 0 auto; padding: 64px 24px 80px; display: flex; flex-wrap: wrap; gap: 40px; }
.cs-contacto__izq { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cs-sitio .cs-contacto__h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(38px, 5vw, 56px); letter-spacing: -0.03em; line-height: 1.04; }
.cs-sitio .cs-contacto__lead { font-size: 19px; line-height: 1.55; color: var(--cs-txt); }
.cs-sitio .cs-wa, .cs-sitio .cs-wa:hover, .cs-sitio .cs-wa:focus { display: flex; gap: 16px; align-items: center; padding: 22px; border-radius: 16px; background: var(--cs-azul); color: #FFFFFF; }
.cs-sitio .cs-wa:hover { background: #0C5F9E; }
.cs-wa svg { flex: none; }
.cs-wa__txt { display: flex; flex-direction: column; min-width: 0; }
.cs-wa__tit { font-weight: 700; font-size: 20px; }
.cs-wa__sub { font-size: 15px; color: #E1EEF9; }
.cs-datos { background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; font-size: 17px; }
.cs-datos__fila { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.cs-datos__fila > span:first-child { color: var(--cs-gris); }
.cs-datos__fila > :last-child { font-weight: 700; }
.cs-sitio .cs-datos a, .cs-sitio .cs-datos a:hover { color: var(--cs-navy); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.cs-sitio .cs-datos a:hover { text-decoration: underline; }
.cs-redes { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-sitio .cs-red, .cs-sitio .cs-red:hover { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid #C9D3CF; background: #FFFFFF; color: var(--cs-navy); font-weight: 600; }
.cs-sitio .cs-red:hover { background: #EEF3F8; }

.cs-form { flex: 1.2 1 460px; min-width: 0; background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 22px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; margin: 0; }
.cs-form h2 { font-size: 26px; font-weight: 700; }
.cs-form__campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-form__fila { display: flex; flex-wrap: wrap; gap: 16px; }
.cs-form__fila > .cs-form__campo { flex: 1 1 200px; }
.cs-form label.cs-form__etq { margin: 0; font-weight: 600; font-size: 16px; color: var(--cs-navy); }
.cs-sitio .cs-form .cs-input, .cs-sitio .cs-form .cs-select, .cs-sitio .cs-form .cs-area {
    box-sizing: content-box; width: auto; max-width: 100%; display: block; margin: 0; min-height: 52px; height: auto; padding: 0 16px; border-radius: 12px; border: 1.5px solid #B8C5C0;
    background: #FFFFFF; color: var(--cs-navy); font-family: inherit; font-size: 17px; line-height: 1.4; box-shadow: none;
}
.cs-sitio .cs-form .cs-select { padding: 0 14px; }
.cs-sitio .cs-form .cs-area { padding: 14px 16px; min-height: 140px; resize: vertical; }
.cs-sitio .cs-form .cs-input:focus, .cs-sitio .cs-form .cs-select:focus, .cs-sitio .cs-form .cs-area:focus { border-color: var(--cs-azul); box-shadow: 0 0 0 3px rgba(15,112,185,0.18); }
.cs-sitio .cs-form .input-validation-error { border-color: #B3261E; }
.cs-sitio .cs-form .field-validation-error, .cs-sitio .cs-form .message-error { display: block; color: #B3261E; font-size: 15px; line-height: 1.4; }
/* La zona de toque mide 44 px (min-height) pero solo ocupa su contenido en el flujo (margen negativo): sin hueco vacío debajo de la casilla. */
.cs-sitio .cs-form__acepto { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; color: var(--cs-txt); margin: -12px 0; font-weight: 400; cursor: pointer; }
.cs-sitio .cs-form__acepto input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; }
.cs-sitio .cs-form__acepto span { padding-top: 0; }
.cs-sitio .cs-form__acepto a { color: var(--cs-azul-txt); text-decoration: underline; }
.cs-sitio .cs-form .cs-enviar, .cs-sitio .cs-form .cs-enviar:hover {
    min-height: 56px; width: 100%; border-radius: 12px; border: 0; background: var(--cs-navy); color: #FFFFFF; font-family: inherit; font-weight: 700; font-size: 18px; cursor: pointer; padding: 0 16px;
}
.cs-sitio .cs-form .cs-enviar:hover { background: #0A3F7F; }
.cs-exito { flex: 1.2 1 460px; min-width: 0; background: #FFFFFF; border: 1.5px solid #1F7A4D; border-radius: 22px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.cs-exito h2 { font-size: 26px; font-weight: 700; color: #1F7A4D; }
.cs-exito p { font-size: 18px; line-height: 1.55; color: var(--cs-txt); }
.cs-form__captcha { min-width: 0; overflow: hidden; }
.cs-form__captcha--v3 { display: none; }
/* reCAPTCHA v3: la insignia fija (y su error en rojo) queda tapada por el botón de WhatsApp; la clase la pone ContactUs.cshtml solo con v3
   y el aviso con enlaces a Privacidad y Términos de Google va junto al botón Enviar, como piden los términos de Google. */
html.cs-recaptcha-aviso .grecaptcha-badge { visibility: hidden; }
.cs-sitio .cs-form__recaptcha { font-size: 13px; line-height: 1.5; color: var(--cs-gris); }
.cs-sitio .cs-form__recaptcha a, .cs-sitio .cs-form__recaptcha a:hover { color: var(--cs-azul-txt); text-decoration: underline; }
.cs-sitio .cs-form__recaptcha a:hover { color: var(--cs-azul-hover); }

/* ---------- Celular y tableta ---------- */
@media (max-width: 1080px) {
    .cs-sitio .cs-enc__toggle { display: inline-flex; }
    .cs-enc__menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding: 8px 0 8px; border-top: 1px solid #EEF2F0; }
    .cs-enc__menu.is-abierto { display: flex; }
    .cs-enc__nav { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
    .cs-sitio .cs-enc__nav .cs-enc__link { border-bottom: 1px solid #EEF2F0; width: 100%; }
    .cs-enc__sep { display: none; }
    .cs-sitio .cs-enc__nav .cs-enc__admin { margin-top: 10px; width: 100%; }
    .cs-enc__acciones { flex-direction: column; align-items: stretch; }
    .cs-enc__acciones .cs-btn, .cs-enc__acciones .cs-pill, .cs-enc__acciones .cs-enc__salir { width: 100%; justify-content: center; }
}
@media (max-width: 720px) {
    .cs-enc__in { padding: 12px 20px; }
    .cs-enc__logo img { height: 44px; }
    .cs-imp__in { padding: 12px 20px; }
    .cs-imp__txt { line-height: 1.4; }
    .cs-imp__btn { width: 100%; }
    .cs-hero__in { padding: 56px 20px 72px; gap: 40px; }
    .cs-hero__circ--arriba { height: 48px; }
    .cs-hero__circ--abajo { height: 56px; }
    .cs-hero__ctas .cs-btn { flex: 1 1 100%; }
    .cs-banda__in { padding: 20px; }
    .cs-sec, .cs-sec--servicios, .cs-sec--palabra, .cs-sec--precios, .cs-sec--ref, .cs-sec--cierre { padding-left: 20px; padding-right: 20px; }
    .cs-sec--somos { padding-top: 56px; padding-bottom: 24px; }
    .cs-sec--precios { padding-top: 48px; padding-bottom: 48px; }
    .cs-sec--cierre { padding-bottom: 56px; }
    .cs-sec__cab { padding-bottom: 28px; }
    .cs-plan { padding: 28px 22px; }
    .cs-plan__monto { font-size: 46px; }
    .cs-cierre__btns, .cs-cierre__btns .cs-btn { width: 100%; }
    .cs-contacto { padding: 40px 20px 56px; gap: 28px; }
    .cs-pie__in { padding: 40px 20px 24px; }
    .cs-pie__copy { padding: 20px 20px 28px; }
}
@media (max-width: 720px), (pointer: coarse) {
    .cs-sitio .cs-nota a { display: inline-block; padding: 13px 0; }
    .cs-sitio.cs-pie a { display: inline-flex; align-items: center; min-height: 44px; }
    .cs-pie__col { gap: 0; }
    .cs-pie__tit { padding: 8px 0; }
}

/* El botón "subir al inicio" de Porto (a.scroll-to-top, lo crea theme.js) queda debajo del botón flotante de WhatsApp: se oculta en las páginas del rediseño
   (la clase cs-sitio-publico la ponen _Root y _Root1). El botón y la burbuja de WhatsApp se quedan. */
html.cs-sitio-publico .scroll-to-top { display: none; }

/* ---------- Blog y Noticias ----------
   Listado del blog, artículo, listado de noticias y detalle de noticia (referencias Blog.html, Articulo.html, Noticias.html, Noticia.html).
   Los enlaces con color propio listan :hover y :focus porque ".cs-sitio a:hover" (0,2,1) del reinicio le ganaría a ".cs-sitio .cs-x" (0,2,0). */
.cs-sitio .cs-w { box-sizing: content-box; max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.cs-sitio .cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-sitio .cs-btn--m, .cs-sitio .cs-btn--m:hover, .cs-sitio .cs-btn--m:focus { min-height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 700; }
.cs-sitio .cs-eyebrow { font-size: 14px; font-weight: 700; color: var(--cs-azul-txt); letter-spacing: 0.04em; text-transform: uppercase; }

/* Encabezado de página (oscuro en Blog, claro en Noticias) */
.cs-sitio .cs-ph { background: var(--cs-navy); color: #FFFFFF; }
.cs-sitio .cs-ph--claro { background: transparent; color: var(--cs-navy); }
.cs-sitio .cs-ph__in { display: flex; flex-direction: column; gap: 16px; padding-top: 64px; padding-bottom: 64px; }
.cs-sitio .cs-ph--claro .cs-ph__in { gap: 14px; padding-bottom: 24px; }
.cs-sitio .cs-ph__h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(38px, 5vw, 58px); line-height: normal; letter-spacing: -0.03em; }
.cs-sitio .cs-ph__lead { font-size: 20px; line-height: 1.5; color: #D5E0E7; max-width: 640px; }
.cs-sitio .cs-ph--claro .cs-ph__lead { color: var(--cs-txt); max-width: 680px; }
.cs-sitio .cs-busca { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; max-width: 560px; }
.cs-sitio .cs-busca__in { flex: 1 1 280px; min-width: 0; min-height: 52px; height: auto; padding: 0 18px; border-radius: 12px; border: 0; box-shadow: none; background: #FFFFFF; color: var(--cs-navy); font-size: 17px; line-height: normal; -webkit-appearance: none; appearance: none; }
.cs-sitio .cs-busca__btn { min-height: 52px; padding: 0 24px; border-radius: 12px; border: 0; background: var(--cs-azul); color: #FFFFFF; font-size: 17px; font-weight: 700; line-height: normal; cursor: pointer; }
.cs-sitio .cs-busca__btn:hover { background: #0C5F9E; }

/* Etiquetas como botones redondos */
.cs-sitio .cs-filtros { padding-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.cs-sitio .cs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-sitio .cs-filtro, .cs-sitio .cs-filtro:hover, .cs-sitio .cs-filtro:focus {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: #FFFFFF; border: 1px solid #C9D3CF; color: var(--cs-navy); font-size: 16px; font-weight: 600;
}
.cs-sitio .cs-filtro:hover { border-color: #8FA6B8; background: #F7FAFC; }
.cs-sitio .cs-filtro--on, .cs-sitio .cs-filtro--on:hover, .cs-sitio .cs-filtro--on:focus { background: var(--cs-navy); border-color: var(--cs-navy); color: #FFFFFF; }
.cs-sitio .cs-aviso-lista { font-size: 17px; color: var(--cs-txt); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cs-sitio .cs-aviso-lista a, .cs-sitio .cs-aviso-lista a:hover, .cs-sitio .cs-aviso-lista a:focus { display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-azul-txt); font-weight: 700; text-decoration: underline; }

/* Artículo destacado */
.cs-sitio .cs-dest-sec { padding-top: 32px; padding-bottom: 8px; }
.cs-sitio .cs-dest { position: relative; background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 22px; overflow: hidden; display: flex; flex-wrap: wrap; }
.cs-sitio .cs-dest__img { position: relative; flex: 1 1 420px; min-width: 0; min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 32px; background: #E4EEF8; overflow: hidden; }
.cs-sitio .cs-dest__foto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-sitio .cs-dest__etq { position: relative; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.03em; text-align: center; color: var(--cs-navy); }
.cs-sitio .cs-dest__txt { flex: 1 1 420px; min-width: 0; padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.cs-sitio .cs-dest__tit { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.cs-sitio .cs-dest__ext { font-size: 18px; line-height: 1.6; color: var(--cs-txt); }
.cs-sitio .cs-dest__txt .cs-btn { align-self: flex-start; }

/* Rejilla de tarjetas y columna lateral */
.cs-sitio .cs-lista { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 24px; padding-bottom: 24px; }
.cs-sitio .cs-lista__grid { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; align-content: start; }
.cs-sitio .cs-lista__lat { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cs-sitio .cs-vacio { flex: 999 1 560px; background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.55; color: var(--cs-txt); }
.cs-sitio .cs-tarj { position: relative; background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.cs-sitio .cs-tarj:hover { border-color: #B7C9D8; box-shadow: 0 8px 24px rgba(7,47,95,0.08); }
.cs-sitio .cs-tarj__img { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; padding: 14px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--cs-txt); background: #E3ECF7; overflow: hidden; }
.cs-sitio .cs-tarj__img--t1 { background: #F1ECE3; }
.cs-sitio .cs-tarj__img--t2 { background: #E4EEF8; }
.cs-sitio .cs-tarj__img--t3 { background: #E7EEE9; }
.cs-sitio .cs-tarj__foto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-sitio .cs-tarj__cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-sitio .cs-tarj__meta { font-size: 13px; font-weight: 700; color: var(--cs-azul-txt); letter-spacing: 0.04em; }
.cs-sitio .cs-tarj__etq { text-transform: uppercase; }
.cs-sitio .cs-tarj__tit { font-size: 20px; font-weight: 700; line-height: 1.3; }
.cs-sitio .cs-tarj__tit a::after, .cs-sitio .cs-dest__tit a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.cs-sitio .cs-tarj__ext { flex: 1; font-size: 16px; line-height: 1.55; color: var(--cs-txt); }
.cs-sitio .cs-tarj__mas { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--cs-azul-txt); }

/* Tarjetas laterales: boletín y WhatsApp (Blog), WhatsApp e índice (artículo) */
.cs-sitio .cs-lat { background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 12px; color: var(--cs-navy); }
.cs-sitio .cs-lat--navy { background: var(--cs-navy); border-color: var(--cs-navy); color: #FFFFFF; }
.cs-sitio .cs-lat--hero { background: var(--cs-hero); border-color: var(--cs-hero); color: #FFFFFF; }
.cs-sitio .cs-lat__tit { font-size: 20px; font-weight: 700; line-height: 1.25; }
.cs-sitio .cs-lat--navy .cs-lat__tit, .cs-sitio .cs-lat--hero .cs-lat__tit { font-size: 22px; }
.cs-sitio .cs-lat__txt { font-size: 16px; line-height: 1.5; color: var(--cs-txt); }
.cs-sitio .cs-lat--navy .cs-lat__txt { color: #D5E0E7; }
.cs-sitio .cs-lat--hero .cs-lat__txt { color: var(--cs-claro); }
.cs-sitio .cs-lat__lbl { font-size: 15px; font-weight: 600; }
.cs-sitio .cs-lat__in { min-height: 48px; height: auto; padding: 0 14px; border-radius: 10px; border: 0; box-shadow: none; background: #FFFFFF; color: var(--cs-navy); font-size: 16px; line-height: normal; min-width: 0; -webkit-appearance: none; appearance: none; }
.cs-sitio .cs-lat__btn { min-height: 48px; border-radius: 10px; border: 0; background: var(--cs-azul); color: #FFFFFF; font-size: 16px; font-weight: 700; line-height: normal; cursor: pointer; }
.cs-sitio .cs-lat__btn:hover { background: #0C5F9E; }
.cs-sitio .cs-lat__btn[disabled] { opacity: 0.7; cursor: wait; }
.cs-sitio .cs-lat__msg { font-size: 15px; line-height: 1.45; color: var(--cs-claro); }
.cs-sitio .cs-lat__msg--error { color: #FFD6D2; }
.cs-sitio .cs-lat .cs-btn--bloque { min-height: 48px; border-radius: 10px; }
.cs-sitio .cs-lat__form { display: flex; flex-direction: column; gap: 12px; }
.cs-sitio .cs-lista__lat--solo { flex: 0 1 420px; }
.cs-sitio .cs-rss a, .cs-sitio .cs-rss a:hover, .cs-sitio .cs-rss a:focus { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--cs-azul-txt); text-decoration: underline; }

/* Paginación nativa de nop (Html.Pager): <ul><li class="current-page|individual-page|previous-page|next-page…"> */
.cs-sitio .cs-pag { padding-top: 8px; padding-bottom: 56px; }
.cs-sitio .cs-pag ul { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-sitio .cs-pag li { display: block; }
.cs-sitio .cs-pag a, .cs-sitio .cs-pag a:hover, .cs-sitio .cs-pag a:focus, .cs-sitio .cs-pag span {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px;
    border-radius: 10px; border: 1px solid #C9D3CF; background: #FFFFFF; color: var(--cs-navy); font-size: 16px; font-weight: 600;
}
.cs-sitio .cs-pag a:hover { border-color: #8FA6B8; background: #F7FAFC; }
.cs-sitio .cs-pag .current-page span { background: var(--cs-navy); border-color: var(--cs-navy); color: #FFFFFF; }

/* Artículo: encabezado oscuro */
.cs-sitio .cs-art-hero { position: relative; overflow: hidden; background: var(--cs-hero); color: #FFFFFF; }
.cs-sitio .cs-art-hero__circ { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.45; }
.cs-sitio .cs-art-hero__in { position: relative; box-sizing: content-box; max-width: 820px; margin: 0 auto; padding: 56px 24px 64px; display: flex; flex-direction: column; gap: 20px; }
.cs-sitio .cs-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 15px; color: var(--cs-pie); }
.cs-sitio .cs-ruta a, .cs-sitio .cs-ruta a:hover, .cs-sitio .cs-ruta a:focus { display: inline-flex; align-items: center; min-height: 44px; color: var(--cs-claro); }
.cs-sitio .cs-ruta a:hover { text-decoration: underline; }
.cs-sitio .cs-ruta--claro { color: var(--cs-gris); }
.cs-sitio .cs-ruta--claro a, .cs-sitio .cs-ruta--claro a:hover, .cs-sitio .cs-ruta--claro a:focus { color: var(--cs-azul-txt); }
.cs-sitio .cs-etqs { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-sitio .cs-etq, .cs-sitio .cs-etq:hover, .cs-sitio .cs-etq:focus {
    position: relative; padding: 6px 12px; border-radius: 999px; background: rgba(91,166,230,0.16); border: 1px solid rgba(91,166,230,0.45);
    color: var(--cs-claro); font-size: 14px; font-weight: 600; line-height: normal;
}
.cs-sitio a.cs-etq:hover { background: rgba(91,166,230,0.28); }
/* las etiquetas miden 32 px de alto; la zona de toque se extiende a 44 px sin cambiar su aspecto */
.cs-sitio a.cs-etq::after { content: ""; position: absolute; top: -7px; bottom: -7px; left: -2px; right: -2px; }
.cs-sitio .cs-etq--solida, .cs-sitio .cs-etq--solida:hover { background: var(--cs-azul); border-color: var(--cs-azul); color: #FFFFFF; font-weight: 700; }
.cs-sitio .cs-art-hero__h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.03em; }
.cs-sitio .cs-art-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; font-size: 16px; color: var(--cs-pie); }

/* Artículo: texto y columna lateral */
.cs-sitio .cs-art { padding-top: 48px; padding-bottom: 24px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.cs-sitio .cs-art__col { flex: 999 1 600px; min-width: 0; max-width: 760px; font-size: 19px; line-height: 1.75; color: #1E2D38; }
.cs-sitio .cs-art__lat { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cs-sitio .cs-encorto { background: #FFFFFF; border: 1px solid var(--cs-claro); border-radius: 18px; padding: 24px 26px; margin-bottom: 36px; }
.cs-sitio .cs-encorto__tit { margin-bottom: 8px; font-size: 16px; font-weight: 700; color: var(--cs-azul-txt); letter-spacing: 0.04em; text-transform: uppercase; }
.cs-sitio .cs-encorto__txt { font-size: 18px; line-height: 1.6; color: #1E2D38; }
.cs-sitio .cs-encorto__txt p { margin: 0 0 10px; }
.cs-sitio .cs-encorto__txt > :last-child { margin-bottom: 0; }
.cs-sitio .cs-indice { background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.35; }
.cs-sitio .cs-indice__tit { padding-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--cs-gris); letter-spacing: 0.04em; text-transform: uppercase; }
.cs-sitio .cs-indice a, .cs-sitio .cs-indice a:hover, .cs-sitio .cs-indice a:focus { display: flex; align-items: center; min-height: 44px; color: var(--cs-azul-txt); }
.cs-sitio .cs-indice a:hover { text-decoration: underline; }
.cs-sitio .cs-franja { margin-top: 40px; background: var(--cs-azul); color: #FFFFFF; border-radius: 20px; padding: clamp(24px, 4vw, 36px); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; font-size: 16px; line-height: normal; }
.cs-sitio .cs-franja__txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-sitio .cs-franja__tit { font-size: 26px; font-weight: 700; line-height: 1.2; }
.cs-sitio .cs-franja__sub { font-size: 17px; line-height: 1.5; color: #E1EEF9; }
.cs-sitio .cs-legal { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--cs-borde); font-size: 15px; line-height: 1.6; color: var(--cs-gris); }
.cs-sitio .cs-comparte { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; font-size: 16px; line-height: normal; }
.cs-sitio .cs-comparte__tit { font-weight: 700; }
.cs-sitio .cs-comparte__btn, .cs-sitio .cs-comparte__btn:hover, .cs-sitio .cs-comparte__btn:focus {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #FFFFFF; border: 1px solid #C9D3CF;
    color: var(--cs-navy); font-size: 16px; font-weight: 600; line-height: normal; cursor: pointer;
}
.cs-sitio .cs-comparte__btn:hover { border-color: #8FA6B8; background: #F7FAFC; }
.cs-sitio .cs-sig { padding-top: 40px; padding-bottom: 80px; }
.cs-sitio .cs-sig__tit { margin-bottom: 22px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; line-height: normal; letter-spacing: -0.02em; }

/* Cuerpo HTML escrito en el editor del Admin (artículos y noticias). TinyMCE usa esta misma hoja con body_class "cs-sitio cs-cuerpo", así que
   el editor y el sitio se ven igual. Sin el prefijo .cs-sitio para que valga también cuando ambas clases están en el mismo elemento (el <body> del editor). */
.cs-cuerpo { font-size: 19px; line-height: 1.75; color: #1E2D38; }
.cs-cuerpo > :first-child { margin-top: 0; }
.cs-cuerpo p { margin: 0 0 22px; font-size: inherit; line-height: inherit; color: inherit; }
.cs-cuerpo h2 { margin: 40px 0 14px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; color: #072F5F; scroll-margin-top: 96px; }
.cs-cuerpo h3 { margin: 30px 0 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 23px; line-height: 1.25; letter-spacing: -0.01em; color: #072F5F; scroll-margin-top: 96px; }
.cs-cuerpo h4 { margin: 24px 0 8px; font-size: 19px; font-weight: 700; line-height: 1.4; color: #072F5F; }
.cs-cuerpo strong, .cs-cuerpo b { font-weight: 700; color: inherit; }
.cs-cuerpo ul, .cs-cuerpo ol { margin: 0 0 22px; padding-left: 24px; }
.cs-cuerpo ul { list-style: disc; }
.cs-cuerpo ol { list-style: decimal; }
.cs-cuerpo li { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
.cs-cuerpo ul ul, .cs-cuerpo ol ol, .cs-cuerpo ul ol, .cs-cuerpo ol ul { margin: 10px 0 0; }
.cs-cuerpo a, .cs-cuerpo a:hover, .cs-cuerpo a:focus { color: #0D5F98; text-decoration: underline; text-underline-offset: 3px; }
.cs-cuerpo a:hover { color: #073263; }
.cs-cuerpo img { max-width: 100%; height: auto; border-radius: 12px; }
.cs-cuerpo iframe, .cs-cuerpo video { max-width: 100%; }
.cs-cuerpo hr { margin: 32px 0; border: 0; border-top: 1px solid #DCE3E0; }
.cs-cuerpo table { width: 100%; margin: 28px 0; border-collapse: collapse; background: #FFFFFF; border: 1px solid #DCE3E0; font-size: 17px; line-height: 1.5; }
.cs-cuerpo th, .cs-cuerpo td { padding: 12px 14px; border: 1px solid #DCE3E0; text-align: left; vertical-align: top; }
.cs-cuerpo th { background: #E4EEF8; color: #072F5F; font-weight: 700; }
.cs-cuerpo td p, .cs-cuerpo th p { margin: 0; font-size: inherit; }
.cs-cuerpo blockquote { margin: 28px 0; padding: 18px 24px; border: 0; border-left: 4px solid #0F70B9; border-radius: 0 14px 14px 0; background: #FFFFFF; font-size: 20px; line-height: 1.6; color: #072F5F; quotes: none; }
.cs-cuerpo blockquote::before, .cs-cuerpo blockquote::after { content: none; }
.cs-cuerpo blockquote > :last-child { margin-bottom: 0; }

/* Formato "Aviso" del editor: recuadro azul claro con ícono (el "Ojo:" de la referencia) */
.cs-cuerpo .cs-ojo { position: relative; margin: 28px 0; padding: 22px 24px 22px 70px; border-radius: 16px; background: #E4EEF8; color: #072F5F; font-size: 18px; line-height: 1.6; }
.cs-cuerpo .cs-ojo::before {
    content: ""; position: absolute; top: 24px; left: 24px; width: 28px; height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D5F98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cs-cuerpo .cs-ojo p { margin: 0 0 10px; font-size: inherit; line-height: inherit; color: inherit; }
.cs-cuerpo .cs-ojo > :last-child { margin-bottom: 0; }

/* Formato "Cifra destacada" del editor: tarjeta con una etiqueta y una cifra grande. Dos párrafos: el primero es la etiqueta y el segundo la cifra
   (o una cifra en negrita dentro del párrafo). Varias seguidas se acomodan en fila. */
.cs-cuerpo .cs-cifra { display: inline-block; vertical-align: top; box-sizing: border-box; width: calc(33.333% - 14px); min-width: min(170px, 100%); margin: 8px 8px 12px 0; padding: 18px; border-radius: 14px; background: #E4EEF8; color: #33434F; }
.cs-cuerpo .cs-cifra p { margin: 0; font-size: 15px; line-height: 1.4; color: #33434F; }
.cs-cuerpo .cs-cifra p + p, .cs-cuerpo .cs-cifra strong { display: block; margin-top: 4px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; color: #072F5F; }

/* Noticias: promociones (con fecha de fin), calendario fiscal y novedades */
.cs-sitio .cs-nsec { padding-top: 24px; padding-bottom: 48px; }
.cs-sitio .cs-nsec__tit { margin-bottom: 20px; font-size: 26px; font-weight: 700; line-height: normal; }
.cs-sitio .cs-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.cs-sitio .cs-promo { position: relative; background: var(--cs-navy); color: #FFFFFF; border-radius: 22px; padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.cs-sitio .cs-promo--claro { background: #FFFFFF; border: 1.5px solid var(--cs-navy); color: var(--cs-navy); }
.cs-sitio .cs-promo__etq { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--cs-azul); color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: normal; }
.cs-sitio .cs-promo--claro .cs-promo__etq { background: #E4EEF8; color: var(--cs-azul-txt); }
.cs-sitio .cs-promo__tit { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -0.02em; }
.cs-sitio .cs-promo__tit a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.cs-sitio .cs-promo__ext { font-size: 17px; line-height: 1.55; color: #D5E0E7; }
.cs-sitio .cs-promo--claro .cs-promo__ext { color: var(--cs-txt); }
.cs-sitio .cs-promo__pie { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 6px; }
.cs-sitio .cs-promo__fecha { font-size: 14px; color: var(--cs-pie); }
.cs-sitio .cs-promo--claro .cs-promo__fecha { color: var(--cs-gris); }
.cs-sitio .cs-cal { background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 22px; padding: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 32px; }
.cs-sitio .cs-cal__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-sitio .cs-cal__tit { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: normal; letter-spacing: -0.02em; }
.cs-sitio .cs-cal__txt { font-size: 17px; line-height: 1.55; color: var(--cs-txt); }
.cs-sitio .cs-cal__lista { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-sitio .cs-cal__fila { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 14px; background: var(--cs-fondo); }
.cs-sitio .cs-cal__fecha { flex: none; width: 76px; text-align: center; }
.cs-sitio .cs-cal__dia { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; }
.cs-sitio .cs-cal__mes { font-size: 13px; font-weight: 700; color: var(--cs-gris); text-transform: uppercase; }
.cs-sitio .cs-cal__nombre { font-size: 18px; font-weight: 700; }
.cs-sitio .cs-cal__det { font-size: 16px; color: var(--cs-gris); }
.cs-sitio .cs-nov { display: flex; flex-direction: column; gap: 14px; }
.cs-sitio .cs-nov__fila { position: relative; background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 16px; padding: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.cs-sitio .cs-nov__fila:hover { border-color: #B7C9D8; box-shadow: 0 8px 24px rgba(7,47,95,0.08); }
.cs-sitio .cs-nov__txt { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-sitio .cs-nov__fecha { font-size: 13px; font-weight: 700; color: var(--cs-azul-txt); }
.cs-sitio .cs-nov__tit { font-size: 20px; font-weight: 700; line-height: 1.3; }
.cs-sitio .cs-nov__tit a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.cs-sitio .cs-nov__ext { font-size: 16px; line-height: 1.5; color: var(--cs-txt); }
.cs-sitio .cs-nov__ir { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--cs-azul-txt); }

/* Noticia: detalle */
.cs-sitio .cs-nt { box-sizing: content-box; max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; display: flex; flex-direction: column; gap: 28px; }
.cs-sitio .cs-nt__hero { position: relative; overflow: hidden; background: var(--cs-hero); color: #FFFFFF; border-radius: 24px; padding: clamp(28px, 5vw, 52px); display: flex; flex-direction: column; gap: 18px; }
.cs-sitio .cs-nt__circ { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.45; }
.cs-sitio .cs-nt__hero > :not(.cs-nt__circ) { position: relative; }
.cs-sitio .cs-nt__h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.03em; }
.cs-sitio .cs-nt__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 16px; color: var(--cs-pie); }
.cs-sitio .cs-nt__cuerpo { background: #FFFFFF; border: 1px solid var(--cs-borde); border-radius: 20px; padding: clamp(24px, 4vw, 40px); }
.cs-sitio .cs-nt .cs-franja { margin-top: 0; }
.cs-sitio .cs-nt__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 8px; }
.cs-sitio .cs-nt__nav a, .cs-sitio .cs-nt__nav a:hover, .cs-sitio .cs-nt__nav a:focus { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--cs-azul-txt); }
.cs-sitio .cs-nt__nav a:hover { text-decoration: underline; }

@media (max-width: 720px) {
    .cs-sitio .cs-w { padding-left: 20px; padding-right: 20px; }
    .cs-sitio .cs-ph__in { padding-top: 44px; padding-bottom: 44px; }
    .cs-sitio .cs-ph--claro .cs-ph__in { padding-bottom: 16px; }
    .cs-sitio .cs-ph__lead { font-size: 18px; }
    .cs-sitio .cs-busca__btn { flex: 1 1 100%; }
    .cs-sitio .cs-dest__img { min-height: 200px; padding: 24px; }
    .cs-sitio .cs-lista { gap: 28px; }
    .cs-sitio .cs-art-hero__in { padding: 36px 20px 44px; }
    .cs-sitio .cs-art { padding-top: 32px; gap: 32px; }
    .cs-sitio .cs-art__col { font-size: 19px; }
    .cs-sitio .cs-franja__tit { font-size: 24px; }
    .cs-sitio .cs-franja .cs-btn { width: 100%; }
    .cs-sitio .cs-sig { padding-top: 24px; padding-bottom: 56px; }
    .cs-sitio .cs-promo { padding: 28px 22px; }
    .cs-sitio .cs-cal__fila { gap: 14px; padding: 14px; }
    .cs-sitio .cs-cal__fecha { width: 64px; }
    .cs-sitio .cs-nt { padding: 32px 20px 56px; gap: 22px; }
    .cs-cuerpo h2 { font-size: 27px; }
    .cs-cuerpo .cs-cifra { width: 100%; margin-right: 0; }
    .cs-cuerpo .cs-ojo { padding: 20px 20px 20px 60px; }
    .cs-cuerpo .cs-ojo::before { left: 18px; top: 22px; }
    .cs-cuerpo table { display: block; overflow-x: auto; }
}