/* ============================================================
   Señor Taco – Cocktails To-Go Widget
   Palette : Teal  #1a6b5c  |  Red   #c8222a  |  Gold  #f0a500
             Cream #f5eed8  |  Dark  #1a2e2a
   Fuentes : Pacifico (script) · Bebas Neue (block) · Nunito (sans)
   ============================================================ */

/* ── Variables y contenedor raíz ── */
.st-ctg-widget {
  --st-teal          : #1a6b5c;
  --st-red           : #c8222a;
  --st-gold          : #f0a500;
  --st-cream         : #f5eed8;
  --st-dark          : #1a2e2a;
  --st-white         : #ffffff;

  position           : relative;
  display            : flex;
  flex-direction     : column;
  background-color   : var(--st-cream);
  overflow           : hidden;
  font-family        : 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  color              : var(--st-dark);
  width              : 100%;
  min-height         : clamp(480px, 55vw, 680px);
  border-radius      : 6px;
}

/* ══════════════════════════════════════════════════════════
   PALMS
   ══════════════════════════════════════════════════════════ */
.st-ctg__palm {
  position        : absolute;
  width           : 140px;
  height          : 190px;
  background-size : contain;
  background-repeat: no-repeat;
  pointer-events  : none;
  z-index         : 0;
  opacity         : .7;
}

.st-ctg__palm--tl {
  top   : -14px;
  left  : -12px;
  /* palm leaf teal inline SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 845.5 1412'%3E%3Cpath fill='%231a6b5c' opacity='.6' d='M712.57,260.12c-107.62-35.65-185.08,12.36-233.54,63.99,29.31-64.45,44.22-154.36-29.71-240.31C409.18,37.13,346.55,7.76,303.68,0c0,0,6.29,15.32,15.58,40.49,7.03,19.01,18.72,36,34.18,49.1.11.09.22.18.33.28,16.04,13.53,34.54,23.74,53.05,33.67-21.82-1.66-42.7-5.23-62.42-10.68,1.47,4.56,2.96,9.19,4.44,13.9,3.81,12.07,9.49,23.51,17.12,33.6,1.49,1.98,3.04,3.91,4.63,5.82,12.44,14.9,27.65,27.17,42.92,39.19-16.23-4.16-31.65-9.4-46.19-15.69,1.94,7.2,3.84,14.45,5.67,21.75,1.71,6.82,4.35,13.39,8.07,19.37.19.31.39.62.58.91,7.67,11.87,18.49,21.57,29.4,31.08-9.89-2.27-19.26-5.01-28.09-8.2,3.25,15.62,6.07,31.15,8.3,46.31-32.51-65.93-94.03-134.36-209.42-135-65.5-.37-132.81,29.4-168.97,58.4,0,0,16.69,5.66,43.38,15.76,20.16,7.64,41.96,10.12,63.27,6.85.15-.02.3-.05.45-.07,22.07-3.43,43.18-11.16,64.08-19.07-16.57,16.35-34.02,30.62-52.17,42.65,4.68,1.99,9.45,4.04,14.27,6.14,12.35,5.37,25.49,8.8,38.92,9.72,2.63.18,5.26.29,7.9.34,20.65.42,41.12-3.22,61.43-7.08-14.67,10.13-29.65,18.85-44.84,26.12,7.14,3.47,14.28,7.02,21.42,10.64,6.67,3.39,13.79,5.85,21.18,7.05.39.06.77.11,1.14.17,14.88,2.13,30.22.22,45.48-1.9-8.73,6.35-17.47,11.97-26.2,16.82,13.07,7.33,25.85,14.87,38.11,22.6-71.67-20.01-166-20.34-243.84,68.17C23.57,478.38,1.85,548.7,0,595.02c0,0,15.22-8.88,40.36-22.39,18.99-10.19,35.17-25.02,46.7-43.24.09-.13.16-.26.24-.39,11.89-18.9,19.93-39.89,27.67-60.86,1.46,23.23.78,45.76-2.06,67.35,4.58-2.22,9.24-4.47,14-6.73,12.16-5.79,23.37-13.46,32.88-22.99,1.87-1.87,3.68-3.78,5.44-5.74,13.87-15.3,24.56-33.14,34.97-51-1.99,17.72-5.23,34.74-9.72,50.98,7.3-3.11,14.67-6.17,22.09-9.18,6.93-2.81,13.47-6.57,19.22-11.36.3-.25.59-.5.88-.75,11.37-9.83,20-22.66,28.41-35.56-.93,10.75-2.44,21.03-4.5,30.81,31.01-11.12,61.88-20.46,90.73-26.51-32.87,35.98-60.68,76.58-82.04,120.27-198.52,406.17,91.12,788.8-5.92,844.3h333.75c-144.08-27.93-180.76-140.67-214.79-214.87-77.26-168.7-124.44-362.19-75.02-545.27,5.21-19.47,11.82-39.29,19.3-58.02,20.22-50.62,48.22-98.66,84.06-139.87Z'/%3E%3C/svg%3E");
  transform: rotate(10deg) scaleX(-1);
}

.st-ctg__palm--tr {
  top   : -14px;
  right : -12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 845.5 1412'%3E%3Cpath fill='%231a6b5c' opacity='.6' d='M712.57,260.12c-107.62-35.65-185.08,12.36-233.54,63.99,29.31-64.45,44.22-154.36-29.71-240.31C409.18,37.13,346.55,7.76,303.68,0c0,0,6.29,15.32,15.58,40.49,7.03,19.01,18.72,36,34.18,49.1.11.09.22.18.33.28,16.04,13.53,34.54,23.74,53.05,33.67-21.82-1.66-42.7-5.23-62.42-10.68,1.47,4.56,2.96,9.19,4.44,13.9,3.81,12.07,9.49,23.51,17.12,33.6,1.49,1.98,3.04,3.91,4.63,5.82,12.44,14.9,27.65,27.17,42.92,39.19-16.23-4.16-31.65-9.4-46.19-15.69,1.94,7.2,3.84,14.45,5.67,21.75,1.71,6.82,4.35,13.39,8.07,19.37.19.31.39.62.58.91,7.67,11.87,18.49,21.57,29.4,31.08-9.89-2.27-19.26-5.01-28.09-8.2,3.25,15.62,6.07,31.15,8.3,46.31-32.51-65.93-94.03-134.36-209.42-135-65.5-.37-132.81,29.4-168.97,58.4,0,0,16.69,5.66,43.38,15.76,20.16,7.64,41.96,10.12,63.27,6.85.15-.02.3-.05.45-.07,22.07-3.43,43.18-11.16,64.08-19.07-16.57,16.35-34.02,30.62-52.17,42.65,4.68,1.99,9.45,4.04,14.27,6.14,12.35,5.37,25.49,8.8,38.92,9.72,2.63.18,5.26.29,7.9.34,20.65.42,41.12-3.22,61.43-7.08-14.67,10.13-29.65,18.85-44.84,26.12,7.14,3.47,14.28,7.02,21.42,10.64,6.67,3.39,13.79,5.85,21.18,7.05.39.06.77.11,1.14.17,14.88,2.13,30.22.22,45.48-1.9-8.73,6.35-17.47,11.97-26.2,16.82,13.07,7.33,25.85,14.87,38.11,22.6-71.67-20.01-166-20.34-243.84,68.17C23.57,478.38,1.85,548.7,0,595.02c0,0,15.22-8.88,40.36-22.39,18.99-10.19,35.17-25.02,46.7-43.24.09-.13.16-.26.24-.39,11.89-18.9,19.93-39.89,27.67-60.86,1.46,23.23.78,45.76-2.06,67.35,4.58-2.22,9.24-4.47,14-6.73,12.16-5.79,23.37-13.46,32.88-22.99,1.87-1.87,3.68-3.78,5.44-5.74,13.87-15.3,24.56-33.14,34.97-51-1.99,17.72-5.23,34.74-9.72,50.98,7.3-3.11,14.67-6.17,22.09-9.18,6.93-2.81,13.47-6.57,19.22-11.36.3-.25.59-.5.88-.75,11.37-9.83,20-22.66,28.41-35.56-.93,10.75-2.44,21.03-4.5,30.81,31.01-11.12,61.88-20.46,90.73-26.51-32.87,35.98-60.68,76.58-82.04,120.27-198.52,406.17,91.12,788.8-5.92,844.3h333.75c-144.08-27.93-180.76-140.67-214.79-214.87-77.26-168.7-124.44-362.19-75.02-545.27,5.21-19.47,11.82-39.29,19.3-58.02,20.22-50.62,48.22-98.66,84.06-139.87Z'/%3E%3C/svg%3E");
  transform: rotate(-10deg);
}

/* ══════════════════════════════════════════════════════════
   TOP ROW — Headline + Logo
   ══════════════════════════════════════════════════════════ */
.st-ctg__top-row {
  display         : flex;
  align-items     : flex-start;
  justify-content : space-between;
  padding         : clamp(20px, 3.5vw, 42px) clamp(24px, 4vw, 52px) 0;
  position        : relative;
  z-index         : 2;
  gap             : 20px;
}

/* ── Headline ── */
.st-ctg__headline-wrap {
  display        : flex;
  flex-direction : column;
  line-height    : 1;
}

.st-ctg__headline-top {
  font-family  : 'Pacifico', 'Dancing Script', cursive;
  font-size    : clamp(2.6rem, 5.5vw, 4.4rem);
  color        : var(--st-red);
  margin       : 0;
  line-height  : 1.05;
}

.st-ctg__headline-main {
  font-family   : 'Bebas Neue', 'Impact', sans-serif;
  font-size     : clamp(4rem, 10vw, 8rem);
  color         : var(--st-gold);
  margin        : 0;
  line-height   : .88;
  letter-spacing: 3px;
  /* yellow brush stroke background */
  background    : var(--st-gold);
  color         : var(--st-dark);
  padding       : 2px 16px 4px 8px;
  display       : inline-block;
  clip-path     : polygon(0 0, 100% 0, 97% 100%, 2% 100%);
  margin-top    : 6px;
  text-shadow   : none;
}

/* ── Logo circle ── */
.st-ctg__logo-circle {
  width        : clamp(105px, 13vw, 148px);
  height       : clamp(105px, 13vw, 148px);
  flex-shrink  : 0;
  color        : var(--st-teal);
  margin-top   : 2px;
  /* fondo blanco para reproducir el logo sobre crema */
  background   : #ffffff;
  border-radius: 50%;
  padding      : 3px;
  box-shadow   : 0 2px 12px rgba(26,107,92,.15);
}

.st-ctg__logo-circle svg {
  width     : 100%;
  height    : 100%;
  display   : block;
  overflow  : visible;
}

/* La banda del sombrero mantiene su color oscuro aunque se cambie el color del logo */
.st-ctg__logo-circle rect[fill*="0d3d32"],
.st-ctg__logo-circle rect[fill*="ribbon-shadow"] {
  fill: #0d3d32;
}

/* Cuando se usa imagen (.webp / .png) en lugar del SVG inline */
.st-ctg__logo-circle--img {
  background  : transparent;
  box-shadow  : none;
  padding     : 0;
}

.st-ctg__logo-circle--img img {
  width         : 100%;
  height        : 100%;
  object-fit    : contain;
  object-position: center;
  display       : block;
  border-radius : 50%;
}

/* ══════════════════════════════════════════════════════════
   MAIN ROW — Left (text) + Right (image)
   ══════════════════════════════════════════════════════════ */
.st-ctg__main-row {
  display   : grid;
  grid-template-columns: 1fr 1fr;
  flex      : 1;
  position  : relative;
  z-index   : 1;
  min-height: clamp(260px, 35vw, 420px);
}

/* LEFT */
.st-ctg__left {
  padding         : clamp(18px, 3vw, 36px) clamp(20px, 3vw, 40px) clamp(18px, 3vw, 36px) clamp(24px, 4vw, 52px);
  display         : flex;
  flex-direction  : column;
  justify-content : flex-start;
  gap             : clamp(18px, 2.5vw, 28px);
}

/* Body headline */
.st-ctg__body-headline {
  font-family   : 'Nunito', sans-serif;
  font-weight   : 900;
  font-size     : clamp(1rem, 1.8vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: .5px;
  color         : var(--st-dark);
  margin        : 0;
  line-height   : 1.4;
}

.st-ctg__highlight {
  color        : var(--st-teal);
  font-style   : normal;
}

/* ── Wave / squiggle decorator ── */
.st-ctg__body-headline::after {
  content      : '';
  display      : block;
  margin-top   : 10px;
  width        : 70px;
  height       : 3px;
  background   : var(--st-red);
  border-radius: 2px;
}

/* ── Features list ── */
.st-ctg__features {
  list-style : none;
  margin     : 0;
  padding    : 0;
  display    : flex;
  flex-direction: column;
  gap        : clamp(10px, 1.5vw, 16px);
}

.st-ctg__feature-item {
  display    : flex;
  align-items: center;
  gap        : clamp(12px, 1.8vw, 18px);
  cursor     : default;
}

/* ── Ícono: variables CSS + transición base ── */
.st-ctg__feature-icon {
  --icon-size   : clamp(40px, 5vw, 58px);
  --icon-pad    : 9px;
  --icon-radius : 50%;
  --icon-bg     : rgba(26,107,92,.10);
  --icon-border : transparent;
  --icon-color  : var(--st-teal);
  --icon-star   : var(--st-gold);
  --icon-speed  : 280ms;

  width           : var(--icon-size);
  height          : var(--icon-size);
  flex-shrink     : 0;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background-color: var(--icon-bg);
  border-radius   : var(--icon-radius);
  border          : 2px solid var(--icon-border);
  padding         : var(--icon-pad);
  /* transición suave de todas las propiedades visuales */
  transition      : background-color var(--icon-speed) ease,
                    border-color     var(--icon-speed) ease,
                    transform        var(--icon-speed) cubic-bezier(.34,1.56,.64,1),
                    box-shadow       var(--icon-speed) ease;
  will-change     : transform;
}

.st-ctg__feature-icon svg {
  width      : 100%;
  height     : 100%;
  fill       : var(--icon-color);
  color      : var(--icon-color);
  transition : fill var(--icon-speed) ease, color var(--icon-speed) ease;
  display    : block;
}

/* NIGHT: luna usa --icon-color, estrellas usan --st-icon-star (variable separada) */
.st-ctg__feature-icon svg[data-icon="night"] path:first-child {
  fill: var(--icon-color);
}
.st-ctg__feature-icon svg[data-icon="night"] path:not(:first-child) {
  fill: var(--st-icon-star, var(--st-gold));
  transition: fill var(--icon-speed) ease;
}

/* ════════════════════════════════════════
   HOVER — color override via CSS vars
   (Elementor escribe los valores de color
   directamente; el efecto lo da data-attr)
   ════════════════════════════════════════ */
.st-ctg__feature-item:hover .st-ctg__feature-icon {
  background-color: var(--st-teal);
  border-color    : transparent;
}
.st-ctg__feature-item:hover .st-ctg__feature-icon svg {
  fill : #ffffff;
  color: #ffffff;
}
.st-ctg__feature-item:hover .st-ctg__feature-icon svg[data-icon="night"] path:first-child {
  fill: #ffffff;
}

/* ── Efectos hover por data-icon-hover ── */

/* lift — sube y sombra */
[data-icon-hover="lift"] .st-ctg__feature-item:hover .st-ctg__feature-icon {
  transform : translateY(-5px);
  box-shadow: 0 8px 20px rgba(26,107,92,.35);
}

/* scale — crece */
[data-icon-hover="scale"] .st-ctg__feature-item:hover .st-ctg__feature-icon {
  transform : scale(1.18);
  box-shadow: 0 6px 18px rgba(26,107,92,.30);
}

/* bounce — spring animado */
[data-icon-hover="bounce"] .st-ctg__feature-item:hover .st-ctg__feature-icon {
  animation: st-icon-bounce 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes st-icon-bounce {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.22); }
  55%  { transform: scale(.92);  }
  75%  { transform: scale(1.10); }
  90%  { transform: scale(.98);  }
  100% { transform: scale(1);    }
}

/* rotate — gira el SVG */
[data-icon-hover="rotate"] .st-ctg__feature-item:hover .st-ctg__feature-icon svg {
  transform : rotate(20deg);
  transition: transform var(--icon-speed) cubic-bezier(.34,1.56,.64,1),
              fill      var(--icon-speed) ease;
}

/* none — sin efecto de transform */
[data-icon-hover="none"] .st-ctg__feature-item:hover .st-ctg__feature-icon {
  transform : none;
  box-shadow: none;
}

.st-ctg__feature-text {
  display        : flex;
  flex-direction : column;
  line-height    : 1.15;
}

.st-ctg__feature-prefix {
  font-family   : 'Nunito', sans-serif;
  font-weight   : 700;
  font-size     : clamp(.68rem, .95vw, .82rem);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color         : var(--st-teal);
}

.st-ctg__feature-label {
  font-family   : 'Nunito', sans-serif;
  font-weight   : 900;
  font-size     : clamp(.88rem, 1.4vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: .8px;
  color         : var(--st-dark);
}

/* RIGHT */
.st-ctg__right {
  position : relative;
  overflow : hidden;
}

/* Drink image fills the right column, anchored bottom */
.st-ctg__drink-img {
  position : absolute;
  inset    : 0;
  line-height: 0;
}

.st-ctg__drink-img img {
  width          : 100%;
  height         : 100%;
  object-fit     : cover;
  object-position: center bottom;
  display        : block;
  filter         : drop-shadow(-8px 0 24px rgba(0,0,0,.18));
}

/* ── Badge "Grab. SIP. ENJOY." ── */
.st-ctg__badge-sticker {
  background-color : var(--st-teal);
  color            : var(--st-white);
  /* spiky badge shape via clip-path */
  clip-path        : polygon(
    50% 0%, 61% 6%, 74% 3%, 79% 15%, 93% 17%,
    91% 31%, 100% 40%, 91% 50%, 97% 63%, 84% 68%,
    83% 82%, 70% 81%, 62% 94%, 50% 88%, 38% 94%,
    30% 81%, 17% 82%, 16% 68%, 3% 63%, 9% 50%,
    0% 40%, 9% 31%, 7% 17%, 21% 15%, 26% 3%,
    39% 6%
  );
  width            : clamp(110px, 13vw, 155px);
  height           : clamp(110px, 13vw, 155px);
  display          : flex;
  flex-direction   : column;
  align-items      : center;
  justify-content  : center;
  text-align       : center;
  padding          : 18px;
  position         : absolute;
  bottom           : clamp(14px, 2.5vw, 24px);
  right            : clamp(14px, 2.5vw, 24px);
  z-index          : 4;
  animation        : st-ctg-pulse 3s ease-in-out infinite;
}

@keyframes st-ctg-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

.st-ctg__badge-line1,
.st-ctg__badge-line3 {
  font-family   : 'Nunito', sans-serif;
  font-weight   : 800;
  font-size     : clamp(.72rem, 1.1vw, .92rem);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  line-height   : 1.1;
  color         : var(--st-white);
}

.st-ctg__badge-sip {
  font-family   : 'Bebas Neue', 'Impact', sans-serif;
  font-size     : clamp(2rem, 3.2vw, 3rem);
  color         : var(--st-gold);
  line-height   : 1;
  letter-spacing: 2px;
}

/* ══════════════════════════════════════════════════════════
   FOOTER STRIP
   ══════════════════════════════════════════════════════════ */
.st-ctg__footer-strip {
  background-color: var(--st-red);
  display         : flex;
  align-items     : center;
  gap             : clamp(10px, 1.8vw, 18px);
  padding         : clamp(12px, 2vw, 20px) clamp(24px, 4vw, 52px);
  position        : relative;
  z-index         : 2;
}

.st-ctg__footer-icon {
  width       : clamp(22px, 3vw, 32px);
  height      : clamp(22px, 3vw, 32px);
  flex-shrink : 0;
  display     : flex;
  align-items : center;
}

.st-ctg__footer-icon svg {
  width  : 100%;
  height : 100%;
  fill   : var(--st-white);
}

.st-ctg__footer-copy {
  display    : flex;
  align-items: baseline;
  gap        : 10px;
  flex-wrap  : wrap;
}

.st-ctg__footer-bold {
  font-family   : 'Nunito', sans-serif;
  font-weight   : 900;
  font-size     : clamp(1rem, 1.8vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color         : var(--st-white);
  line-height   : 1;
}

.st-ctg__footer-script {
  font-family : 'Pacifico', cursive;
  font-size   : clamp(1rem, 1.8vw, 1.3rem);
  color       : var(--st-white);
  line-height : 1.2;
}

/* ══════════════════════════════════════════════════════════
   BOTTOM BAR
   ══════════════════════════════════════════════════════════ */
.st-ctg__bottom-bar {
  background-color: var(--st-dark);
  text-align      : center;
  padding         : 10px 24px;
  font-family     : 'Nunito', sans-serif;
  font-weight     : 800;
  font-size       : clamp(.7rem, 1.1vw, .9rem);
  text-transform  : uppercase;
  letter-spacing  : 2px;
  color           : var(--st-white);
  position        : relative;
  z-index         : 2;
}

.st-ctg__bottom-highlight {
  color : var(--st-gold);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — mobile ≤ 680px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .st-ctg-widget {
    min-height: unset;
  }

  .st-ctg__top-row {
    padding: 18px 18px 0;
    gap: 12px;
  }

  .st-ctg__main-row {
    grid-template-columns: 1fr;
    grid-template-rows   : 260px auto;
    min-height           : unset;
  }

  /* image on top */
  .st-ctg__right {
    grid-row: 1;
    height  : 260px;
  }

  .st-ctg__left {
    grid-row: 2;
    padding : 18px 18px 20px;
    gap     : 14px;
  }

  .st-ctg__badge-sticker {
    bottom : 12px;
    right  : 12px;
    width  : 100px;
    height : 100px;
  }

  .st-ctg__palm {
    width : 80px;
    height: 110px;
  }

  .st-ctg__footer-strip {
    padding    : 12px 18px;
    flex-wrap  : wrap;
    gap        : 8px;
  }
}