/*  ╭──────────────────────────────────────────────╮
   │  Slider “Destacados” – Tema hijo Sharrys-Tech │
   ╰──────────────────────────────────────────────╯ */

/* 1 ▸ Bloquea cualquier desbordamiento horizontal global */
html,body{overflow-x:hidden;}

/* 2 ▸ Contenedor principal del carrusel
      – overflow:visible  → que el tooltip no se corte
      – padding-bottom    → deja “aire” para la tarjeta central escalada       */
.sh-featured-slider{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  overflow:visible;
  padding-bottom:200px !important;    /*  (1.6−1) × 220 ≈ 132  → redondeado a 140 px */
}

/* 3 ▸ Flechas de navegación */
.sh-nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:40px; height:40px; cursor:pointer;
  background-size:20px 20px;
  background-repeat:no-repeat;
  background-position:center;
  z-index:99;
}
.sh-prev{left:-8px;
  background-image:url('data:image/svg+xml;utf8,<svg stroke="%23005C56" fill="none" stroke-width="4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline points="15 18 9 12 15 6"/></svg>');
}
.sh-next{right:-8px;
  background-image:url('data:image/svg+xml;utf8,<svg stroke="%23005C56" fill="none" stroke-width="4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polyline points="9 18 15 12 9 6"/></svg>');
}

.swiper-slide {
    overflow: visible !important;
}

/* 4 ▸ Slides SÓLO de este carrusel
      – align-items:flex-start  → alinea las 3 tarjetas por la parte superior */
.sh-featured-slider .swiper-wrapper{align-items:flex-start;}
.sh-featured-slider .swiper-slide{
  display:flex;
  justify-content:center;
  align-items:flex-start;     /* 🔼 alineación al tope */
  transition:transform .35s ease;
}

/* Oculta todos los slides que no sean prev/active/next */
.sh-featured-slider .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){
  visibility:hidden;
  pointer-events:none;
}

/* 5 ▸ Tarjeta de producto */
.sh-card{
  text-align:center;
  position:relative;
  transition:inherit;
  transform-origin:top center;  /* escala desde el borde superior */
}
.sh-card img{width:220px;height:auto;}

.card-producto {
    background: url(https://oscuratentacion.be/nueva/wp-content/uploads/2025/08/img-destacados.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

/* ▸ Escalado: central 160 %, laterales 100 % */
.sh-featured-slider .swiper-slide-active .sh-card{transform:scale(1.6);}  /* central */
.sh-featured-slider .swiper-slide-prev  .sh-card,
.sh-featured-slider .swiper-slide-next  .sh-card{transform:scale(1);}     /* laterales */

/* Botón “Ver más” solo en la central */
.sh-btn{display:none;}
.sh-featured-slider .swiper-slide-active .sh-btn{
  display:inline-block;
  margin-top:10px;
  padding:6px 14px;
  background:#00554a;
  color:#fff;
  border-radius:4px;
  font-size:14px;
  text-decoration:none;
}

/* 6 ▸ Tooltip emergente */
.sh-info{
  position:absolute;
  left:100%;
  top:0;
  width:250px;
  background:var(--brown);
  border: none;
  padding:15px;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
  z-index:99999;
}
.sh-info h4{margin:0 0 6px;font-size:17px;font-weight:700;color: var(--brown);}
.sh-excerpt{margin:0 0 10px;font-size:14px;line-height:1.4;}
.sh-attr{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.3;}
.sh-attr li+li{margin-top:4px;}

/* Mostrar tooltip sólo al hover de la tarjeta central */
.sh-featured-slider .swiper-slide-active .sh-card:hover .sh-info{
  opacity:1; visibility:visible; transform:translateX(0);
}

/* 7 ▸ Z-index para que la central quede sobre las laterales */
.sh-featured-slider .swiper-slide-active,
.sh-featured-slider .swiper-slide-active .sh-card{z-index:20;}

/* 8 ▸ Responsive: centra el tooltip en móviles (≤ 480 px) */
@media (max-width:480px){
  .sh-featured-slider .swiper-slide-active .sh-info{
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:90vw;
  }
}



/* ══ Ventana emergente estilo “ficha de café” ═════════════════════ */

:root{
  --brown:#773520;          /* marrón principal */
  --cream:#D9D2C0;          /* fondo crema */
}

/* muestra sólo en hover de la tarjeta central */
.sh-featured-slider .swiper-slide-active .sh-card:hover .sh-info{
  opacity:1; visibility:visible; transform:translateX(-30px);
}

/* ── estructura interna ───────────────────────────────────────── */

.card-coffee {
    display: flex;
    flex-direction: column;
    border: none;
    background: var(--cream);
    box-shadow: 2px 2px 4px 0px black;
}

/* cabecera */
.card-head{
  display:flex;justify-content:center;align-items:center;
}
img.img-info {
    width: 50px;
    height: auto;
    padding: 10%;
    background: var(--brown);
}

/* título */
.card-title{
  margin:24px 0 16px;
  font-size:40px;           /* ajusta según gusto */
  font-weight:700;
  text-align:center;
  line-height:1;
}

/* cuerpo en 2 columnas */
/* 1 ▸ el bloque de datos ahora usa flex para que las columnas crezcan igual */
.card-body{
  display:flex;                 /* antes grid */
  gap:0;                        /* sin separación lateral */
  min-height:10px;             /* puedes ajustar (depende del texto) */
  z-index: 9999;
}

/* 2 ▸ ambas columnas se estiran y centran verticalmente */
.left,
.right{
  flex:1;                       /* mismo ancho / alto */
  display:flex;
  flex-direction:column;
 justify-content:center; 
  background: var(--brown);/* centra vertical */
}

.right {
    border-left: 1px solid var(--cream);
}

/* 3 ▸ centrado horizontal y estética en cada lado */
.left .row{
  padding:4px 2px;            /* más aire */
  display:flex;                 /* para separar etiqueta y valor */
  gap:6px;
  text-align: left;
}
.left .row+.row{border-top:1px solid #D9D2C0;} /* divisoria */

/* título “Notas” y lista */
.notes-head{
  margin: 0;
  padding-bottom: 5px;
  text-align:center;
}
.notes{
  margin: 0; 
  padding: 5px 12px;
  list-style: none;
  font-size: 8px;
  color: #fff;
  line-height: 1;
  text-align: center;
}
.notes li+li{margin-top:4px;}


/* botón */
.card-btn {
    background: var(--brown);
    color: #fff;
    text-align: center;
    padding: 3px 0;
    font-size: 10px;
    margin: 10% 20%;
}
.card-btn:hover{
    color: #D9D2C0;
    background: #805C2F;
    
}

.sh-insignia {
    background: #F4A338;
    text-align: center;
    display: flex;                /* para centrar con flexbox */
    justify-content: center;      /* centrar horizontal */
    align-items: center;          /* centrar vertical */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    padding: 5px;                 /* un poco de padding para respiración */
    box-sizing: border-box;       /* que el padding no aumente el tamaño */
}

.sh-insignia-txt {
    color: white;
    margin: 0;
    padding: 0;
    font-size: 12px;              /* un poco más pequeño */
    text-align: center;
    line-height: 1.1;             /* menos espacio entre líneas */
    word-break: break-word;       /* permitir romper palabras largas */
}


/* ========================================================================== */
/* diseño login */
/* ========================================================================== */

/* === Fuentes Personalizadas === */
@font-face {
  font-family: 'SitkaVF';
  src: url('https://oscuratentacion.be/nueva/wp-content/uploads/2025/07/SitkaVF-1.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'RalewayCustom';
  src: url('https://oscuratentacion.be/nueva/wp-content/uploads/2025/07/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.sh-login-register-wrapper {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* === TARJETA === */
.sh-login-card {
    width: 100%;
    height: 580px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

/* === LADOS DE LA TARJETA === */
.sh-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    padding: 30px;
    border-radius: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    font-family: "Raleway", sans-serif;
    box-sizing: border-box;
}

.sh-card-front {
    transform: rotateY(0deg);
    background: #003E39;
    color: white;
}

.sh-card-back {
    transform: rotateY(180deg);
    background: #cecece;
    color: #003E39;
}

.txt-form-register {
    font-weight: bold;
}

/* === GIRO === */
.sh-login-card.flipped {
    transform: rotateY(180deg);
}

.sh-login-welcome {
    margin-bottom: 0;
    font-family: 'SitkaVF', serif;
    text-align: center;
}

.sh-login-desc {
    font-size: 16px;
    margin-bottom: 15px;
    text-align: center;
    font-family: "Raleway", sans-serif;
}

.sh-remember {
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: space-between;
    margin-bottom: 15px;
}

.sh-remember-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sh-forgot {
    color: #FFA21B !important;
    font-size: 12px;
}

.sh-forgot:hover {
    color: #D9D2C0 !important;
}

/* === ESTILOS DE FORMULARIO === */
.sh-input {
    width: 100%;
    border: none !important;
    margin: 5px 0 15px;
    font-family: "Raleway";
}

.sh-submit {
    text-align: center;
    margin-bottom: 15px;
}

.sh-btn-login {
    background-color: #FFA21B !important;
    border: none !important;
    color: #003E39 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    width: 100% !important;
    border-radius: 5px !important;
}

.sh-btn-login:hover {
    background: #773520 !important;
    color: white !important;
}

.sh-btn-login:focus {
    background-color: #773520 !important;
    color: white !important;
}

.sh-btn-register {
    background-color: #003E39 !important;
    border: none !important;
    color: #f4a338 !important;
    font-weight: bold !important;
    width: 100% !important;
    border-radius: 5px !important;
}

.sh-btn-register:hover {
    background: #773520 !important;
    color: white !important;
}

.sh-btn-register:focus {
    background-color: #773520 !important;
    color: white !important;
}

.sh-login-title,
.sh-register-title {
    font-family: 'SitkaVF', serif;
    font-size: 40px;
    line-height: 0.8;
    text-align: center;
    margin-bottom: 10px;
}

.sh-login-sub {
    text-align: center;
    font-size: 12px;
    margin-bottom: 15px;
}

.sh-divider {
    border: 1px solid #f4a338;
    width: 35%;
    justify-self: center;
}

.sh-register button,
.sh-back-login button {
    background: none;
    border: none;
    font-size: 12px;
    color: #f4a338;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}

.sh-register button:hover,
.sh-back-login button:hover {
    background: none !important;
    color: #D9D2C0;
}

.sh-register,
.sh-back-login {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
}

.sh-error {
    background: rgba(255, 80, 80, 0.2);
    border-left: 3px solid #ff5050;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}