/* Piel de la portada (tarjeta IEwzpDJu). Lleva los bloques de Avada de la portada
   al sistema de diseño sin tocar su contenido: mismos bloques, mismo orden, mismos
   textos (la portada se mejora por pasos, O4TumpLR). Sólo usa variables del sistema
   (conexcol-sistema.css). Todo selector empieza por body.cx-piel-portada; la carga
   el tema hijo cuando la página tiene el metadato _cx_piel=portada.

   Avada pinta cada contenedor con variables --awb-* en línea: se redefinen con
   !important, que gana a una declaración en línea sin él.

   Cada sección se nombra por su id ([id="datacenter"]), nunca por el número de fila que le
   pone Avada (.fusion-builder-row-11): ese número cambia en cuanto se mueve, se añade o se
   quita una sección (A4LmqAjX). [id="x"] y no #x, para que pese lo que pesaba la clase. */

/* --- Orden (cWUeL6K9): un borde, un ritmo, nada centrado ------------------------
   David la vio «medio desorganizada». Medido contra /aplicaciones/: allí todo arranca
   en el mismo borde, cada sección tiene el mismo espacio arriba y el título va pegado
   a su contenido. Aquí había 50–135 px sobre los títulos, 5–172 px del título a su
   contenido y dos bordes (55 y 76 px). */
body.cx-piel-portada { --cx-inset: var(--space-4); --cx-ritmo: var(--space-8); --cx-titulo-contenido: var(--space-6); }
@media (max-width: 640px) { body.cx-piel-portada { --cx-inset: var(--space-2); --cx-ritmo: var(--space-7); --cx-titulo-contenido: var(--space-5); } }
/* El mismo espacio sobre cada sección, y nada debajo: lo pone la siguiente. */
body.cx-piel-portada #main .fusion-fullwidth:is([id="confianza"], [id="planes"], [id="subete"], [id="testimonios"], [id="novedades"], [id="minuto"]) { --awb-padding-top: var(--cx-ritmo) !important; --awb-padding-bottom: 0px !important; }
body.cx-piel-portada #main .fusion-fullwidth:is([id="cxh-p-sitio"], [id="cxh-p-servidor"], [id="cxh-p-agencia"], [id="cxh-p-empresa"]) { --awb-padding-top: var(--space-6) !important; --awb-padding-bottom: 0px !important; }
body.cx-piel-portada #main .fusion-fullwidth[id="minuto"] { --awb-padding-bottom: var(--cx-ritmo) !important; }
body.cx-piel-portada #main .fusion-fullwidth[id="faq"] { --awb-padding-top: var(--cx-ritmo) !important; --awb-padding-bottom: var(--cx-ritmo) !important; }
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"], [id="datacenter"], [id="cierre"]) .fusion-layout-column { margin-bottom: 0 !important; }
/* Título, subtítulo y contenido: 12 px y luego 32 px, en todas. Los separadores de Avada eran
   los que daban cada vez un espacio distinto. */
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"], [id="datacenter"]) .fusion-separator.fusion-full-width-sep { display: none !important; }
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"]) .fusion-title:has(> h2) { margin: 0 0 var(--space-3) !important; }
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"]) .fusion-layout-column:not(.cx-tar) .fusion-title:has(> h3) { margin: 0 !important; }
body.cx-piel-portada #main [id="confianza"] .fusion-layout-column + .fusion-layout-column,
body.cx-piel-portada #main [id="planes"] .cxh-seg,
body.cx-piel-portada #main [id="testimonios"] .fusion-testimonials { margin-top: var(--cx-titulo-contenido) !important; }
body.cx-piel-portada #main [id="planes"] .fusion-column-wrapper > p { margin: 0 !important; }
body.cx-piel-portada #main [id="planes"] .cxh-seg { margin-left: 0 !important; margin-right: auto !important; }
/* El widget de Reputación Verificada viene centrado de fábrica. Se nombra por su id: lo que sigue al contador es un
   separador oculto y un <script>, así que `.counters-box + div` caía en el separador y el widget quedaba pegado. */
body.cx-piel-portada #main [id="confianza"] #neoloreviews-widget, body.cx-piel-portada #main [id="confianza"] #neoloreviews-widget > * { text-align: left !important; margin-left: 0 !important; }
body.cx-piel-portada #main [id="confianza"] #neoloreviews-widget { margin-top: var(--space-5) !important; }
body.cx-piel-portada #main [id="testimonios"] .fusion-text { margin-top: var(--space-6) !important; }
/* Súbete a la nube: título arriba, no centrado en vertical con la ilustración. Las tarjetas (`cx-plan`, MdSY6Jqr) sí se
   estiran, para medir lo mismo. La regla del ritmo le quita el margen a toda columna, así que aquí se dice el suyo: del
   título a la primera fila, y entre tarjetas cuando van de dos en dos (tableta) o apiladas (móvil). */
body.cx-piel-portada #main [id="subete"] .fusion-layout-column:not(.cx-plan) { align-self: flex-start !important; }
body.cx-piel-portada #main [id="subete"] .fusion-layout-column.cx-plan { margin-top: var(--cx-titulo-contenido) !important; }
@media (max-width: 1024px) { body.cx-piel-portada #main [id="subete"] .fusion-layout-column.cx-plan + .cx-plan + .cx-plan { margin-top: var(--space-4) !important; } }
@media (max-width: 640px) { body.cx-piel-portada #main [id="subete"] .fusion-layout-column.cx-plan + .cx-plan { margin-top: var(--space-4) !important; } }
/* La foto de la cabecera, con el tope de alto que le ponía el <style> de la sección (se fue con las cajas). */
body.cx-piel-portada #main [id="subete"] .fusion-imageframe img { max-height: 300px; width: auto; }
body.cx-piel-portada #main [id="subete"] .fusion-imageframe { display: block; text-align: center; }
/* Nada centrado bajo un título alineado a la izquierda. */
body.cx-piel-portada #main [id="testimonios"] .fusion-testimonials { --awb-margin-left: 0px !important; --awb-margin-right: 0px !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Subtítulos que traen estilo en línea (caja centrada de 700 px a 19 px): como los demás. */
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"], [id="datacenter"], [id="cierre"]) .fusion-text > p { margin-left: 0 !important; margin-right: 0 !important; }
body.cx-piel-portada #main [id="minuto"] .fusion-text p { max-width: 56ch !important; font-size: 17px !important; line-height: 27px !important; color: var(--texto-2) !important; }
/* La portada va entera a la izquierda (nDnx2U3S). Una entradilla que Avada trae como centrada centra su párrafo como
   bloque de 56ch (componentes.css), y en «Datacenter en Colombia» quedaba el título en el borde y el párrafo en medio. */
body.cx-piel-portada #main .cx-ent p { margin-inline: 0 !important; }
/* Novedades: del ancho del contenido, no más ancho. */
body.cx-piel-portada #main [id="novedades"] .cxb { max-width: var(--site_width, 1170px) !important; }
/* Conexcol en un minuto: título a la izquierda y vídeo a la derecha (FilaDestacada). */
@media (min-width: 801px) {
	body.cx-piel-portada #main [id="minuto"] .fusion-column-wrapper { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); grid-template-rows: auto 1fr; column-gap: var(--space-7); align-items: start; }
	body.cx-piel-portada #main [id="minuto"] .fusion-column-wrapper > .fusion-title { grid-column: 1; grid-row: 1; }
	body.cx-piel-portada #main [id="minuto"] .fusion-column-wrapper > .fusion-text { grid-column: 1; grid-row: 2; }
	body.cx-piel-portada #main [id="minuto"] .fusion-column-wrapper > lite-youtube { grid-column: 2; grid-row: 1 / span 2; width: 100% !important; max-width: none !important; }
}
@media (max-width: 800px) { body.cx-piel-portada #main [id="minuto"] lite-youtube { margin-top: var(--cx-titulo-contenido) !important; } }

/* --- Titulares de sección: a la izquierda, en tinta, 40/44 a peso 500 -------- */
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"]) .fusion-title { justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; }
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"]) .fusion-title h2.fusion-title-heading { text-align: left !important; max-width: 22ch; font-size: 40px !important; line-height: 44px !important; font-weight: 500 !important; letter-spacing: -.03em !important; text-wrap: balance; }
/* El color, fuera de los componentes del sistema: la franja (cx-franja) y la sección noche (cx-sec-noche) pintan su
   título en blanco. */
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"], .cx-franja, .cx-sec-noche) .fusion-title h2.fusion-title-heading { color: var(--tinta) !important; }
/* Sin textos centrados: lo que acompaña a un titular va alineado con él. */
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"]) :is(.fusion-text, .fusion-text :is(p, h3), .fusion-column-wrapper > p) { text-align: left !important; }
/* Un h3 de título de Avada es aquí un subtítulo. El de una tarjeta `cx-tar` no: lo pinta la hoja global. */
body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"]) .fusion-layout-column:not(.cx-tar) .fusion-title h3.fusion-title-heading { text-align: left !important; max-width: 56ch; font-size: 17px !important; line-height: 27px !important; font-weight: 400 !important; letter-spacing: 0 !important; color: var(--texto-2) !important; }
@media (max-width: 640px) {
	body.cx-piel-portada #main .fusion-fullwidth:not([id="inicio"]) .fusion-title h2.fusion-title-heading { font-size: 28px !important; line-height: 32px !important; }
}

/* --- Botones de Avada: cápsula a 15/500 (la global ya quitó las mayúsculas) --- */
body.cx-piel-portada #main .fusion-button { border-radius: var(--radio-capsula) !important; font-weight: 500 !important; letter-spacing: -.005em; box-shadow: none !important; }
body.cx-piel-portada #main .fusion-button .fusion-button-text { font-size: 15px !important; line-height: 20px !important; font-weight: 500 !important; }

/* --- Sin ondas ni separadores de nube: el sistema no los usa ------------------- */
body.cx-piel-portada #main .fusion-layout-column:has(> .fusion-column-wrapper > .fusion-section-separator:only-child) { display: none !important; }
body.cx-piel-portada #main .fusion-section-separator { display: none !important; }

/* --- 1. Hero: lo pinta el adaptador «Hero en Avada» de la hoja global (Z4cyTBTe) ----
   La portada lleva el contenedor `cx-hero`; aquí no queda nada suyo. */

/* --- 3. Cifras: las pinta «Cifras de prueba en Avada» de la hoja global (ACx0W34A) ---
   El contador lleva la clase `cx-cifras`; aquí no queda nada suyo. */

/* --- 4. Pestañas de planes: control segmentado --------------------------------- */
body.cx-piel-portada .cxh-seg { display: inline-flex !important; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 2px !important; padding: 4px !important; border-radius: var(--radio-capsula); background: var(--nube); border: 1px solid var(--linea); justify-content: flex-start !important; }
body.cx-piel-portada .cxh-seg button { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 7px 16px !important; border-radius: var(--radio-capsula) !important; font: 500 14px/18px var(--font-sans) !important; color: var(--texto-2) !important; }
body.cx-piel-portada .cxh-seg button[aria-selected="true"] { background: var(--superficie) !important; color: var(--tinta) !important; box-shadow: 0 0 0 1px var(--linea) !important; }
body.cx-piel-portada .cxh-seg button:focus-visible { outline: none; box-shadow: var(--anillo-foco) !important; }
@media (max-width: 640px) { body.cx-piel-portada .cxh-seg { border-radius: var(--radio-destacada); } }
body.cx-piel-portada [id="planes"] .fusion-column-wrapper > p { margin-left: 0 !important; }
body.cx-piel-portada [id="planes"] .fusion-column-wrapper:has(> .cxh-seg) { align-items: flex-start !important; }

/* --- 5–8. Tarjetas de plan: TarjetaPrecio -------------------------------------- */
/* Apiladas —el <style> del contenido las apila a 768 px— las tarjetas de plan se tocaban, borde con borde: la regla del
   ritmo, arriba, le quita a toda columna el margen que le daba Avada. Y ese <style> las centraba a 480 px de ancho, bajo
   un título y unas pestañas que arrancan en el borde. El tope va en la tarjeta y no en la columna: el margen entre
   columnas de Avada es un porcentaje del ancho de la columna, y con la columna a 480 px la tarjeta arrancaba 5 px antes. */
@media (max-width: 768px) {
	body.cx-piel-portada #main .fusion-layout-column.cxh-card { max-width: none !important; }
	body.cx-piel-portada #main .fusion-layout-column.cxh-card > .fusion-column-wrapper { max-width: 480px; }
	body.cx-piel-portada #main .fusion-layout-column.cxh-card + .fusion-layout-column.cxh-card { margin-top: var(--space-4) !important; }
}
body.cx-piel-portada .fusion-column-wrapper:has(> .cxp) { background: var(--superficie) !important; border: 1px solid var(--linea) !important; border-radius: var(--radio-destacada) !important; box-shadow: none !important; overflow: visible; }
body.cx-piel-portada .fusion-column-wrapper:has(> .cxp .cxp-reco) { border-color: transparent !important; box-shadow: 0 0 0 2px var(--azul) !important; }
body.cx-piel-portada .cxp { text-align: left !important; padding: var(--space-6) !important; display: flex; flex-direction: column; gap: 0; height: 100%; }
body.cx-piel-portada .cxp-top { min-height: 26px; position: static !important; display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-3) !important; padding: 0 !important; background: none !important; border: 0 !important; }
body.cx-piel-portada .cxp-line { font: 500 12px/16px var(--font-mono) !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--azul) !important; }
body.cx-piel-portada .cxp-reco { position: static !important; transform: none !important; order: 2; display: inline-flex; padding: 3px 10px !important; border-radius: var(--radio-capsula) !important; background: var(--azul-suave) !important; color: var(--azul-profundo) !important; font: 500 13px/18px var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; }
/* Las tarjetas de la portada, al estándar de cx-plan (kSJ4jwVg): nombre 18/600, especificaciones en líneas de Geist
   Mono con filete, incluidos en 13/20 y la cifra ajustada al ancho. #main: el <style> del contenido fija el nombre
   a 30/800 con !important y va después. */
body.cx-piel-portada #main .cxp { container-type: inline-size; }
body.cx-piel-portada #main .cxp .cxl-hb-offer__precio strong { font: 500 clamp(28px, 15cqi, 44px)/1.1 var(--font-sans) !important; letter-spacing: -.03em !important; color: var(--tinta) !important; }
body.cx-piel-portada #main .cxp .cxp-name { text-align: left !important; margin: 0 !important; font: 600 18px/24px var(--font-sans) !important; letter-spacing: -.01em !important; color: var(--tinta) !important; }
body.cx-piel-portada .cxp-who { text-align: left !important; margin: 4px 0 0 !important; font-size: 15px !important; line-height: 22px !important; color: var(--texto-2) !important; min-height: 0 !important; }
body.cx-piel-portada .cxp-price { text-align: left !important; align-items: flex-start !important; margin: var(--space-5) 0 0 !important; padding: 0 !important; background: none !important; }
body.cx-piel-portada .cxp-old { font: 400 13px/18px var(--font-mono) !important; color: var(--texto-3) !important; }
body.cx-piel-portada .cxp-now { display: flex !important; align-items: baseline; gap: 2px; justify-content: flex-start !important; font: 500 48px/52px var(--font-sans) !important; letter-spacing: -.03em !important; color: var(--tinta) !important; font-variant-numeric: tabular-nums; }
body.cx-piel-portada .cxp-now sup { top: 0 !important; align-self: flex-start; margin-top: 6px; font-size: 22px !important; color: var(--tinta) !important; }
body.cx-piel-portada .cxp-now small { font: 400 14px/20px var(--font-sans) !important; letter-spacing: 0 !important; color: var(--texto-3) !important; margin-left: 4px; }
body.cx-piel-portada .cxp-promo { display: inline-flex !important; width: auto !important; align-self: flex-start; margin: var(--space-2) 0 0 !important; padding: 3px 10px 3px 8px !important; border-radius: var(--radio-capsula) !important; background: var(--acierto-suave) !important; color: var(--acierto) !important; font: 500 13px/18px var(--font-sans) !important; border: 0 !important; }
body.cx-piel-portada .cxp-renew { margin: 6px 0 0 !important; font: 400 13px/18px var(--font-mono) !important; color: var(--texto-3) !important; text-align: left !important; }
body.cx-piel-portada #main .cxp .cxp-res { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; margin: var(--space-5) 0 0 !important; padding-top: var(--space-4) !important; border-top: 1px solid var(--linea) !important; }
body.cx-piel-portada #main .cxp .cxp-chip { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font: 500 14px/22px var(--font-mono) !important; color: var(--tinta) !important; }
body.cx-piel-portada #main .cxp .cxp-chip svg { display: none !important; }
body.cx-piel-portada #main .cxp .cxp-lt { text-align: left !important; margin: var(--space-4) 0 0 !important; padding-top: 0 !important; border-top: 0 !important; font: 500 12px/16px var(--font-mono) !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--azul) !important; }
body.cx-piel-portada .cxp-list { margin: var(--space-3) 0 0 !important; padding: 0 !important; }
body.cx-piel-portada #main .cxp .cxp-list li { border: 0 !important; padding: 0 !important; margin: 0 !important; font: 400 13px/20px var(--font-sans) !important; color: var(--texto-2) !important; }
body.cx-piel-portada #main .cxp .cxp-list li b { font-weight: 600 !important; color: var(--tinta) !important; }
body.cx-piel-portada #main .cxp .cxp-list li::before { display: none !important; }
body.cx-piel-portada .cxp-btn { margin-top: var(--space-6) !important; min-height: 48px; display: flex !important; align-items: center; justify-content: center; border-radius: var(--radio-capsula) !important; font: 500 15px/20px var(--font-sans) !important; box-shadow: none !important; background: var(--superficie) !important; color: var(--tinta) !important; border: 1px solid var(--linea) !important; }
body.cx-piel-portada .cxp-btn:hover { border-color: var(--linea-control) !important; }
body.cx-piel-portada .cxp:has(.cxp-reco) .cxp-btn { background: var(--verde) !important; color: var(--on-verde) !important; border-color: transparent !important; }
body.cx-piel-portada .cxp:has(.cxp-reco) .cxp-btn:hover { filter: brightness(.93); }
body.cx-piel-portada .cxp-trust { text-align: left !important; margin: var(--space-3) 0 0 !important; font-size: 12px !important; line-height: 17px !important; color: var(--texto-3) !important; }
@media (max-width: 600px) { body.cx-piel-portada .cxp-now { font-size: 40px !important; line-height: 44px !important; } body.cx-piel-portada .cxp-renew { margin: 6px 0 0 8px !important; } }
body.cx-piel-portada .cxh-more { text-align: left !important; }
body.cx-piel-portada .cxh-more a { color: var(--azul) !important; font-weight: 500 !important; }

/* --- 10. Súbete a la nube: tarjetas de producto -------------------------------- */
body.cx-piel-portada [id="subete"] > .awb-background-mask,
body.cx-piel-portada [id="subete"] > .awb-background-pattern { display: none !important; }

/* --- 11. Datacenter en Colombia: lo pinta «Sección noche en Avada» de la hoja global (bZ26IzuU) ---
   El contenedor #datacenter lleva `cx-sec cx-sec-noche` y sus tarjetas `cx-tar`; aquí no queda nada suyo. */

/* --- 12. Opiniones: la cita (`cx-citas`) y el muro de reseñas (`cxl-reviews`) los pinta la hoja global (L2RrLUHO);
   aquí no queda nada suyo. */

/* --- 14. Novedades: franja noche con el radio del sistema ---------------------- */
body.cx-piel-portada [id="novedades"] .cxb { background: var(--noche) !important; border-radius: var(--radio-destacada) !important; max-width: calc(var(--contenedor) - 2 * var(--margen-escritorio)); margin-left: auto !important; margin-right: auto !important; overflow: hidden; }
body.cx-piel-portada [id="novedades"] .cxb-btn { background: var(--on-hero) !important; color: var(--noche) !important; border-radius: var(--radio-capsula) !important; box-shadow: none !important; font-weight: 500 !important; }
body.cx-piel-portada [id="novedades"] .cxb-label { background: var(--acierto-suave) !important; color: var(--acierto) !important; border-radius: var(--radio-capsula) !important; }

/* --- 15. Vídeo -------------------------------------------------------------------- */
body.cx-piel-portada [id="minuto"] > .awb-background-mask,
body.cx-piel-portada [id="minuto"] > .awb-background-pattern { display: none !important; }
body.cx-piel-portada [id="minuto"] :is(iframe, lite-youtube, .fusion-video, .cxh-video) { border-radius: var(--radio-destacada) !important; overflow: hidden; margin-left: 0 !important; }

/* --- 16. Preguntas: filetes, sin cajas ---------------------------------------- */
body.cx-piel-portada [id="faq"] { --awb-background-color: var(--nube) !important; background-color: var(--nube) !important; }
body.cx-piel-portada [id="faq"] .fusion-panel { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--linea) !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
body.cx-piel-portada [id="faq"] .fusion-panel:first-child { border-top: 1px solid var(--linea) !important; }
body.cx-piel-portada [id="faq"] .panel-title a { display: flex !important; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0 !important; background: transparent !important; }
body.cx-piel-portada [id="faq"] .fusion-toggle-heading { font: 500 18px/26px var(--font-sans) !important; letter-spacing: -.01em !important; color: var(--tinta) !important; margin: 0 !important; }
body.cx-piel-portada [id="faq"] .fusion-toggle-icon-wrapper { background: transparent !important; color: var(--texto-3) !important; border: 0 !important; }
body.cx-piel-portada #main [id="faq"] .fusion-toggle-icon-wrapper i::before { color: var(--texto-3) !important; }
body.cx-piel-portada #main [id="faq"] .fusion-toggle-icon-wrapper i { color: var(--texto-3) !important; background: transparent !important; border: 0 !important; font-size: 16px !important; }
body.cx-piel-portada [id="faq"] .panel-body { padding: 0 0 var(--space-5) !important; max-width: 64ch; font-size: 16px !important; line-height: 26px !important; color: var(--texto-2) !important; }
/* Llamar es la acción principal; el chat, la secundaria (cada botón va en su propio div). */
body.cx-piel-portada [id="faq"] .cxh-faq-cta a.fusion-button { background: var(--azul) !important; border: 1px solid transparent !important; }
body.cx-piel-portada [id="faq"] .cxh-faq-cta a.fusion-button :is(.fusion-button-text, i) { color: var(--on-azul) !important; }
body.cx-piel-portada [id="faq"] .cxh-faq-cta a.fusion-button:has(.fa-comment-dots) { background: var(--superficie) !important; border-color: var(--linea) !important; }
body.cx-piel-portada [id="faq"] .cxh-faq-cta a.fusion-button:has(.fa-comment-dots) :is(.fusion-button-text, i) { color: var(--tinta) !important; }

/* --- 17. Cierre: lo pinta el adaptador «Franja en Avada» de la hoja global (B6xtYNmR) ---
   El contenedor #cierre lleva la clase `cx-franja`; aquí no queda nada suyo. */