/* ============================================================
   07 — WORKSHOP — Página dedicada /workshop
   ============================================================
   Estilos exclusivos de workshop.html. NO se cargan en index.
   Los selectores .workshop-* no colisionan con servicios.
   ============================================================ */

/* === HERO WORKSHOP (overrides sutiles sobre .hero base) === */
.hero.workshop-hero {
    background:
      radial-gradient(ellipse at 80% 20%, rgba(196, 18, 26, 0.06), transparent 55%),
      radial-gradient(ellipse at 10% 90%, rgba(232, 223, 209, 0.45), transparent 60%),
      var(--paper);
  }
  .hero.workshop-hero h1 .block:nth-child(2) {
    font-style: italic;
  }
  .hero.workshop-hero h1 em {
    font-style: italic;
    color: var(--red);
  }

  /* === NAV ACTIVO === */
  #nav ul li a.nav-active {
    color: var(--red);
    border-bottom: 1px solid var(--red);
    padding-bottom: 2px;
  }

  /* === CONTENEDORES BASE DE SECCIONES === */
  .workshop-section {
    padding: 120px 48px;
    background: var(--paper);
    position: relative;
  }
  .workshop-inner {
    max-width: 1180px;
    margin: 0 auto;
  }
  .workshop-section + .workshop-section {
    border-top: 1px solid var(--line);
  }

  .section-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--red);
    margin-bottom: 32px;
  }
  .workshop-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(40px, 5.2vw, 68px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 28px;
    max-width: 900px;
  }
  .workshop-section h2 em {
    font-style: italic;
    color: var(--red);
  }
  .section-lead {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2vw, 26px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 780px;
    margin-bottom: 64px;
  }

  /* === 01 · DOS COLUMNAS + TESIS === */
  .workshop-section-intro {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  }
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-bottom: 64px;
  }
  .two-col h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 400;
    font-style: italic;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    line-height: 1.2;
  }
  .two-col p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 16px;
  }

  .workshop-tesis {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2.1vw, 26px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: var(--ink);
    border-left: 3px solid var(--red);
    padding: 8px 0 8px 32px;
    max-width: 880px;
  }
  .workshop-tesis cite {
    display: block;
    margin-top: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    font-style: normal;
    font-weight: 500;
  }

  /* === 02 · PILARES === */
  .workshop-pillars {
    background: var(--paper-warm);
  }
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .pillar {
    background: var(--paper);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background 0.4s;
  }
  .pillar:hover {
    background: var(--paper-warm);
  }
  .pillar-num {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-style: italic;
    color: var(--red);
    letter-spacing: 0.06em;
  }
  .pillar h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ink);
  }
  .pillar p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0;
  }

  /* === 03 · AGENDA MINUTADA === */
  .workshop-agenda {
    background: var(--paper);
  }
  .agenda-wrap {
    overflow-x: auto;
    margin-bottom: 56px;
    border: 1px solid var(--line);
  }
  .agenda-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    background: var(--paper);
  }
  .agenda-table th,
  .agenda-table td {
    text-align: left;
    padding: 22px 26px;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
  }
  .agenda-table th {
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    background: var(--paper-warm);
    border-bottom: 1px solid var(--ink);
  }
  .agenda-table tbody tr:last-child td {
    border-bottom: none;
  }
  .agenda-table tbody tr {
    transition: background 0.3s;
  }
  .agenda-table tbody tr:hover {
    background: var(--paper-warm);
  }
  .agenda-table td:first-child {
    white-space: nowrap;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-style: italic;
    color: var(--red);
    width: 1%;
  }
  .agenda-table td:first-child .rng {
    display: block;
  }
  .agenda-table td:first-child .dur {
    display: block;
    margin-top: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .agenda-table td:nth-child(2) {
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    color: var(--ink);
    width: 26%;
  }
  .agenda-table td:nth-child(2) strong {
    font-weight: 400;
  }
  .agenda-table td:last-child {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
  }

  .agenda-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 2.3vw, 32px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ink);
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .agenda-quote cite {
    display: block;
    margin-top: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
    font-style: normal;
    font-weight: 500;
  }

  /* === 04 · ENTREGABLES === */
  .workshop-deliverables {
    background: var(--paper-warm);
  }
  .deliverables-list {
    list-style: none;
    padding: 0;
    margin: 0 0 72px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
  }
  .deliverables-list li {
    background: var(--paper);
    padding: 24px 28px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    position: relative;
    padding-left: 56px;
    transition: background 0.3s;
  }
  .deliverables-list li:hover {
    background: var(--paper-warm);
  }
  .deliverables-list li::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 32px;
    width: 14px;
    height: 1px;
    background: var(--red);
  }

  .investment {
    max-width: 780px;
  }
  .investment h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    font-style: italic;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }
  .investment-lead {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .investment-lead strong {
    font-style: normal;
    font-weight: 500;
    color: var(--red);
  }
  .investment-detail {
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-soft);
  }

  /* === 05 · PRÓXIMO EVENTO === */
  .workshop-next {
    background: var(--ink);
    color: var(--paper);
  }
  .workshop-next .section-eyebrow {
    color: var(--bone);
  }
  .workshop-next h2 {
    color: var(--paper);
  }
  .workshop-next h2 em {
    color: var(--red);
  }
  .workshop-next .section-lead {
    color: rgba(251, 249, 245, 0.78);
  }
  .next-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 48px;
  }
  .next-item {
    background: var(--ink);
    padding: 28px 26px;
  }
  .next-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bone);
    margin-bottom: 12px;
  }
  .next-value {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--paper);
    line-height: 1.35;
  }
  .next-note {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    color: rgba(251, 249, 245, 0.85);
    max-width: 720px;
    line-height: 1.5;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* === 06 · CTA CIERRE === */
  .workshop-cta-section {
    background: var(--paper);
    text-align: center;
    padding: 140px 48px 160px;
  }
  .workshop-cta-section .workshop-inner {
    max-width: 920px;
  }
  .cta-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 4.8vw, 64px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 auto 32px;
    max-width: 880px;
  }
  .cta-headline em {
    font-style: italic;
    color: var(--red);
  }
  .workshop-cta-section .cta-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 48px;
  }
  .workshop-cta-section .cta-actions {
    display: flex;
    justify-content: center;
  }
  .btn-primary.btn-large {
    padding: 22px 52px;
    font-size: 12px;
    letter-spacing: 0.32em;
  }

  /* === RESPONSIVE === */
  @media (max-width: 900px) {
    .workshop-section {
      padding: 80px 22px;
    }
    .workshop-section h2 {
      margin-bottom: 22px;
    }
    .section-lead {
      margin-bottom: 44px;
    }
    .two-col {
      grid-template-columns: 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .pillars-grid {
      grid-template-columns: 1fr;
    }
    .pillar {
      padding: 36px 28px;
    }
    .agenda-table td:nth-child(2) {
      width: auto;
    }
    .agenda-table th,
    .agenda-table td {
      padding: 16px 18px;
    }
    .deliverables-list {
      grid-template-columns: 1fr;
    }
    .next-meta {
      grid-template-columns: 1fr;
    }
    .workshop-cta-section {
      padding: 90px 22px 110px;
    }
  }

  /* ============================================================
     === LOBOS — Página de captura post-workshop /lobos =========
     ============================================================
     Hero compacto + 4 preguntas reflexivas + datos contacto +
     3 opt-ins + bloque éxito con cupón LOBOS20.
     Form-name Netlify: "lobos-reflexion"
     ============================================================ */

  /* HERO compacto */
  .lobos-hero {
    padding: 110px 48px 50px;
    background:
      radial-gradient(ellipse at 80% 10%, rgba(196, 18, 26, 0.07), transparent 55%),
      radial-gradient(ellipse at 0% 100%, rgba(232, 223, 209, 0.5), transparent 60%),
      var(--paper);
    text-align: center;
    border-bottom: 1px solid var(--line);
  }
  .lobos-hero-inner {
    max-width: 860px;
    margin: 0 auto;
  }
  .lobos-hero .section-eyebrow {
    margin-bottom: 28px;
  }
  .lobos-hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(40px, 6vw, 78px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .lobos-hero h1 em { color: var(--red); }
  .lobos-hero .section-lead {
    margin: 0 auto;
    max-width: 580px;
    font-size: clamp(18px, 1.6vw, 22px);
  }

  /* Sección formulario */
  .lobos-form-section {
    padding: 80px 48px 120px;
  }
  .lobos-form-inner {
    max-width: 760px;
    margin: 0 auto;
  }

  /* Bloque pregunta */
  .lobos-q {
    margin-bottom: 56px;
  }
  .lobos-q-num {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--red);
    margin-bottom: 14px;
  }
  .lobos-q h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 18px;
  }

  /* Wrapper textarea + counter */
  .lobos-textarea-wrap {
    position: relative;
  }
  .lobos-textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 14px 16px 32px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    resize: vertical;
    min-height: 110px;
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s;
  }
  .lobos-textarea:focus { border-color: var(--ink); }
  .lobos-counter {
    position: absolute;
    bottom: 10px;
    right: 14px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--muted);
    pointer-events: none;
    transition: color 0.3s;
  }
  .lobos-counter.warn { color: var(--red); }

  /* Separador entre bloques (preguntas → contacto → opt-ins) */
  .lobos-divider-label {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
    margin: 56px auto 36px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    max-width: 100%;
  }

  /* Checkboxes custom */
  .lobos-checks {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 40px;
  }
  .lobos-check {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    padding: 4px 0;
  }
  .lobos-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 1px solid var(--ink);
    background: var(--paper);
    cursor: pointer;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
  }
  .lobos-check input[type="checkbox"]:checked {
    background: var(--red);
    border-color: var(--red);
  }
  .lobos-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 6px; height: 11px;
    border-right: 2px solid var(--paper);
    border-bottom: 2px solid var(--paper);
    transform: rotate(45deg);
  }
  .lobos-check span {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* Botón submit (más espacio respiro) */
  .lobos-form-section .form-submit {
    margin-top: 24px;
  }

  /* === ÉXITO LOBOS === */
  .lobos-success {
    display: none;
    text-align: center;
    padding: 32px 0 8px;
  }
  .lobos-success.show { display: block; }
  .lobos-success-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--red);
    margin-bottom: 20px;
  }
  .lobos-success h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 24px;
  }
  .lobos-success p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 540px;
    margin: 0 auto 18px;
  }
  .lobos-success p.small {
    font-size: 13px;
    color: var(--muted);
  }

  /* Bloque cupón LOBOS20 */
  .lobos-cupon {
    border: 2px dashed var(--ink);
    padding: 36px 32px 30px;
    margin: 40px auto;
    max-width: 460px;
    background: rgba(232, 223, 209, 0.25);
  }
  .lobos-cupon-code {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: clamp(44px, 8vw, 68px);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--red);
    line-height: 1;
    margin-bottom: 14px;
  }
  .lobos-cupon-sub {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
  }

  /* CTAs del éxito */
  .lobos-success-ctas {
    margin-top: 40px;
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .lobos-success-ctas .btn-ghost {
    font-size: 11px;
  }

  /* Cita Efe 6:7 */
  .lobos-cite {
    display: block;
    margin-top: 56px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* ===== AVISO SORTEO — condicional, solo si opt-sorteo marcado ===== */
  .lobos-sorteo-aviso {
    display: none;
    text-align: center;
    background: var(--paper-warm);
    border: 2px dashed var(--red);
    padding: 28px 24px;
    margin: 32px auto;
    max-width: 540px;
  }
  .lobos-success.sorteo-on .lobos-sorteo-aviso {
    display: block;
  }
  .lobos-sorteo-aviso-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--red);
    margin-bottom: 14px;
  }
  .lobos-sorteo-aviso-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 460px;
  }
  .lobos-sorteo-aviso-text strong {
    color: var(--red);
    font-weight: 500;
  }

  /* ===== CTA Instagram destacado — borde rojo permanente + hover fill ===== */
  .btn-ig-pulse {
    border-color: var(--red);
    color: var(--red);
    font-weight: 600;
    padding: 8px 14px 6px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .btn-ig-pulse:hover {
    background: var(--red);
    color: var(--paper);
    border-color: var(--red);
    transform: translateY(-2px);
  }

  /* Pulso 4 ciclos × 1.2s = 4.8s al revelar success block (SIEMPRE, no condicional) */
  .lobos-success.show .btn-ig-pulse {
    animation: igPulse 1.2s ease-in-out 4 forwards;
  }
  @keyframes igPulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(196, 18, 26, 0.5);
    }
    50% {
      transform: scale(1.03);
      box-shadow: 0 0 0 10px rgba(196, 18, 26, 0);
    }
  }

  /* Responsive LOBOS */
  @media (max-width: 720px) {
    .lobos-hero {
      padding: 96px 22px 36px;
    }
    .lobos-form-section {
      padding: 60px 22px 90px;
    }
    .lobos-q {
      margin-bottom: 44px;
    }
    .lobos-divider-label {
      margin: 44px auto 28px;
      padding-top: 28px;
    }
    .lobos-cupon {
      padding: 28px 22px 24px;
    }
    .lobos-sorteo-aviso {
      padding: 22px 18px;
      margin: 24px auto;
    }
    .lobos-success-ctas {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }
    .lobos-success-ctas .btn-ghost {
      text-align: center;
      padding: 14px 0;
      border: 1px solid var(--ink);
    }
  }