/* === Webfont local (centralizada) === */
@font-face{
  font-family: "TacuralBrush";
  src:
    url("../fonts/BRUSHSCI.woff2") format("woff2"),
    url("../fonts/BRUSHSCI.woff")  format("woff"),
    url("../fonts/BRUSHSCI.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ====== Fuentes y variables ====== */
:root{
  /* Marca */
  --brand-accent: #e11c1c;

  /* Botones estilo institucional (rojo + glow) */
  --btn-bg-top:   #c4312e;             /* rojo superior */
  --btn-bg-bot:   #a92624;             /* rojo inferior (sutil) */
  --btn-text:     #ffffff;             /* texto / íconos */
  --btn-glow:     rgba(196,49,46,.55); /* resplandor rojo hacia afuera */
  --btn-radius:   28px;
  --btn-width:    320px;               /* mismo largo para todos */

  /* Layout / fondo */
  --content-max:  520px;
  --logo-height:  120px;
  --section-offset: clamp(16px, 6vh, 30px);
  --bg-overlay: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.55));
  --bg-image: url(../img/bg.jpg);  /* ✅ con url() y ruta relativa al CSS */
  --text: #fff;
}

/* ====== Base ====== */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji;
  min-height:100dvh;

  /* Evitamos el shorthand y no hay parsing raro */
  background-image: var(--bg-overlay), var(--bg-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display:grid;
  place-items:center;
  padding:24px;
}

/* ====== Tarjeta ====== */
.card{
  width:100%;
  max-width:var(--content-max);
  display:grid;
  gap:18px;
  padding:clamp(18px,3vw,28px);
  border-radius:24px;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

/* ====== Marca ====== */
.brand{ display:grid; justify-items:center; gap:14px; text-align:center; }
.brand img{ height:var(--logo-height); width:auto; object-fit:contain; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }

.slogan{
  margin:0;
  font-family:"TacuralBrush","Brush Script MT","Brush Script Std","Brush Script",cursive;
  font-weight:400;
  font-size:clamp(22px,5.4vw,36px);
  letter-spacing:.2px;
  color:#e11c1c;
  -webkit-text-stroke: 5px #fff;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  paint-order: stroke fill;

  /* 👇 asegura una sola línea en resoluciones chicas */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====== Grilla de accesos (solo index) ====== */
.links-grid{
  display:grid;
  gap:clamp(10px,2.8vw,14px);
  justify-content:center;
  justify-items:center;
  margin-top:var(--section-offset);
}

/* No centrar las grillas internas del formulario */
.card form .grid{
  justify-items: stretch;
  justify-content: stretch;
}

/* Botón base institucional rojo */
.btn{
  --_bg: linear-gradient(180deg, var(--btn-bg-top), var(--btn-bg-bot));
  background: var(--_bg);
  color: var(--btn-text);
  border: none;
  border-radius: var(--btn-radius);
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
  transition: transform .15s ease, box-shadow .22s ease, filter .22s ease;
  width: auto;                /* por defecto, auto */
  min-width: var(--btn-width); /* mantiene un ancho uniforme */
}

/* Solo en la botonera de accesos: todos iguales */
.links-grid .btn{
  width: var(--btn-width); /* todos con mismo ancho */
}

.btn i{ font-size:1.05em; }

/* Hover con resplandor rojo (glow) como en el institucional */
.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 24px var(--btn-glow),          /* glow exterior rojo */
    0 12px 28px rgba(0,0,0,.28);       /* sombra suave abajo */
  filter: brightness(1.04);
}

.btn:active{ transform: translateY(1px); }

.btn:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}

/* Centrar un botón individual */
.btn--center{
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

/* 1) Formularios: que los campos llenen su columna */
.input, .select, .textarea{
  width: 100% !important;
  display: block;
}

/* 2) Hints: misma altura para alinear filas (CUIT vs IVA) */
.hint{
  display: block;
  min-height: 1.25rem; /* ~20px */
  font-size: .82rem;
  opacity: .85;
}

/* Si una .field NO tiene .hint, reservamos el mismo espacio */
.field:not(:has(.hint))::after{
  content: "";
  display: block;
  min-height: 1.25rem;
}

/* Botonera del formulario (2 columnas en >=640px) */
.form-actions{ display:grid; gap:12px; }
@media (min-width:640px){ .form-actions{ grid-template-columns:1fr 1fr; } }
.form-actions .btn{ width:100% !important;
}

/* ====== Footer ====== */
.footer{ text-align:center; opacity:.8; font-size:12px; }
.footer a{ color:#fff; text-decoration:none; }
.footer a:hover{ opacity:.9; }

/* ====== Util ====== */
.hidden{ display:none !important; }

/* ====== Responsive ====== */
@media (max-width:480px){
  .btn{ width:100%; }
}
@media (max-width:900px){ .slogan{ -webkit-text-stroke-width:5px; } }
@media (max-width:520px){ .slogan{ -webkit-text-stroke-width:3.5px; } }
@media (max-height:640px){ .brand img{ height:68px; } }