/*
 * Stinella — custom.css (clean & ordered)
 * Objetivo:
 * - Mantener Classic intacto (sin romper módulos)
 * - Estilar SOLO tus bloques .stinella-*
 * - Quitar neblina (sin overlays globales ni opacidades)
 * - Evitar duplicados/contradicciones
 */

/* =========================================================
   0) SAFETY: No tocar header Classic (por si quedó “raro”)
   ========================================================= */
#header,
#header .header-top,
#header .header-nav,
#header .header-banner,
#header .top-logo {
  background: #fff !important;
}

/* =========================================================
   1) TIPOGRAFÍA GLOBAL
   (si ya cargas Libre Baskerville por Google Fonts/tema)
   ========================================================= */
body,
button,
input,
textarea,
select,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
}

/* =========================================================
   2) TOKENS / VARIABLES (solo si envuelves tu HTML en .stinella-home)
   Recomendación: mete TODO tu HTML en:
   <div class="stinella-home"> ... </div>
   ========================================================= */
.stinella-home{
  --pink:#f6e8f3;
  --blue:#d7e9ff;
  --ink:#1f2330;
  --muted:#56607a;
  --accent:#7a4bb8;
}

/* =========================================================
   3) BASE LAYOUT para secciones Stinella
   ========================================================= */
.stinella-wrap{
  max-width:1180px;
  margin:0 auto;
  /*padding:0 18px;*/
}

.stinella-section{
  padding:56px 0;
}

.stinella-head{
  text-align:center;
  margin-bottom:22px;
}

.stinella-kicker{
  letter-spacing:.35em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--accent);
  margin:0 0 10px;
}

.stinella-h2{
  margin:0 0 10px;
  color:var(--ink);
}

.stinella-p{
  color:var(--muted);
  line-height:1.8;
  margin:0 0 14px;
}

.stinella-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
}

.stinella-actions .btn-link{
  padding:.8rem 1rem;
}

/* =========================================================
   4) HERO STINELLA (SIN NEBLINA)
   - Fondo = imagen real (sin opacity, sin filter)
   - Sin ::after (sin velos)
   ========================================================= */
/* HERO STINELLA — fondo SOLO en la sección (sin fugas, sin neblina) */
.stinella-hero{
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 12px;
  overflow: hidden;
  border-radius: 18px;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}

/* contenido encima */
.stinella-hero__inner{
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  text-align: center;
  padding: 0 12px;
}

/* Top nav */
.stinella-hero__top{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 18px;
}

.stinella-hero__toplink{
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(31,35,48,.75);
}

.stinella-hero__topicon{
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.10));
}

/* Logo */
.stinella-hero__logo{
  width: min(720px, 92%);
  height: auto;
  display: block;
  margin: 0 auto 10px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.10));
}

/* Claim */
.stinella-hero__claim{
  margin: 0 0 20px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(31,35,48,.65);
}

/* Botón */
.stinella-hero__btn{
  display: inline-block;
  padding: 12px 26px;
  border-radius: 10px;
  background: rgba(167,196,255,.85);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* =========================================================
   5) 3 CATEGORÍAS (tarjetas con overlay inferior)
   ========================================================= */
/* === 3 categorías: grid (3 columnas) === */
/* Grid 3 */
.stinella-grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  max-width:1180px;
  margin:0 auto;
  /*padding:20px 18px;*/
}
@media (max-width: 991px){
  .stinella-grid3{ grid-template-columns:1fr; }
}

/* El wrapper es un <a>, así que lo “normalizamos” */
a.image-button-wrapper{
  position:relative !important;
  display:block;
  width:100%;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  text-decoration:none !important;
}

/* Imagen */
a.image-button-wrapper img{
  display:block;
  width:100%;
  height:auto;
}

/* Overlay */
a.image-button-wrapper .btn-overlay{
  white-space: nowrap;
  position:absolute !important;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:50;

  padding:12px 28px;
  border-radius:999px;
  background:rgba(183,205,232,.92);
  color:#fff !important;
  font-weight:700;
  text-decoration:none !important;

  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* Hover */
a.image-button-wrapper:hover .btn-overlay{
  transform:translate(-50%, -50%) scale(1.05);
}

/* =========================================================
   6) BLOQUE 2 COLUMNAS: texto izq + imagen apaisada der
   ========================================================= */
.stinella-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.stinella-split__text{
  max-width:520px;
  padding-left:12px;
}

.stinella-split__media{
  display:flex;
  justify-content:flex-end;
  padding-right:0;
}

/* Imagen apaisada (background-image inline en HTML) */
.stinella-split__img{
  width:100%;
  max-width:560px;
  height:340px;
  border-radius:22px;
  background-color:transparent;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  opacity:1;
  filter:none;
}

/* Evita pseudo-capas raras (por si algún módulo mete algo) */
.stinella-split__img::before,
.stinella-split__img::after{
  content:none !important;
}

/* ===============================
   BOTONES STINELLA (CTA)
   =============================== */

/* Base común */
.stinella-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 32px;
  border-radius:999px;
  font-weight:700;
  font-size:16px;

  text-decoration:none !important;
  border:0 !important;

  background:rgba(183,205,232,.92);
  color:#ffffff !important;

  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;

  white-space:nowrap;
}

/* Hover: mismo efecto que “Ver colección” */
.stinella-actions .btn:hover{
  transform:scale(1.05);
  background:rgba(160,190,220,1);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

/* Elimina estilos heredados de Classic */
.stinella-actions .btn-outline-primary,
.stinella-actions .btn-link{
  background:rgba(183,205,232,.92) !important;
  color:#fff !important;
}

/* Espaciado entre botones */
.stinella-actions{
  gap:14px;
}

/* =========================================================
   7) CONTACTO / CTA
   ========================================================= */
.stinella-contact__box{
  border-radius:18px;
  padding:44px 26px;
  text-align:center;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);

  /* Degradado sin “neblina” arriba */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    rgba(246,232,243,.70) 35%,
    rgba(215,233,255,.70) 100%
  );
}

.stinella-actions--center{
  justify-content:center;
}

.stinella-note{
  margin:14px 0 0;
  color:var(--muted);
}

/* =========================================================
   8) HOME “sin cajón” (solo si lo quieres)
   ⚠️ Esto afecta a toda la home. Si te rompe módulos, coméntalo.
   ========================================================= */
body#index #wrapper,
body#index #content-wrapper,
body#index #main,
body#index #main .page-content,
body#index #main .container{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding-left:12px !important;
  padding-right:12px !important;
}

body#index #main .page-content{
  margin:0 !important;
}

/* Mantener módulos “Classic” centrados y limpios */
body#index .featured-products,
body#index .products-section,
body#index .block-products{
  max-width:1180px;
  margin:0 auto;
  padding:40px 18px;
}

/* (Opcional) ocultar título de módulos */
body#index .featured-products h2,
body#index .products-section-title{
  display:none;
}

/* =========================================================
   9) RESPONSIVE
   ========================================================= */
@media (max-width: 991px){
  .stinella-section{ padding:44px 0; }

  .stinella-grid3{ grid-template-columns:1fr; }
  .stinella-card__img{ height:260px; }

  .stinella-split{
    grid-template-columns:1fr;
    gap:28px;
  }

  .stinella-split__media{
    justify-content:center;
  }

  .stinella-split__img{
    height:240px;
  }
}

@media (max-width: 768px){
  .stinella-hero{
    min-height:360px;
    padding:42px 12px;
  }

  .stinella-hero__nav{
    gap:14px;
    margin-bottom:14px;
  }

  .stinella-hero__link{
    font-size:12px;
    letter-spacing:.20em;
  }

  .stinella-hero__mark{ height:38px; }

  .stinella-hero__claim{
    font-size:12px;
    letter-spacing:.22em;
  }
}


/* MENÚ PRINCIPAL — color enlaces */
/*#header .header-top .main-menu a{
  color: #a7c4ff;*/ /* azul suave de los botones */
  /*font-weight: 600;
  transition: color .25s ease;
}*/

/* Hover */
/*#header .header-top .main-menu a:hover{
  color: #2591af; /* azul suave de los botones */
/*}*/


.top-menu a{
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif !important;
  font-size: 20px !important;
  color: #2591af !important;
}

.top-menu a:hover{
  color:#a5859a !important;
}

/* ===== Banner Stinella: desktop vs móvil ===== */
.stinella-banner-desktop{ display:block; }
.stinella-banner-mobile{ display:none; }

.stinella-card__img{
  width:100%;
  height:340px;
  border-radius:18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}

/* Móvil */
@media (max-width:768px){
  .stinella-banner-desktop{ display:none; }
  .stinella-banner-mobile{
    display:block;
    height:320px;
    background-size: contain;         /* evita recortes y “zoom” */
  }
}

/* iPhone/pequeños */
@media (max-width:480px){
  .stinella-banner-mobile{ height:260px; }
}



/* =========================================
   ELIMINAR ESPACIO SUPERIOR EN HOME (MÓVIL)
   PrestaShop Classic
   ========================================= */

@media (max-width: 768px){

  /* 1️⃣ Wrapper general */
  body#index #wrapper{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 2️⃣ Contenedor principal */
  body#index #main{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 3️⃣ Page content */
  body#index #main .page-content{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 4️⃣ Bloques CMS */
  body#index .cms-page,
  body#index .cms-block,
  body#index .block-cms{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 5️⃣ El propio banner */
  body#index .stinella-card__img{
    margin-top: 0 !important;
  }

  /* 6️⃣ Párrafos vacíos que mete el editor */
  body#index p:empty{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

}

#main .container{
  max-width: 100% !important;
  width: 100% !important;
}



#wrapper {
    /*padding-top: 1.563rem;*/
    background: #ffffff;
}


/* =========================================
   HOME: quitar “cajón” lateral (Classic)
   ========================================= */

body#index #content-wrapper,
body#index #main,
body#index #main .page-content,
body#index #main .page-home{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* El container interno (si existe) */
body#index #content-wrapper .container,
body#index #main .container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tu contenido Stinella: que no quede pegado al borde */
body#index .stinella-wrap{
  padding-left: 12px !important;
  padding-right: 12px !important;
}