/* Reset y variables CSS */
*,:before,:after,::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:#3b82f680;
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

*,:before,:after{
  box-sizing:border-box;
  border:0 solid #e5e7eb;
}

:before,:after{
  --tw-content:"";
}

/* Estilos base - CORRECCIÓN APLICADA AQUÍ */
html{
  text-size-adjust: 100%; /* Propiedad estándar */
  -webkit-text-size-adjust: 100%; /* Para compatibilidad */
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
  font-family:Montserrat,system-ui,sans-serif;
  font-size: 16px; /* Tamaño base explícito */
  line-height:1.5;
}

body{
  line-height:inherit;
  margin:0;
}

h1,h2,h3{
  font-weight:inherit;
}

a{
  color:inherit;
  text-decoration:inherit;
}

button{
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  font-family:inherit;
  font-size:100%;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  color:inherit;
  text-transform:none;
  -webkit-appearance:button;
  background-color:#0000;
  background-image:none;
  margin:0;
  padding:0;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button{
  height:auto;
}

::-webkit-search-decoration{
  -webkit-appearance:none;
}

::-webkit-file-upload-button{
  -webkit-appearance:button;
  font:inherit;
}

h1,h2,h3,p{
  margin:0;
}

ol{
  margin:0;
  padding:0;
  list-style:none;
}

button,[role=button]{
  cursor:pointer;
}

img,svg,iframe{
  vertical-align:middle;
  display:block;
}

img{
  max-width:100%;
  height:auto;
}

/* Variables de color y tema */
:root{
  --background:20 14% 8%;
  --foreground:45 100% 96%;
  --card:20 12% 12%;
  --card-foreground:45 100% 96%;
  --popover:20 12% 10%;
  --popover-foreground:45 100% 96%;
  --primary:43 96% 56%;
  --primary-foreground:20 14% 8%;
  --secondary:25 30% 18%;
  --secondary-foreground:45 100% 96%;
  --muted:20 15% 20%;
  --muted-foreground:30 10% 60%;
  --accent:38 100% 50%;
  --accent-foreground:20 14% 8%;
  --destructive:0 84.2% 60.2%;
  --destructive-foreground:210 40% 98%;
  --border:30 15% 25%;
  --input:30 15% 20%;
  --ring:43 96% 56%;
  --radius:.75rem;
  --gradient-hero:linear-gradient(180deg,#251d18 0%,#171312 100%);
  --gradient-gold:linear-gradient(135deg,#fbbd23 0%,#ffa200 50%,#da730b 100%);
  --gradient-card:linear-gradient(145deg,#28221f 0%,#1d1816 100%);
  --gradient-overlay:linear-gradient(180deg,transparent 0%,#171312e6 100%);
  --shadow-glow:0 0 40px #fbbd234d;
  --shadow-card:0 10px 40px #0006;
  --shadow-elevated:0 20px 60px #00000080;
  --sidebar-background:20 14% 8%;
  --sidebar-foreground:45 100% 96%;
  --sidebar-primary:43 96% 56%;
  --sidebar-primary-foreground:20 14% 8%;
  --sidebar-accent:25 30% 18%;
  --sidebar-accent-foreground:45 100% 96%;
  --sidebar-border:30 15% 25%;
  --sidebar-ring:43 96% 56%;
}

.dark{
  --background:20 14% 8%;
  --foreground:45 100% 96%;
  --card:20 12% 12%;
  --card-foreground:45 100% 96%;
  --popover:20 12% 10%;
  --popover-foreground:45 100% 96%;
  --primary:43 96% 56%;
  --primary-foreground:20 14% 8%;
  --secondary:25 30% 18%;
  --secondary-foreground:45 100% 96%;
  --muted:20 15% 20%;
  --muted-foreground:30 10% 60%;
  --accent:38 100% 50%;
  --accent-foreground:20 14% 8%;
  --destructive:0 62.8% 30.6%;
  --destructive-foreground:210 40% 98%;
  --border:30 15% 25%;
  --input:30 15% 20%;
  --ring:43 96% 56%;
  --sidebar-background:20 14% 8%;
  --sidebar-foreground:45 100% 96%;
  --sidebar-primary:43 96% 56%;
  --sidebar-primary-foreground:20 14% 8%;
  --sidebar-accent:25 30% 18%;
  --sidebar-accent-foreground:45 100% 96%;
  --sidebar-border:30 15% 25%;
  --sidebar-ring:43 96% 56%;
}

*{
  border-color:hsl(var(--border));
}

html{
  scroll-behavior:smooth;
}

body{
  background-color:hsl(var(--background));
  color:hsl(var(--foreground));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:Montserrat,system-ui,sans-serif;
}

/* Clases de utilidad */
.container{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:2rem;
  padding-right:2rem;
}

@media (width>=1400px){
  .container{
    max-width:1400px;
  }
}

/* Componentes personalizados */
.text-gradient-gold{
  background:linear-gradient(135deg,#fbc337,#ffab1a,#f2800d);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

.btn-golden{
  color:#171312;
  background:linear-gradient(135deg,#fbbd23,#ffa200);
  font-weight:600;
  transition:all .3s;
  box-shadow:0 4px 20px #fbbd234d;
}

.btn-golden:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 30px #fbbd2380;
}

.kpi-card{
  background:var(--gradient-card);
  border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-card);
}

.product-card{
  background:hsl(var(--card));
  border-radius:var(--radius);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}

.product-card:hover{
  box-shadow:var(--shadow-elevated);
  transform:translateY(-8px);
}

.product-card:hover .product-image{
  transform:scale(1.05);
}

.product-image{
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}

/* Clases de utilidad generales */
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{inset:0}
.left-0{left:0}
.right-0{right:0}
.top-0{top:0}
.z-10{z-index:10}
.z-50{z-index:50}
.z-\[100\]{z-index:100}
.mx-auto{margin-left:auto;margin-right:auto}
.-mt-2{margin-top:-.5rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-8{margin-bottom:2rem}
.mt-1{margin-top:.25rem}
.block{display:block}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}
.aspect-square{aspect-ratio:1}
.h-10{height:2.5rem}
.h-11{height:2.75rem}
.h-14{height:3.5rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-7{height:1.75rem}
.h-\[75vh\]{height:75vh}
.h-full{height:100%}
.max-h-screen{max-height:100vh}
.min-h-\[500px\]{min-height:500px}
.min-h-screen{min-height:100vh}
.w-14{width:3.5rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-7{width:1.75rem}
.w-auto{width:auto}
.w-full{width:100%}
.max-w-2xl{max-width:42rem}
.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y))}

/* Animaciones */
@keyframes bounce{
  0%,to{
    animation-timing-function:cubic-bezier(.8,0,1,1);
    transform:translateY(-25%)
  }
  50%{
    animation-timing-function:cubic-bezier(0,0,.2,1);
    transform:none
  }
}

.animate-bounce{
  animation:1s infinite bounce;
}

@keyframes pulse{
  50%{
    opacity:.5
  }
}

.animate-pulse{
  animation:2s cubic-bezier(.4,0,.6,1) infinite pulse;
}

/* Layout */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.flex-col{flex-direction:column}
.flex-col-reverse{flex-direction:column-reverse}
.items-center{align-items:center}
.justify-center{justify-content:center}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-6{gap:1.5rem}

.space-y-2>:not([hidden])~:not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(.5rem*calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.5rem*var(--tw-space-y-reverse));
}

/* Estilos visuales */
.overflow-hidden{overflow:hidden}
.whitespace-nowrap{white-space:nowrap}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:var(--radius)}
.rounded-xl{border-radius:.75rem}
.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}
.border-border{border-color:hsl(var(--border))}
.border-border\/30{border-color:hsl(var(--border)/.3)}
.bg-background{background-color:hsl(var(--background))}
.bg-background\/80{background-color:hsl(var(--background)/.8)}
.bg-card{background-color:hsl(var(--card))}
.bg-primary{background-color:hsl(var(--primary))}
.bg-primary\/10{background-color:hsl(var(--primary)/.1)}
.bg-secondary\/30{background-color:hsl(var(--secondary)/.3)}
.bg-secondary\/50{background-color:hsl(var(--secondary)/.5)}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-background\/60{--tw-gradient-from:hsl(var(--background)/.6)var(--tw-gradient-from-position);--tw-gradient-to:hsl(var(--background)/0)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-background\/80{--tw-gradient-from:hsl(var(--background)/.8)var(--tw-gradient-from-position);--tw-gradient-to:hsl(var(--background)/0)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-background\/70{--tw-gradient-to:hsl(var(--background)/0)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsl(var(--background)/.7)var(--tw-gradient-via-position),var(--tw-gradient-to)}
.via-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-background{--tw-gradient-to:hsl(var(--background))var(--tw-gradient-to-position)}
.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}
.object-contain{-o-object-fit:contain;object-fit:contain}
.object-cover{-o-object-fit:cover;object-fit:cover}

/* Espaciado */
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}

/* Tipografía */
.text-center{text-align:center}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-6xl{font-size:3.75rem;line-height:1}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-xs{font-size:.75rem;line-height:1rem}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.tracking-tight{letter-spacing:-.025em}
.tracking-widest{letter-spacing:.1em}
.text-foreground{color:hsl(var(--foreground))}
.text-muted-foreground{color:hsl(var(--muted-foreground))}
.text-primary{color:hsl(var(--primary))}
.text-primary-foreground{color:hsl(var(--primary-foreground))}

/* Efectos visuales */
.opacity-0{opacity:0}
.opacity-60{opacity:.6}
.ring-offset-background{--tw-ring-offset-color:hsl(var(--background))}
.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a)drop-shadow(0 1px 1px #0000000f);filter:var(--tw-blur)var(--tw-brightness)var(--tw-contrast)var(--tw-grayscale)var(--tw-hue-rotate)var(--tw-invert)var(--tw-saturate)var(--tw-sepia)var(--tw-drop-shadow)}
.backdrop-blur-md{--tw-backdrop-blur:blur(12px);backdrop-filter:var(--tw-backdrop-blur)var(--tw-backdrop-brightness)var(--tw-backdrop-contrast)var(--tw-backdrop-grayscale)var(--tw-backdrop-hue-rotate)var(--tw-backdrop-invert)var(--tw-backdrop-opacity)var(--tw-backdrop-saturate)var(--tw-backdrop-sepia)}

/* Transiciones */
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.duration-300{transition-duration:.3s}

/* Animaciones personalizadas */
@keyframes enter{
  0%{
    opacity:var(--tw-enter-opacity,1);
    transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0))
  }
}

@keyframes exit{
  to{
    opacity:var(--tw-exit-opacity,1);
    transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0))
  }
}

.duration-300{
  animation-duration:.3s;
}

@keyframes fadeUp{
  0%{
    opacity:0;
    transform:translateY(20px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes pulse-glow{
  0%,to{
    box-shadow:0 0 20px #fbbd234d
  }
  50%{
    box-shadow:0 0 40px #fbbd2380
  }
}

/* Estados hover y focus */
.hover\:scale-105:hover{
  --tw-scale-x:1.05;
  --tw-scale-y:1.05;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y));
}

.hover\:border-primary\/50:hover{
  border-color:hsl(var(--primary)/.5);
}

.hover\:bg-primary\/90:hover{
  background-color:hsl(var(--primary)/.9);
}

.focus-visible\:outline-none:focus-visible{
  outline-offset:2px;
  outline:2px solid #0000;
}

.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
}

.focus-visible\:ring-ring:focus-visible{
  --tw-ring-color:hsl(var(--ring));
}

.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width:2px;
}

.disabled\:pointer-events-none:disabled{
  pointer-events:none;
}

.disabled\:opacity-50:disabled{
  opacity:.5;
}

/* Estados group */
.group\/btn:hover .group-hover\/btn\:translate-x-1{
  --tw-translate-x:.25rem;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y))rotate(var(--tw-rotate))skew(var(--tw-skew-x))skewY(var(--tw-skew-y))scaleX(var(--tw-scale-x))scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-primary\/20{
  background-color:hsl(var(--primary)/.2);
}

.group:hover .group-hover\:opacity-100{
  opacity:1;
}

/* Animaciones de acordeón */
@keyframes accordion-up{
  0%{
    height:var(--radix-accordion-content-height);
    opacity:1;
  }
  to{
    opacity:0;
    height:0;
  }
}

@keyframes accordion-down{
  0%{
    opacity:0;
    height:0;
  }
  to{
    height:var(--radix-accordion-content-height);
    opacity:1;
  }
}

/* Responsive */
@media (width>=640px){
  .sm\:bottom-0{bottom:0}
  .sm\:right-0{right:0}
  .sm\:top-auto{top:auto}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:flex-col{flex-direction:column}
}

@media (width>=768px){
  .md\:mb-16{margin-bottom:4rem}
  .md\:h-12{height:3rem}
  .md\:h-16{height:4rem}
  .md\:h-20{height:5rem}
  .md\:h-8{height:2rem}
  .md\:w-16{width:4rem}
  .md\:w-20{width:5rem}
  .md\:w-8{width:2rem}
  .md\:max-w-\[420px\]{max-width:420px}
  .md\:gap-8{gap:2rem}
  .md\:p-6{padding:1.5rem}
  .md\:p-8{padding:2rem}
  .md\:py-12{padding-top:3rem;padding-bottom:3rem}
  .md\:py-24{padding-top:6rem;padding-bottom:6rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-6xl{font-size:3.75rem;line-height:1}
  .md\:text-8xl{font-size:6rem;line-height:1}
  .md\:text-base{font-size:1rem;line-height:1.5rem}
  .md\:text-sm{font-size:.875rem;line-height:1.25rem}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
}

@media (width>=1024px){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:text-2xl{font-size:1.5rem;line-height:2rem}
  .lg\:text-5xl{font-size:3rem;line-height:1}
  .lg\:text-7xl{font-size:4.5rem;line-height:1}
  .lg\:text-9xl{font-size:8rem;line-height:1}
}

@media (max-width: 768px) {
  #chatIframe {
    display: none !important;
  }
}

.product-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
}

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    padding: 0 2rem;
    width: 100%;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    background-color: hsl(var(--background));
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: hsl(var(--primary) / 0.1);
}


/* Footer */
.site-footer {
    background-color: hsl(var(--secondary) / 0.5);
    border-top: 1px solid hsl(var(--border));
}

.footer-content {
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .footer-content {
        padding: 4rem 0;
    }
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

.footer-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}

.terms-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.faq-section {
    margin-top: 2rem;
}

.faq-accordion {
    width: 100%;
}

.faq-item {
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.faq-question {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    color: hsl(var(--foreground));
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: hsl(var(--primary));
    text-decoration: none;
}

.faq-icon {
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.faq-answer {
    overflow: hidden;
    font-size: 0.875rem;
    transition: all 0.2s ease-out;
}

.contact-form-container {
    background-color: hsl(var(--card) / 0.5);
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .contact-form-container {
        padding: 2rem;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.875rem;
    font-weight: 500;
}

.form-group input {
    height: 2.5rem;
    width: 100%;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input));
    padding: 0 0.75rem;
    font-size: 0.875rem;

}

.form-group input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    ring: 2px solid hsl(var(--ring));
}

.dropdown-container {
    position: relative;
}

.dropdown-button {
    display: flex;
    height: 2.5rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid hsl(var(--input));
    padding: 0 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.dropdown-button span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.dropdown-icon {
    height: 1rem;
    width: 1rem;
    opacity: 0.5;
}

.hidden-select {
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.dropdown-list {
    position: absolute;
    z-index: 50;
    margin-top: 0.25rem;
    width: 100%;
    background-color: hsl(var(--background));
    border: 1px solid hsl(var(--input));
    border-radius: calc(var(--radius) - 2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    max-height: 15rem;
    overflow: auto;
}

.dropdown-option {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-option:hover {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}

.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.75rem;
    border-radius: calc(var(--radius) - 2px);
    padding: 0 2rem;
    width: 100%;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: linear-gradient(135deg, hsl(43, 96%, 56%) 0%, hsl(38, 100%, 50%) 100%);
    color: hsl(20, 14%, 8%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px hsla(43, 96%, 56%, 0.3);
    border: none;
    cursor: pointer;
}

.submit-icon {
    height: 1rem;
    width: 1rem;
    margin-right: 0.5rem;
}

.footer-bottom {
    padding: 1rem 0;
    border-top: 1px solid hsl(var(--border) / 0.3);
    text-align: center;
}

.copyright {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 639px) {
    .sm-hidden {
        display: none;
    }
}

@media (min-width: 768px) {
    .md-block {
        display: block;
    }
    
    .md-flex {
        display: flex;
    }
}

/* ============================================
   ACCORDION & DROPDOWN SPECIFIC STYLES
   ============================================ */
[data-state="open"] > svg {
    transform: rotate(180deg);
}

[data-orientation="vertical"] svg {
    transition: transform 0.2s ease;
}

[data-state="open"] + div {
    display: block !important;
}

/* Si quieres animación suave al expandir/colapsar */
.faq-answer {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Para listas con viñetas */
.list-disc {
    list-style-type: disc;
}

/* Espaciado para párrafos */
.leading-relaxed {
    line-height: 1.625;
}

/* Margen superior */
.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

/* Espaciado entre elementos */
.space-y-1 > * + * {
    margin-top: 0.25rem;
}

.space-y-2 > * + * {
    margin-top: 0.5rem;
}