/* ===================================================================
   P14 CIMENTACIONES — Menú en 3D
   -------------------------------------------------------------------
   Cada botón es una "losa": una cara superior que se hunde al pulsar,
   un canto visible debajo que le da grosor, una sombra en el suelo y
   un brillo que sigue al dedo. Al tocar, la losa se inclina hacia
   donde está el dedo; al mover el móvil, todo el menú se inclina muy
   ligeramente.

   PARA CAMBIAR COLORES: bloque :root de aquí abajo.
   =================================================================== */

:root {
  /* Verde P14 */
  --verde-luz:    #74D24B;
  --verde:        #4BAE2A;
  --verde-hondo:  #36921C;
  --verde-canto:  #24660F;
  --verde-canto2: #174709;

  /* Carbón */
  --carbon-luz:   #43484F;
  --carbon-cara:  #262A2F;
  --carbon-hondo: #17191C;
  --carbon-canto: #0C0D0F;

  /* Blanco */
  --blanco-cara:  #FFFFFF;
  --blanco-hondo: #EEF1EF;
  --blanco-canto: #CDD3CF;
  --blanco-canto2:#B5BDB8;

  --hormigon:     #E6EAE7;
}

/* --- Fondo de la pantalla: hormigón claro con luz cenital --------- */
body.menu3d {
  background-color: var(--hormigon);
  background-image:
    radial-gradient(120% 60% at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 50% at 100% 100%, rgba(75,174,42,0.10) 0%, rgba(75,174,42,0) 70%),
    radial-gradient(70% 40% at 0% 80%, rgba(23,25,28,0.06) 0%, rgba(23,25,28,0) 70%);
  background-attachment: fixed;
  min-height: 100vh;
}

.menu3d__escena { max-width: 640px; padding-top: 28px; }

/* --- Lista de losas ---------------------------------------------- */
.menu3d__lista {
  list-style: none;
  margin: 0;
  padding: 0 0 18px;
  display: grid;
  gap: 30px;
  /* Inclinación general con el giroscopio */
  transform: perspective(1400px) rotateX(var(--gx, 0deg)) rotateY(var(--gy, 0deg));
  transition: transform 0.35s ease-out;
  will-change: transform;
}

.menu3d__item { display: block; }

/* Entrada: las losas se levantan una detrás de otra */
.menu3d__lista.entrando .menu3d__item {
  animation: levantar 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.08) both;
}
.menu3d__lista.entrando .menu3d__item:nth-child(2) { animation-delay: 0.07s; }
.menu3d__lista.entrando .menu3d__item:nth-child(3) { animation-delay: 0.14s; }
.menu3d__lista.entrando .menu3d__item:nth-child(4) { animation-delay: 0.21s; }
.menu3d__lista.entrando .menu3d__item:nth-child(5) { animation-delay: 0.28s; }
.menu3d__lista.entrando .menu3d__item:nth-child(n+6) { animation-delay: 0.32s; }

@keyframes levantar {
  0%   { opacity: 0; transform: perspective(900px) translateY(36px) rotateX(-26deg) scale(0.94); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ===================================================================
   LA LOSA
   =================================================================== */
.losa {
  --fondo: 10px;            /* grosor visible del canto */
  --hundir: 0px;
  --radio: 22px;
  position: relative;
  display: block;
  padding-bottom: var(--fondo);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radio);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  outline: none;
}

.losa--grande { --fondo: 14px; --radio: 28px; }

.losa.pulsada {
  --hundir: calc(var(--fondo) - 3px);
  transition: transform 0.12s ease-out;
}

/* Sombra en el suelo */
.losa__sombra {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -16px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 20, 12, 0.34), rgba(10, 20, 12, 0));
  filter: blur(6px);
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
.losa.pulsada .losa__sombra { transform: scale(0.88, 0.7) translateY(-6px); opacity: 0.6; }

/* Canto: el grosor de la losa, visible por debajo de la cara */
.losa__canto {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--fondo);
  bottom: 0;
  border-radius: var(--radio);
  pointer-events: none;
}

/* Cara superior */
.losa__cara {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 18px 18px 18px 18px;
  border-radius: var(--radio);
  overflow: hidden;
  transform: translateY(var(--hundir));
  transition: transform 0.14s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}

/* Brillo que sigue al dedo */
.losa__brillo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--bx, 28%) var(--by, 0%),
              rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%);
  opacity: 0.45;
  mix-blend-mode: soft-light;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.losa.pulsada .losa__brillo { opacity: 1; }

/* Icono dentro de una ficha en relieve */
.losa__icono {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
}
.losa__icono svg { width: 28px; height: 28px; display: block; }

.losa__texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.losa__titulo {
  font-size: 1.12rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.losa__descripcion { font-size: 0.92rem; line-height: 1.35; opacity: 0.78; }

.losa__cuenta {
  align-self: flex-start;
  margin-top: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.losa__flecha { flex: 0 0 auto; width: 22px; height: 22px; opacity: 0.55; }
.losa__flecha svg { width: 100%; height: 100%; display: block; }

/* --- Losa grande (grupos del menú principal) ---------------------- */
.losa--grande .losa__cara {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-height: 168px;
  padding: 24px 24px 22px;
}
.losa--grande .losa__icono { width: 66px; height: 66px; border-radius: 20px; }
.losa--grande .losa__icono svg { width: 36px; height: 36px; }
.losa--grande .losa__titulo { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.losa--grande .losa__descripcion { font-size: 1rem; }
.losa--grande .losa__flecha {
  position: absolute;
  top: 26px;
  right: 22px;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  opacity: 1;
}

/* ===================================================================
   ESTILOS DE COLOR
   =================================================================== */

/* Verde P14 */
.losa--verde .losa__cara {
  color: #fff;
  background:
    linear-gradient(160deg, var(--verde-luz) 0%, var(--verde) 42%, var(--verde-hondo) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.losa--verde .losa__canto {
  background: linear-gradient(180deg, var(--verde-canto) 0%, var(--verde-canto2) 100%);
}
.losa--verde .losa__icono,
.losa--verde .losa__flecha {
  color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,0.32), rgba(255,255,255,0.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 6px 14px rgba(20, 70, 8, 0.28);
}
.losa--verde .losa__cuenta { background: rgba(255,255,255,0.2); color: #fff; }

/* Carbón */
.losa--carbon .losa__cara {
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(75,174,42,0.22) 0%, rgba(75,174,42,0) 55%),
    linear-gradient(160deg, var(--carbon-luz) 0%, var(--carbon-cara) 45%, var(--carbon-hondo) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.losa--carbon .losa__canto {
  background: linear-gradient(180deg, #08090A 0%, #000 100%);
  box-shadow: inset 0 0 0 1px rgba(75,174,42,0.12);
}
.losa--carbon .losa__icono,
.losa--carbon .losa__flecha {
  color: #8BE266;
  background: linear-gradient(160deg, rgba(75,174,42,0.30), rgba(75,174,42,0.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 22px rgba(75,174,42,0.28);
}
.losa--carbon .losa__cuenta { background: rgba(75,174,42,0.22); color: #A6EC86; }

/* Blanca (botones dentro de los grupos y Mi Tarjeta) */
.losa--blanca .losa__cara {
  color: var(--carbon);
  background: linear-gradient(165deg, var(--blanco-cara) 0%, var(--blanco-hondo) 100%);
  box-shadow:
    inset 0 1.5px 0 #fff,
    inset 0 -2px 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.losa--blanca .losa__canto {
  background: linear-gradient(180deg, var(--blanco-canto) 0%, var(--blanco-canto2) 100%);
}
.losa--blanca .losa__icono {
  color: #fff;
  background: linear-gradient(160deg, var(--verde-luz), var(--verde-hondo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 14px rgba(54, 146, 28, 0.32);
}
.losa--blanca.acento-carbon .losa__icono {
  color: #8BE266;
  background: linear-gradient(160deg, var(--carbon-luz), var(--carbon-hondo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 14px rgba(0, 0, 0, 0.28);
}
.losa--blanca .losa__brillo { mix-blend-mode: normal; opacity: 0.25; }
.losa--blanca.pulsada .losa__brillo { opacity: 0.6; }

.losa:focus-visible .losa__cara { outline: 3px solid var(--verde); outline-offset: 3px; }

/* ===================================================================
   CABECERA DE GRUPO
   =================================================================== */
.menu3d__grupo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}
.menu3d__grupo[hidden] { display: none; }

.menu3d__titulo {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--carbon);
}

.boton-redondo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  color: var(--carbon);
  background: linear-gradient(165deg, #fff, var(--blanco-hondo));
  box-shadow: 0 5px 0 var(--blanco-canto), 0 12px 18px rgba(10, 20, 12, 0.16), inset 0 1px 0 #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.boton-redondo svg { width: 22px; height: 22px; }
.boton-redondo:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--blanco-canto), 0 4px 8px rgba(10,20,12,0.14), inset 0 1px 0 #fff; }
.boton-redondo:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

.menu3d__aviso { color: var(--texto-sec); text-align: center; }

body.menu3d .pie { margin-top: 36px; }

/* Pantallas anchas: los grupos en dos columnas */
@media (min-width: 720px) {
  .menu3d__escena { max-width: 920px; }
  .menu3d__lista { grid-template-columns: 1fr 1fr; }
}

/* Quien tenga activado "reducir animaciones" ve la app quieta */
@media (prefers-reduced-motion: reduce) {
  .menu3d__lista, .losa, .losa__cara { transition: none; transform: none; }
  .menu3d__lista.entrando .menu3d__item { animation: none; }
  .losa.pulsada .losa__cara { transform: translateY(var(--hundir)); }
}