/* ===========================
   CONTENEDOR Y GRID
   =========================== */
.arco-cards {
  margin: 20px auto 40px;

  /* Reserva estándar para el botón “Comprar” */
  --arco-buy-w: 140px;   /* ancho del botón */
  --arco-buy-h: 34px;    /* alto del botón */

  /* ===== Defaults de estilo de botones (pueden sobrescribirse por inline vars) ===== */
  --arco-btn-font: inherit;
  --arco-btn-size: 14px;
  --arco-btn-size-m: var(--arco-btn-size);
  --arco-btn-weight: 600;
  --arco-btn-radius: 999px;
  --arco-btn-pad-x: 18px;
  --arco-btn-pad-y: 12px;
  --arco-btn-color: #111;
  --arco-btn-bg: #fff;
  /* FIX: el borde por defecto no debe ser transparente */
  --arco-btn-border: #1a1a1a;

  --arco-btn-color-h: var(--arco-btn-color);
  --arco-btn-bg-h: var(--arco-btn-bg);
  --arco-btn-border-h: var(--arco-btn-border);
}

.arco-cards .arco-cards-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 24px;
}

.arco-cards .arco-cards-row .arco-card-item {
  padding: 10px;
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* Desktop (>=992px) */
.arco-cards .arco-cards-row.cols-1 .arco-card-item { flex: 0 0 100%; max-width:100%; }
.arco-cards .arco-cards-row.cols-2 .arco-card-item { flex: 0 0 50%;  max-width:50%; }
.arco-cards .arco-cards-row.cols-3 .arco-card-item { flex: 0 0 33.3333%; max-width:33.3333%; }
.arco-cards .arco-cards-row.cols-4 .arco-card-item { flex: 0 0 25%; max-width:25%; }
.arco-cards .arco-cards-row.cols-5 .arco-card-item { flex: 0 0 20%; max-width:20%; }
.arco-cards .arco-cards-row.cols-6 .arco-card-item { flex: 0 0 16.6667%; max-width:16.6667%; }

/* Tablet (<=991px): 2 por fila */
@media (max-width:991px){
  .arco-cards .arco-cards-row .arco-card-item { flex:0 0 50% !important; max-width:50% !important; }
  .arco-cards .arco-cards-row.cols-1 .arco-card-item { flex:0 0 100% !important; max-width:100% !important; }
}

/* Móvil (<=575px): 1 por fila */
@media (max-width:575px){
  .arco-cards .arco-cards-row .arco-card-item { flex:0 0 100% !important; max-width:100% !important; }
}

/* ===========================
   FILA (WRAPPER) + HEADING
   =========================== */
.arco-row{
  background: transparent;
  margin: 30px 0 0;
  padding: 0;
  position: relative; /* base para overlays internos */
}

.arco-row.theme-dark{
  background:#000;
  padding-top:24px;
  padding-bottom:0px;
  padding-right:16px;
  padding-left:16px;
  border-radius:0;
  color:#fff;
}

.arco-row.theme-light{ background:transparent; }

/* Header de la fila (grid 2 columnas: textos | CTA) */
.arco-row .arco-row-header{
  margin: 6px 10px 16px;
  padding: 0;
  text-align: left;

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  column-gap:16px;
}

/* alineaciones */
.arco-row.align-left   .arco-row-header{ text-align:left; }
.arco-row.align-center .arco-row-header{ text-align:center; }
.arco-row.align-right  .arco-row-header{ text-align:right;  }

.arco-row-header.align-left   { text-align:left; }
.arco-row-header.align-center { text-align:center; }
.arco-row-header.align-right  { text-align:right;  }

.arco-row.theme-dark .arco-row-header{ background:transparent; color:#fff; }
.arco-row-header.theme-dark{
  background:#000;
  color:#fff;
  padding-top:24px;
  padding-bottom:5px;
  border-radius:0;
}
.arco-row.theme-dark .arco-row-header a,
.arco-row-header.theme-dark a{ color:#fff; }

/* Títulos */
.arco-row-heading{
  font-family: var(--arco-h-font, inherit);
  font-size: var(--arco-h-size, clamp(22px, 3.2vw, 42px));
  font-weight: var(--arco-h-weight, 700);
  line-height: 0.7 !important;
  margin: 0 0 6px;
}

.arco-row-subheading{
  font-family: var(--arco-h2-font, inherit);
  font-size: var(--arco-h2-size, clamp(14px, 1.6vw, 18px));
  font-weight: var(--arco-h2-weight, 500);
  line-height: 1;
  margin: 0 0 6px;
  opacity: .9;
}

.arco-row-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Responsive: usa tamaños móviles si existen */
@media (max-width:575px){
  .arco-row-heading{
    font-size: var(--arco-h-size-m, var(--arco-h-size, clamp(22px, 3.2vw, 42px)));
  }
  .arco-row-subheading{
    font-size: var(--arco-h2-size-m, var(--arco-h2-size, clamp(14px, 1.6vw, 18px)));
  }
}

/* CTA en su propia columna (abajo/derecha) */
.arco-row .arco-row-cta{
  align-self: end;
  justify-self: end;
  margin: 0;
}

@media (max-width:575px){
  .arco-row .arco-row-header{
    margin: 6px 6px 12px;
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .arco-row .arco-row-cta{
    align-self: start;
    justify-self: start;
  }
}

/* ===========================
   CTA EN CABECERA
   =========================== */
.arco-row-cta{ display:flex; }
.arco-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: var(--arco-btn-pad-y, 8px) var(--arco-btn-pad-x, 12px);
  border: 1px solid var(--arco-btn-border, #1a1a1a);
  color: var(--arco-btn-color, #1a1a1a);
  background: var(--arco-btn-bg, #fff);
  text-decoration:none;
  font-family: var(--arco-btn-font, inherit);
  font-size: var(--arco-btn-size, 14px);
  font-weight: var(--arco-btn-weight, 600);
  line-height:1;
  transition:all .15s ease;
  border-radius: var(--arco-btn-radius, 0);
  margin-bottom:10px;
}
.arco-cta-btn:hover{
  transform:translateY(-1px);
  color: var(--arco-btn-color-h, var(--arco-btn-color, #1a1a1a));
  background: var(--arco-btn-bg-h, var(--arco-btn-bg, #fff));
  border-color: var(--arco-btn-border-h, var(--arco-btn-border, #1a1a1a));
}
.arco-cta-icon{ display:inline-flex; }
.arco-row.theme-dark .arco-cta-btn{
  background:#000; color:#fff; border-color:#fff;
}

/* ===========================
   TARJETA BASE
   =========================== */
.arco-cards .arco-card { position: relative; overflow: hidden; }

/* ===========================
   TARJETAS DE CATEGORÍA/BANNER
   =========================== */
.arco-cards .arco-card:not(.arco-card--product) .arco-card-media { position: relative; width: 100%; }
.arco-cards .arco-card:not(.arco-card--product) .arco-card-media::before { content: none; }

.arco-cards .arco-card:not(.arco-card--product) .arco-card-media img,
.arco-cards .arco-card:not(.arco-card--product) .arco-card-media .arco-card-media--placeholder {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #f3f3f3;
}

/* Label centrado configurable */
.arco-cards .arco-card-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.85);
  color: #fff;
  text-align: center;
  padding: 12px 20px;
  max-width: calc(100% - 24px);
  pointer-events: none;
  font-family: var(--arco-label-font, inherit);
  font-size: var(--arco-label-size, 14px);
  font-weight: var(--arco-label-weight, 600);
}

/* ===========================
   TARJETAS DE PRODUCTO
   =========================== */
.arco-cards .arco-card--product { border: none; }

.arco-cards .arco-card--product .arco-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.arco-cards .arco-card--product .arco-card-media::before{ content:""; display:block; padding-top:100%; }
.arco-cards .arco-card--product .arco-card-media img,
.arco-cards .arco-card--product .arco-card-media .arco-card-media--placeholder{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:#f3f3f3;
}

/* Franja inferior negra (RESERVA espacio para el botón) */
.arco-cards .arco-product-meta{
  position:relative; background:#000; color:#fff;
  padding:10px 12px;
  /* deja hueco para el botón + 12px de separación a la derecha */
  padding-right: calc(var(--arco-buy-w) + 12px);
  display:flex; flex-direction:column; row-gap:6px;
}

/* Fijar tamaños internos */
.arco-product-meta { font-size: 14px; }
.arco-add-btn, .arco-add-btn__text { font-size: 14px; }
.arco-add-btn svg{ width:18px; height:18px; }

.arco-cards .arco-product-meta *{ margin:0!important; padding:0!important; }

/* Nombre de producto: limita a 2 líneas con elipsis para no invadir el botón */
.arco-cards .arco-product-name{
  font-size:14px; font-weight:600; line-height:1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.arco-cards .arco-product-name a{ color:#fff; text-decoration:none; }
.arco-cards .arco-product-name a:hover{ text-decoration:underline; }

.arco-cards .arco-product-bottom{ display:block!important; }
.arco-cards .arco-product-price{ line-height:1.2; font-size:13px; }

/* Botón añadir a bolsa (absoluto) */
.arco-card-add-form{
  position:absolute; right:12px; top:50%;
  transform:translateY(-50%);
  margin:0!important; padding:0!important; z-index:1;
  width: var(--arco-buy-w);   /* ocupa exactamente el hueco reservado */
}
.arco-add-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; width:100%; height: var(--arco-buy-h); padding:0 12px;
  border:1px solid #fff; background:transparent; color:#fff;
  border-radius:0; line-height:1; cursor:pointer; transition:opacity .15s ease;
  min-width:0; /* evita ensancharse más allá del ancho reservado */
}
.arco-add-btn:hover{ opacity:.85; }
.arco-add-btn__icon svg{ display:block; }

/* En móvil, podemos reducir un poco el ancho del botón para más aire */
@media (max-width: 575px){
  .arco-cards{ --arco-buy-w: 120px; }
}

/* Hover general */
.arco-cards .arco-card-link:hover .arco-card-media img { filter: brightness(.95); }

/* ===== Compactar márgenes laterales en móvil ===== */
@media (max-width: 576px) {
  .arco-cards.container { max-width: 100%; padding-left: 4px; padding-right: 4px; }
  .arco-cards .arco-cards-row { margin-left: -8px; margin-right: -8px; }
  .arco-cards .arco-cards-row .arco-card-item { padding-left: 4px; padding-right: 4px; }

  .arco-row-header { margin-left: 8px; margin-right: 8px; padding-left: 0; padding-right: 0; }

  .arco-cards .arco-card--product .arco-product-meta {
    padding-left: 10px;
    /* padding-right ya se calcula con var(--arco-buy-w) */
  }
}

/* ===== Fondo por fila (imagen) ===== */
.arco-row.has-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.arco-row.theme-dark.has-bg::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  z-index:0;              /* <- clave: debajo del contenido */
  pointer-events:none;
}
.arco-row.has-bg > *{
  position: relative;
  z-index:1;              /* <- clave: por encima del overlay */
}

/* Banner PS centrado */
#wrapper .banner img { box-shadow:0 0 0 0 rgba(0,0,0,.15)!important; }
.banner a, .banner img{ display:block; margin-left:auto; margin-right:auto; max-width:100%; height:auto; }

/* ——— Saneadores suaves para lo que viene después del módulo ——— */
.arco-cards + .homeslider,
.arco-cards + #carousel,
.arco-cards + .banner,
.arco-cards ~ .homeslider,
.arco-cards ~ #carousel,
.arco-cards ~ .banner{
  position: relative;
  z-index: 1;    /* si algo llegara a solaparse, esto lo sube */
  display: block;
  visibility: visible;
}

/* Aísla el bloque para que no afecte a hermanos (slider/banner) */
.arco-block { position: relative; z-index: 0; isolation: isolate; }

/* Clear de flotantes por si el tema usa floats en el slider/banner */
.arco-clear { display:block; clear:both; height:0; line-height:0; }

/* Evita colapso de márgenes del primer/último hijo en móviles */
@media (max-width: 575px){
  .arco-block,
  .arco-row { overflow: visible; }
  .arco-row::after { content:""; display:block; clear:both; } /* por si algún card flota */
}

/* ===========================
   HERO SECTION
   =========================== */
.arco-hero{
  position: relative;
  background: #f5f5f5;
  color: #111;
  padding: 48px 16px;
  margin: 30px 0 0;
  min-height: 420px;
  display: grid;
  place-items: center;
  text-align: center;

  /* valores por defecto (móvil) para padding lateral según alineación */
  --hero-pad-left: 16px;
  --hero-pad-right: 16px;
}
.arco-hero.has-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.arco-hero.theme-dark{ color:#fff; }
.arco-hero.theme-dark.has-bg::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.38);
  z-index:0;
}
.arco-hero > *{ position:relative; z-index:1; }

.arco-hero.align-left   { text-align:left;  place-items: center start; padding-left:  var(--hero-pad-left); }
.arco-hero.align-center { text-align:center; place-items: center; }
.arco-hero.align-right  { text-align:right;  place-items: center end;  padding-right: var(--hero-pad-right); }

.arco-hero__inner{ max-width: 980px; width: 100%; }

.arco-hero__title{
  font-family: var(--arco-h-font, inherit);
  font-weight: var(--arco-h-weight, 700);
  font-size: var(--arco-h-size, clamp(32px, 5vw, 56px));
  line-height: 1.05;
  margin: 0 0 10px;
}

/* En el HERO no queremos borde en los botones por defecto */
.arco-hero{
  --arco-btn-border: transparent;
  --arco-btn-border-h: transparent;
}



@media (max-width:575px){
  .arco-hero__title{
    font-size: var(--arco-h-size-m, var(--arco-h-size, clamp(28px, 8vw, 44px)));
  }
}

.arco-hero__subtitle{
  font-family: var(--arco-h2-font, inherit);
  font-weight: var(--arco-h2-weight, 500);
  font-size: var(--arco-h2-size, clamp(16px, 2.2vw, 22px));
  line-height: 1.35;
  margin: 0 0 18px;
  opacity: .95;
}
@media (max-width:575px){
  .arco-hero__subtitle{
    font-size: var(--arco-h2-size-m, var(--arco-h2-size, 16px));
  }
}

.arco-hero__text{
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 22px;
  opacity: .95;
}

.arco-hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* Botón Hero con variables */
.arco-hero-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--arco-btn-pad-y, 12px) var(--arco-btn-pad-x, 18px);
  min-width: 180px;
  border: 1px solid var(--arco-btn-border, 0);
  background: var(--arco-btn-bg, #fff);
  color: var(--arco-btn-color, #111);
  border-radius: var(--arco-btn-radius, 999px);
  font-weight: var(--arco-btn-weight, 600);
  font-size: var(--arco-btn-size, 14px);
  font-family: var(--arco-btn-font, inherit);
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.arco-hero-btn:hover{
  transform: translateY(-1px);
  color: var(--arco-btn-color-h, var(--arco-btn-color, #111));
  background: var(--arco-btn-bg-h, var(--arco-btn-bg, #fff));
  border-color: var(--arco-btn-border-h, var(--arco-btn-border, transparent));
}

/* Variante alt del hero */
.arco-hero-btn--alt{
  background: transparent;
  color: inherit;
  border: 2px solid currentColor;
  box-shadow: none;
}

/* Tamaño móvil del botón (si se define) */
@media (max-width:575px){
  .arco-hero-btn,
  .arco-cta-btn{
    font-size: var(--arco-btn-size-m, var(--arco-btn-size, 14px));
  }
}

/* ===== Hero (intro) – padding lateral mobile-first con variables ===== */
/* Tablet (≥576px) */
@media (min-width: 576px){
  .arco-hero{
    --hero-pad-left: 100px;
    --hero-pad-right: 100px;
  }
}

/* Desktop (≥992px) */
@media (min-width: 992px){
  .arco-hero{
    --hero-pad-left: 200px;
    --hero-pad-right: 200px;
  }
}

/* Forzar que las dos líneas del H1 del hero vayan una debajo de la otra */
.arco-hero__title .arco-hero__line1,
.arco-hero__title .arco-hero__line2{
  display: block;
  line-height: 1.05;
}

/* Separación opcional entre líneas del H1 */
.arco-hero__title .arco-hero__line2{ margin-top: 0px; }

/* Si también tienes dos líneas de subtítulo, asegúralas en bloque */
.arco-hero__subtitlewrap .arco-hero__subtitle{ display: block; }
.arco-hero__subtitlewrap .arco-hero__subtitle--line2{ margin-top: .25em; }


/* Alineación de los botones del HERO/BANNER según la fila */
.arco-hero.align-left  .arco-hero__ctas{
  justify-content: flex-start;
}

.arco-hero.align-center .arco-hero__ctas{
  justify-content: center;
}

.arco-hero.align-right .arco-hero__ctas{
  justify-content: flex-end;
}

/* transicion smooth para anclajes */
html,
body {
  scroll-behavior: smooth;
}