/* ============================================
   EDP STUDIO — POLISH (FASE 5)
   Osmo Button 007 (botón premium con SVG hover)
   Draw Random Underline (links con trazo dibujado)
   Adaptados a la paleta CMYK de EDP
   ============================================ */


/* ───────────────────────────────────────────────
   01 — BOTÓN 007 EDP (variante primaria naranja)
   ─────────────────────────────────────────────── */

:root {
  --btn7-color:                    #0d0d0d;
  --btn7-color-background:         #FF3D00;
  --btn7-hover-color:              #FF3D00;          /* naranja sobre crema */
  --btn7-hover-color-background:   #f5f0e8;          /* crema — visible en fondo oscuro */
  --btn7-color-focus:              #FF3D00;
  --btn7-border-radius:            2.5em;
  --btn7-padding:                  1.05em 1.9em;
  --btn7-focus-inset:              -0.125em;
  --btn7-overflow:                 clip;
  --btn7-click-scale:              0.955 0.925;
  --btn7-ease-click:               cubic-bezier(0.4, 0, 0.2, 1);
  --btn7-ease-focus:               cubic-bezier(0.32, 0.72, 0, 1);
}

.btn7 {
  -webkit-user-select: none;
  user-select: none;
  color: var(--btn7-color);
  background-color: transparent;
  outline-style: none;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  display: inline-grid;
  position: relative;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: none;
  --btn7-stroke-width: 60;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.15s var(--btn7-ease-click);
}

.btn7::after {
  content: '';
  display: block;
  position: absolute;
  inset: var(--btn7-focus-inset);
  border-radius: var(--btn7-border-radius);
  transition: box-shadow 0.3s var(--btn7-ease-focus);
  pointer-events: none;
  z-index: 1;
}

.btn7:is(:focus-visible)::after {
  box-shadow: 0 0 0 0.125em var(--btn7-color-focus);
}

.btn7:active {
  scale: var(--btn7-click-scale);
}

.btn7__inner {
  pointer-events: none;
  z-index: 1;
  overflow: var(--btn7-overflow);
  border-radius: var(--btn7-border-radius);
  grid-area: 1 / 1;
  place-items: center;
  display: grid;
  position: relative;
}

.btn7__text {
  width: 100%;
  height: 100%;
  padding: var(--btn7-padding);
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
}

.btn7__text.is--hover {
  color: var(--btn7-hover-color);
  z-index: 2;
}

.btn7__svg {
  aspect-ratio: 2;
  flex: none;
  width: 100%;
  height: auto;
  position: absolute;
  overflow: visible;
}

.btn7__svg path {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.25);
}

.btn7__svg-object { width: 100%; }

.btn7__svg-inner {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.btn7__svg-text-wrap {
  width: 100%;
  height: auto;
  padding: var(--btn7-padding);
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 0.6em;
}

.btn7__svg-text {
  white-space: nowrap;
  line-height: inherit;
}

.btn7__svg-overlay {
  z-index: 1;
  aspect-ratio: 2;
  width: 100%;
  height: auto;
  color: var(--btn7-hover-color-background);
  flex: none;
  position: absolute;
  overflow: visible !important;
}

.btn7__svg-overlay path {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.25);
}

.btn7__bg {
  pointer-events: none;
  background-color: var(--btn7-color-background);
  border-radius: var(--btn7-border-radius);
  grid-area: 1 / 1;
  place-self: center;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  padding: 0;
}

/* Variante GHOST — borde sin fondo */
.btn7.is--ghost {
  --btn7-color:                    var(--paper);
  --btn7-color-background:         transparent;
  --btn7-hover-color:               var(--orange);
  --btn7-hover-color-background:   var(--paper);
}
.btn7.is--ghost .btn7__bg {
  background-color: rgba(245, 240, 232, 0.08); /* tinte crema sutil */
  border: 1.5px solid var(--gray-600);
  width: 100%;
  height: 100%;
}

/* Variante WHATSAPP — verde */
.btn7.is--whatsapp {
  --btn7-color:                    #0d0d0d;
  --btn7-color-background:         #25D366;
  --btn7-hover-color:              #0d0d0d;
  --btn7-hover-color-background:   #FFE600;
}

@media (hover: none) and (pointer: coarse) {
  :root { --btn7-click-scale: 1.045 1.075; }
  .btn7__svg-object { display: none; }
}


/* ───────────────────────────────────────────────
   02 — DRAW RANDOM UNDERLINE
   Para reemplazar .link-underline genérico
   ─────────────────────────────────────────────── */

.text-draw {
  cursor: none;
  padding-top: 0.15em;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  position: relative;
}

.text-draw__span {
  margin-bottom: 0;
  font-weight: inherit;
  line-height: 1.1;
}

.text-draw__box {
  color: var(--orange);
  width: 100%;
  height: 0.6em;
  position: relative;
  margin-top: 0.05em;
}

.text-draw__box svg {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: visible !important;
}

/* Variantes de color del underline */
.text-draw.is--cyan    .text-draw__box { color: var(--cyan); }
.text-draw.is--magenta .text-draw__box { color: var(--magenta); }
.text-draw.is--yellow  .text-draw__box { color: var(--yellow); }