/* ======================================================================
   buttons.css — MÓDULO ÚNICO DE BOTONES (v2: agrega .btn--auto / .btn--chip)
   Mantiene TUS valores originales.
   ====================================================================== */

/* ---------- Variables globales del módulo ---------- */
:root{
  --rosa:#8f6267;                 /* Color principal del botón (fondo) */
  --gold:#e8d896;                 /* Color dorado para los filetes */
  --btn-text:#ffffff;             /* Color del texto del botón */
  --btn-radius:8px;               /* Radio de borde (qué tan redondeado) */
  --btn-minw:min(100vw,300px);    /* Ancho mínimo tipo “chip” (100% viewport o 300px) */
  --btn-pad-y:10px;               /* Padding vertical del contenido del botón */
  --btn-pad-x:10px;               /* Padding horizontal del contenido del botón */
  --btn-inner-stroke:2px;         /* Grosor del filete dorado interior (::before) */
  --btn-inner-inset:0px;          /* Inset del filete interior (distancia al borde) */
  --btn-outer-stroke:2px;         /* Grosor del filete dorado exterior (::after) */
  --btn-outer-inset:6px;          /* Inset (positivo) para expandir el filete exterior */
}

/* ---------- Botón base ---------- */
.btn{
  position:relative;                                  /* Base posicional para ::before/::after */
  display:inline-block;                               /* Caja en línea con dimensiones */
  min-width:var(--btn-minw);                          /* Ancho mínimo “chip largo” */
  padding:var(--btn-pad-y) var(--btn-pad-x);          /* Espacio interno (vertical/horizontal) */
  border:none;                                        /* Sin borde del elemento base */
  border-radius:var(--btn-radius);                    /* Redondez del botón */
  background:var(--rosa);                             /* Fondo del botón */
  color:var(--btn-text);                              /* Color del texto */
  text-align:center;                                  /* Centra el texto */
  font-family:"Palatino-Regular","Palatino Linotype",Palatino,serif; /* Tipografía */
  text-transform:uppercase;                           /* Convierte texto a MAYÚSCULAS */
  letter-spacing:.0em;                                /* Espaciado entre letras (tu valor) */
  line-height:1.25;                                   /* Altura de línea del texto interno */
  box-sizing:border-box;                              /* Incluye borde/padding en el cálculo total */
  text-decoration:none;                               /* Quita subrayado si fuese <a> */
  outline:0;                                          /* Quita contorno por defecto */
  -webkit-tap-highlight-color:transparent;            /* Elimina highlight azul en Android */
  box-shadow:0 22px 35px rgba(0,0,0,.06),             /* Sombra grande suave */
             0 2px 6px rgba(0,0,0,.06);              /* Sombra chica adicional */
}

/* ---------- Filete dorado interior (centrado) ---------- */
.btn::before{
  content:"";                                         /* Pseudo-elemento visible */
  position:absolute;                                  /* Posición relativa al .btn */
  inset:var(--btn-inner-inset);                       /* Margen interior uniforme a los 4 lados */
  border-radius:calc(var(--btn-radius) - var(--btn-inner-inset)); /* Ajusta redondez para seguir la curva interna */
  border:var(--btn-inner-stroke) solid var(--gold);   /* Trazo dorado interior */
  pointer-events:none;                                /* No capta clicks */
  box-sizing:border-box;                              /* Trazo cuenta dentro del tamaño del pseudo */
}

/* ---------- Filete dorado exterior (sin desfasaje) ---------- */
.btn::after{
  content:"";                                         /* Pseudo-elemento visible */
  position:absolute;                                  /* Posición relativa al .btn */
  inset:calc(-1 * var(--btn-outer-inset));            /* Se “expande” hacia afuera en los 4 lados */
  border-radius:calc(var(--btn-radius) + var(--btn-outer-inset)); /* Redondez acompaña la expansión */
  border:var(--btn-outer-stroke) solid var(--gold);   /* Trazo dorado exterior */
  pointer-events:none;                                /* No capta clicks */
  box-sizing:border-box;                              /* Trazo cuenta dentro del tamaño del pseudo */
  opacity:.95;                                        /* Leve transparencia para suavizar brillo */
}

/* ---------- Variantes visuales ---------- */
.btn--primary{ background:var(--rosa); color:var(--btn-text); } /* Botón relleno (principal) */
.btn--ghost{ background:transparent; color:var(--rosa); }       /* Botón contorno/transparente */
.btn--block{ display:block; width:100%; }                       /* Botón ocupa todo el ancho */

/* ---------- NUEVAS variantes de ANCHO ---------- */
/* Se adapta al contenido (ancho = texto + padding) */
.btn--auto{
  min-width:auto;                                     /* Quita el ancho mínimo “chip” */
  width:auto;                                         /* Se ajusta al texto */
}

/* Mantiene el comportamiento “chip” largo usando tu variable */
.btn--chip{
  min-width:var(--btn-minw);                          /* Conserva el ancho mínimo global */
}

/* ---------- Feedback táctil ---------- */
.btn:active{ transform:translateY(3px); }             /* Tu valor: baja 3px al presionar */

/* ---------- Overlay: separación vertical entre botones ---------- */
.overlay .btn + .btn{ margin-top:100px; }              /* Tu valor: 80px entre botones del overlay */

/* ---------- Enlaces con apariencia de botón ---------- */
a.btn{ text-decoration:none; }                        /* Quita subrayado si el botón es <a> */

/* ---------- Margen lateral para los botones adaptables ---------- */
.btn--auto {
  margin: 0 10px;   /* agrega 6px de espacio horizontal a ambos lados */
}

/* ============================================================
   Overlay: centrado y espaciado relativos (mobile-first)
   ============================================================ */

.center-block {
  display: flex;
  flex-direction: column;   /* apila los botones uno debajo del otro */
  align-items: center;      /* centra horizontalmente */
  justify-content: center;  /* centra verticalmente dentro del overlay */
  gap: 1.5vh;                 /* separación entre botones (relativa al alto de pantalla) */
  width: 100%;
  margin: 0 auto;           /* asegura centrado del bloque dentro del overlay */
}

/* botones del overlay: ancho relativo al viewport */
.center-block .btn {
  width: 80vw;
  max-width: 320px;
  text-align: center;
}