/* =============================================================================
   BASE360 · RELIEVE
   Teclas y botones en 3D para que se vea que se pueden pinchar.
   -----------------------------------------------------------------------------
   CÓMO SE USA
     1. Sube este archivo a  /assets/relieve.css
     2. Agrega esta línea en el <head> de cada página, DESPUÉS de base.css:

            <link rel="stylesheet" href="assets/relieve.css">

   POR QUÉ ES UN ARCHIVO APARTE Y NO UNA EDICIÓN DE index.html
     Porque el estilo de las tarjetas vive dentro de un <style> en el index, y
     ese archivo cambia seguido. Un CSS aparte sobrevive a cualquier cambio del
     HTML, y si algo no te gusta lo borras y todo vuelve a como estaba. Cero
     riesgo.

   Los selectores llevan un nivel de más a propósito (.puertas .puerta en vez
   de .puerta) para ganarle al <style> del index sin importar en qué orden
   quede la línea que agregues.
   ============================================================================= */

:root{
  /* Tonos para el volumen. Salen de la paleta del logo, no son nuevos. */
  --oro-alto:#D6A93F;   --oro-cara:#BE9330;   --oro-canto:#7E5F13;   --oro-fondo:#5E4609;
  --rojo-alto:#D42A2A;  --rojo-cara:#C00C0C;  --rojo-canto:#8A0606;
  --azul-alto:#2A5DBF;  --azul-cara:#1A4AA8;  --azul-canto:#002461;
  --luz-oro:rgba(190,147,48,.46);
  --luz-rojo:rgba(192,12,12,.42);
}

/* =============================================================================
   1 · LAS TECLAS  (.puerta)
   De tarjeta plana a tecla física: cara con luz arriba, canto abajo y sombra.
   ============================================================================= */
.puertas{ gap:14px }

.puertas .puerta{
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFAF4 62%,#F7F2E6 100%);
  border:1px solid #E7E0CE;
  border-bottom:0;
  border-radius:16px;
  padding:20px 22px 20px 26px;
  margin-bottom:8px;

  /* El canto de abajo es lo que da el volumen; la sombra larga lo despega
     del papel. Los dos juntos hacen que se lea como una tecla. */
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 5px 0 #E0D6BE,
    0 12px 22px rgba(31,24,10,.10);

  transition:transform .16s cubic-bezier(.34,1.3,.64,1),
             box-shadow .16s ease,
             border-color .16s ease;
  overflow:hidden;
  isolation:isolate;
}

/* La barra dorada de la izquierda, ahora con brillo y más presencia. */
.puertas .puerta:before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:7px;
  background:linear-gradient(180deg,var(--oro-alto),var(--oro-cara) 55%,var(--oro-canto));
  box-shadow:inset -1px 0 2px rgba(0,0,0,.18);
  border-radius:16px 0 0 16px;
  transition:width .16s ease;
}

/* El destello que cruza la tecla al pasar por encima. Va en un pseudo-elemento
   aparte para no tocar el fondo. */
.puertas .puerta:after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg,
      transparent 32%,
      rgba(255,255,255,.85) 47%,
      rgba(255,244,214,.95) 50%,
      transparent 68%);
  transform:translateX(-120%);
  opacity:0;
  pointer-events:none;
  z-index:-1;
}

.puertas .puerta:hover,
.puertas .puerta:focus-visible{
  transform:translateY(-3px);
  border-color:#DCCFA8;
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 8px 0 #DCCFA8,
    0 20px 34px rgba(31,24,10,.16),
    0 0 0 4px rgba(190,147,48,.18),      /* el halo dorado */
    0 0 30px var(--luz-oro);             /* la luz */
  outline:none;
}
.puertas .puerta:hover:before,
.puertas .puerta:focus-visible:before{ width:10px }

.puertas .puerta:hover:after,
.puertas .puerta:focus-visible:after{
  animation:b3-destello .62s ease-out forwards;
}

/* Apretada: baja los 5px del canto y la sombra casi desaparece. */
.puertas .puerta:active{
  transform:translateY(5px);
  box-shadow:
    inset 0 2px 5px rgba(31,24,10,.13),
    0 0 0 #E0D6BE,
    0 2px 6px rgba(31,24,10,.12),
    0 0 0 4px rgba(190,147,48,.20);
}

/* La flecha: que se note que lleva a alguna parte. */
.puertas .puerta .ir{
  color:var(--oro-cara);
  font-weight:700;
  transition:transform .2s cubic-bezier(.34,1.3,.64,1);
}
.puertas .puerta:hover .ir{ transform:translateX(6px) }
.puertas .puerta:active .ir{ transform:translateX(3px) }

/* La tarjeta punteada del final ("Todo lo que tu negocio necesita") se levanta
   igual, pero sin el canto sólido: es una invitación, no una tecla principal. */
.puertas .puerta.puerta-todo,
.puertas .puerta[class*="todo"]{
  background:linear-gradient(180deg,#FBF6E8,#F5EEDA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 0 #E6DCC2,
             0 10px 20px rgba(31,24,10,.08);
}


/* =============================================================================
   2 · EL BOTÓN PRINCIPAL  (.btn-gold)
   El de "Ver las marcas que suenan parecido".
   ============================================================================= */
body .btn.btn-gold,
body a.btn-gold,
body button.btn-gold{
  position:relative;
  background:linear-gradient(180deg,var(--oro-alto) 0%,var(--oro-cara) 58%,#AE8528 100%);
  color:#2B2003 !important;
  font-weight:800;
  border:0;
  border-radius:14px;
  padding:17px 34px;
  text-shadow:0 1px 0 rgba(255,255,255,.35);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 6px 0 var(--oro-canto),
    0 14px 26px rgba(126,95,19,.42),
    0 0 26px rgba(214,169,63,.34);

  transition:transform .11s cubic-bezier(.34,1.3,.64,1), box-shadow .16s ease, filter .16s ease;
  overflow:hidden;
  isolation:isolate;

  /* La "respiración": el halo crece y se achica muy lento. Llama la atención
     sin saltar a la cara. */
  animation:b3-latido 2.8s ease-in-out infinite;
}

/* El brillo que barre el botón cada cierto rato. Esto es la luz. */
body .btn-gold:before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
      transparent 36%,
      rgba(255,255,255,.55) 48%,
      rgba(255,255,255,.85) 51%,
      transparent 64%);
  transform:translateX(-130%);
  animation:b3-barrido 3.4s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}

body .btn-gold:hover{
  filter:brightness(1.07) saturate(1.06);
  color:#2B2003 !important;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 7px 0 var(--oro-canto),
    0 20px 34px rgba(126,95,19,.5),
    0 0 40px rgba(214,169,63,.55);
  animation-play-state:paused;
}

body .btn-gold:active{
  transform:translateY(6px);
  box-shadow:
    inset 0 2px 6px rgba(80,58,8,.35),
    0 0 0 var(--oro-canto),
    0 2px 8px rgba(126,95,19,.35);
  animation-play-state:paused;
}


/* =============================================================================
   3 · LOS OTROS BOTONES, para que no queden desparejos
   ============================================================================= */
body .btn.btn-primary, body a.btn-primary, body button.btn-primary{
  background:linear-gradient(180deg,var(--azul-alto) 0%,var(--azul-cara) 58%,#0E3A8C 100%);
  border-radius:14px; padding:16px 30px; font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 6px 0 var(--azul-canto),
    0 14px 26px rgba(0,36,97,.38);
  transition:transform .11s cubic-bezier(.34,1.3,.64,1), box-shadow .16s ease, filter .16s ease;
}
body .btn-primary:hover{ filter:brightness(1.09); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 7px 0 var(--azul-canto),
             0 20px 32px rgba(0,36,97,.46), 0 0 26px rgba(42,93,191,.4) }
body .btn-primary:active{ transform:translateY(6px);
  box-shadow:inset 0 2px 6px rgba(0,20,60,.4), 0 0 0 var(--azul-canto), 0 2px 8px rgba(0,36,97,.3) }

body .nav-cta{
  background:linear-gradient(180deg,var(--rojo-alto),var(--rojo-cara) 60%,#A80909);
  border-radius:999px;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 4px 0 var(--rojo-canto),
    0 8px 18px var(--luz-rojo);
  transition:transform .11s ease, box-shadow .16s ease, filter .16s ease;
}
body .nav-cta:hover{ filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 5px 0 var(--rojo-canto),
             0 12px 24px var(--luz-rojo), 0 0 22px rgba(212,42,42,.5) }
body .nav-cta:active{ transform:translateY(4px);
  box-shadow:inset 0 2px 5px rgba(90,4,4,.4), 0 0 0 var(--rojo-canto), 0 2px 6px var(--luz-rojo) }

body .btn-ghost{
  border-radius:14px; font-weight:700;
  box-shadow:0 4px 0 #E3DCCC, 0 8px 16px rgba(31,24,10,.07);
  transition:transform .11s ease, box-shadow .16s ease, border-color .16s ease;
}
body .btn-ghost:hover{ transform:translateY(-1px);
  box-shadow:0 5px 0 #DCD2BB, 0 12px 22px rgba(31,24,10,.11), 0 0 0 3px rgba(26,74,168,.12) }
body .btn-ghost:active{ transform:translateY(4px); box-shadow:0 0 0 #E3DCCC, 0 2px 5px rgba(31,24,10,.1) }


/* =============================================================================
   4 · MOVIMIENTO
   ============================================================================= */
@keyframes b3-latido{
  0%,100%{ box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12),
      0 6px 0 var(--oro-canto), 0 14px 26px rgba(126,95,19,.42),
      0 0 22px rgba(214,169,63,.28) }
  50%{ box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12),
      0 6px 0 var(--oro-canto), 0 14px 26px rgba(126,95,19,.42),
      0 0 40px rgba(214,169,63,.62) }
}
@keyframes b3-barrido{
  0%,62%{ transform:translateX(-130%) }
  86%,100%{ transform:translateX(130%) }
}
@keyframes b3-destello{
  0%{ transform:translateX(-120%); opacity:0 }
  22%{ opacity:1 }
  100%{ transform:translateX(120%); opacity:0 }
}

/* Quien pidió menos movimiento en su sistema, recibe menos movimiento.
   El relieve se mantiene entero: lo que se apaga es la animación, no el
   volumen, así que los botones se siguen viendo apretables. */
@media (prefers-reduced-motion: reduce){
  body .btn-gold{ animation:none }
  body .btn-gold:before{ animation:none; opacity:0 }
  .puertas .puerta:after{ display:none }
  .puertas .puerta,
  body .btn-gold, body .btn-primary, body .nav-cta, body .btn-ghost{
    transition-duration:.01ms }
}

/* En pantallas sin mouse el hover no existe: el estado normal ya lleva la luz
   para que igual se vea que son botones. */
@media (hover:none){
  body .btn-gold{ box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.12),
      0 6px 0 var(--oro-canto), 0 14px 26px rgba(126,95,19,.42),
      0 0 34px rgba(214,169,63,.5) }
  .puertas .puerta{ box-shadow:
      inset 0 1px 0 #FFFFFF, 0 5px 0 #E0D6BE,
      0 12px 22px rgba(31,24,10,.12), 0 0 0 1px rgba(190,147,48,.10) }
}

/* Que el teclado vea lo mismo que el mouse. */
.puertas .puerta:focus-visible,
body .btn-gold:focus-visible,
body .btn-primary:focus-visible,
body .nav-cta:focus-visible{ outline:3px solid rgba(26,74,168,.5); outline-offset:3px }