/* ===================================================== */
/* GLASS CARD — SHARED LIQUID GLASS COMPONENT             */
/* ===================================================== */
/*
USO BÁSICO:

<section class="glass-section my-theme section">
  <div class="glass-card glass-card--liquid">
    ... contenido ...
  </div>
</section>

El look se controla con variables CSS definidas en .my-theme
*/
/* ===================================================== */


/* ===================================================== */
/* SECTION WRAPPER                                       */
/* ===================================================== */

.glass-section {
  background: transparent;
  padding-top: 1.5rem;
  padding-bottom: 6rem;
}


/* ===================================================== */
/* BASE CARD                                             */
/* ===================================================== */

.glass-card {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 3.5rem;
  border-radius: 28px;
  overflow: hidden;

  /* ✅ Base glass only (tint se aplica arriba en ::after) */
  background: var(--glass-bg, rgba(8, 12, 24, 0.38));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));

  box-shadow:
    var(--glass-shadow, 0 34px 90px rgba(0, 0, 0, 0.30)),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}


/* ===================================================== */
/* LIQUID GLASS MODE                                     */
/* ===================================================== */

.glass-card--liquid {
  -webkit-backdrop-filter:
    blur(var(--glass-blur, 30px))
    saturate(var(--glass-sat, 180%))
    contrast(var(--glass-contrast, 120%));

  backdrop-filter:
    blur(var(--glass-blur, 30px))
    saturate(var(--glass-sat, 180%))
    contrast(var(--glass-contrast, 120%));
    
  box-shadow:
     var(--glass-shadow),
     inset 0 1px 1px rgba(255, 255, 255, 0.2), /* Brillo en el borde superior */
     inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}


/* ===================================================== */
/* HIGHLIGHT / ORBS                                      */
/* ===================================================== */

.glass-card--liquid::before {
  content: "";
  position: absolute;
  inset: -50% -25% auto -25%;
  height: 80%;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-highlight-opacity, 0.95);

  /* ✅ Fallbacks completos */
  background:
    var(
      --glass-highlight-top,
      radial-gradient(
        closest-side,
        rgba(255,255,255,0.55),
        rgba(255,255,255,0)
      )
    ),
    var(
      --glass-highlight-orb,
      radial-gradient(
        420px 280px at 15% 20%,
        rgba(110, 200, 255, 0.22),
        rgba(110, 200, 255, 0)
      )
    ),
    var(
      --glass-highlight-orb-2,
      radial-gradient(
        520px 340px at 85% 30%,
        rgba(160, 120, 255, 0.18),
        rgba(160, 120, 255, 0)
      )
    );
}


/* ===================================================== */
/* SHEEN + RIM + GRAIN + TINT LAYER                       */
/* ===================================================== */

.glass-card--liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* ✅ Tint overlay ABOVE the blur (clave para look “Skills”) */
  background:
    linear-gradient(
      rgba(10, 14, 28, var(--glass-tint, 0.00)),
      rgba(10, 14, 28, var(--glass-tint, 0.00))
    ),

    /* sheen diagonal */
    var(--glass-sheen,
        linear-gradient(135deg, rgba(255,255,255,0.3), transparent, transparent)),

    /* rim */
    var(
      --glass-rim,
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.26),
        rgba(255,255,255,0.06)
      )
    ),

    repeating-linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.03) 1px, transparent 1px, transparent 2px);

  opacity: var(--glass-sheen-opacity, 0.48);
  mix-blend-mode: soft-light;
}


/* ===================================================== */
/* CONTENT LAYER                                         */
/* ===================================================== */

.glass-card > * {
  position: relative;
  z-index: 1;
}

/* Estilos unificados para el contenido dentro de tarjetas Glass */
.glass-header h2 {
  margin: 0 0 1.1rem 0;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 3.2rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--glass-title, rgba(255,255,255,0.98));
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

.glass-header p {
  margin: 0 0 1.25rem 0;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 70ch;
  color: var(--glass-text, rgba(255,255,255,0.78));
  text-shadow: 0 10px 26px rgba(0,0,0,0.42);
}

.glass-header p strong {
  color: var(--glass-text-strong, rgba(255, 255, 255, 0.92));
  font-weight: 700;
}
/* ===================================================== */
/* RESPONSIVE                                            */
/* ===================================================== */

/* ===================================================== */
/* AISLANTE DE COLOR PARA FILAS (Anti-Gris)              */
/* ===================================================== */

.glass-row-isolated {
  position: relative;
  background:
    /* Capa 1: Un 'primer' blanco para que el color de arriba sea real */
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)),
    /* Capa 2: El tinte de color (usando variables) */
    var(--row-custom-bg, rgba(255,255,255,0.1)) !important;
  
  /* Capa 3: Blur extra fuerte para separar del fondo marino */
  backdrop-filter: blur(20px) saturate(150%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(1.1) !important;
  
  border: 1px solid var(--row-custom-border, rgba(255,255,255,0.2)) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-row-isolated:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .glass-card {
    margin: 0 1.5rem;
    padding: 3rem 2rem;
    border-radius: 22px;
  }
  .glass-header h2 { font-size: 2.6rem; }
}


/* ===================================================== */
/* THEMES                                                */
/* ===================================================== */

/* ===================================================== */
/* GLASS THEME — LIQUID DARK (EXACT About values)        */
/* Use on the SECTION:                                   */
/* <section class="glass-section glass-theme-liquid-dark">*/
/*   <div class="glass-card glass-card--liquid">...</div> */
/* </section>                                            */
/* ===================================================== */

.glass-theme-liquid-dark {
  /* Glass base (About) */
  --glass-bg: rgba(8, 12, 24, 0.38);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 34px 90px rgba(0, 0, 0, 0.30);

  /* Glass controls (About) */
  --glass-blur: 30px;
  --glass-sat: 180%;
  --glass-contrast: 120%;

  /* Highlights / sheen (About) */
  --glass-highlight-top: radial-gradient(
    closest-side,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0)
  );

  --glass-highlight-orb: radial-gradient(
    420px 280px at 15% 20%,
    rgba(110, 200, 255, 0.22),
    rgba(110, 200, 255, 0)
  );

  --glass-highlight-orb-2: radial-gradient(
    520px 340px at 85% 30%,
    rgba(160, 120, 255, 0.18),
    rgba(160, 120, 255, 0)
  );

  --glass-sheen: linear-gradient(
    135deg,
    rgba(255,255,255,0.26),
    rgba(255,255,255,0.08),
    rgba(255,255,255,0)
  );

  --glass-rim: linear-gradient(
    to bottom,
    rgba(255,255,255,0.26),
    rgba(255,255,255,0.06)
  );

  /* Layer opacities (About) */
  --glass-highlight-opacity: 0.95;
  --glass-sheen-opacity: 0.48;

  /* Optional tint (muy leve) */
  --glass-tint: 0.00;

  /* Text helpers (About) */
  --glass-title: rgba(255,255,255,0.98);
  --glass-text: rgba(255,255,255,0.78);
  --glass-text-strong: rgba(255,255,255,0.92);

  /* Chip helpers (About) */
  --glass-chip-bg: rgba(255,255,255,0.10);
  --glass-chip-border: rgba(255,255,255,0.18);
  --glass-chip-text: rgba(255,255,255,0.82);
}


/* ===================================================== */
/* GLASS THEME — FROSTED INK (iOS material-ish)          */
/* More “matter”, less “glass”                           */
/* ===================================================== */

.glass-theme-frosted-ink {
  --glass-bg: rgba(8, 12, 24, 0.56);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);

  --glass-blur: 26px;
  --glass-sat: 160%;
  --glass-contrast: 115%;

  --glass-highlight-top: radial-gradient(
    520px 240px at 50% 8%,
    rgba(255,255,255,0.28),
    rgba(255,255,255,0) 70%
  );

  --glass-highlight-orb: radial-gradient(
    420px 280px at 15% 20%,
    rgba(110, 200, 255, 0.14),
    rgba(110, 200, 255, 0)
  );

  --glass-highlight-orb-2: radial-gradient(
    520px 340px at 85% 30%,
    rgba(160, 120, 255, 0.12),
    rgba(160, 120, 255, 0)
  );

  --glass-sheen: linear-gradient(
    135deg,
    rgba(255,255,255,0.16),
    rgba(255,255,255,0.05),
    rgba(255,255,255,0)
  );

  --glass-rim: linear-gradient(
    to bottom,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.05)
  );

  --glass-highlight-opacity: 0.65;
  --glass-sheen-opacity: 0.30;

  /* ✅ tint suave para “occlusion” */
  --glass-tint: 0.06;

  --glass-title: rgba(255,255,255,0.96);
  --glass-text: rgba(255,255,255,0.78);
  --glass-text-strong: rgba(255,255,255,0.92);

  --glass-chip-bg: rgba(255,255,255,0.10);
  --glass-chip-border: rgba(255,255,255,0.16);
  --glass-chip-text: rgba(255,255,255,0.82);
}


/* ===================================================== */
/* GLASS THEME — UNIVERSAL LIQUID (Equilibrado)          */
/* ===================================================== */

/* Busca el tema .glass-theme-frosted-dark y reemplázalo por este */
.glass-theme-frosted-dark {
  /* Fondo con más cuerpo (0.45 en lugar de 0.32/0.38) */
  --glass-bg: rgba(12, 16, 32, 0.45);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 34px 90px rgba(0, 0, 0, 0.35);

  /* Efectos para que el wallpaper brille con fuerza */
  --glass-blur: 30px;
  --glass-sat: 180%;
  --glass-contrast: 118%;

  /* Tinte oscuro que ayuda a dar profundidad al cristal */
  --glass-tint: 0.12;

  /* Highlights / Brillos superiores */
  --glass-highlight-opacity: 0.85;
  --glass-highlight-top: radial-gradient(
    closest-side,
    rgba(255,255,255,0.45),
    rgba(255,255,255,0)
  );

  --glass-highlight-orb: radial-gradient(
    420px 280px at 15% 20%,
    rgba(110, 200, 255, 0.20),
    rgba(110, 200, 255, 0)
  );

  /* Colores de texto */
  --glass-title: rgba(255,255,255,0.98);
  --glass-text: rgba(255,255,255,0.82);
}

/* OPCIONAL: Añade este refuerzo al final del archivo para definir mejor los bordes */
.glass-card--liquid {
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ===================================================== */
/* NEW: GLASS THEME — DEEP LIQUID (Efecto Cristal Pesado) */
/* ===================================================== */

.glass-theme-deep-liquid {
  /* Fondo más denso: Usamos un tono marino muy oscuro con más opacidad */
  --glass-bg: rgba(10, 16, 32, 0.62);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);

  /* Refracción extrema para el efecto 'Liquid' */
  --glass-blur: 40px;       /* Desenfoque más profundo */
  --glass-sat: 220%;        /* Colores del fondo muy vibrantes */
  --glass-contrast: 130%;   /* Negros más profundos y luces más brillantes */

  /* Tinte: Una capa de 'oclusión' que le da solidez */
  --glass-tint: 0.18;

  /* Orbes de luz: Los hacemos más visibles para simular reflejos internos */
  --glass-highlight-opacity: 0.90;
  --glass-highlight-top: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.50),
    rgba(255, 255, 255, 0)
  );

  /* Orbes de color que 'tiñen' el cristal desde adentro */
  --glass-highlight-orb: radial-gradient(
    480px 320px at 10% 15%,
    rgba(100, 180, 255, 0.25),
    rgba(100, 180, 255, 0)
  );
  
  --glass-highlight-orb-2: radial-gradient(
    580px 400px at 90% 85%,
    rgba(180, 120, 255, 0.20),
    rgba(180, 120, 255, 0)
  );

  /* Tipografía legible sobre fondo oscuro denso */
  --glass-title: #FFFFFF;
  --glass-text: rgba(255, 255, 255, 0.85);
  --glass-sheen-opacity: 0.65;
}

/* ===================================================== */
/* NEW: GLASS THEME — HIGH-KEY EMERALD (Luminoso)        */
/* ===================================================== */

/* ===================================================== */
/* THEME: APPLE-MELON (Fondo para el Card)               */
/* ===================================================== */

.glass-theme-apple-melon {
  /* Un verde manzana vibrante pero aclarado para que sea legible */
  --glass-bg: #dcfce7;
  --glass-border: #86efac;
  --glass-shadow: 0 30px 60px rgba(22, 101, 52, 0.15);

  --glass-blur: 10px;
  --glass-sat: 100%;
  
  /* Color de los textos generales de la sección */
  --glass-title: #14532d;
  --glass-text: #166534;
}