/* ===================================================================
   Grupo Tekila — sistema de diseño
   Marca:  grupotekila.com/manual  (Montserrat · Negro #0A0A0A · Oro #A67C52)
   Estilo: tokens de HeroUI (radios 8/12/14, sombras en capas,
           superficies "flat" translúcidas, press scale 0.97)
   =================================================================== */

:root{
  /* --- Primarios de marca --- */
  --negro:        #0A0A0A;
  --oro:          #A67C52;

  /* --- Secundarios de marca --- */
  --marron-prof:  #4A2F1C;
  --marron-claro: #6B4530;
  --oro-claro:    #C4A074;
  --crema:        #EDE3D3;
  --marfil:       #F2EAD3;
  --verde-musgo:  #5C6B3D;
  --terracota:    #C8623F;
  --turquesa:     #2E8B8B;

  /* --- Superficies escalonadas (content1..4 de HeroUI) --- */
  --fondo:        #0A0A0A;
  --sup-1:        #131110;   /* tarjeta principal */
  --sup-2:        #1A1715;   /* elemento dentro de tarjeta */
  --sup-3:        #221E1A;   /* hover / elevado */

  /* --- Texto --- */
  --texto:        #F2EAD3;
  --texto-2:      rgba(242,234,211,0.66);
  --texto-3:      rgba(242,234,211,0.42);

  /* --- Líneas: casi invisibles, la separación la da la sombra --- */
  --divisor:      rgba(242,234,211,0.09);
  --borde-oro:    rgba(166,124,82,0.32);

  /* --- Tintes translúcidos (variante "flat") --- */
  --oro-flat:     rgba(166,124,82,0.14);
  --oro-flat-alto:rgba(166,124,82,0.22);
  --musgo-flat:   rgba(92,107,61,0.20);
  --terra-flat:   rgba(200,98,63,0.16);

  /* --- Radios (HeroUI: 8 / 12 / 14) --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* --- Sombras en capas + brillo interior (modo oscuro HeroUI) --- */
  --sombra-sm:
    0 0 5px 0 rgb(0 0 0 / 0.05),
    0 2px 10px 0 rgb(0 0 0 / 0.20),
    inset 0 0 1px 0 rgb(255 255 255 / 0.15);
  --sombra-md:
    0 0 15px 0 rgb(0 0 0 / 0.06),
    0 2px 30px 0 rgb(0 0 0 / 0.22),
    inset 0 0 1px 0 rgb(255 255 255 / 0.15);
  --sombra-lg:
    0 0 30px 0 rgb(0 0 0 / 0.07),
    0 30px 60px 0 rgb(0 0 0 / 0.26),
    inset 0 0 1px 0 rgb(255 255 255 / 0.15);

  /* Resplandor dorado para el elemento activo */
  --brillo-oro: 0 0 0 1px rgba(166,124,82,0.55), 0 8px 24px -8px rgba(166,124,82,0.45);

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-rapida: 150ms var(--ease);
  --t-media:  250ms var(--ease);
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

html{ -webkit-text-size-adjust: 100%; }

body{
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===================================================================
   Tipografía — jerarquía del manual (Black 900 / Regular 400 / Light 300)
   =================================================================== */
h1, h2, h3, h4{
  margin: 0;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.022em;   /* el peso 900 necesita tracking negativo */
  color: var(--texto);
}
h1{ font-size: clamp(26px, 5.2vw, 38px); }
h2{ font-size: clamp(21px, 4vw, 28px); }
h3{ font-size: 16px; letter-spacing: -0.012em; }

p{ margin: 0; }

.subtitulo{
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-2);
}

/* Etiqueta superior — mayúsculas espaciadas, en oro */
.eyebrow{
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 11px;
}

.logo{ display:block; height:auto; }

/* ===================================================================
   Botones — press scale 0.97, transición solo de transform/color/opacidad
   =================================================================== */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: var(--r-md);
  padding: 0 20px;
  height: 42px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition: transform var(--t-rapida), background-color var(--t-rapida),
              opacity var(--t-rapida), box-shadow var(--t-rapida), color var(--t-rapida);
}
.btn:active:not(:disabled){ transform: scale(0.97); }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Sólido dorado — acción principal */
.btn-primario{
  background: var(--oro);
  color: #17110B;
  font-weight: 700;
  box-shadow: var(--sombra-sm);
}
.btn-primario:hover:not(:disabled){ opacity: 0.9; }

/* Flat — tinte translúcido, sin borde duro */
.btn-flat{
  background: var(--oro-flat);
  color: var(--oro-claro);
}
.btn-flat:hover:not(:disabled){ background: var(--oro-flat-alto); }

/* Light — sin fondo hasta el hover */
.btn-light{
  background: transparent;
  color: var(--texto-2);
  font-weight: 500;
}
.btn-light:hover:not(:disabled){ background: rgba(242,234,211,0.06); color: var(--texto); }

.btn-sm{ height: 34px; font-size: 13px; padding: 0 14px; border-radius: var(--r-sm); }

/* ===================================================================
   Superficies
   =================================================================== */
.tarjeta{
  background: var(--sup-1);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
}

.panel{
  background: var(--sup-1);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  padding: 22px;
}

/* ===================================================================
   Campos de formulario — estilo "flat" de HeroUI: relleno tenue,
   sin borde visible en reposo; el foco lo marca un anillo dorado.
   =================================================================== */
input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=date], input[type=search],
select, textarea{
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--texto);
  background: var(--sup-2);
  border: none;
  box-shadow: inset 0 0 0 1px transparent;
  border-radius: var(--r-md);
  padding: 13px 15px;
  outline: none;
  transition: background-color var(--t-rapida), box-shadow var(--t-rapida);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder{ color: var(--texto-3); }

input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus){
  background: var(--sup-3);
}
input:focus, select:focus, textarea:focus{
  background: var(--sup-2);
  box-shadow: inset 0 0 0 2px var(--oro);
}

textarea{ min-height: 104px; resize: vertical; line-height: 1.6; }

select{
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75L6 6.25l4.5-4.5' stroke='%23A67C52' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
/* El date picker nativo en oscuro */
input[type=date]::-webkit-calendar-picker-indicator{
  filter: invert(62%) sepia(18%) saturate(880%) hue-rotate(348deg) brightness(92%);
  cursor: pointer;
}

label{ display: block; }

/* ===================================================================
   Accesibilidad
   =================================================================== */
:focus-visible{
  outline: 2px solid var(--oro);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* El foco de los campos ya se ve con el anillo interior */
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: none; }

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

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}