/* Variables */
:root {
  /* Colores base */
  --neumo-pg: #EBECF0;
  --neumo-bg: #e3e3e3;
  --neumo-light: #ffffff;
  --neumo-dark: #bebebe;

  /* Contenedores generales */
  --offset: 6px;
  --blur: 12px;

  /* Botones */
  --btn-offset: 8px;
  --btn-blur: 12px;
}

/* Neumorphic containers */
.neumorph {
  background: var(--neumo-bg) !important;
  box-shadow:
    var(--offset) var(--offset) var(--blur) var(--neumo-dark),
    calc(-1 * var(--offset)) calc(-1 * var(--offset)) var(--blur) var(--neumo-light) !important;
  transition: box-shadow 0.2s;
  border-radius: 1rem;
}

.neumorph:active {
  /* Al hacer clic se hunde un poco */
  box-shadow:
    inset var(--offset) var(--offset) var(--blur) var(--neumo-dark),
    inset calc(-1 * var(--offset)) calc(-1 * var(--offset)) var(--blur) var(--neumo-light);
}

/* Neumorphic inset (para tarjetas, modales, etc.) */
.neumorph-inset {
  background: var(--neumo-bg) !important;
  border-radius: 1rem;
  box-shadow:
    inset var(--offset) var(--offset) var(--blur) var(--neumo-dark),
    inset calc(-1 * var(--offset)) calc(-1 * var(--offset)) var(--blur) var(--neumo-light) !important;
}

/* Botones neumórficos */
.btn-neumorph {
  background: var(--neumo-bg);
  border-radius: 1rem;
  box-shadow:
    var(--btn-offset) var(--btn-offset) var(--btn-blur) -2px rgba(72, 79, 96, 0.4),
    calc(-1 * var(--btn-offset)) calc(-1 * var(--btn-offset)) var(--btn-blur) -1px var(--neumo-light);
  transition: box-shadow 0.2s, transform 0.1s;
}
.btn-neumorph:hover {
  box-shadow:
    4px 4px 8px -2px rgba(72, 79, 96, 0.5),
    -3px -3px 8px -1px var(--neumo-light) !important;
}
.btn-neumorph:active {
  transform: translateY(1px);
  box-shadow:
    inset 2px 2px 4px rgba(72, 79, 96, 0.3),
    inset -2px -2px 4px var(--neumo-light) !important;
}

/* Flip Card Effect */
.flip-card { perspective: 1000px; }
/* Tarjetas flip de servicios */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* para coherencia con neumorphism: */
  background: var(--neumo-bg);
  box-shadow:
    var(--offset) var(--offset) var(--blur) var(--neumo-dark),
    calc(-1 * var(--offset)) calc(-1 * var(--offset)) var(--blur) var(--neumo-light);
}

.flip-card-back {
  transform: rotateY(180deg);
  /* sombra inset al reverso: */
  box-shadow:
    inset var(--offset) var(--offset) var(--blur) var(--neumo-dark),
    inset calc(-1 * var(--offset)) calc(-1 * var(--offset)) var(--blur) var(--neumo-light);
}

.flip-card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* Campo de búsqueda neumórfico */
.search-neumorph {
  background: var(--neumo-bg);
  border: none;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  width: 100%;
  max-width: 400px;

  /* Sombra externa */
  box-shadow:
    var(--offset) var(--offset) var(--blur) var(--neumo-dark),
    calc(-1 * var(--offset)) calc(-1 * var(--offset)) var(--blur) var(--neumo-light);

  /* Transición suave al enfocar */
  transition: box-shadow 0.2s, background 0.2s;
  font-size: 1rem;
  color: #333;
}

.search-neumorph:focus {
  outline: none;
  background: #f0f0f0;
  /* Sombra interna leve al enfocar */
  box-shadow:
    inset var(--offset) var(--offset) var(--blur) var(--neumo-dark),
    inset calc(-1 * var(--offset)) calc(-1 * var(--offset)) var(--blur) var(--neumo-light);
}

.fondo {
  background: var(--neumo-pg);
}

/* Sombra neumórfica adaptada a fondo morado */
.btn-neumorph.bg-purple-600 {
  --shadow-light: rgba(255, 255, 255, 0.6);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  box-shadow:
    8px 8px 12px -2px var(--shadow-dark),
    -6px -6px 12px -1px var(--shadow-light);
  transition: box-shadow 0.2s, transform 0.1s;
}

.btn-neumorph.bg-purple-600:hover {
  box-shadow:
    6px 6px 10px -2px rgba(0, 0, 0, 0.25),
    -4px -4px 10px -1px rgba(255, 255, 255, 0.7);
}

.btn-neumorph.bg-purple-600:active {
  transform: translateY(1px);
  box-shadow:
    inset 4px 4px 6px -2px var(--shadow-dark),
    inset -3px -3px 6px -1px var(--shadow-light);
}