/* ==== IMPORTACIONES ==== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* ==== VARIABLES GLOBALES ==== */
:root {
  --bg-dark: #000000;
  --bg-darker: #050505;
  --primary-blue: #366FFE; /* Azul brillante del PDF */
  --primary-blue-hover: #2563eb;
  --text-light: #ffffff;
  --text-muted: #9ca3af;
  --font-main: 'Outfit', sans-serif;
}

/* ==== RESET Y TIPOGRAFÍA BASE ==== */
*, *::before, *::after {
  box-sizing: border-box;
}
body, html {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.form-element:hover:focus{
  box-shadow:
    0 0 0 2px var(--primary-blue),
    inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.form-element:hover{
  border-color: var(--primary-blue);
  box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
}
.page-wrapper *:focus{
  box-shadow:none
}
/* Forzar el contenedor principal de Drupal si es necesario */
#page-wrapper, .dialog-off-canvas-main-canvas {
  background-color: var(--bg-dark);
}

/* =========================================================================
   GLOBAL BASE — aplica a TODAS las URLs (no solo a la home)
   Tipografía Outfit, fondo dark, primary-blue. Override del legacy covisur.
   ========================================================================= */

/* Layout para páginas internas (cualquier URL que no sea la home) */
body:not(.path-frontpage) .l-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 40px 80px;
  min-height: 60vh;
  background: var(--bg-dark);
}

body:not(.path-frontpage) .l-content > h1 {
  color: var(--text-light);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  margin: 0 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(59,130,246,0.25);
}
.l-content {
  z-index: auto;
}
/* Tipografía global dentro del contenido */
.l-content h1, .l-main .region-content h1 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.15;
  color: var(--text-light);
  margin: 0 0 28px;
}
.l-content h2 {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: var(--text-light);
  margin: 30px 0 20px;
}
.l-content h3 {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  color: var(--text-light);
  margin: 24px 0 16px;
}
.l-content h4 {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--text-light);
  margin: 20px 0 14px;
}
.l-content h5, .l-content h6 {
  font-family: var(--font-main);
  font-weight: 600;
  color: var(--text-light);
  margin: 16px 0 12px;
}
.l-content h5 { font-size: 19px; }
.l-content h6 { font-size: 16px; }

.l-content small,
.l-content .small {
  font-size: 13px;
  color: var(--text-muted);
}

/* Enlaces globales en contenido */
.l-content a,
.l-main .region-content a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
.l-content a:hover,
.l-main .region-content a:hover {
  color: var(--primary-blue-hover);
  text-decoration: underline;
}

/* Listas */
.l-content ul, .l-content ol {
  padding-left: 22px;
  margin: 12px 0;
}
.l-content ul li {
  list-style: disc;
  margin: 4px 0;
}
.l-content ol li {
  list-style: decimal;
  margin: 4px 0;
}
.quick-link a{
    color: transparent !important;
}
.l-content h1, .l-main .region-content h1{
    font-size: 46px;
    font-weight: 700;
    text-transform: none;
}
.l-content h1:before{
    display: none;
}
/* Botones globales — pisa el legacy .button (#2BAAEC + Roboto 20px) */
.button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  background: var(--primary-blue) !important;
  color: var(--text-light) !important;
  font-family: var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 12px 28px !important;
  margin: 8px 0 !important;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2 !important;
  height: auto !important;
  width: auto !important;
  filter: none !important;
}
.l-main .button:hover,
.l-main button:not(.slick-arrow):not(.slick-prev):not(.slick-next):hover,
.l-main input[type="submit"]:hover,
.l-main input[type="button"]:hover {
  background: var(--primary-blue-hover) !important;
  color: var(--text-light) !important;
  filter: none !important;
  transform: translateY(-1px);
}

/* Inputs / textarea / select dentro del contenido */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  background:transparent !important;
  border: 1.5px solid var(--primary-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 11px 24px!important;
  font: 15px var(--font-main) !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
  outline: none !important;
  min-height:auto !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  letter-spacing: 1px !important;
  min-width: 240px;
   border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.l-content .user-register-form #edit-account .form-type-password-confirm .form-item, .l-content .user-form #edit-account .form-type--password-confirm .form-item{
    width: 100%;
}
.commerce-checkout-flow .layout-region-checkout-main .form-type--checkbox{
  width: auto !important;
}
.js-form-item,
.form-wrapper,
.form-item{
    background: none !important;
    padding: 0 !important;
    border-bottom: none !important;
    width: 100% !important;
}
label{
    position: relative !important;
    bottom: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    color: #FFF !important;
    font-family: var(--font-main)  !important;
  font-weight: 500  !important;
}
.l-content .user-form #edit-account .form-type--email{
    width: 100%;
}
.l-content textarea {
  min-height: 140px;
  resize: vertical;
}
.l-content input::placeholder,
.l-content textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.l-content label {
  color: var(--text-light);
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}
.l-content .form-item,
.l-content .js-form-item {
  margin-bottom: 18px;
}
.l-content .form-item__description,
.l-content .description {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
  font-family: var(--font-main);
}
.l-content fieldset,
.l-content .fieldset-wrapper {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
  background: rgba(255,255,255,0.02);
}
.l-content fieldset > legend {
  color: var(--primary-blue);
  font-weight: 600;
  padding: 0 8px;
  font-family: var(--font-main);
}
.l-content input[type="checkbox"],
.l-content input[type="radio"] {
  accent-color: var(--primary-blue);
  margin-right: 8px;
}

/* Drupal messages */
.messages,
.messages--status,
.messages--warning,
.messages--error {
  background-color: rgba(59,130,246,0.08);
  border-left: 4px solid var(--primary-blue);
  color: var(--text-light);
  padding: 14px 20px;
  border-radius: 8px;
  margin: 18px 0;
  font-family: var(--font-main);
}
.messages--status { border-left-color: #10b981; background: rgba(16,185,129,0.08); }
.messages--warning { border-left-color: #f59e0b; background: rgba(245,158,11,0.08); }
.messages--error { border-left-color: #ef4444; background: rgba(239,68,68,0.08); }
.messages a { color: var(--primary-blue); }

/* Tabs (primary/secondary local tasks) */
.l-content .tabs.primary,
.l-content .tabs.secondary,
.l-main .region-content .tabs {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.l-content .tabs li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-content .tabs li a {
  display: block;
  padding: 10px 18px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px 8px 0 0;
  text-decoration: none;
  border: none !important;
}
.l-content .tabs li a.is-active,
.l-content .tabs li.is-active a {
  background: var(--primary-blue);
  color: #fff;
}

/* Action links (botones "+ Add ...") */
.l-content .action-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 22px;
}
.l-content .action-links li { list-style: none; margin: 0; }
.l-content .action-links a {
  background: var(--primary-blue);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.l-content .action-links a:hover {
  background: var(--primary-blue-hover);
  text-decoration: none;
}

/* Pagination */
.l-content .pager,
.l-content .pager__items {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 30px 0;
}
.l-content .pager__item,
.l-content .pager li { list-style: none; margin: 0; }
.l-content .pager__item a,
.l-content .pager__item--current,
.l-content .pager li a,
.l-content .pager li.pager-current {
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  color: var(--text-light) !important;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-main);
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
}
.l-content .pager__item--current,
.l-content .pager li.pager-current,
.l-content .pager__item.is-active a {
  background: var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  color: #fff !important;
}

/* Tablas */
.l-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-main);
  margin: 16px 0;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  overflow: hidden;
}
.l-content table th,
.l-content table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  color: var(--text-light);
  font-family: var(--font-main);
}
.l-content table th {
  background: rgba(59,130,246,0.14);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.l-content table tr:hover td { background: rgba(255,255,255,0.03); }

/* Fondo negro pleno también en el contenedor principal de la página de registro */
body.route-user-register .l-main,
body.route-user-register .l-content,
body.route-email-registration-register .l-main,
body.route-email-registration-register .l-content,
body.route-email-registration-user-register-form .l-main,
body.route-email-registration-user-register-form .l-content,
body.route-user-login .l-main,
body.route-user-login .l-content,
body.route-user-pass .l-main,
body.route-user-pass .l-content {
  background: var(--bg-dark) !important;
}
/* Links inyectados (REGISTRARSE / ¿OLVIDÓ...?) en /user/login full page:
   reset del grid del header, layout vertical normal */
body:not(.path-frontpage) .region-content .user-login-form {
  display: block !important;
}
body:not(.path-frontpage) .region-content .user-login-form .suan-login-link-wrap {
  text-align: right;
  max-width: 450px;
  margin: 0px auto;
  margin-bottom: 20px;
}
body:not(.path-frontpage) .region-content .user-login-form .suan-login-link {
  font: 700 12px var(--font-main) !important;
  color: var(--primary-blue) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
}
body:not(.path-frontpage) .region-content .user-login-form .suan-login-link:hover {
  text-decoration: underline;
}
body:not(.path-frontpage) .region-content .user-login-form .form-actions,
body:not(.path-frontpage) .region-content .user-register-form .form-actions,
body:not(.path-frontpage) .region-content .user-pass .form-actions,
body:not(.path-frontpage) .region-content .user-form .form-actions {
  margin-top: 22px;
  text-align: center;
  background: var(--bg-dark) !important;
  padding: 0 !important;
  position: relative;
  float: none !important;
  width: auto !important;
  justify-content: center;
}
/* Anula el legacy covisur ::before que dibuja un rectángulo blanco gigante (3000x115)
   detrás de los botones de los formularios de usuario. */
.l-content .user-register-form .form-actions::before,
.l-content .user-register-form .form-actions::after,
.l-content .user-form .form-actions::before,
.l-content .user-form .form-actions::after,
.l-content .user-login-form .form-actions::before,
.l-content .user-login-form .form-actions::after,
.l-content .user-login .form-actions::before,
.l-content .user-login .form-actions::after,
.l-content .user-pass .form-actions::before,
.l-content .user-pass .form-actions::after {
  content: none !important;
  background: transparent !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
body:not(.path-frontpage) .region-content .user-login-form .form-actions input[type="submit"],
body:not(.path-frontpage) .region-content .user-register-form .form-actions input[type="submit"],
body:not(.path-frontpage) .region-content .user-pass .form-actions input[type="submit"],
body:not(.path-frontpage) .region-content .user-form .form-actions input[type="submit"] {
  width: auto !important;
  min-width: 200px;
}

/* Webform */
.webform-submission-form {
  max-width: 760px;
}
.webform-submission-form .form-item {
  margin-bottom: 18px;
}
.webform-submission-form .form-actions input[type="submit"] {
  min-width: 200px;
}

/* Commerce: cart & checkout */
.cart-form,
.checkout-pane,
.commerce-checkout-flow,
.layout-checkout-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px;
  color: var(--text-light);
  margin-bottom: 22px;
}
.checkout-pane h3,
.checkout-pane > .pane-title,
.cart-form h2 {
  color: var(--primary-blue);
  margin-top: 0;
  font-family: var(--font-main);
}
.cart-form table,
.commerce-order-item-table {
  background: transparent;
}

/* Block titles inside content area (non-front) */
body:not(.path-frontpage) .region-content .block > h2,
body:not(.path-frontpage) .region-content .block > .block-title {
  color: var(--text-light);
  font-family: var(--font-main);
  font-size: 26px;
  margin: 0 0 18px;
}

/* Skip link / a11y */
.skip-link {
  background: var(--primary-blue);
  color: #fff;
}

/* Filtros de Drupal Claro que rompen el contraste sobre fondo oscuro */
body:not(.path-frontpage) .field--type-image img,
body:not(.path-frontpage) .field--name-field-image img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}

/* Node display (artículos, basic page, terms, policy, push_not) */
body:not(.path-frontpage) .node {
  background: transparent;
  padding: 0;
}
body:not(.path-frontpage) .node .field {
  margin-bottom: 18px;
}
body:not(.path-frontpage) .node .field--label {
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-family: var(--font-main);
}
body:not(.path-frontpage) .node .field--name-body p,
body:not(.path-frontpage) .node .field--name-body li {
  color: var(--text-light);
  font-family: var(--font-main);
  font-size: 17px;
  line-height: 1.7;
}
body:not(.path-frontpage) .node--view-mode-teaser {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 18px;
}
body:not(.path-frontpage) .node--view-mode-teaser h2 a {
  color: var(--text-light);
  text-decoration: none;
}
body:not(.path-frontpage) .node--view-mode-teaser h2 a:hover {
  color: var(--primary-blue);
}

/* Páginas de usuario (/user/{id}) */
body.page-user .l-content,
body[class*="page-user"] .l-content {
  max-width: 760px;
  margin: 0 auto;
}
.profile {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px;
}
.profile h2,
.profile h3 {
  color: var(--primary-blue);
  font-family: var(--font-main);
}
.user-form .form-item__description {
  color: var(--text-muted);
}
/* "Editar cuenta" button override (suan_preprocess_user inserta este wrapper) */
.button-edit-profile {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
  text-align: center;
}
.button-edit-profile a.button {
  display: inline-block;
}

/* Listados de Views fuera del front */
body:not(.path-frontpage) .views-row {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 18px 0;
}
body:not(.path-frontpage) .views-row:last-child { border-bottom: none; }
body:not(.path-frontpage) .view-empty,
body:not(.path-frontpage) .view-empty p {
  color: var(--text-muted);
  font-style: italic;
}

/* Filtros expuestos de Views */
.l-content .views-exposed-form {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.l-content .views-exposed-form .form-item {
  margin: 0 !important;
  flex: 1 1 200px;
  min-width: 180px;
}

/* Webform */
.webform-submission-form {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 30px;
}
.webform-submission-form h3,
.webform-submission-form .webform-section-title {
  color: var(--primary-blue);
  font-family: var(--font-main);
}

/* Drupal Commerce: tabla de productos en carrito */
.cart-form table {
  background: transparent;
}
.cart-form .commerce_order_item__title a {
  color: var(--text-light);
  font-weight: 600;
}
.cart-form .commerce_order_item__title a:hover { color: var(--primary-blue); }
.cart-form .commerce_order_item__remove_button input[type="submit"] {
  background: transparent !important;
  color: #ef4444 !important;
  border: 1px solid #ef4444 !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
}

/* Producto: vista de un producto */
.product--full {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 28px;
}
.product--full h2 {
  color: var(--text-light);
}
.product--full .product-variation__price,
.field--name-price,
.commerce-order-total-summary__total-amount {
  color: var(--primary-blue);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 22px;
}

.l-header .l-header-menu #block-suan-site-branding a img{
  width: 100px;
  filter: brightness(0) invert(1);
}
.l-branding {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100% !important;
  float: none !important;
}
.l-branding .site-logo img {
  height: 50px !important;
  width: auto !important;
  object-fit: contain;
}


/* Footer siempre dark */
.l-footer { background-color: #000; color: #fff; }

/* ==== TOP BAR ==== */
.l-top-bar {
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
  padding: 10px 15px;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
}
.l-top-bar p { margin: 0; }

/* ==== HEADER MAIN ==== */
.l-header {
  background: transparent !important;
}
.l-header::before {
  display: none !important; /* overrides el viejo gradiente */
}

.l-header-main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Branding (Logo and region-branding) */
.l-branding {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100% !important;
  float: none !important;
}
.l-branding .site-logo {
  margin: 0 !important;
  float: none !important;
}
.l-branding .site-logo img {
  height: 50px !important;
  width: auto !important;
  object-fit: contain;
}
.l-header .region-header #block-main-banner-block .slick--view--main-banner--block-1 .slick-list .slick__slide .views-field-body{
  right: 0;
  left: 0;
  top: 79%;
}
.l-header .region-header #block-main-banner-block .slick--view--main-banner--block-1 .slick-list .slick__slide .views-field-body .field-content{
  display: flex;
  justify-content: center;
}
.l-header .region-header #block-main-banner-block .slick--view--main-banner--block-1 .slick-list .slick__slide .views-field-body .field-content p{
  background-color: #FFF;
  color: var(--primary-blue);
  font-family: var(--font-main);
  text-transform: uppercase;
  font-size: 22px;
  padding: 15px 35px;
  border-radius: 50px;
}

/* El área derecha (Login que el usuario puso en Branding) */
.region-branding {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ==== LOGIN FORM (header pill) ====
   Layout grid 3 columnas × 2 filas:
   ┌──────────────┬──────────────┬───────────────┐
   │ CORREO pill  │ CONTRASEÑA   │ INICIAR SESIÓN│
   ├──────────────┼──────────────┴───────────────┤
   │ REGISTRARSE  │ ¿OLVIDÓ SU CONTRASEÑA?       │
   └──────────────┴──────────────────────────────┘
   El texto CORREO/CONTRASEÑA va como placeholder DENTRO del input. */
.user-login-form {
  display: grid !important;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 24px;
  row-gap: 8px;
  margin: 0;
}
.user-login-form .form-item {
  margin: 0;
  float: none !important;
  width: auto !important;
}
.user-login-form .form-item-name      { grid-column: 1; grid-row: 1; }
.user-login-form .suan-link-register-wrap { grid-column: 1; grid-row: 2; }
.user-login-form .form-item-pass      { grid-column: 2; grid-row: 1; }
.user-login-form .suan-link-forgot-wrap   { grid-column: 2; grid-row: 2; }
.user-login-form .form-actions        { grid-column: 3; grid-row: 1; align-self: stretch; }

/* Label: oculto visualmente pero accesible para screen readers */
.user-login-form label,
.user-login-form .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.user-login-form .form-item__description,
.user-login-form .description {
  display: none !important;
}

.user-login-form input::placeholder {
  color: rgba(255,255,255,0.85) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  opacity: 1;
}
.user-login-form input:focus {
  box-shadow: 0 0 0 2px rgba(59,130,246,0.25);
}

/* Links REGISTRARSE / ¿OLVIDÓ SU CONTRASEÑA? — debajo de cada input */
.user-login-form .suan-login-link-wrap {
  margin: 0;
  padding: 0 6px;
  text-align: left;
}
.user-login-form .suan-login-link {
  font: 700 11px var(--font-main) !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none !important;
  border: none !important;
  display: inline-block;
  padding: 0;
}
.user-login-form .suan-login-link:hover {
  color: var(--primary-blue) !important;
  text-decoration: none;
}

/* Botón INICIAR SESIÓN: rectangular azul sólido, alineado con la fila de inputs */
.user-login-form .form-actions {
  margin: 0;
  align-self: start;
}
.user-login-form .form-actions input[type="submit"] {
  background: var(--primary-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 26px !important;
  font: 700 13px var(--font-main) !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
.user-login-form .form-actions input[type="submit"]:hover {
  background: var(--primary-blue-hover) !important;
}

/* Item-list nativo (register/forgot) ocultado por preprocess; CSS de respaldo */
.user-login-form + .item-list,
.user-login-form ~ .item-list,
.region-branding .user-login-form ~ ul,
.region-branding .user-login-form + ul {
  display: none !important;
}


/* ==== FIX FOR HEADER ==== */
.l-header {
  background: transparent !important;
}
.l-header::before {
  display: none !important;
}

.l-branding {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
}

.l-header-menu {
  width: 100%;
}
.l-header-menu .region-navigation {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-header-menu nav {
  display: flex !important;
  justify-content: center !important; /* Centered menu */
  width: 100%;
}
.l-header-menu ul.menu {
 
}
.l-header-menu .block-superfish{
  width: auto;
}
.l-header-menu ul.menu li {
  
}
.l-header-menu ul.menu li::before {
 
}
.l-header-menu ul.menu li a {
  color:#FFF;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.6px;
  padding: 6px 0;
  border: none ;
  background: transparent ;
  transition: color 0.3s ease;
  display: inline-block;
  padding: 0 30px;
}
.l-header-menu ul.menu li a:hover{
  color: var(--primary-blue);
}

/* =========================================================================
   ZONA LOGGED-IN — Top-right del header
   Tres bloques alineados en la misma fila (flex row, gap, align-center):
     [#block-superfish-2]  [#block-suan-cart]  [#block-block-1]
   - block-superfish-2 = menú horizontal post-login
       (Servicios pagos · Términos y condiciones · Mi cuenta ▾)
   - block-suan-cart   = carrito Commerce (Cesta de la compra X elementos)
   - block-block-1     = contacto (soporteapp@... · 6491013)
   ========================================================================= */

/* Region-branding alinea los bloques en fila — nowrap para evitar
   que el cart caiga a una segunda línea bajo MI CUENTA.
   justify-content: center centra horizontalmente la fila post-login. */
.l-branding .region-branding,
.l-header-main > .region-branding {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end;
  gap: 28px;
}

/* ---- Menú post-login horizontal (#block-superfish-2) ----
   Forzado inline en cualquier región. */
#block-superfish-2 {
  display: inline-block !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  float: none !important;
  vertical-align: middle;
  position: relative;
  z-index: 9999;
}
#block-superfish-2 ul,
#block-superfish-2 ul.menu,
#block-superfish-2 ul.sf-menu {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 22px;
}
#block-superfish-2 > ul > li {
  background: transparent !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative;
  display: inline-block !important;
  float: none !important;
}
#block-superfish-2 > ul > li::before { display: none !important; content: none !important; }
/* Items top-level normales (Servicios pagos, Términos y condiciones) → texto azul */
#block-superfish-2 > ul > li > a,
#block-superfish-2 > ul > li > .sf-depth-1 {
  font: 600 14px var(--font-main) !important;
  color: var(--primary-blue) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  display: inline-block !important;
  margin: 0 !important;
  transition: color 0.25s ease;
}
#block-superfish-2 > ul > li:hover > a,
#block-superfish-2 > ul > li:hover > .sf-depth-1,
#block-superfish-2 > ul > li.active-trail > a {
  background: transparent !important;
  color: var(--primary-blue-hover) !important;
}

/* Solo "Mi cuenta" (item con submenu = .menuparent o nth-child variable)
   se muestra como PILL con borde azul */
#block-superfish-2 > ul > li.menuparent > a,
#block-superfish-2 > ul > li.menuparent > .sf-depth-1,
#block-superfish-2 > ul > li:has(> ul) > a,
#block-superfish-2 > ul > li:has(> ul) > .sf-depth-1 {
  background: transparent !important;
  border: 1px solid var(--primary-blue) !important;
  border-radius: 24px !important;
  padding: 8px 22px !important;
  color: var(--primary-blue) !important;
}
#block-superfish-2 > ul > li.menuparent:hover > a,
#block-superfish-2 > ul > li.menuparent.sfHover > a,
#block-superfish-2 > ul > li:has(> ul):hover > a {
  background: var(--primary-blue) !important;
  color: #ffffff !important;
}

#block-superfish-2 > ul > li > .sf-depth-1 .sf-sub-indicator {
  display: inline-block !important;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  background: transparent !important;
  vertical-align: middle;
  text-indent: -9999px;
  overflow: hidden;
}
/* Submenu de "Mi cuenta": dropdown dark */
#block-superfish-2 > ul > li > ul {
  background: #1a1a1a !important;
  border: 1px solid rgba(59,130,246,0.3) !important;
  border-radius: 10px !important;
  padding: 8px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important;
  top: 36px !important;
  right: 0 !important;
  left: auto !important;
  min-width: 240px !important;
  list-style: none !important;
  display: none;
  flex-direction: column !important;
  gap: 0 !important;
}
#block-superfish-2 > ul > li.sfHover > ul,
#block-superfish-2 > ul > li:hover > ul {
  display: flex !important;
}
#block-superfish-2 > ul > li > ul li {
  background: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: block !important;
  float: none !important;
}
#block-superfish-2 > ul > li > ul li a {
  font: 500 14px var(--font-main) !important;
  color: var(--text-light) !important;
  padding: 10px 14px 10px 42px !important;
  background-position: 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 20px auto !important;
  display: block !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 6px !important;
  text-transform: none !important;
  text-decoration: none !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
#block-superfish-2 > ul > li > ul li:last-child a { border-bottom: none !important; }
#block-superfish-2 > ul > li > ul li a:hover,
#block-superfish-2 > ul > li > ul li.active-trail a {
  background-color: rgba(59,130,246,0.12) !important;
  color: var(--primary-blue) !important;
}

/* ---- Carrito (#block-suan-cart, .cart--cart-block o variantes) ----
   Forzado a inline-flex con width:auto en cualquier región para evitar
   que estire al 100% del padre cuando está en regiones como page.content. */
#block-suan-cart,
.cart--cart-block,
.block.cart--cart-block,
#block-cart,
[id^="block-cart"] {
  display: inline-flex !important;
  align-items: center;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  font-family: var(--font-main);
  float: none !important;
  width: auto !important;
  max-width: max-content !important;
  position: relative;
  z-index: 1;
}

/* Cart como bloque hermano de #block-superfish-2 (JS no movió o se quedó así):
   también lo hacemos compacto para que region-branding lo mantenga en la fila. */
.region-branding > #block-suan-cart,
.l-header > #block-suan-cart,
[id^="region-"] > #block-suan-cart {
  align-self: center !important;
  flex: 0 0 auto !important;
}

/* Cart reubicado por JS dentro del UL de #block-superfish-2 como <li.suan-cart-li>
   — queda como un item más de la fila flex, a la derecha de MI CUENTA. */
#block-superfish-2 > ul > li.suan-cart-li,
#block-superfish-2 ul.sf-menu > li.suan-cart-li,
#block-superfish-2 ul.menu > li.suan-cart-li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
#block-superfish-2 > ul > li.suan-cart-li::before,
#block-superfish-2 ul.sf-menu > li.suan-cart-li::before,
#block-superfish-2 > ul > li.suan-cart-li::after,
#block-superfish-2 ul.sf-menu > li.suan-cart-li::after {
  display: none !important;
  content: none !important;
}
/* El cart como hijo del <li.suan-cart-li> no debe heredar reglas
   de los anchors del menú; reset compacto. */
.suan-cart-relocated,
li.suan-cart-li #block-suan-cart {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}
li.suan-cart-li #block-suan-cart a {
  margin: 0 !important;
}
/* Carrito = fondo azul sólido, UN solo icono blanco, texto blanco. */
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .views-form .view-content-wrap .item .views-field-edit-quantity{
    width: auto;
    margin: 0;
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .views-form .view-content-wrap .item .views-field-remove-button{
    margin: 0;
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .views-form .view-content-wrap .item .views-field-remove-button input{
     margin: 0 !important;
}
#block-suan-cart .cart--cart-block .cart-block--summary{
    border-radius: 50px;
      background: var(--primary-blue)
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner{
    background-color: #1a1a1a;
    color: #FFF;
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .view-header .title{
    font: 700 25px var(--font-main) !important;
    margin-bottom: 0;
    color: var(--primary-blue);
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .views-form .view-content-wrap .item .views-field-title{
     color: var(--primary-blue);
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .views-form .form-actions{
    margin-left: 20px;
    float: left;
    width: 100%;
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .view-footer{
    margin:0 20px;
}
#block-suan-cart .cart--cart-block .cart-block--contents .cart-block--contents__inner .view-footer a{
    width: auto;
    padding: 0 10px;
    float: none;
    margin: 30px 0 !important;
}
#block-suan-cart a,
.cart--cart-block a,
#block-cart a,
[id^="block-cart"] a {
  background: var(--primary-blue) !important;
  color: #ffffff !important;
  font: 600 13px var(--font-main) !important;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border: none !important;
  border-radius: 6px !important;
  min-height: 36px !important;
  transition: background 0.25s ease;
  white-space: nowrap;
  line-height: 1.2;
   border-radius: 50px !important;
}
#block-suan-cart a:hover,
.cart--cart-block a:hover,
#block-cart a:hover,
[id^="block-cart"] a:hover {
  background: var(--primary-blue-hover) !important;
  color: #ffffff !important;
}

/* Si hay más de un icono renderizado (Commerce a veces pone 2),
   ocultamos cualquier icono extra y dejamos solo el primero */
#block-suan-cart a > img:not(:first-of-type),
.cart--cart-block a > img:not(:first-of-type),
#block-suan-cart a > svg:not(:first-of-type),
.cart--cart-block a > svg:not(:first-of-type),
#block-suan-cart a > i:not(:first-of-type),
.cart--cart-block a > i:not(:first-of-type),
#block-suan-cart a .cart-block--summary__icon ~ .cart-block--summary__icon,
.cart--cart-block a .cart-block--summary__icon ~ .cart-block--summary__icon {
  display: none !important;
}

/* Icono nativo de Drupal Commerce / SVG / IMG: blanco y compacto */
#block-suan-cart .cart-block--summary__icon,
.cart--cart-block .cart-block--summary__icon,
#block-cart .cart-block--summary__icon,
[id^="block-cart"] .cart-block--summary__icon,
#block-suan-cart svg,
.cart--cart-block svg,
#block-cart svg,
[id^="block-cart"] svg,
#block-suan-cart a > img,
.cart--cart-block a > img {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  margin: 0 !important;
}

#block-suan-cart .cart-block--summary__count,
.cart--cart-block .cart-block--summary__count,
#block-cart .cart-block--summary__count,
[id^="block-cart"] .cart-block--summary__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  font-weight: 700;
  font-size: 11px;
  margin-left: 2px;
  line-height: 1.4;
}

/* ---- Contacto (#block-block-1) ---- */
#block-block-1 {
  display: inline-block !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right;
  vertical-align: middle;
  float: none !important;
  width: auto !important;
  max-width: max-content !important;
}
.region-branding #block-block-1 ul,
.l-header #block-block-1 ul {
  display: flex;
  flex-direction: row;
  gap: 18px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.region-branding #block-block-1 ul li,
.l-header #block-block-1 ul li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--primary-blue) !important;
  font: 500 14px var(--font-main) !important;
  letter-spacing: 0.2px;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Icono circular azul con SVG (correo / teléfono) */
.region-branding #block-block-1 ul li::before,
.l-header #block-block-1 ul li::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--primary-blue);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.region-branding #block-block-1 ul li:nth-child(1)::before,
.l-header #block-block-1 ul li:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.region-branding #block-block-1 ul li:nth-child(2)::before,
.l-header #block-block-1 ul li:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}
.region-branding #block-block-1 ul li a,
.l-header #block-block-1 ul li a {
  color: var(--primary-blue) !important;
  font: inherit !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.region-branding #block-block-1 ul li a:hover,
.l-header #block-block-1 ul li a:hover { color: var(--primary-blue-hover) !important; }

/* ==== HEADER LAYOUT ====
   Anonymous (.user-logged-out):
     Fila 1: login pill (derecha)
     Fila 2: logo (izq) + menú (centro)
   Logged-in (.user-logged-in):
     Fila 1: logo (izq) + #block-superfish-2 menú extra + cart + contacto (derecha)
     Fila 2: menú principal blanco (centro)
   Uso display:contents en .l-branding para que sus hijos pasen a ser flex
   children directos de .l-header-main. */
.l-header-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  row-gap: 18px;
  column-gap: 30px;
}
.l-branding {
  display: contents !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.l-branding .site-logo { flex: 0 0 auto; margin: 0 !important; }
.l-branding .region-branding,
.l-header-main > .region-branding {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}


/* Layout único (anónimo y logged-in): post-login items en row 1 (centrado),
   logo + menú principal en row 2 (mismo renglón). */
.l-branding .site-logo { order: 2; }
.l-header-menu { order: 3; }
.l-branding .region-branding,
.l-header .l-branding .region-branding{
  width: 100%;
  margin-bottom: 20px;
  margin-right: 70px;
}

/* Responsive */
@media (max-width: 900px) {
  .l-header-main {
    flex-direction: column !important;
    gap: 14px;
  }
  .l-branding .region-branding {
    flex: 0 0 auto !important;
    width: 100%;
    justify-content: center;
  }
  .l-header-menu {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .l-branding .region-branding { order: 1; }
  .l-branding .site-logo { order: 2; }
  .l-header-menu { order: 3; }
}

/* ==== FIX LEGACY FLOAT LAYOUT ==== */
.l-header, .l-main, .l-footer {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 40px;
}
img {
  max-width: 100%;
  height: auto;
}

/* ==== CAROUSEL / BANNER MAIN ==== */
.l-user-banner {
  width: 100%;
  overflow: hidden;
}
.l-user-banner .region-header {
  display: flex !important;
  flex-direction: column;
  width: 100%;
}
.l-user-banner .region-header #block-main-banner-block {
  width: 100%;
}
.l-user-banner .region-header #block-main-banner-block .slick__slide img,
.l-user-banner .region-header #block-main-banner-block .views-field-field-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.l-header .region-header {
  width: 100% !important;
  float: none !important;
  margin-top: 0;
}

/* block-block-2 is hidden in its original location; JS moves it and shows it */
#block-block-2 {
  display: none;
}
.l-main .region-sidebar-first {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  float: none !important;
}

.l-main {
  width: 100%;
}
.l-content {
  padding: 0;
  max-width: 1200px;
}
.path-product .l-content {
  padding: 0;
  max-width: 800px;
}
.path-items-pedido .l-content {
  padding: 0;
  max-width: 800px;
}
.path-product .l-content article .field--name-body{
    color: #FFF;
}
.view-categories .view-header{
    color: #FFF;
}
.path-categorias .l-content{
    max-width: 880px;
}
.view-commerce-products .view-content .views-view-grid .views-row .views-col .views-field-title{
    text-align: center;
}
.view-commerce-products .view-content .views-view-grid .views-row .views-col .views-field-body{
    color: #9aa0ad;
    text-align: center;
}
.view-commerce-products .view-content .views-view-grid .views-row .views-col .views-field-price__number{
    text-align: center;
    color: var(--primary-blue);  
}
.view-order-items .view-content .views-row{
    background: #1A1A1A;
}
.view-free-services .views-row .right .views-field-title{
    color: var(--primary-blue);
}
.view-free-services .views-row .right .views-field-nothing a{
  color: var(--primary-blue);  
}
.view-free-services .views-row .right .views-field-body{
    color: #FFF;
}
.view-my-service-orders .view-content .views-view-grid .views-row .views-col{
    background: #1A1A1A;
}
/* ==== HERO INTRO (bloque Drupal real) ====
   IDs cubiertos: #block-suan-herointrohome (placement actual)
                  #block-suan-suanantecedentes (alternativo)
   El bloque se coloca desde /admin/structure/block en cualquier región.
   Estos estilos lo presentan como hero del PDF: dark, centrado, h2 grande. */
#block-suan-herointrohome,
#block-suan-suanantecedentes {
  width: 100%;
  background-color: var(--bg-dark);
  padding: 50px 0;
  text-align: center;
}
#block-suan-herointrohome > h2,
#block-suan-herointrohome .block-title,
#block-suan-suanantecedentes > h2,
#block-suan-suanantecedentes .block-title {
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 32px;
  letter-spacing: 0.2px;
  background: transparent;
  padding: 0;
}
#block-suan-herointrohome .content,
#block-suan-herointrohome .field--name-body,
#block-suan-suanantecedentes .content,
#block-suan-suanantecedentes .field--name-body {
  margin: 0 auto;
  background: transparent;
  padding: 0;
}
#block-suan-herointrohome .field--name-body p,
#block-suan-suanantecedentes .field--name-body p {
  color: #e6e6e6;
  font-family: var(--font-main);
  font-size: 21px;
  line-height: 1.7;
  margin: 0 0 22px;
}
#block-suan-herointrohome .field--name-body p:last-child,
#block-suan-suanantecedentes .field--name-body p:last-child { margin-bottom: 0; }
#block-suan-herointrohome .field--name-body strong,
#block-suan-suanantecedentes .field--name-body strong { color: #ffffff; font-weight: 700; }

/* La clase .is-hidden-by-route la agrega suan_preprocess_block() en suan.theme. */
.is-hidden-by-route {
  display: none !important;
}
/* herointrohome: oculto SIEMPRE (anónimo y logueado, en todas las rutas). */
#block-suan-herointrohome {
  display: none !important;
}
/* Fallback por body class para suanantecedentes en rutas user/* */
.route-user-register #block-suan-suanantecedentes,
.route-user-pass #block-suan-suanantecedentes,
.route-user-login #block-suan-suanantecedentes,
.route-entity-user-pass-reset #block-suan-suanantecedentes,
.route-email-registration-register #block-suan-suanantecedentes,
.route-email-registration-user-register-form #block-suan-suanantecedentes {
  display: none !important;
}

/* Responsive */
@media (max-width: 900px) {
  #block-suan-herointrohome,
  #block-suan-suanantecedentes { padding: 50px 16px 30px; }
  #block-suan-herointrohome > h2,
  #block-suan-suanantecedentes > h2 { font-size: 36px; margin-bottom: 24px; }
  #block-suan-herointrohome .field--name-body p,
  #block-suan-suanantecedentes .field--name-body p { font-size: 18px; }
}
@media (max-width: 480px) {
  #block-suan-herointrohome,
  #block-suan-suanantecedentes { padding: 35px 14px 20px; }
  #block-suan-herointrohome > h2,
  #block-suan-suanantecedentes > h2 { font-size: 28px; margin-bottom: 20px; }
  #block-suan-herointrohome .field--name-body p,
  #block-suan-suanantecedentes .field--name-body p { font-size: 16px; line-height: 1.6; }
}

/* ==== FASE 3: NUESTROS SERVICIOS DISEÑADOS PARA ==== */
.suan-services-designed-for {
  width: 100%;
  background-image: url(../images/Fondo_Suan.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  background-attachment: fixed;
}
.suan-services-designed-for::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 0;
}
.suan-services-container {
  position: relative;
  z-index: 1;
}
.suan-services-container {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;

}
.services-left {
  flex: 1 1 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px 0;
}

/* ==== BLOCK-BLOCK-2 CONTENT STYLES (managed from Drupal) ==== */
#suan-block2-content #block-block-2 {
  display: block !important;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
#suan-block2-content #block-block-2 h2 {
  color: var(--primary-blue);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 50px;
  text-align: center;
  font-family: var(--font-main);
  letter-spacing: 0.2px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
#suan-block2-content #block-block-2 .field--name-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
#suan-block2-content #block-block-2 .field--name-body p {
  color: #ffffff;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  max-width: 460px;
  text-align: center;
  font-family: var(--font-main);
}
#suan-block2-content #block-block-2 .field--name-body strong {
  font-weight: 400;
  color: #ffffff;
}

.services-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  text-align: center;
}
.services-list p {
  color: #ffffff;
  font-size: 20px;
  line-height: 1.55;
  margin: 0;
  max-width: 480px;
  text-align: center;
  font-family: var(--font-main);
}
.services-list strong {
  font-weight: 700;
}

.services-right {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.suan-giant-logo-box {
  background-color: var(--primary-blue);
  border-radius: 90px;
  padding: 70px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(59, 130, 246, 0.3);
  max-width: 410px;
  height: 410px;
  width: 100%;
  box-sizing: border-box;
}
.giant-suan {
  color: #ffffff;
  font-size: 110px;
  font-weight: 800;
  letter-spacing: 16px;
  margin-left: 16px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.giant-antecedentes {
  color: #ffffff;
  font-size: 34px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* ==== FASE 4: COMO FUNCIONA (TIMELINE) ==== */
.suan-how-it-works {
  width: 100%;
  padding: 80px 40px;
  background-color: var(--bg-dark);
}
.timeline-main-title {
  text-align: center;
  color: #ffffff;
  font-size: 52px;
  font-weight: 700;
  margin-bottom: 90px;
  font-family: var(--font-main);
  letter-spacing: 1px;
}
.timeline-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
/* The central vertical blue line - now dynamically segmented per step */
.timeline-step::before {
  content: '';
  position: absolute;
  top: 80px; /* start at center of current circle */
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  /* height = 100% of this step + the 80px gap to the next step */
  height: calc(100% + 80px);
  background-color: var(--primary-blue);
  z-index: 1;
}
/* The last step does not draw a line downwards! */
.timeline-step.last-step::before {
  display: none;
}

.timeline-step {
  display: flex;
  width: 100%;
  margin-bottom: 80px;
  position: relative;
  box-sizing: border-box;
}
.timeline-step.last-step {
  margin-bottom: 0;
}

.timeline-graphic {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}
/* The connecting dashed line for the Left side graphic */
.step-left-icon .timeline-graphic::before {
  content: '';
  position: absolute;
  top: 80px; /* half of the circle */
  left: 50%; /* start from center of circle */
  width: 50%; /* go exactly to the right edge */
  border-top: 2px dashed var(--primary-blue);
  z-index: 0;
}
/* The connecting dashed line for the Right side graphic */
.step-right-icon .timeline-graphic::before {
  content: '';
  position: absolute;
  top: 80px; 
  right: 50%; /* start from center of circle */
  width: 50%; /* go exactly to the left edge */
  border-top: 2px dashed var(--primary-blue);
  z-index: 0;
}

/* Note: we put an explicit blue dot on the central line */
.timeline-step::after {
  content: '';
  position: absolute;
  top: 76px; /* 80px minus radius of dot */
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--primary-blue);
  border-radius: 50%;
  z-index: 2;
}

.timeline-circle {
  width: 160px;
  height: 160px;
  background-color: var(--primary-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
}
.timeline-circle svg {
  width: 70px;
  height: auto;
  max-height: 90px;
}

.timeline-icon-title {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-top: 28px;
  line-height: 1.1;
  font-family: var(--font-main);
  letter-spacing: 1.2px;
}

.timeline-content {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.timeline-content p {
  color: #c9c9c9;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  font-family: var(--font-main);
}
.step-left-icon {
  flex-direction: row;
}
.step-left-icon .timeline-content {
  text-align: right;
}
.step-right-icon {
  flex-direction: row;
}
.step-right-icon .timeline-content {
  text-align: left;
}



/* ==== FASE 3: PORTAFOLIO DE SERVICIOS (WE OFFER BLOCK) ==== */
/* Override old light blue background from region-sidebar-first */
.l-main .region-sidebar-first {
  background: none !important;
  background-color: transparent !important;
}

.l-main .region-sidebar-first #block-we-offer-block {
  background: transparent !important;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto !important;
  margin-top: 0 !important;
  text-align: center;
  padding: 40px 0 !important;
}

/* Title: "Servicios:" */
.l-main .region-sidebar-first #block-we-offer-block > h2 {
  color: #ffffff !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  margin-bottom: 56px !important;
  font-family: var(--font-main) !important;
  text-align: center;
  text-transform: none !important;
  letter-spacing: 0.3px;
}
.l-main .region-sidebar-first #block-we-offer-block h2:before{
    display: none;
}

/* Slick Carousel adjustments */
.l-main .region-sidebar-first #block-we-offer-block .slick-list {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important; /* Hide cutoff elements */
}
.l-main .region-sidebar-first #block-we-offer-block .slick__slide {
  padding: 0 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* ==== THE CSS LEAF SHAPES ==== */
.l-main .region-sidebar-first #block-we-offer-block .slide__media {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% 0 50% 0 !important; /* Leaf shape */
  margin: 0 auto 30px auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  background-size: cover;
  background-position: center;
  background-color: transparent !important;
  border: 3px solid var(--primary-blue) !important;
}


/* Typography for the fake text inside leaves */
.l-main .region-sidebar-first #block-we-offer-block .slide__media::after {
  font-size: 34px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: pre !important; /* Allows \A to break lines */
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  font-family: var(--font-main) !important;
  letter-spacing: 1.2px !important;
}

/*
.l-main .region-sidebar-first #block-we-offer-block .slick__slide[data-slick-index="0"] .slide__media {
  background-color: var(--primary-blue) !important;
}

.l-main .region-sidebar-first #block-we-offer-block .slick__slide[data-slick-index="1"] .slide__media {
  background-color: #ffffff !important;
}

.l-main .region-sidebar-first #block-we-offer-block .slick__slide[data-slick-index="2"] .slide__media {
  background-color: transparent !important;
  border: 3px solid var(--primary-blue) !important;
}

.l-main .region-sidebar-first #block-we-offer-block .slick__slide[data-slick-index="3"] .slide__media {
  background-color: var(--primary-blue) !important;
}
.l-main .region-sidebar-first #block-we-offer-block .slick__slide:nth-child(n+5) .slide__media {
  background-color: var(--primary-blue) !important;
}
 */ 
.l-main .region-sidebar-first #block-we-offer-block .slick--view--we-offer .slick-list .slick__slide .media--image img{
    border-radius: 0;
    border: none;
    background: none;
    max-width: 80%;
}
.l-main .region-sidebar-second #block-how-does-work-block h2{
    color: #FFF;
    font-size: 46px;
    font-weight: 700;
    font-family: var(--font-main);
    text-transform:none
}
.l-main .region-sidebar-second #block-how-does-work-block h2:before{
    display: none;
}
.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-field-fieldset .views-field-field-image:before{
    display: none;
}
.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row .views-field-field-image .field-content{
    background-color:var(--primary-blue);
    border-radius: 50%;
    width: 171px;
    height: 171px;
    margin: 0 auto;
}
.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row .views-field-field-image img{
    border: none !important;    
      filter: brightness(0) invert(1);
}

.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row .views-field-fieldset .views-field-field-image:after{
    content: '- - - - - - - -';
    width: 196px;
    right: -50px;
    font-size: 38px;
    line-height: 1;
    top: 80px;
    background: none;
    color: var(--primary-blue);
}
.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .odd .views-field-fieldset .views-field-field-image:after, .l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row-4 .views-field-fieldset .views-field-field-image:after{
    left: -54px;
}
.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work:before{
    background: var(--primary-blue);
}
.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-field-fieldset .views-field-title span, .l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row-3 .views-field-fieldset .views-field-title span, .l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row-5 .views-field-fieldset .views-field-title span{
    color: #FFF !important;
    font-family: var(--font-main) !important;
}
.l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work  .views-field-fieldset .views-field-body p, .l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row-3 .views-field-fieldset .views-field-body p, .l-main .region-sidebar-second #block-how-does-work-block .view-how-does-work .views-row-5 .views-field-fieldset .views-field-body p{
     color: #FFF !important;
     font-family: var(--font-main) !important;
     text-align: center;
}
/* The Title below the image (Drupal title) */
.l-main .region-sidebar-first #block-we-offer-block .views-field-title {
  margin-bottom: 20px !important;
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
.l-main .region-sidebar-first #block-we-offer-block .views-field-title .field-content {
  color: #ffffff !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-family: var(--font-main) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  letter-spacing: 0.5px;
}
.l-main .region-sidebar-first #block-we-offer-block .slick--view--we-offer .slick-list .slick__slide .slide__description{
    padding: 0;
}

/* The body text (List of checks) */
.l-main .region-sidebar-first #block-we-offer-block .views-field-body {
  text-align: center !important;
  color: #dddddd !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-family: var(--font-main) !important;
  width: 100% !important;
}
.l-main .region-sidebar-first #block-we-offer-block .views-field-body p,
.l-main .region-sidebar-first #block-we-offer-block .views-field-body li,
.l-main .region-sidebar-first #block-we-offer-block .views-field-body div {
  margin: 0 !important;
  padding: 3px 0 !important;
  list-style: none !important;
    font-family: var(--font-main) !important;
}
.l-main .region-sidebar-first #block-we-offer-block .slick--view--we-offer .slick-list .slick__slide .slide__description li{
    line-height: 1.1;
}
.l-main .wrapper .region-sidebar-third #block-block-7{
    height: auto;
}
.l-main .wrapper .region-sidebar-third #block-block-7 .field--name-body{
    background: url(../images/home/phone.png);
    background-repeat: no-repeat;
    height: 900px;
    color: transparent;
    position: relative;
}

.l-main .wrapper .region-sidebar-third #block-block-4 h2{
    font-family: var(--font-main);
    color:#FFF;
    margin: 100px 0;
    font-weight: 700;
}
.l-main .region-sidebar-first #block-we-offer-block .views-field-body ul {
  padding: 0 !important;
  margin: 0 !important;
}
.l-main .region-sidebar-first #block-we-offer-block .views-field-body li::before,
.l-main .region-sidebar-first #block-we-offer-block .views-field-body p::before {
  display: none !important;
}

/* Slick Arrows */
.l-main .region-sidebar-first #block-we-offer-block .slick__arrow {
  position: absolute !important;
  top: 100px !important; /* Middle of the 200px leaf */
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 !important;
  z-index: 20 !important;
  pointer-events: none !important;
}
.l-main .region-sidebar-first #block-we-offer-block .slick__arrow button {
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  color: transparent !important;
  font-size: 0 !important;
  width: 40px !important;
  height: 40px !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 -20px !important;
}
.l-main .region-sidebar-first #block-we-offer-block .slick__arrow button::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 12px !important;
  height: 12px !important;
  border-top: 2px solid #ffffff !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
}
.l-main .region-sidebar-first #block-we-offer-block .slick-prev::before {
  transform: translate(-30%, -50%) rotate(-135deg) !important;
}
.l-main .region-sidebar-first #block-we-offer-block .slick-next::before {
  transform: translate(-70%, -50%) rotate(45deg) !important;
}

/* ==== HIDE UNWANTED FRONT PAGE SECTIONS ====
   Excepción: el hero block (#block-suan-herointrohome / #block-suan-suanantecedentes)
   debe verse aunque esté placed en cualquiera de las sidebar regions. 
.l-main .region-sidebar-first > *:not(#block-we-offer-block):not(#block-suan-herointrohome):not(#block-suan-suanantecedentes) {
  display: none !important;
}
.l-main .region-sidebar-second,
.l-main .region-sidebar-third,
.l-main .region-sidebar-fifth {
  display: none !important;
}*/
/* Hero block: visible siempre (override del display:none de los sidebar-second/third/fifth) */
.l-main .region-sidebar-first #block-suan-herointrohome,
.l-main .region-sidebar-second #block-suan-herointrohome,
.l-main .region-sidebar-third #block-suan-herointrohome,
.l-main .region-sidebar-fifth #block-suan-herointrohome,
.l-main .region-sidebar-first #block-suan-suanantecedentes,
.l-main .region-sidebar-second #block-suan-suanantecedentes,
.l-main .region-sidebar-third #block-suan-suanantecedentes,
.l-main .region-sidebar-fifth #block-suan-suanantecedentes,
.region-sidebar-second:has(#block-suan-herointrohome),
.region-sidebar-third:has(#block-suan-herointrohome),
.region-sidebar-fifth:has(#block-suan-herointrohome),
.region-sidebar-second:has(#block-suan-suanantecedentes),
.region-sidebar-third:has(#block-suan-suanantecedentes),
.region-sidebar-fifth:has(#block-suan-suanantecedentes) {
  display: block !important;
}
/* Show sidebar_quarter for Paquetes Empresariales block 
.l-main .region-sidebar-quarter {
  width: 100%;
  float: none !important;
}
  */
.l-main .region-sidebar-second{
    background: none;
}
.l-main .region-sidebar-first #block-we-offer-block .slick-dots {
  display: none !important;
}

/* =========================================
   FASE 5: APP PROMO Y PAQUETES EMPRESARIALES
   ========================================= */

/* Promo de la App — bloque "Descarga la app" (block_4) */
.suan-app-download {
  width: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  padding: 80px 0;
}
.app-download-container {
  display: flex;
  max-width: 1100px;
  width: 100%;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
}
.app-download-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.app-download-left .block,
.app-download-left .block-block-content,
.app-download-left .field--name-body {
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0;
}
/* Title (h2) = texto blanco centrado, sin banner */
.app-download-left h2 {
  background: transparent;
  color: #fff;
  font-size: 52px;
  font-weight: 700;
  margin: 0 0 40px 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-main);
  letter-spacing: 0.5px;
  line-height: 1.15;
}
/* Párrafo con los íconos = fila centrada */
.app-download-left .field--name-body p {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.app-download-left .field--name-body a {
  display: inline-block;
  transition: transform 0.2s;
}
.app-download-left .field--name-body a:hover {
  transform: translateY(-2px);
}
.app-download-left .field--name-body img {
  display: block;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
}
.app-download-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-download-right img {
  max-width: 350px;
  width: 100%;
  height: auto;
}

/* ==== PAQUETES EMPRESARIALES (Drupal Block in sidebar_quarter) ==== */
.region-sidebar-quarter .block {
  width: 100%;
}

/* Block title = Blue banner */
.region-sidebar-quarter .block h2 {
  background-color: var(--primary-blue);
  color: #fff;
  font-size: 44px;
  font-weight: 700;
  margin: 0;
  padding: 36px 0;
  text-align: center;
  font-family: var(--font-main);
  width: 100%;
  letter-spacing: 0.3px;
  line-height: 1.15;
}

/* Block body = Dark content section */
.region-sidebar-quarter .block .field--name-body {
  width: 100%;
  background-color: #000;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.region-sidebar-quarter .block .field--name-body h3 {
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 28px;
  font-family: var(--font-main);
  color: #fff;
  text-align: center;
  max-width: 950px;
}
.region-sidebar-quarter .block .field--name-body p {
  font-size: 21px;
  color: #d1d1d1;
  line-height: 1.65;
  margin-bottom: 30px;
  font-family: var(--font-main);
  max-width: 850px;
  text-align: center;
}
.region-sidebar-quarter .block .field--name-body h4 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 28px;
  color: #d1d1d1;
  font-family: var(--font-main);
  text-align: center;
}

/* ==== FOOTER (estilo oscuro) ==== */
.l-footer {
  background-color: #000;
  color: #fff;
}
.copy {
  background: #000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  text-align: center;
  padding: 18px 0;
  color: #fff;
  font-family: var(--font-main);
}
.copy .sainet a {
  color: #fff;
  font-family: var(--font-main);
  font-size: 14px;
}
.copy .sainet a:hover {
  color: var(--primary-blue);
}
.copy .sainet a img {
  filter: brightness(0) invert(1);
  vertical-align: middle;
  margin-left: 6px;
}

/* =========================================
   RESPONSIVE DESIGN - COMPLETE
   ========================================= */

/* ==== TABLET (max-width: 900px) ==== */
@media (max-width: 900px) {
  /* -- Global overflow -- */
  body, html {
    overflow-x: hidden;
  }

  /* -- Header & Branding -- */
  .l-header-main {
    padding: 15px 20px;
  }
  .l-branding {
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px 20px;
    gap: 15px;
  }
  .region-branding {
    align-items: center;
    width: 100%;
  }

  /* -- Login Form -- */
  .user-login-form {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .user-login-form input[type="text"],
  .user-login-form input[type="password"] {
    width: 160px;
  }

  /* -- Navigation Menu -- */
  .l-header-menu {
    padding: 0 20px;
  }
  .l-header-menu ul.menu {
    flex-wrap: wrap !important;
    gap: 24px !important;
    justify-content: center !important;
  }
  .l-header-menu ul.menu li a {
    font-size: 12px;
  }

  /* -- Servicios Diseñados Para -- */
  .suan-services-designed-for {
    padding: 40px 20px;
  }
  .suan-services-container {
    flex-direction: column;
    gap: 40px;
  }
  #suan-block2-content #block-block-2 h2 {
    font-size: 26px;
    margin-bottom: 32px;
  }
  #suan-block2-content #block-block-2 .field--name-body p,
  .services-list p {
    font-size: 17px;
  }
  .services-right {
    justify-content: center;
    width: 100%;
  }
  .suan-giant-logo-box {
    padding: 50px 40px;
    max-width: 380px;
    margin: 0 auto;
    border-radius: 60px;
  }

  /* -- Timeline: Cómo funciona -- */
  .suan-how-it-works {
    padding: 50px 20px;
  }
  .timeline-main-title {
    font-size: 38px;
    margin-bottom: 56px;
  }
  .timeline-step::before {
    display: none;
  }
  .timeline-step::after {
    display: none;
  }
  .step-left-icon .timeline-graphic::before,
  .step-right-icon .timeline-graphic::before {
    display: none;
  }
  .timeline-step {
    flex-direction: column !important;
    align-items: center;
    gap: 30px;
    margin-bottom: 50px;
  }
  .timeline-graphic,
  .timeline-content {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
  }
  .timeline-content {
    text-align: center !important;
    padding: 0 15px;
  }
  .step-left-icon .timeline-content {
    text-align: center;
    order: 2;
  }
  .step-left-icon .timeline-graphic {
    order: 1;
  }
  .timeline-circle {
    width: 120px;
    height: 120px;
  }
  .timeline-circle svg {
    width: 50px;
  }
  .timeline-icon-title {
    font-size: 22px;
    margin-top: 15px;
  }

  /* -- Portafolio de Servicios (Slick) -- */
  .l-main .region-sidebar-first #block-we-offer-block {
    padding: 30px 15px !important;
    margin: 40px auto !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block > h2 {
    font-size: 40px !important;
    margin-bottom: 38px !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block .slide__media {
    width: 170px !important;
    height: 170px !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block .slide__media::after {
    font-size: 26px !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block .views-field-title .field-content {
    font-size: 22px !important;
  }

  /* -- App Download -- */
  .suan-app-download {
    padding: 50px 0;
  }
  .app-download-container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .app-download-left h2 {
    font-size: 38px;
    margin-bottom: 28px;
  }
  .app-download-right img {
    max-width: 280px;
  }

  /* -- Paquetes Empresariales (Drupal block) -- */
  .region-sidebar-quarter .block h2 {
    font-size: 30px;
    padding: 28px 20px;
  }
  .region-sidebar-quarter .block .field--name-body {
    padding: 40px 20px;
  }
  .region-sidebar-quarter .block .field--name-body h3 {
    font-size: 22px;
  }
  .region-sidebar-quarter .block .field--name-body p {
    font-size: 16px;
  }

  /* -- Footer -- */
  .l-footer {
    padding: 20px 15px;
  }
  .copy {
    text-align: center;
    font-size: 12px;
  }
  .copy img {
    max-height: 20px;
    width: auto;
  }
}

/* ==== SMALL TABLET / LARGE PHONE (max-width: 768px) ==== */
@media (max-width: 768px) {
  /* -- Header -- */
  .l-branding .site-logo img {
    height: 40px !important;
  }

  /* -- Login Form: stack vertically -- */
  .user-login-form {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .user-login-form input[type="text"],
  .user-login-form input[type="password"] {
    width: 100%;
    max-width: 250px;
  }
  .user-login-form .form-actions input[type="submit"] {
    width: 100%;
    max-width: 250px;
  }
  .user-login-form + .item-list ul {
    justify-content: center;
  }

  /* -- Navigation: smaller gap -- */
  .l-header-menu ul.menu {
    gap: 18px !important;
  }
  .l-header-menu ul.menu li a {
    font-size: 11px;
    letter-spacing: 0;
  }

  /* -- Services section -- */
  #suan-block2-content #block-block-2 h2 {
    font-size: 22px;
    margin-bottom: 26px;
  }
  #suan-block2-content #block-block-2 .field--name-body p,
  .services-list p {
    font-size: 15px;
  }
  .suan-giant-logo-box {
    padding: 40px 30px;
    border-radius: 50px;
    max-width: 320px;
  }

  /* -- Timeline -- */
  .timeline-main-title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  .timeline-content p {
    font-size: 13px;
  }

  /* -- App promo -- */
  .app-left h2 {
    font-size: 22px;
  }
  .store-badge {
    padding: 8px 12px;
  }
  .store-text .big {
    font-size: 14px;
  }
  .app-right img {
    max-width: 240px;
  }

  /* -- Paquetes Empresariales (Drupal block) -- */
  .region-sidebar-quarter .block .field--name-body h3 {
    font-size: 18px;
  }
}

/* ==== MOBILE (max-width: 480px) ==== */
@media (max-width: 480px) {
  /* -- Header -- */
  .l-header-main {
    padding: 10px 15px;
  }
  .l-branding {
    padding: 10px 15px;
  }
  .l-branding .site-logo img {
    height: 35px !important;
  }

  /* -- Navigation: vertical stack on very small screens -- */
  .l-header-menu {
    padding: 0 10px;
  }
  .l-header-menu ul.menu {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .l-header-menu ul.menu li a {
    font-size: 12px;
    padding: 8px 0 !important;
  }

  /* -- Login -- */
  .user-login-form input[type="text"],
  .user-login-form input[type="password"] {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .user-login-form .form-actions input[type="submit"] {
    max-width: 100%;
    width: 100%;
  }

  /* -- Services section -- */
  .suan-services-designed-for {
    padding: 30px 15px;
  }
  .suan-services-container {
    gap: 30px;
  }
  #suan-block2-content #block-block-2 h2 {
    font-size: 22px;
    margin-bottom: 22px;
  }
  .services-list {
    gap: 22px;
  }
  #suan-block2-content #block-block-2 .field--name-body p,
  .services-list p {
    font-size: 15px;
  }
  .suan-giant-logo-box {
    padding: 24px 22px;
    border-radius: 36px;
    max-width: 280px;
  }

  /* -- Timeline -- */
  .suan-how-it-works {
    padding: 30px 15px;
  }
  .timeline-main-title {
    font-size: 22px;
    margin-bottom: 30px;
  }
  .timeline-step {
    margin-bottom: 30px;
    gap: 20px;
  }
  .timeline-circle {
    width: 100px;
    height: 100px;
  }
  .timeline-circle svg {
    width: 40px;
  }
  .timeline-icon-title {
    font-size: 16px;
    margin-top: 10px;
  }
  .timeline-content p {
    font-size: 12px;
  }

  /* -- Slick / Portafolio -- */
  .l-main .region-sidebar-first #block-we-offer-block > h2 {
    font-size: 24px !important;
    margin-bottom: 25px !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block .slide__media {
    width: 130px !important;
    height: 130px !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block .slide__media::after {
    font-size: 16px !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block .views-field-title .field-content {
    font-size: 15px !important;
    max-width: 180px !important;
  }
  .l-main .region-sidebar-first #block-we-offer-block .views-field-body {
    font-size: 12px !important;
  }

  /* -- App Download -- */
  .suan-app-download {
    padding: 30px 0;
  }
  .app-download-container {
    gap: 30px;
  }
  .app-download-left h2 {
    font-size: 22px;
    margin-bottom: 18px;
  }
  .app-download-left .field--name-body p {
    flex-direction: column;
    gap: 14px;
  }
  .app-download-right img {
    max-width: 200px;
  }

  /* -- Paquetes Empresariales (Drupal block) -- */
  .region-sidebar-quarter .block h2 {
    padding: 20px 15px;
    font-size: 18px;
  }
  .region-sidebar-quarter .block .field--name-body {
    padding: 30px 15px;
  }
  .region-sidebar-quarter .block .field--name-body h3 {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .region-sidebar-quarter .block .field--name-body p {
    font-size: 13px;
    margin-bottom: 20px;
  }
  .region-sidebar-quarter .block .field--name-body h4 {
    font-size: 15px;
    margin-bottom: 15px;
  }

  /* -- Footer -- */
  .l-footer {
    padding: 15px 10px;
  }
  .copy {
    font-size: 11px;
  }
  .copy img {
    max-height: 16px;
  }
}
#block-suan-whatsapp {
  position: fixed;
  bottom: 45px;
  right: 20px;
  z-index: 11;
  width: 70px;
  height: 70px;
  transition: transform 0.5s ease;
}

#block-suan-content .user-login-form #edit-user-links a{
  color: var(--primary-blue)
}
.l-content .user-register-form, .l-content .user-form{
  max-width: 450px;
}
.simple-status-messages{
  top: 40px;
  width: 80%;
  z-index: 99999999999999;
}
.view-credit-card .dropbutton-wrapper{
  display: block;
}
.view-credit-card .dropbutton-wrapper .dropbutton-widget{
  background-color: transparent;
}
.view-credit-card .dropbutton-wrapper .dropbutton-widget ul li{
  list-style: none;
}
.view-credit-card .dropbutton-wrapper .dropbutton-widget ul li a{
  background-color: #7B7B7B !important;
}
#block-suan-cart .cart--cart-block .cart-block--contents{
  top: 28px;
}
.layout-checkout-form,
.checkout-pane{
  border: none;
}
.commerce-checkout-flow{
  max-width: 900px;
  margin: 0 auto;
  border: none;
}
.commerce-checkout-flow .view-commerce-checkout-order-summary table tr{
  background-color:transparent;
}
.commerce-checkout-flow .layout-checkout-form #edit-payment-process-offsite-payment .form-item{
  margin: 0;
  margin-bottom: 20px;
}
.commerce-checkout-flow .layout-checkout-form .checkout-pane-payment-process{
  border: none;
}
.commerce-checkout-flow .layout-checkout-form #edit-payment-process-offsite-payment .title{
  height: 130px;
}
.view-categories .view-content .views-view-grid .views-row .views-col{
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(61, 111, 245, .05), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  display: flex;
  margin: 0 30px;
}
.view-categories .view-content .views-view-grid .views-row .views-col:hover{
  transform: translateY(-4px);
  border-color: rgba(61, 111, 245, .45);
  background: linear-gradient(180deg, rgba(61, 111, 245, .12), rgba(255, 255, 255, .2));
}
.view-categories .view-content .views-view-grid .views-row .views-col .views-field-field-image{
  width: 70%;
}
.view-categories .view-content .views-view-grid .views-row{
  display: flex;
  justify-content: space-around;
}
.view-commerce-products .view-content .views-view-grid .views-row .views-col{
   flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 25px 0px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(61, 111, 245, .05), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, .06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  display: flex;
  margin: 0 30px;
}
.view-commerce-products .view-content .views-view-grid .views-row{
  display: flex;
  justify-content: space-around;
}
.view-commerce-products .view-content .views-view-grid .views-row .views-col:hover{
  transform: translateY(-4px);
  border-color: rgba(61, 111, 245, .45);
  background: linear-gradient(180deg, rgba(61, 111, 245, .12), rgba(255, 255, 255, .2));
}
.quick-link{
  top: 7%;
  display: none;
}