/* La Super Gorda — estilos base compartidos */
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:Poppins,sans-serif;color:#000}
a{color:#FE2042}
input,textarea,select{font-family:Poppins,sans-serif}

@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(-1deg)}}

/* Encabezados: en el código van como frases normales; se muestran en mayúsculas */
h1,h2,h3,.upper{text-transform:uppercase}

.menu-row:last-child{border-bottom:none !important}

/* Franjas "llameantes": fondo negro con lecho de fuego (experimento) */
.fire{position:relative;overflow:hidden;background:#0a0a0a}
.fire > *{position:relative;z-index:3}
.fire .firebed{position:absolute;left:0;right:0;bottom:0;height:230px;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 130%, rgba(255,60,38,.60), rgba(255,60,38,0) 60%),
    radial-gradient(70% 100% at 28% 135%, rgba(255,187,39,.50), rgba(255,187,39,0) 55%),
    radial-gradient(70% 100% at 72% 135%, rgba(254,32,66,.50), rgba(254,32,66,0) 55%)}
.fire .flame{position:absolute;bottom:-14px;aspect-ratio:1/1;z-index:2;
  -webkit-mask:url(../img/flame.svg) center/contain no-repeat;mask:url(../img/flame.svg) center/contain no-repeat;
  background:linear-gradient(to top,#FFE08A 0%,#FFBB27 30%,#FF3C26 65%,#FE2042 100%);
  transform-origin:50% 100%;animation:flick 1.5s ease-in-out infinite alternate}
@keyframes flick{from{transform:scaleY(1) scaleX(1)}to{transform:scaleY(1.16) scaleX(.94)}}
.ember{position:absolute;bottom:24px;width:5px;height:5px;border-radius:50%;background:#ffc24d;z-index:2;
  box-shadow:0 0 8px 2px rgba(255,150,30,.85);animation:ember 3.6s linear infinite;opacity:0}
@keyframes ember{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:1}100%{transform:translateY(-190px) scale(.3);opacity:0}}

/* Lecho de brasas de carbón (parrilla): SVGs que laten como ascuas vivas */
.coalbed{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;pointer-events:none;overflow:visible}
.coal{position:absolute;height:auto;transform-origin:50% 100%;animation:coalglow 2.7s ease-in-out infinite;will-change:filter}
@keyframes coalglow{
  0%,100%{filter:brightness(.80) drop-shadow(0 -2px 8px rgba(255,80,10,.45))}
  50%{filter:brightness(1.30) drop-shadow(0 -5px 20px rgba(255,150,25,.88))}}

/* Franja negra que se funde con la de abajo (glow + ascuas, sin llamas) */
.fade{position:relative;overflow:hidden}
.fade > *{position:relative;z-index:2}
.fade .fadebed{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;pointer-events:none}
.fade-red .fadebed{background:
  linear-gradient(to top, #FF3C26 0%, rgba(255,60,38,.85) 9%, rgba(255,60,38,.35) 24%, rgba(255,60,38,0) 48%),
  radial-gradient(60% 100% at 30% 135%, rgba(255,187,39,.40), transparent 60%),
  radial-gradient(60% 100% at 72% 135%, rgba(254,32,66,.40), transparent 60%)}
.fade-yellow .fadebed{background:
  linear-gradient(to top, #FFBB27 0%, rgba(255,187,39,.90) 12%, rgba(255,187,39,.35) 30%, rgba(255,187,39,0) 55%)}
/* variante para franjas estrechas: degradado y ascuas más bajos */
.fade-slim .fadebed{height:120px}
.fade-slim .ember{bottom:12px;animation-name:ember-slim;animation-duration:3s}
@keyframes ember-slim{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-95px) scale(.3);opacity:0}}

/* Estados hover (reemplazan los style-hover del export de Claude Design) */
.hv-pink:hover{background:#FE2042 !important;color:#fff !important}
.hv-black:hover{background:#000 !important;color:#FFBB27 !important}
.hv-yellow:hover{background:#FFBB27 !important;color:#000 !important}
.hv-yellow-bg:hover{background:#FFBB27 !important}
.hv-cream:hover{background:#FFF4DC !important}
.hv-white:hover{background:#fff !important;color:#000 !important}
.hv-white-red:hover{background:#fff !important;color:#FF3C26 !important}
.hv-txt-yellow:hover{color:#FFBB27 !important}
.hv-txt-black:hover{color:#000 !important}

/* Responsive */
@media(max-width:640px){
  .lsg-header{flex-wrap:wrap;row-gap:12px}
  .lsg-logo{order:1}
  .lsg-cta{order:2;margin-left:auto}
  .lsg-nav{order:3;width:100%;justify-content:center;gap:6px;font-size:13px}
  .lsg-nav a{flex:0 0 auto;width:29%;box-sizing:border-box;padding:6px 4px;text-align:center;white-space:nowrap}
  .menu-hero-p,.hero-p{padding-right:130px}
  .form-grid{grid-template-columns:1fr !important}
  .form-sec{padding-left:0 !important;padding-right:0 !important}
  .form-wrap{width:calc(100% - 50px) !important;margin:0 auto !important}
  .form-card{min-width:0 !important;box-shadow:5px 5px 0 #000 !important}
  .coal-opt{display:none}
}