/* Pegamos la subnav al header */
#subnav-links {
    width: 100%;
    background: #190808e0 !important;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: -1px; /* 👈 CLAVE: elimina "corte" visual */
}
/* Layout interno */
#subnav-links ul {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 5px;
    margin: 0;
}

#subnav-links li {
    list-style: none;
}

#subnav-links li a{
    color: #f4f0b6;
    font-weight: bold;
}

@media (min-width: 768px) {

    #subnav-links {
        position: fixed;
        top: 60px; /* 👈 altura de tu header */
        z-index: 998;
    }

}




    /* ===== RESET EXTERNO ===== */
    body {
      margin: 0 !important;
      padding: 0 !important;
      background-color: #f7f7f7; 
    }
    .spwp-content-page {
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
      flex-wrap: wrap;
    }
    @media (min-width: 1050px) {
        .spwp-content-page { display: flex; }
    }


     /* ===== VARIABLES CSS ===== */
    .spwp-wrapper {
      /* Modo Claro - AJUSTADO PARA MEJOR CONTRASTE */
      --serp-bg: #f7f7f7;
      --serp-bg-elevated: #ffffff;
      --serp-fg: #1a1a1a; /* Texto principal oscuro */
      --serp-fg-muted: #1a1a1a; /* Gris oscuro para lectura, no gris claro */
      --serp-accent: #b7791f;
      --serp-accent-glow: rgba(183, 121, 31, 0.2); 
      --serp-green: #059669;
      --serp-card: rgba(255, 255, 255, 0.92);
      --serp-border: rgba(0, 0, 0, 0.1);
      --spotlight-bg: radial-gradient(circle, rgba(200, 200, 200, 0.3) 0%, rgba(183, 121, 31, 0.1) 40%, transparent 70%);
    }

    html.asap-dark-mode .spwp-wrapper {
      /* Modo Oscuro */
      --serp-bg: #0a0b0f;
      --serp-bg-elevated: #12141a;
      --serp-fg: #e8e4dc;
      --serp-fg-muted: #a0a0a0;
      --serp-accent: #d4a853;
      --serp-accent-glow: rgba(212, 168, 83, 0.5);
      --serp-green: #00c896;
      --serp-card: rgba(18, 20, 26, 0.85);
      --serp-border: rgba(212, 168, 83, 0.25);
      --spotlight-bg: radial-gradient(circle, var(--serp-accent-glow) 0%, transparent 70%);
    }

    /* ===== RESET CONTEXTUAL ===== */
    .spwp-wrapper *,
    .spwp-wrapper *::before,
    .spwp-wrapper *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

  .spwp-wrapper {
      font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background-color: var(--serp-bg);
      color: var(--serp-fg);
      line-height: 1.6;
      position: relative;
      width: 100%;
    }

    .spwp-wrapper .font-display {
      font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    }

    .spwp-wrapper img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .spwp-wrapper a {
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .spwp-wrapper a:hover {
      color: var(--serp-green);
    }

    .spwp-wrapper button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }
 /* ===== EFECTO SPOTLIGHT ===== */
    .spwp-spotlight {
      position: fixed;
      width: 700px;
      height: 700px;
      border-radius: 50%;
      background: var(--spotlight-bg);
      pointer-events: none;
      z-index: 99999;     
      transform: translate(-50%, -50%);
      opacity: 1;
      transition: opacity 0.3s ease;
      display: block;
      visibility: visible !important;
      mix-blend-mode: screen; 
    }

    @media (hover: none) and (pointer: coarse) {
      .spwp-spotlight { display: none; }
    }
    .spwp-noise {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

    /* ===== CONTENEDOR ===== */
    .spwp-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 20px; /* Padding móvil */
    }
    @media (min-width: 768px) {
        .spwp-container { padding: 0 40px; }
    }

    /* ===== HERO SECTION ===== */
    .spwp-hero {
      position: relative;
      min-height: 100vh;
      padding-top: 1rem;
      overflow: hidden;
    }

    .spwp-hero-bg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 168, 83, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(0, 200, 150, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, var(--serp-bg) 0%, var(--serp-bg-elevated) 100%);
    }

    .spwp-hero-grid {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: 
        linear-gradient(var(--serp-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--serp-border) 1px, transparent 1px);
      background-size: 60px 60px;
      opacity: 1; 
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 80%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0.5) 80%, transparent 100%);
    }

    .spwp-hero-content {
      position: relative;
      z-index: 10;
      max-width: 1440px;
      margin: 0 auto;
      padding: 1rem 10px 3rem;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .spwp-hero-title-wrapper {
      width: 100%;
      text-align: center;
      margin-bottom: 1rem;
    }

    /* === TIPOGRAFÍA CORREGIDA HERO === */
    .spwp-hero-title {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: clamp(1.8rem, 6vw, 4rem); 
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
      margin-top: 2rem;
      color: var(--serp-fg);
    }

    /* MODO CLARO: sin color en encabezados */
    .spwp-hero-title-accent {
      display: block;
      color: var(--serp-fg);
    }
    /* MODO OSCURO: restaurar color */
    html.asap-dark-mode .spwp-wrapper .spwp-hero-title-accent {
      color: var(--serp-accent);
    }

    .spwp-hero-subtitle {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: clamp(1.2rem, 4vw, 2.5rem);
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: var(--serp-fg);
    }
    html.asap-dark-mode .spwp-wrapper .spwp-hero-subtitle {
      color: var(--serp-green);
    }

    .spwp-typing-cursor {
      display: inline-block;
      width: 3px;
      height: 1em;
      background: var(--serp-accent);
      margin-left: 4px;
      animation: serpion-blink 1s infinite;
      vertical-align: text-bottom;
    }

    @keyframes serpion-blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }

    .spwp-hero-grid-layout {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      align-items: center;
    }

    @media (min-width: 1024px) {
      .spwp-hero-grid-layout { grid-template-columns: 1fr 1fr; }
    }

    /* Hero Columna Texto */
    .spwp-hero-text { text-align: center; }

    @media (min-width: 1024px) {
      .spwp-hero-text { text-align: left; }
    }

    .spwp-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      border: 1px solid var(--serp-border);
      background-color: var(--serp-card);
      margin-bottom: 1.5rem;
    }

    .spwp-hero-badge-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background-color: var(--serp-green);
      animation: serpion-pulse 2s infinite;
    }

    @keyframes serpion-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .spwp-hero-badge-text {
      font-size: 0.85rem;
      color: var(--serp-fg-muted);
    }

    /* Headline H3 dentro del Hero - MODO CLARO sin color */
    .spwp-hero-headline {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: clamp(1.1rem, 3vw, 2rem);
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: 1.5rem;
      color: var(--serp-fg);
    }
    html.asap-dark-mode .spwp-wrapper .spwp-hero-headline {
      color: #2471a3;
    }

    .spwp-hero-headline-accent {
      display: block;
      color: var(--serp-fg);
    }
    html.asap-dark-mode .spwp-wrapper .spwp-hero-headline-accent {
      color: var(--serp-accent);
    }

    .spwp-hero-description {
      font-size: 1rem;
      color: var(--serp-fg-muted);
      line-height: 1.7;
      max-width: 36rem;
      margin: 0 auto 2rem;
    }
    .spwp-hero-description p {
      color: var(--serp-fg-muted);
    }
    @media (min-width: 1024px) {
      .spwp-hero-description {
        margin-left: 0;
        margin-right: 0;
        font-size: 1.125rem;
      }
    }

    .spwp-hero-description strong {
      color: var(--serp-fg);
    }

    .spwp-hero-tagline {
      display: inline-block;
      margin-top: 1rem;
      font-family: monospace, monospace;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--serp-fg-muted);
    }
    html.asap-dark-mode .spwp-wrapper .spwp-hero-tagline {
      color: var(--serp-accent);
    }

    /* Botones */
    .spwp-btn-group {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
      margin-bottom: 2rem;
    }

    @media (min-width: 640px) {
      .spwp-btn-group {
        flex-direction: row;
      }
    }

    @media (min-width: 1024px) {
      .spwp-btn-group {
        justify-content: flex-start;
      }
    }

    .spwp-btn-primary {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.9rem 1.8rem;
      background-color: var(--serp-accent);
      color: #fff;
      font-weight: 700;
      border-radius: 0.75rem;
      overflow: hidden;
      transition: box-shadow 0.3s ease;
    }
    
    body:not(.reading-mode) .spwp-btn-primary {
        color: #fff;
    }

    .spwp-btn-primary:hover {
      box-shadow: 0 0 28px var(--serp-accent-glow);
    }

    .spwp-btn-primary::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }

    .spwp-btn-primary:hover::before {
      transform: translateX(100%);
    }

    .spwp-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.9rem 1.8rem;
      border: 1px solid var(--serp-border);
      color: var(--serp-fg);
      font-weight: 600;
      border-radius: 0.75rem;
      background-color: transparent;
      transition: background-color 0.2s ease;
    }

    .spwp-btn-secondary:hover {
      background-color: var(--serp-card);
    }
    
    /* Ajuste tamaño iconos unicode en botones */
    .spwp-btn-primary span.icon-unicode,
    .spwp-btn-secondary span.icon-unicode {
        font-size: 1.2em;
        line-height: 1;
    }

    /* Stats */
    .spwp-hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding-top: 2rem;
      border-top: 1px solid var(--serp-border);
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
    }
    @media (min-width: 640px) {
        .spwp-hero-stats {
            gap: 1.5rem;
            max-width: 100%;
        }
    }

    .spwp-stat-number {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      font-weight: 900;
      color: var(--serp-fg);
    }

    .spwp-stat-number--accent { color: var(--serp-fg); }
    .spwp-stat-number--green { color: var(--serp-fg); }
    
    html.asap-dark-mode .spwp-wrapper .spwp-stat-number--accent {
      color: var(--serp-accent);
    }
    html.asap-dark-mode .spwp-wrapper .spwp-stat-number--green {
      color: var(--serp-green);
    }

    .spwp-stat-label {
      font-size: 0.75rem;
      color: var(--serp-fg-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Hero Columna Visual */
    .spwp-hero-visual { 
    position: relative; }

    @media (min-width: 1024px) {
      .spwp-hero-visual { display: block; }
    }

    .spwp-hero-visual-card {
      position: relative;
      background-color: var(--serp-card);
      border: 1px solid var(--serp-border);
      border-radius: 1.5rem;
      padding: 2rem;
    }
/* Hacer que la imagen ocupe todo el espacio disponible */
.spwp-hero-visual-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem; /* Para que coincida con el border-radius del contenedor */
}
    .spwp-hero-visual-card::before {
      content: '';
      position: absolute;
      top: -1px; left: -1px; right: -1px; bottom: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, var(--serp-accent), transparent 50%, var(--serp-green));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .spwp-hero-visual-inner {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: 1rem;
      background: linear-gradient(135deg, var(--serp-bg-elevated), var(--serp-bg));
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .spwp-hero-visual-icon {
      width: 16rem; height: 16rem;
      color: var(--serp-accent);
      opacity: 0.2;
    }

    .spwp-hero-visual-tag {
      position: absolute;
      padding: 0.375rem 0.75rem;
      border-radius: 0.25rem;
      font-family: monospace, monospace;
      font-size: 0.75rem;
    }

    .spwp-hero-visual-tag--green2 { color: var(--serp-green); opacity: 0.7; top:10%; left:5%; }
    .spwp-hero-visual-tag--accent { color: var(--serp-accent); opacity: 0.7; top:13%; right:5%; }
    .spwp-hero-visual-tag--muted { color: var(--serp-fg-muted); opacity: 0.7; bottom: 15%; left: 5%; }
    .spwp-hero-visual-tag--green { color: var(--serp-green); opacity: 0.7; bottom:10%; right:5%; }
    .spwp-tag--center { bottom: 6%; left: 50%; transform: translateX(-50%); font-size: 1rem !important; color: var(--serp-accent); }

    .spwp-hero-visual-case {
      margin-top: 1.5rem;
      padding: 1rem;
      background-color: var(--serp-bg);
      border-radius: 0.75rem;
      border: 1px solid var(--serp-border);
    }

    .spwp-hero-visual-case-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }

    .spwp-hero-visual-case-icon {
      width: 2rem; height: 2rem;
      border-radius: 50%;
      background-color: rgba(212, 168, 83, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--serp-accent);
      font-size: 1rem; /* Size for unicode icon */
    }

    .spwp-hero-visual-case-title { font-weight: 600; font-size: 0.875rem; }
    .spwp-hero-visual-case-subtitle { font-size: 0.75rem; color: var(--serp-fg-muted); }

    .spwp-hero-visual-case-tags {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    /* ===== SECTIONS ===== */
    .spwp-section {
      padding: 4rem 0;
      position: relative;
    }
    @media (min-width: 768px) {
        .spwp-section { padding: 6rem 0; }
    }

    .spwp-section--elevated { background-color: var(--serp-bg-elevated); }
    .spwp-section--gradient { overflow: hidden; }

    .spwp-section--gradient::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, rgba(212, 168, 83, 0.05) 0%, transparent 50%, rgba(0, 200, 150, 0.05) 100%);
      pointer-events: none;
    }

    /* MODO CLARO: h2 sin color */
    .spwp-about-text-wrapper h2 { color: var(--serp-fg); }
    html.asap-dark-mode .spwp-wrapper .spwp-about-text-wrapper h2 {
      color: var(--serp-accent);
    }
    
    .spwp-section-header {
      text-align: center;
      margin-bottom: 3rem;
    }
    
    .spwp-section-label {
      display: inline-block;
      font-family: monospace, monospace;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
      color: var(--serp-fg-muted);
    }

    .spwp-section-label--accent { color: var(--serp-fg-muted); }
    .spwp-section-label--green { color: var(--serp-fg-muted); }
    
    html.asap-dark-mode .spwp-wrapper .spwp-section-label--accent {
      color: var(--serp-accent);
    }
    html.asap-dark-mode .spwp-wrapper .spwp-section-label--green {
      color: var(--serp-green);
    }

    /* MODO CLARO: título de sección sin color */
    .spwp-section-title {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: clamp(1.8rem, 5vw, 3rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
      color: var(--serp-fg);
    }
    html.asap-dark-mode .spwp-wrapper .spwp-section-title {
        color: var(--serp-green);
    }

    .spwp-section-description {
      font-size: 1rem;
      color: var(--serp-fg-muted);
      max-width: 42rem;
      margin: 0 auto;
      line-height: 1.7;
    }
    @media (min-width: 768px) {
        .spwp-section-description { font-size: 1.1rem; }
    }

    /* ===== CASE CARDS ===== */
    .spwp-cases-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    @media (min-width: 768px) { .spwp-cases-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .spwp-cases-grid { grid-template-columns: repeat(3, 1fr); } }

    .spwp-case-card {
      position: relative;
      background-color: var(--serp-card);
      border: 1px solid var(--serp-border);
      border-radius: 1rem;
      padding: 1.5rem;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    }

    .spwp-case-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 60px var(--serp-accent-glow);
    }

    .spwp-case-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, var(--serp-accent) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .spwp-case-card:hover::after { opacity: 0.1; }

    .spwp-case-card-inner { position: relative; z-index: 10; }

    .spwp-case-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }

    /* Badges */
    .spwp-badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      font-size: 0.7rem;
      font-weight: 600;
      border-radius: 9999px;
    }

    .spwp-badge--red { background-color: rgba(239, 68, 68, 0.15); color: #000; font-weight: bold;}
    .spwp-badge--blue { background-color: rgba(59, 130, 246, 0.15); color: #000; font-weight: bold;}
    .spwp-badge--purple { background-color: rgba(168, 85, 247, 0.15); color: #000; font-weight: bold;}
    .spwp-badge--orange { background-color: rgba(249, 115, 22, 0.15); color: #000; font-weight: bold;}
    .spwp-badge--pink { background-color: rgba(236, 72, 153, 0.15); color: #000; font-weight: bold;}
    .spwp-badge--green { background-color: rgba(0, 200, 150, 0.15); color: #000; font-weight: bold;}

    /* MODO CLARO: título de tarjeta sin color */
    .spwp-case-card-title {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      transition: color 0.2s ease;
      color: var(--serp-fg);
      line-height: 1.3;
    }
    body:not(.reading-mode) .spwp-case-card-title {
        color: var(--serp-fg);
    }
    
    html.asap-dark-mode .spwp-wrapper .spwp-case-card-title {
      color: var(--serp-accent);
    }

    .spwp-case-card:hover .spwp-case-card-title {
      color: var(--serp-accent);
      text-decoration: underline;
    }

    .spwp-case-card-text {
      font-size: 0.9rem;
      color: var(--serp-fg-muted);
      line-height: 1.6;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .spwp-case-card-text strong { color: var(--serp-fg); }

    /* Links Section */
    .spwp-links-section {
      text-align: center;
      margin-top: 3rem;
    }

    .spwp-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--serp-accent);
      font-weight: 600;
      transition: text-decoration 0.2s ease;
    }

    .spwp-link:hover { text-decoration: underline; }

    /* ===== ABOUT SECTION ===== */
    .spwp-about-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      align-items: center;
    }

    @media (min-width: 1024px) { .spwp-about-grid { grid-template-columns: 1fr 1fr; } }

    .spwp-about-image-wrapper { position: relative; }

    .spwp-about-image-glow {
      position: absolute;
      top: -1rem; left: -1rem; right: -1rem; bottom: -1rem;
      background: linear-gradient(135deg, rgba(212, 168, 83, 0.15), rgba(0, 200, 150, 0.15));
      border-radius: 2rem;
      filter: blur(3rem);
    }

    .spwp-about-image-card {
      position: relative;
      background-color: var(--serp-card);
      border: 1px solid var(--serp-border);
      border-radius: 1.5rem;
      padding: 0.5rem;
    }

    .spwp-about-image-container {
      position: relative;
      aspect-ratio: 16 / 9;
      background-color: var(--serp-bg);
      border-radius: 0.75rem;
      overflow: hidden;
    }

    .spwp-about-image-overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, rgba(212, 168, 83, 0.1), transparent);
    }

    .spwp-about-image-gradient {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 66%;
      background: linear-gradient(to top, var(--serp-bg-elevated), transparent);
    }

    .spwp-about-image {
      width: 100%; height: 100%;
      object-fit: cover;
    }

    .spwp-about-quote {
      margin-top: 1.5rem;
      font-size: 1rem;
      font-style: italic;
      color: var(--serp-fg-muted);
      line-height: 1.6;
    }

    .spwp-about-cite {
      display: block;
      margin-top: 1rem;
      font-size: 0.875rem;
      font-style: normal;
      color: var(--serp-fg-muted);
    }

    .spwp-about-cite-accent { color: var(--serp-fg-muted); }
    html.asap-dark-mode .spwp-wrapper .spwp-about-cite-accent {
      color: var(--serp-accent);
    }

    .spwp-about-text-wrapper { position: relative; z-index: 10; }

    .spwp-about-text p {
      color: var(--serp-fg-muted);
      line-height: 1.7;
      margin-bottom: 1rem;
    }
    .spwp-about-text p:last-child { margin-bottom: 0; }
    .spwp-about-text .spwp-text-accent { color: var(--serp-fg); font-weight: 600; }
    .spwp-about-text .spwp-text-bold { color: var(--serp-fg); font-weight: 600; }
    
    html.asap-dark-mode .spwp-wrapper .spwp-about-text .spwp-text-accent {
      color: var(--serp-accent);
    }

    .spwp-about-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 2rem;
    }

    .spwp-chip {
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      background-color: var(--serp-card);
      border: 1px solid var(--serp-border);
      font-size: 0.85rem;
      border-color: var(--serp-border);
      font-weight: bold;
      color: var(--serp-fg);
    }
    
    html.asap-dark-mode .spwp-wrapper .spwp-chip {
      border-color: #f97316;
    }

    /* ===== METHODS SECTION ===== */
    .spwp-methods-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    @media (min-width: 640px) { .spwp-methods-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .spwp-methods-grid { grid-template-columns: repeat(4, 1fr); } }

    .spwp-method-card {
      position: relative;
      padding: 1.5rem;
      background-color: var(--serp-card);
      border: 1px solid var(--serp-border);
      border-radius: 1rem;
      height: 100%;
      transition: border-color 0.3s ease;
    }

    .spwp-method-card:hover { border-color: rgba(212, 168, 83, 0.5); }

    .spwp-method-icon {
      width: 3rem; height: 3rem;
      border-radius: 0.75rem;
      background: linear-gradient(135deg, rgba(212, 168, 83, 0.15), rgba(0, 200, 150, 0.15));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--serp-accent);
      margin-bottom: 1rem;
      transition: transform 0.3s ease;
      font-size: 1.5rem; /* Tamaño para iconos unicode */
    }
    .spwp-method-card:hover .spwp-method-icon { transform: scale(1.1); }

    /* MODO CLARO: título de método sin color */
    .spwp-method-title {
      font-family: 'Crimson Pro', Georgia, serif;
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--serp-fg);
    }
    body:not(.reading-mode) .spwp-method-title { 
      color: var(--serp-fg); 
    }
    
    html.asap-dark-mode .spwp-wrapper .spwp-method-title {
      color: var(--serp-accent);
    }

    .spwp-method-text {
      font-size: 0.85rem;
      color: var(--serp-fg-muted);
      line-height: 1.5;
    }

    /* ===== FOOTER ===== */
    .spwp-footer {
      padding: 3rem 0;
      border-top: 1px solid var(--serp-border);
      background-color: var(--serp-bg);
      text-align: center;
      color: var(--serp-fg-muted);
      font-size: 0.875rem;
    }

    /* ===== FOCUS STATES ===== */
    .spwp-wrapper a:focus-visible,
    .spwp-wrapper button:focus-visible {
      outline: 2px solid var(--serp-accent);
      outline-offset: 3px;
    }

.spwp-section-box {
background:rgba(15,52,96,0.3);
border-radius:16px;
padding:2.5rem;
border:1px solid rgba(0,217,255,0.2);
}

/* Custom Labels - MODO CLARO sin color */
.spwp-section-label--cyan { color: var(--serp-fg-muted); }
.spwp-section-label--orange { color: var(--serp-fg-muted); }
.spwp-method-icon--cyan { color: var(--serp-fg-muted); }
.spwp-method-icon--orange { color: var(--serp-fg-muted); }

/* Restaurar colores en modo oscuro */
html.asap-dark-mode .spwp-wrapper .spwp-section-label--cyan { color: #0ea5e9; }
html.asap-dark-mode .spwp-wrapper .spwp-section-label--orange { color: #f97316; }
html.asap-dark-mode .spwp-wrapper .spwp-method-icon--cyan { color: #0ea5e9; }
html.asap-dark-mode .spwp-wrapper .spwp-method-icon--orange { color: #f97316; }

.spwp-about-image-glow--cyan { background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(0, 200, 150, 0.15)); }
.spwp-about-image-glow--orange { background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(212, 168, 83, 0.15)); }
.spwp-about-image-gradient--cyan { background: linear-gradient(to top, var(--serp-bg-elevated), transparent); }
.spwp-about-image-gradient--orange { background: linear-gradient(to top, var(--serp-bg-elevated), transparent); }