@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;

/* ---- extracted style block 1 ---- */
.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .icon-fill {
            font-variation-settings: 'FILL' 1;
        }
        .shadow-glow {
            box-shadow: 0 8px 24px -4px rgba(227, 6, 19, 0.3);
        }
9..144,700;9..144,900&family=Manrope:wght@500;700;800&display=swap');

  #seccion-historia-marcos {
    --ink: #0f2540;
    --ink-soft: #3c536b;
    --brand: #0078a5; /* institucional */
    --brand-dark: #00677f;
    --gold: #e8a43a;
    --paper: #f6f8fb;
    --line: #d9e3ee;
    --card: #ffffff;
    font-family: 'Manrope', sans-serif;
    background-color: var(--paper);
    color: var(--ink);
  }

  /* Modo oscuro opcional */
  .dark #seccion-historia-marcos {
    --ink: #eef3f8;
    --ink-soft: #a9b9c9;
    --paper: #0b1a2b;
    --line: #1e3349;
    --card: #122236;
  }

  #seccion-historia-marcos .font-display { font-family: 'Fraunces', serif; }

  /* Patrón de fondo sutil */
  #seccion-historia-marcos .trail-bg {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
    background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
    background-size: 26px 26px;
    mask-image: radial-gradient(ellipse 60% 60% at 30% 20%, black 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 30% 20%, black 20%, transparent 75%);
  }

  /* Tarjeta 3D e Imagen */
  .portrait-wrap { perspective: 1200px; }
  .portrait {
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out, clip-path 0.6s cubic-bezier(0.65,0,0.35,1);
    will-change: transform;
  }
  .portrait img { transition: opacity 0.35s ease; }
  
  .ribbon {
    position: absolute; left: -14px; top: 28px; z-index: 10;
    background: var(--gold); color: #241503; font-weight: 800; font-size: 0.72rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.45rem 0.9rem 0.45rem 0.7rem; border-radius: 0 6px 6px 0;
    box-shadow: 0 6px 14px rgba(232,164,58,.35);
  }
  .ribbon::after {
    content: ''; position: absolute; left: 0; bottom: -8px; border-style: solid;
    border-width: 0 0 8px 14px; border-color: transparent transparent #a3671f transparent;
  }

  /* Línea de ruta interactiva */
  .stop-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 0.4rem; text-align: center;
    padding: 0.5rem 0.2rem; border-radius: 0.85rem; width: 25%;
    transition: background 0.25s ease, transform 0.2s ease;
  }
  .stop-btn:hover { background: rgba(4,154,215,.07); }
  
  .stop-node {
    flex: none; width: 34px; height: 34px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.9rem;
    border: 2.5px solid var(--line); background: var(--card); color: var(--ink-soft);
    transition: all 0.3s cubic-bezier(0.65,0,0.35,1);
    position: relative; z-index: 2;
  }
  .stop-btn.is-active .stop-node {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: 0 0 0 5px rgba(4,154,215,.15); transform: scale(1.08);
  }
  .stop-btn.is-done .stop-node { border-color: var(--brand); color: var(--brand); }
  
  .stop-title { font-weight: 800; font-size: 0.95rem; color: var(--ink); }
  .stop-sub { font-size: 0.78rem; color: var(--ink-soft); }
  .stop-btn.is-active .stop-title { color: var(--brand-dark); }
  
  /* Transición de textos */
  .story-tab-v2 { display: none; }
  .story-tab-v2.is-visible { display: block; animation: reveal-in 0.55s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes reveal-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

 /* Contenedor principal que da el efecto de profundidad (3D) */

  /* El contenedor interno que realmente gira */

  /* Solo gira cuando tiene la clase 'is-flipped' (controlada por el clic) */

  /* Estilos compartidos para ambas caras de la tarjeta */

  /* Cara frontal (Blanca) */

  /* Cara trasera (Azul oscuro - Inicia girada) */

  /* Estilos para las etiquetas (tags) dentro de la cara trasera */
  
  /*ESTILOS EXCLUSIVOS PARA LA SECCIÓN "MARCOS TE ESCUCHA"*/
  /* Animaciones para el Popup (Modal) */
  .modal-overlay {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .modal-overlay.is-active {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .modal-content {
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .modal-overlay.is-active .modal-content {
    transform: translateY(0) scale(1);
  }
  
  /* Estilo de los inputs del formulario */
  .form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #d9e3ee;
    background-color: #f6f8fb;
    color: #0f2540;
    font-size: 0.95rem;
    transition: all 0.2s ease;
  }
  .form-input:focus {
    outline: none;
    border-color: #0078a5;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 120, 165, 0.18);
  }
  
  /* Efecto de brillo en el botón principal */
  .btn-glow {
    box-shadow: 0 4px 14px 0 rgba(0, 120, 165, 0.39);
  }
  .btn-glow:hover {
    box-shadow: 0 6px 20px rgba(0, 120, 165, 0.23);
  }

/* ---- extracted style block 2 ---- */
@keyframes typing {
    0%, 10% { width: 0; }
    40%, 75% { width: 100%; }
    95%, 100% { width: 0; }
  }
  @keyframes blink-cursor {
    0%, 100% { border-color: transparent; }
    50% { border-color: #ffffff; }
  }
  @keyframes alternar-1 {
    0%, 49.9% { opacity: 1; visibility: visible; z-index: 2; }
    50%, 100% { opacity: 0; visibility: hidden; z-index: 0; }
  }
  @keyframes alternar-2 {
    0%, 49.9% { opacity: 0; visibility: hidden; z-index: 0; }
    50%, 100% { opacity: 1; visibility: visible; z-index: 2; }
  }
  .frase-1,
  .frase-2 {
    position: relative;
    display: inline-block;
    text-align: left;
    max-width: 100%;
  }
  .frase-1 { animation: alternar-1 12s infinite; }
  .frase-2 { animation: alternar-2 12s infinite; }

  .escribir-1,
  .escribir-2 {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    overflow: hidden !important;
    white-space: nowrap !important;
    box-sizing: border-box;
    max-width: 100%;
    border-right: 4px solid #ffffff;
    color: #ffffff;
  }
  .escribir-1 { animation: typing 6s steps(25, end) infinite, blink-cursor 0.75s step-end infinite; }
  .escribir-2 { animation: typing 6s steps(33, end) infinite, blink-cursor 0.75s step-end infinite; }
  
 /* ESTILOS EXCLUSIVOS PARA LA SECCIÓN DEL PLAN */
  
  /* Cara Frontal */
  
  /* Cara Posterior (Reverso) */

  /* Etiquetas (Píldoras) para el contenido del reverso */

/* ---- extracted style block 3 ---- */
/* Clases auxiliares para las transiciones */
  .tab-active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    position: relative !important;
  }
  .btn-active span:first-child {
    background-color: #0078a5;
    border-color: #5cc4f0;
    color: white;
  }
  .btn-active span:last-child {
    color: #2563eb;
  }