/*
 * servicioneri.mx — maquetación de cenitcardiologia.com (cabecera fija, tarjetas con sombra azulada,
 * cierre con caja, formulario de línea inferior, acordeón de FAQ) con la identidad de Servicio Neri:
 * azul marino del logo en campos completos y el amarillo del punto como única señal de acción.
 */

:root {
    --sn-marino: #06294c;
    --sn-marino-900: #041d36;
    --sn-azul: #0b4a89;
    --sn-azul-600: #0d5aa6;
    --sn-amarillo: #f3c50e;
    --sn-amarillo-700: #d9ae00;
    --sn-tinta: #0f2a44;
    --sn-gris: #4e5d6e;
    --sn-gris-claro: #c5d3e3;
    --sn-linea: #d5dfea;
    --sn-suave: #eef3f9;
    --sn-blanco: #ffffff;
    --sn-verde: #0b7a45;
    --sn-verde-700: #09663a;
    --sn-rojo: #b42318;
    --sn-sombra: 0 14px 28px -6px rgba(6, 41, 76, 0.14), 0 2px 6px rgba(6, 41, 76, 0.06);
    --sn-sombra-alta: 0 22px 40px -10px rgba(6, 41, 76, 0.22), 0 4px 10px rgba(6, 41, 76, 0.08);
    --sn-radio: 14px;
    --sn-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sn-cabecera-alto: 5.25rem;
}

/* ------------------------------------------------------------------ base */

html { scroll-padding-top: calc(var(--sn-cabecera-alto) + 1rem); }

body {
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--sn-tinta);
    background: var(--sn-blanco);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2 {
    color: var(--sn-marino);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

a { color: var(--sn-azul); text-underline-offset: 0.18em; }
a:hover { color: var(--sn-azul-600); }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--sn-amarillo); outline-offset: 2px; border-radius: 4px; }

.sn-saltar { position: absolute; left: 1rem; top: 1rem; z-index: 2000; background: var(--sn-amarillo); color: var(--sn-marino); padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600; }

/* ------------------------------------------------------------------ botones (píldora de Cenit) */

.btn {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: 0.72rem;
    border-radius: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transition: background-color 0.25s var(--sn-ease), color 0.25s var(--sn-ease), border-color 0.25s var(--sn-ease), box-shadow 0.25s var(--sn-ease), transform 0.25s var(--sn-ease);
}
.btn svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: 0.9rem; --bs-btn-font-size: 1.02rem; border-radius: 2rem; }
.btn-sm { --bs-btn-padding-x: 0.95rem; --bs-btn-padding-y: 0.35rem; --bs-btn-font-size: 0.85rem; }
.btn:active { transform: translateY(1px); }

.btn-sn { background: var(--sn-amarillo); color: var(--sn-marino); border: 1px solid var(--sn-amarillo); }
.btn-sn:hover, .btn-sn:focus-visible { background: var(--sn-amarillo-700); border-color: var(--sn-amarillo-700); color: var(--sn-marino); box-shadow: 0 8px 18px -8px rgba(217, 174, 0, 0.8); }

.btn-sn-claro { background: transparent; color: var(--sn-marino); border: 1.5px solid var(--sn-marino); }
.btn-sn-claro:hover { background: var(--sn-marino); color: var(--sn-blanco); }

.btn-sn-linea { background: transparent; color: var(--sn-azul); border: 1.5px solid var(--sn-azul); }
.btn-sn-linea:hover { background: var(--sn-azul); color: var(--sn-blanco); }

.btn-sn-whatsapp { background: var(--sn-verde); color: var(--sn-blanco); border: 1px solid var(--sn-verde); }
.btn-sn-whatsapp:hover, .btn-sn-whatsapp:focus-visible { background: var(--sn-verde-700); border-color: var(--sn-verde-700); color: var(--sn-blanco); }

.sn-acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.sn-enlace-flecha { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.sn-enlace-flecha::after { content: "→"; transition: transform 0.3s var(--sn-ease); }
.sn-enlace-flecha:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ cabecera */

.sn-cabecera { background: var(--sn-marino); transition: box-shadow 0.35s var(--sn-ease); }
.sn-cabecera.is-scrolled { box-shadow: 0 10px 30px -12px rgba(4, 29, 54, 0.6); }

.sn-barra { background: var(--sn-marino-900); color: var(--sn-gris-claro); font-size: 0.8rem; padding-block: 0.4rem; }
.sn-barra a { color: var(--sn-gris-claro); text-decoration: none; }
.sn-barra a:hover { color: var(--sn-amarillo); }

.sn-nav { padding-block: 0.65rem; }
.sn-marca img { height: 3.6rem; width: auto; margin-block: -0.35rem; }

.sn-nav .nav-link { color: rgba(255, 255, 255, 0.9); font-weight: 500; padding: 0.6rem 0.85rem !important; position: relative; }
.sn-nav .nav-link::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.3rem; height: 2px; background: var(--sn-amarillo); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--sn-ease); }
.sn-nav .nav-link:hover, .sn-nav .nav-link:focus-visible, .sn-nav .nav-link.active { color: var(--sn-blanco); }
.sn-nav .nav-link:hover::after, .sn-nav .nav-link.active::after { transform: scaleX(1); }
.sn-nav .dropdown-toggle::after { border: 0; }

.sn-submenu { border: 0; border-radius: var(--sn-radio); box-shadow: var(--sn-sombra-alta); padding: 0.5rem; min-width: 21rem; }
.sn-submenu .dropdown-item { border-radius: 8px; padding: 0.55rem 0.8rem; color: var(--sn-tinta); white-space: normal; font-size: 0.93rem; }
.sn-submenu .dropdown-item:hover, .sn-submenu .dropdown-item:focus { background: var(--sn-suave); color: var(--sn-azul); }
.sn-submenu li:first-child .dropdown-item { font-weight: 600; color: var(--sn-azul); }

.sn-nav__acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; }
.btn-sn-tel { color: var(--sn-blanco); border: 1.5px solid rgba(255, 255, 255, 0.35); background: transparent; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.1; --bs-btn-padding-y: 0.35rem; font-variant-numeric: tabular-nums; }
.btn-sn-tel:hover { border-color: var(--sn-amarillo); color: var(--sn-blanco); }
.sn-nav__tel-etiqueta { font-size: 0.68rem; font-weight: 500; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.06em; }

.sn-icono-accion { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; color: var(--sn-marino); background: var(--sn-amarillo); }
.sn-icono-accion svg { width: 1.2rem; height: 1.2rem; }

.sn-hamburguesa { border: 0; width: 2.6rem; height: 2.6rem; padding: 0.6rem 0.55rem !important; display: flex; flex-direction: column; justify-content: space-between; }
.sn-hamburguesa:focus { box-shadow: none; }
.sn-hamburguesa span { display: block; height: 2px; background: var(--sn-blanco); border-radius: 2px; transition: transform 0.4s var(--sn-ease), opacity 0.2s; }
.sn-hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sn-hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sn-hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1199.98px) {
    .sn-nav .navbar-collapse { margin-top: 0.75rem; padding: 1rem 0 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); max-height: calc(100vh - 5rem); overflow-y: auto; }
    .sn-nav .nav-link { padding: 0.75rem 0 !important; font-size: 1.1rem; }
    .sn-nav .nav-link::after { left: 0; right: auto; width: 2rem; }
    .sn-submenu { box-shadow: none; background: rgba(255, 255, 255, 0.06); min-width: 0; }
    .sn-submenu .dropdown-item { color: rgba(255, 255, 255, 0.88); }
    .sn-submenu .dropdown-item:hover { background: rgba(255, 255, 255, 0.1); color: var(--sn-blanco); }
    .sn-submenu li:first-child .dropdown-item { color: var(--sn-amarillo); }
    .sn-nav__acciones { margin: 1rem 0 0; flex-wrap: wrap; }
    .sn-nav__acciones .btn { flex: 1 1 10rem; }
}
@media (min-width: 1200px) {
    .sn-marca img { height: 4.4rem; }
}

/* ------------------------------------------------------------------ portada: hero */

.sn-hero {
    background:
        radial-gradient(60rem 30rem at 85% 20%, rgba(11, 74, 137, 0.75), transparent 60%),
        radial-gradient(28rem 18rem at 8% 100%, rgba(243, 197, 14, 0.14), transparent 70%),
        var(--sn-marino);
    color: var(--sn-blanco);
    padding-block: clamp(3rem, 6vw, 5.5rem);
    overflow: hidden;
}
.sn-hero__titulo { color: var(--sn-blanco); font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.6rem); font-weight: 700; letter-spacing: -0.025em; max-width: 18ch; margin-bottom: 1.1rem; }
.sn-hero__texto { color: #d8e3ef; font-size: 1.08rem; max-width: 60ch; margin: 0; }
.sn-hero .btn-sn-claro { color: var(--sn-blanco); border-color: rgba(255, 255, 255, 0.55); }
.sn-hero .btn-sn-claro:hover { background: var(--sn-blanco); color: var(--sn-marino); }
.sn-hero__cifras { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.sn-hero__cifras div { display: flex; flex-direction: column-reverse; }
.sn-hero__cifras dd { font-size: 1.9rem; font-weight: 700; color: var(--sn-amarillo); margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sn-hero__cifras dt { font-weight: 400; color: #c2d2e3; font-size: 0.88rem; }
.sn-hero__insignia { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0 0; font-size: 0.9rem; color: #d8e3ef; }
.sn-hero__insignia svg { width: 1.1rem; height: 1.1rem; color: var(--sn-amarillo); }
.sn-hero__foto { position: relative; margin: 0; }
.sn-hero__foto img { border-radius: 22px; box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.55); width: 100%; background: var(--sn-blanco); }
.sn-hero__sellos { position: absolute; inset: auto 0 -0.5rem 0; display: flex; justify-content: space-between; padding: 0 1rem; pointer-events: none; }
.sn-sello { background: var(--sn-blanco); color: var(--sn-marino); font-weight: 600; font-size: 0.85rem; padding: 0.5rem 0.9rem; border-radius: 2rem; box-shadow: var(--sn-sombra); transform: translateY(0); animation: sn-flota 6s var(--sn-ease) infinite alternate; }
.sn-sello--amarillo { background: var(--sn-amarillo); animation-delay: -3s; }
@keyframes sn-flota { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ------------------------------------------------------------------ encabezados de ficha / artículo (hero-content de Cenit) */

.sn-encabezado { background: linear-gradient(180deg, var(--sn-suave) 0%, var(--sn-blanco) 100%); padding-block: 2rem 3rem; }
.sn-migas { font-size: 0.85rem; color: var(--sn-gris); display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.5rem; }
.sn-migas a { color: var(--sn-gris); text-decoration: none; }
.sn-migas a:hover { color: var(--sn-azul); text-decoration: underline; }

.sn-producto__titulo, .sn-articulo__titulo { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.6rem; }
.sn-producto__subtitulo { font-size: 1.1rem; color: var(--sn-gris); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.sn-producto__foto { margin: 0; background: var(--sn-blanco); border-radius: 22px; box-shadow: var(--sn-sombra); padding: clamp(1rem, 3vw, 2.5rem); }
.sn-producto__foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

.sn-producto__resumen { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; margin: 1.5rem 0 0; padding: 1.1rem 0; border-block: 1px solid var(--sn-linea); }
.sn-producto__resumen div { display: flex; flex-direction: column-reverse; }
.sn-producto__resumen dt { font-weight: 500; font-size: 0.82rem; color: var(--sn-gris); }
.sn-producto__resumen dd { margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--sn-marino); font-variant-numeric: tabular-nums; line-height: 1.15; }
.sn-producto__resumen small { font-size: 0.8rem; font-weight: 500; color: var(--sn-gris); }

.sn-etiqueta { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--sn-marino); background: rgba(243, 197, 14, 0.28); border-radius: 2rem; padding: 0.15rem 0.65rem; }

.sn-meta { font-size: 0.88rem; color: var(--sn-gris); display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; margin: 0; }
.sn-meta a { font-weight: 600; text-decoration: none; }

/* ------------------------------------------------------------------ secciones */

.sn-seccion { padding-block: clamp(3rem, 6vw, 5rem); }
.sn-seccion--entrada { padding-top: clamp(2rem, 4vw, 3.25rem); }
.sn-seccion--suave { background: var(--sn-suave); }
.sn-seccion__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.sn-h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ contenido extraído (bloques de Elementor) */

.sn-contenido { max-width: 100%; }
.sn-contenido > section.sn-bloque + section.sn-bloque, .sn-contenido > .sn-fila + section.sn-bloque, .sn-contenido > section.sn-bloque + .sn-fila { margin-top: 2.5rem; }
.sn-contenido p, .sn-contenido li { max-width: 72ch; }
.sn-contenido h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 1rem; }
.sn-contenido h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin: 2.75rem 0 1rem; }
.sn-contenido h3 { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); margin: 2rem 0 0.7rem; }
.sn-contenido h4 { font-size: 1.12rem; margin: 1.5rem 0 0.5rem; }
.sn-contenido h5 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
.sn-contenido > section:first-child > :first-child, .sn-contenido .sn-fila > [class*="col-"] > :first-child { margin-top: 0; }
.sn-contenido ul { padding-left: 1.2rem; }
.sn-contenido li + li { margin-top: 0.3rem; }
.sn-contenido li > p { margin: 0; }
.sn-contenido strong { font-weight: 600; color: var(--sn-marino); }
.sn-contenido img { border-radius: 12px; }
.sn-contenido figure { margin: 1.5rem 0; }
.sn-contenido .sn-boton { margin: 1.25rem 0; }
.sn-contenido table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-variant-numeric: tabular-nums; }
.sn-contenido table { table-layout: fixed; }
.sn-contenido th, .sn-contenido td { overflow-wrap: anywhere; hyphens: auto; }
.sn-contenido th, .sn-contenido td { padding: 0.55rem 0.4rem; border-bottom: 1px dashed var(--sn-linea); vertical-align: top; text-align: left; }
.sn-contenido th { font-size: 0.8rem; color: var(--sn-gris); font-weight: 600; }
.sn-contenido td:last-child, .sn-contenido th:last-child { text-align: right; }
.sn-contenido td p { margin: 0; }

/* intro de servicio / página: el primer bloque es el encabezado */
.sn-contenido--servicio > section.sn-bloque:first-child, .sn-contenido--pagina > section.sn-bloque:first-child {
    background: linear-gradient(180deg, var(--sn-suave), rgba(238, 243, 249, 0));
    border-radius: 22px;
    padding: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 1rem;
}

/* columnas con precio o tabla = tarjeta de plan (service-card de Cenit, planes como recibo) */
.sn-contenido .sn-fila > [class*="col-"]:has(table), .sn-contenido .sn-fila > [class*="col-"]:has(> h4 + p), .sn-contenido .sn-fila > [class*="col-"]:has(.sn-precio) {
    background: var(--sn-blanco);
    border: 1px solid var(--sn-linea);
    border-radius: var(--sn-radio);
    box-shadow: var(--sn-sombra);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.sn-contenido .sn-fila:has(> [class*="col-"] table), .sn-contenido .sn-fila:has(> [class*="col-"] > h4 + p) { --bs-gutter-x: 1.25rem; margin-inline: 0; gap: 1.25rem 0; }
.sn-contenido .sn-fila > [class*="col-"]:has(table) .sn-boton, .sn-contenido .sn-fila > [class*="col-"]:has(> h4 + p) .sn-boton { margin-top: auto; padding-top: 1rem; margin-bottom: 0; }
.sn-contenido .sn-fila > [class*="col-"]:has(table) figure, .sn-contenido .sn-fila > [class*="col-"]:has(> h4 + p) figure { margin: 0 0 1rem; text-align: center; }
.sn-contenido .sn-fila > [class*="col-"]:has(table) figure img, .sn-contenido .sn-fila > [class*="col-"]:has(> h4 + p) figure img { max-height: 11rem; width: auto; }
.sn-contenido .sn-fila > [class*="col-"] > h3 { font-size: 1.15rem; }
.sn-contenido .sn-fila > [class*="col-"] > h3 a { text-decoration: none; color: var(--sn-marino); }
.sn-contenido .sn-fila > [class*="col-"] > h3 p { font-size: 0.88rem; font-weight: 400; color: var(--sn-gris); margin: 0.25rem 0 0; }
.sn-contenido .sn-fila > [class*="col-"] > h4 strong { font-size: 1.6rem; color: var(--sn-marino); }
.sn-contenido .sn-fila > [class*="col-"] ul { font-size: 0.9rem; color: var(--sn-gris); }

/* logos de clientes */
.sn-contenido .sn-fila:has(> .col-lg-2) { align-items: center; }
.sn-contenido .sn-fila > .col-lg-2 { flex: 0 0 auto; width: 33.333%; }
@media (min-width: 768px) { .sn-contenido .sn-fila > .col-lg-2 { width: 16.666%; } }
.sn-contenido .sn-fila > .col-lg-2 figure { margin: 0; }
.sn-contenido .sn-fila > .col-lg-2 img { filter: grayscale(1); opacity: 0.75; transition: filter 0.4s var(--sn-ease), opacity 0.4s var(--sn-ease); border-radius: 0; }
.sn-contenido .sn-fila > .col-lg-2 a:hover img { filter: none; opacity: 1; }

.sn-iconbox h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
.sn-iconbox p { color: var(--sn-gris); }
.sn-contador { display: flex; flex-direction: column; }
.sn-contador__num { font-size: 2.4rem; font-weight: 700; color: var(--sn-azul); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sn-contador__txt { color: var(--sn-gris); }

.sn-precio { background: var(--sn-blanco); border: 1px solid var(--sn-linea); border-radius: var(--sn-radio); box-shadow: var(--sn-sombra); padding: 1.5rem; height: 100%; }
.sn-precio h3 { margin-top: 0; font-size: 1.2rem; }
.sn-precio__sub { color: var(--sn-gris); font-size: 0.9rem; }
.sn-precio__monto { font-size: 1.9rem; font-weight: 700; color: var(--sn-marino); margin: 0.5rem 0 1rem; font-variant-numeric: tabular-nums; }
.sn-precio__moneda { font-size: 0.95rem; font-weight: 500; color: var(--sn-gris); }
.sn-precio__monto sup { font-size: 0.9rem; }

.sn-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.sn-testimonio { margin: 0; background: var(--sn-suave); border-radius: var(--sn-radio); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.sn-testimonio blockquote { margin: 0; font-size: 1.02rem; color: var(--sn-tinta); }
.sn-testimonio blockquote p::before { content: "“"; font-size: 2.6rem; line-height: 0; vertical-align: -0.45em; color: var(--sn-amarillo-700); margin-right: 0.15rem; }
.sn-testimonio figcaption { margin-top: auto; font-weight: 600; color: var(--sn-marino); display: flex; flex-direction: column; }
.sn-testimonio figcaption small { font-weight: 400; color: var(--sn-gris); }

.sn-mapa { border-radius: var(--sn-radio); overflow: hidden; margin-top: 1rem; }
.sn-mapa iframe { border: 0; }

/* acordeón de FAQ (#faqs de Cenit) */
.sn-faq { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--sn-linea); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--sn-marino); margin: 1rem 0; }
.sn-faq .accordion-item { border-left: 0; border-right: 0; border-radius: 0 !important; }
.sn-faq .accordion-header { margin: 0; }
.sn-faq .accordion-button { font-weight: 600; font-size: 1.02rem; color: var(--sn-marino); padding: 1.1rem 0; background: transparent; box-shadow: none; }
.sn-faq .accordion-button:focus-visible { outline: 3px solid var(--sn-amarillo); }
.sn-faq .accordion-body { padding: 0 0 1.25rem; color: var(--sn-gris); }

/* ------------------------------------------------------------------ tarjetas y rejillas */

.sn-rejilla { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.sn-rejilla--productos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.sn-rejilla--servicios, .sn-rejilla--articulos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

.sn-tarjeta { background: var(--sn-blanco); border: 1px solid var(--sn-linea); border-radius: var(--sn-radio); box-shadow: var(--sn-sombra); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform 0.45s var(--sn-ease), box-shadow 0.45s var(--sn-ease); }
.sn-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sn-sombra-alta); }
.sn-tarjeta__imagen { display: block; position: relative; background: var(--sn-blanco); }
.sn-tarjeta--producto .sn-tarjeta__imagen img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 1rem; }
.sn-tarjeta--articulo .sn-tarjeta__imagen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sn-tarjeta__cuerpo { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.sn-tarjeta--producto .sn-tarjeta__cuerpo { border-top: 1px solid var(--sn-suave); }
.sn-tarjeta--servicio { padding: 1.5rem; gap: 0.6rem; }
.sn-tarjeta__titulo { font-size: 1.05rem; margin: 0; }
.sn-tarjeta__titulo a { color: var(--sn-marino); text-decoration: none; }
.sn-tarjeta__titulo a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.sn-tarjeta__texto { color: var(--sn-gris); font-size: 0.9rem; margin: 0; }
.sn-tarjeta--servicio .sn-tarjeta__texto { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sn-tarjeta .sn-enlace-flecha, .sn-tarjeta .sn-meta a { position: relative; z-index: 2; margin-top: auto; }
.sn-tarjeta__precio { margin: auto 0 0; padding-top: 0.6rem; display: flex; flex-direction: column; font-size: 0.85rem; color: var(--sn-gris); font-variant-numeric: tabular-nums; }
.sn-tarjeta__precio strong { color: var(--sn-marino); font-size: 1rem; }
.sn-sello-imagen { position: absolute; top: 0.75rem; left: 0.75rem; font-size: 0.72rem; font-weight: 600; color: var(--sn-marino); background: var(--sn-amarillo); border-radius: 2rem; padding: 0.15rem 0.6rem; }

/* filtro del catálogo */
.sn-filtro { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0.5rem; }
.sn-filtro__opcion { border: 1.5px solid var(--sn-linea); background: var(--sn-blanco); color: var(--sn-tinta); border-radius: 2rem; padding: 0.45rem 1.1rem; font-weight: 500; font-size: 0.92rem; transition: all 0.25s var(--sn-ease); }
.sn-filtro__opcion:hover { border-color: var(--sn-azul); color: var(--sn-azul); }
.sn-filtro__opcion[aria-pressed="true"] { background: var(--sn-marino); border-color: var(--sn-marino); color: var(--sn-blanco); }
.sn-tarjeta[hidden] { display: none !important; }

.sn-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sn-chips a { display: inline-block; border: 1.5px solid var(--sn-linea); border-radius: 2rem; padding: 0.3rem 0.9rem; text-decoration: none; font-size: 0.9rem; }
.sn-chips a:hover { border-color: var(--sn-azul); }

/* ------------------------------------------------------------------ ficha: specs, precios, PDFs */

.sn-specs { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 0.1rem; }
.sn-specs li { position: relative; padding: 0.7rem 0 0.7rem 2rem; border-bottom: 1px solid var(--sn-linea); }
.sn-specs li::before { content: ""; position: absolute; left: 0.1rem; top: 0.95rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sn-amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2306294c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }

.sn-producto__lateral { position: sticky; top: calc(var(--sn-cabecera-alto) + 2rem); display: flex; flex-direction: column; gap: 1.25rem; }

.sn-precios { background: var(--sn-blanco); border: 1px solid var(--sn-linea); border-radius: var(--sn-radio); box-shadow: var(--sn-sombra); padding: 1.5rem; }
.sn-precios__titulo { font-size: 1.25rem; margin: 0 0 1rem; }
.sn-precios--pendiente { background: var(--sn-suave); box-shadow: none; }
.sn-precios--pendiente p { margin: 0; color: var(--sn-gris); }
.sn-modalidad + .sn-modalidad { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--sn-linea); }
.sn-modalidad__titulo { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sn-azul); margin: 0 0 0.5rem; }
.sn-modalidad__volumen { margin: 0 0 0.5rem; color: var(--sn-gris); font-size: 0.92rem; }
.sn-modalidad__volumen strong { color: var(--sn-marino); }
.sn-modalidad__desde { margin: 0; color: var(--sn-gris); }
.sn-modalidad__desde strong { font-size: 1.7rem; color: var(--sn-marino); font-variant-numeric: tabular-nums; }
.sn-modalidad__nota { font-size: 0.82rem; color: var(--sn-gris); margin: 0.6rem 0 0; }
.sn-modalidad__promo { margin: 1rem 0 0; font-size: 0.9rem; }
.sn-planes { width: 100%; font-variant-numeric: tabular-nums; border-collapse: collapse; }
.sn-planes th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sn-gris); font-weight: 600; padding: 0 0 0.4rem; border-bottom: 1.5px solid var(--sn-marino); }
.sn-planes td { padding: 0.55rem 0; border-bottom: 1px dashed var(--sn-linea); }
.sn-planes th:last-child, .sn-planes td:last-child { text-align: right; }
.sn-planes td:last-child { font-weight: 700; color: var(--sn-marino); }

.sn-pdfs { background: var(--sn-blanco); border: 1px solid var(--sn-linea); border-radius: var(--sn-radio); padding: 1.25rem 1.5rem; }
.sn-pdfs__titulo { font-size: 1.1rem; margin: 0 0 0.75rem; }
.sn-pdfs__lista { list-style: none; padding: 0; margin: 0; }
.sn-pdf { display: flex; align-items: center; gap: 0.85rem; padding-block: 0.6rem; }
.sn-pdf + .sn-pdf { border-top: 1px solid var(--sn-linea); }
.sn-pdf__icono { width: 2.2rem; height: 2.2rem; color: var(--sn-rojo); flex-shrink: 0; }
.sn-pdf__datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sn-pdf__nombre { font-weight: 600; color: var(--sn-marino); overflow-wrap: anywhere; }
.sn-pdf__detalle { font-size: 0.8rem; color: var(--sn-gris); }
.sn-pdf__acciones { display: flex; gap: 0.4rem; }

/* ------------------------------------------------------------------ artículo */

.sn-contenido--articulo { font-size: 1.05rem; }
.sn-contenido--articulo p, .sn-contenido--articulo li { max-width: 68ch; }
.sn-lateral { position: sticky; top: calc(var(--sn-cabecera-alto) + 2rem); }
.sn-lateral__titulo { font-size: 1rem; margin: 2rem 0 0.75rem; }
.sn-compartir { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sn-compartir a { display: inline-block; font-size: 0.85rem; border: 1.5px solid var(--sn-linea); border-radius: 2rem; padding: 0.25rem 0.8rem; text-decoration: none; }
.sn-compartir a:hover { border-color: var(--sn-azul); }
.sn-relacionados { list-style: none; padding: 0; margin: 0; }
.sn-relacionados li { padding-block: 0.7rem; border-top: 1px solid var(--sn-linea); display: flex; flex-direction: column; gap: 0.2rem; }
.sn-relacionados a { font-weight: 600; color: var(--sn-marino); text-decoration: none; line-height: 1.35; }
.sn-relacionados a:hover { color: var(--sn-azul); }

/* ------------------------------------------------------------------ listados, búsqueda, 404 */

.sn-listado__titulo { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); font-weight: 700; color: var(--sn-marino); letter-spacing: -0.02em; margin-bottom: 0.75rem; line-height: 1.2; }
.sn-listado__texto { color: var(--sn-gris); }
.sn-paginacion ul { list-style: none; display: flex; gap: 0.4rem; padding: 0; margin: 2rem 0 0; }
.sn-paginacion a, .sn-paginacion span { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--sn-linea); text-decoration: none; font-weight: 600; }
.sn-paginacion span { background: var(--sn-marino); color: var(--sn-blanco); border-color: var(--sn-marino); }
.sn-buscador { display: flex; gap: 0.5rem; max-width: 36rem; margin: 1rem 0 2rem; }
.sn-buscador input { flex: 1; border: 1.5px solid var(--sn-linea); border-radius: 2rem; padding: 0.6rem 1.1rem; }
.sn-vacio { text-align: center; padding-block: 2rem; }
.sn-vacio__codigo { font-size: clamp(4rem, 12vw, 7rem); font-weight: 700; color: var(--sn-suave); -webkit-text-stroke: 2px var(--sn-azul); line-height: 1; margin: 0; }
.sn-vacio .sn-listado__texto { margin-inline: auto; max-width: 44ch; }

/* ------------------------------------------------------------------ formulario (línea inferior de Cenit) */

.sn-formulario { background: var(--sn-blanco); border-radius: 22px; box-shadow: var(--sn-sombra-alta); padding: clamp(1.5rem, 4vw, 2.5rem); }
.sn-formulario form { display: grid; gap: 0.35rem 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .sn-formulario form { grid-template-columns: 1fr 1fr; } .sn-campo:has(textarea), .sn-formulario form > button { grid-column: 1 / -1; } }
.sn-campo { display: flex; flex-direction: column; }
.sn-campo label { font-size: 0.85rem; font-weight: 600; color: var(--sn-marino); }
.sn-requerido { color: var(--sn-rojo); }
.sn-campo input, .sn-campo textarea { border: 0; border-bottom: 2px solid var(--sn-linea); padding: 0.55rem 0; font: inherit; color: var(--sn-tinta); background: transparent; border-radius: 0; transition: border-color 0.25s var(--sn-ease); }
.sn-campo input:focus, .sn-campo textarea:focus { outline: none; border-bottom-color: var(--sn-azul); box-shadow: 0 2px 0 0 var(--sn-azul); }
.sn-campo--error input, .sn-campo--error textarea { border-bottom-color: var(--sn-rojo); }
.sn-campo__error { min-height: 1.3rem; font-size: 0.8rem; color: var(--sn-rojo); margin: 0.2rem 0 0; }
.sn-formulario form > button { justify-self: start; margin-top: 0.5rem; }
.sn-formulario form > button[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.sn-trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sn-aviso { border-radius: 12px; padding: 0.9rem 1.1rem; font-weight: 500; }
.sn-aviso--ok { background: #e6f4ec; color: #0a5a33; }
.sn-aviso--error { background: #fdecea; color: var(--sn-rojo); }

/* ------------------------------------------------------------------ cierre (cta-bg + cta-box de Cenit) */

.sn-cierre { background: linear-gradient(180deg, var(--sn-blanco) 0%, var(--sn-suave) 100%); padding-block: clamp(3rem, 6vw, 4.5rem); }
.sn-cierre__caja { background: var(--sn-marino); color: var(--sn-blanco); border-radius: 22px; padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; box-shadow: var(--sn-sombra-alta); background-image: radial-gradient(30rem 16rem at 100% 0%, rgba(11, 74, 137, 0.9), transparent 70%); }
.sn-cierre__caja h2 { color: var(--sn-blanco); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin: 0 0 0.4rem; }
.sn-cierre__caja p { margin: 0; color: #d8e3ef; }
.sn-cierre__caja a:not(.btn) { color: var(--sn-amarillo); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sn-cierre__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------------------ pie */

.sn-pie { background: var(--sn-marino-900); color: var(--sn-gris-claro); padding-block: 3.5rem 1.5rem; font-size: 0.93rem; }
.sn-pie a { color: var(--sn-gris-claro); text-decoration: none; }
.sn-pie a:hover { color: var(--sn-amarillo); }
.sn-pie__marca img { height: 3.4rem; width: auto; }
.sn-pie__direccion, .sn-pie__horario { margin: 1rem 0 0; max-width: 34ch; }
.sn-pie__titulo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sn-blanco); margin-bottom: 1rem; }
.sn-pie__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.sn-pie__lista--contacto a { font-variant-numeric: tabular-nums; }
.sn-pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(197, 211, 227, 0.16); font-size: 0.8rem; }

/* ------------------------------------------------------------------ WhatsApp flotante (Joinchat) */

.sn-whatsapp-flotante { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1040; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--sn-verde); color: var(--sn-blanco); display: grid; place-items: center; box-shadow: 0 14px 28px -8px rgba(11, 122, 69, 0.6); transition: transform 0.35s var(--sn-ease); }
.sn-whatsapp-flotante:hover, .sn-whatsapp-flotante:focus-visible { transform: scale(1.06); color: var(--sn-blanco); }
.sn-whatsapp-flotante svg { width: 1.9rem; height: 1.9rem; }
.sn-whatsapp-flotante__globo { position: absolute; right: calc(100% + 0.75rem); white-space: nowrap; background: var(--sn-blanco); color: var(--sn-tinta); font-size: 0.85rem; font-weight: 500; padding: 0.5rem 0.9rem; border-radius: 12px; box-shadow: var(--sn-sombra); opacity: 0; transform: translateX(8px); transition: opacity 0.3s var(--sn-ease), transform 0.3s var(--sn-ease); pointer-events: none; }
@media (hover: hover) { .sn-whatsapp-flotante:hover .sn-whatsapp-flotante__globo { opacity: 1; transform: none; } }
/* aparece tras --sn-retraso (JoinChat: button_delay); sin animación queda visible desde el inicio */
.sn-whatsapp-flotante { animation: sn-flotante-aparece 0.5s var(--sn-ease) var(--sn-retraso, 0s) both; }
@keyframes sn-flotante-aparece { from { opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.9); } to { opacity: 1; visibility: visible; transform: none; } }

/* ------------------------------------------------------------------ acabado (revisión 15 sep 2026) */

.sn-tarjeta__cotizar { font-weight: 600; color: var(--sn-azul); }

/* botones consecutivos del contenido: en línea, el segundo con contorno (jerarquía de la portada) */
.sn-contenido .sn-boton { display: inline-block; margin-right: 0.75rem; margin-bottom: 0; }
.sn-contenido .sn-boton + .sn-boton .btn-sn { background: transparent; color: var(--sn-marino); border: 1.5px solid var(--sn-marino); }
.sn-contenido .sn-boton + .sn-boton .btn-sn:hover { background: var(--sn-marino); color: var(--sn-blanco); box-shadow: none; }

/* filas seguidas y canales de contacto */
.sn-contenido .sn-fila + .sn-fila { margin-top: 2.5rem; }
.sn-contenido .sn-fila > [class*="col-"]:has(> .sn-iconbox) { display: flex; flex-direction: column; gap: 1rem; }
.sn-iconbox { background: var(--sn-suave); border-radius: var(--sn-radio); padding: 1.35rem 1.5rem; position: relative; overflow: hidden; }
.sn-iconbox::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 2.5rem; height: 3px; background: var(--sn-amarillo); }
.sn-iconbox p { margin-bottom: 0; overflow-wrap: anywhere; }
.sn-contacto .sn-contenido > section.sn-bloque:last-child a { display: inline-block; margin: 0.25rem 0.5rem 0 0; border: 1.5px solid var(--sn-linea); border-radius: 2rem; padding: 0.3rem 0.9rem; text-decoration: none; }

/* planes de renta en tarjeta: tabla compacta, etiqueta y valor juntos */
.sn-contenido .sn-fila > [class*="col-"]:has(table) table { max-width: 28rem; }

/* rejilla de tarjetas-recibo (planes de renta y ofertas de venta): grid con separación real entre tarjetas */
.sn-contenido .sn-fila:has(> [class*="col-"] > table), .sn-contenido .sn-fila:has(> [class*="col-"] > h4 + p) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin: 1.5rem 0 0;
}
.sn-contenido .sn-fila:has(> [class*="col-"] > table) > [class*="col-"], .sn-contenido .sn-fila:has(> [class*="col-"] > h4 + p) > [class*="col-"] {
    width: auto; max-width: none; margin: 0; padding: 1.5rem;
}

/* precio en tarjeta de equipo: etiqueta arriba, monto completo abajo, siempre dentro de la tarjeta */
.sn-tarjeta__precio span { white-space: normal; }
.sn-tarjeta__precio strong { display: block; white-space: nowrap; font-size: 0.98rem; }

/* redes en contacto: píldora con el texto centrado (el enlace envuelve un h4) */
.sn-contacto .sn-contenido > section.sn-bloque:last-child a { display: inline-flex; align-items: center; min-height: 2.4rem; }
.sn-contacto .sn-contenido > section.sn-bloque:last-child a h4 { margin: 0; font-size: 0.95rem; font-weight: 600; color: inherit; }
.sn-contenido .sn-mapa { aspect-ratio: 4 / 3; }

/* portada: bandas de fondo suave que marcan el cambio de sección (planes, formulario, testimonios) */
.sn-contenido--portada > section.sn-bloque#planes,
.sn-contenido--portada > section.sn-bloque:has(.sn-formulario),
.sn-contenido--portada > section.sn-bloque:has(.sn-testimonios) {
    background: var(--sn-suave); box-shadow: 0 0 0 100vmax var(--sn-suave); clip-path: inset(0 -100vmax); padding-block: 2.5rem;
}
.sn-contenido--portada > section.sn-bloque:first-child p, .sn-contenido--portada > section.sn-bloque:first-child li { max-width: 78ch; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}