@extends('layouts.app')

@section('title', 'Selfiando — Todas las fotos de tu evento en un solo lugar')

@push('head')
<style>
  body {
    background: radial-gradient(circle at top, #0f172a 0, #020617 45%, #000 100%);
    color: #f9fafb;
  }

  .sf-section {
    padding: 4rem 0;
  }

  .sf-hero {
    border-radius: 1.75rem;
    padding: 2.75rem 2.5rem;
    background:
      radial-gradient(circle at 10% 0%, rgba(56,189,248,.22), transparent 55%),
      radial-gradient(circle at 90% 100%, rgba(129,140,248,.25), transparent 55%),
      rgba(15,23,42,.96);
    border: 1px solid rgba(148,163,184,.3);
    position: relative;
    overflow: hidden;
  }

  .sf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 0 0, rgba(248,250,252,.08), transparent 55%),
      radial-gradient(circle at 100% 100%, rgba(148,163,184,.18), transparent 55%);
    mix-blend-mode: screen;
    opacity: .7;
  }

  .sf-hero-inner {
    position: relative;
    z-index: 1;
  }

  .sf-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .9rem;
    border-radius: 999px;
    background: rgba(15,23,42,.9);
    border: 1px solid rgba(148,163,184,.55);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #e5e7eb;
  }

  .sf-kicker span.badge-pill {
    background: rgba(56,189,248,.15);
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .7rem;
    border: 1px solid rgba(56,189,248,.5);
  }

  .sf-hero h1 {
    font-size: clamp(2.1rem, 3vw + 1rem, 3.2rem);
    font-weight: 800;
    line-height: 1.05;
    margin-top: 1.2rem;
    margin-bottom: 1rem;
  }

  .sf-hero-gradient {
    background: linear-gradient(135deg, #38bdf8, #a855f7, #f97316);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .sf-hero p.lead {
    font-size: 1.05rem;
    color: #e5e7eb;
    max-width: 32rem;
  }

  .sf-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.75rem;
  }

  .sf-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .02em;
    border: none;
    text-decoration: none;
    background: linear-gradient(135deg, #38bdf8, #a855f7);
    color: #0b1120;
    box-shadow: 0 18px 45px rgba(56,189,248,.35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }

  .sf-btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 24px 60px rgba(56,189,248,.55);
    color: #020617;
  }

  .sf-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .01em;
    border: 1px solid rgba(148,163,184,.8);
    background: rgba(15,23,42,.75);
    color: #e5e7eb;
    text-decoration: none;
    gap: .5rem;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
  }

  .sf-btn-ghost:hover {
    background: rgba(15,23,42,1);
    border-color: #38bdf8;
    transform: translateY(-1px);
    color: #f9fafb;
  }

  .sf-hero-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: center;
    margin-top: 2rem;
    font-size: .9rem;
    color: #cbd5f5;
  }

  .sf-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.7);
    background: rgba(15,23,42,.9);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .sf-hero-phone {
    position: relative;
    max-width: 320px;
    margin-inline: auto;
  }

  .sf-hero-card {
    border-radius: 1.5rem;
    padding: 1.2rem;
    background: radial-gradient(circle at top, rgba(15,23,42,1), rgba(15,23,42,.9));
    border: 1px solid rgba(148,163,184,.5);
    box-shadow: 0 20px 55px rgba(15,23,42,.85);
  }

  .sf-qr {
    width: 88px;
    height: 88px;
    border-radius: 1rem;
    border: 1px dashed rgba(148,163,184,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9ca3af;
    background: rgba(15,23,42,1);
  }

  .sf-hero-gallery-strip {
    margin-top: 1.1rem;
    display: flex;
    gap: .5rem;
    overflow: hidden;
  }

  .sf-hero-thumb {
    flex: 1;
    border-radius: 1rem;
    aspect-ratio: 3/4;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
  }

  .sf-hero-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,23,42,.75), transparent);
  }

  .sf-hero-thumb-label {
    position: absolute;
    left: .6rem;
    bottom: .4rem;
    font-size: .7rem;
    font-weight: 500;
    color: #e5e7eb;
    z-index: 1;
  }

  .sf-hero-thumb--wedding { background-image: url("https://images.pexels.com/photos/265947/pexels-photo-265947.jpeg?auto=compress&cs=tinysrgb&w=600"); }
  .sf-hero-thumb--party   { background-image: url("https://images.pexels.com/photos/169211/pexels-photo-169211.jpeg?auto=compress&cs=tinysrgb&w=600"); }
  .sf-hero-thumb--company { background-image: url("https://images.pexels.com/photos/1181555/pexels-photo-1181555.jpeg?auto=compress&cs=tinysrgb&w=600"); }

  /* Chips / etiquetas de eventos */
  .sf-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.2rem;
  }
  .sf-chip {
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(15,23,42,.9);
    border: 1px solid rgba(148,163,184,.6);
    font-size: .82rem;
    color: #e5e7eb;
  }

  /* Sección cómo funciona */
  .sf-section-title {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .sf-section-title h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: .4rem;
  }

  .sf-section-title p {
    color: #cbd5f5;
    max-width: 38rem;
    margin: 0 auto;
    font-size: .98rem;
  }

  .sf-step-card {
    height: 100%;
    border-radius: 1.5rem;
    padding: 1.6rem 1.5rem;
    background: rgba(15,23,42,.9);
    border: 1px solid rgba(30,64,175,.7);
    box-shadow: 0 18px 40px rgba(15,23,42,.85);
    position: relative;
    overflow: hidden;
  }

  .sf-step-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 600;
    color: #f9fafb;
    background: radial-gradient(circle at top, #38bdf8, #a855f7);
    margin-bottom: .8rem;
  }

  .sf-step-card h3 {
    font-size: 1.05rem;
    margin-bottom: .4rem;
  }

  .sf-step-card p {
    font-size: .94rem;
    color: #cbd5f5;
  }

  /* Sección eventos */
  .sf-event-pill {
    padding: .65rem .95rem;
    border-radius: 999px;
    background: rgba(15,23,42,.9);
    border: 1px solid rgba(148,163,184,.7);
    font-size: .88rem;
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .25rem;
  }

  /* Planes / precios */
  .sf-pricing-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0,1fr));
    gap: 1.4rem;
  }

  @media (min-width: 768px) {
    .sf-pricing-grid {
      grid-template-columns: repeat(3, minmax(0,1fr));
    }
  }

  .sf-pricing-card {
    border-radius: 1.5rem;
    padding: 1.8rem 1.6rem;
    background: rgba(15,23,42,.9);
    border: 1px solid rgba(55,65,81,.9);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
  }

  .sf-pricing-card.sf-featured {
    border-color: #38bdf8;
    box-shadow: 0 24px 70px rgba(56,189,248,.4);
    position: relative;
  }

  .sf-pricing-tag {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(56,189,248,.15);
    border: 1px solid rgba(56,189,248,.7);
    color: #e5e7eb;
  }

  .sf-price {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: .3rem;
  }

  .sf-price span {
    font-size: .9rem;
    font-weight: 400;
    color: #cbd5f5;
  }

  .sf-pricing-card ul {
    list-style: none;
    padding-left: 0;
    margin: 1rem 0;
    font-size: .93rem;
    color: #e5e7eb;
  }

  .sf-pricing-card li {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin-bottom: .4rem;
  }

  .sf-pricing-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #38bdf8;
    margin-top: .35rem;
  }

  .sf-pricing-cta {
    margin-top: 1rem;
  }

  /* Testimonios */
  .sf-testimonial-card {
    border-radius: 1.5rem;
    padding: 1.4rem 1.3rem;
    background: rgba(15,23,42,.9);
    border: 1px solid rgba(30,64,175,.7);
    font-size: .9rem;
    color: #e5e7eb;
    height: 100%;
  }

  .sf-testimonial-name {
    margin-top: .8rem;
    font-weight: 600;
    color: #cbd5f5;
    font-size: .9rem;
  }

  /* FAQ */
  .sf-faq-item {
    border-bottom: 1px solid rgba(55,65,81,.9);
    padding: 1rem 0;
  }

  .sf-faq-item:last-child {
    border-bottom: none;
  }

  .sf-faq-q {
    font-weight: 600;
    font-size: .98rem;
  }

  .sf-faq-a {
    font-size: .9rem;
    color: #cbd5f5;
    margin-top: .2rem;
  }

  /* Footer */
  .sf-footer {
    border-top: 1px solid rgba(31,41,55,.9);
    padding: 1.8rem 0 1rem;
    font-size: .85rem;
    color: #9ca3af;
  }

  .sf-footer a {
    color: #e5e7eb;
    text-decoration: none;
  }

  .sf-footer a:hover {
    text-decoration: underline;
  }
</style>
@endpush

@section('content')
<div class="container py-5">

  {{-- HERO --}}
  <section class="sf-section pt-3">
    <div class="">
      <div class="row align-items-center sf-hero-inner">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <div class="sf-kicker">
            <span class="badge-pill">Nuevo en Chile</span>
            <span>Álbum digital para tu evento</span>
          </div>

          <h1>
            Todas las fotos de tu evento
            <span class="sf-hero-gradient">en un solo lugar</span><br>
            usando un código QR
          </h1>

          <p class="lead">
            Con selfiando.cl tus invitados suben fotos y videos desde su celular
            escaneando un código QR. Sin apps, sin complicaciones. Solo recuerdos
            increíbles de tu evento, juntos para siempre.
          </p>

          <div class="sf-hero-ctas">
            @auth
              <a href="{{ route('events.create') }}" class="sf-btn-primary">
                Comienza tu evento
              </a>
            @else
              <a href="{{ route('register') }}" class="sf-btn-primary">
                Crea tu álbum ahora
              </a>
            @endauth

            <a href="#como-funciona" class="sf-btn-ghost">
              Ver cómo funciona
              <span class="ms-1">⟶</span>
            </a>
          </div>

          <div class="sf-hero-badge-row">
            <div class="sf-pill">
              <span>⭐</span>
              <span>Ideal para bodas, fiestas y empresas</span>
            </div>
            <div class="sf-pill">
              <span>🔐</span>
              <span>Acceso privado con enlace o QR</span>
            </div>
          </div>

          <div class="sf-chip-row">
            <span class="sf-chip">Bodas</span>
            <span class="sf-chip">Cumpleaños</span>
            <span class="sf-chip">Eventos de empresa</span>
            <span class="sf-chip">Graduaciones</span>
            <span class="sf-chip">Viajes y paseos</span>
          </div>
        </div>

        <div class="col-lg-6">
          <div class="sf-hero-phone">
            <div class="sf-hero-card">
              <div class="d-flex align-items-center justify-content-between">
                <div>
                  <div style="font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:#9ca3af;">
                    Álbum en vivo
                  </div>
                  <div style="font-size:1.05rem; font-weight:600;">
                    Boda de Camila &amp; Diego
                  </div>
                  <div style="font-size:.86rem; color:#9ca3af;">
                    247 fotos · 35 videos · actualizado en tiempo real
                  </div>
                </div>
                <div class="sf-qr">
                  <span>QR<br>evento</span>
                </div>
              </div>

              <div class="sf-hero-gallery-strip">
                <div class="sf-hero-thumb sf-hero-thumb--wedding">
                  <div class="sf-hero-thumb-label">Boda</div>
                </div>
                <div class="sf-hero-thumb sf-hero-thumb--party">
                  <div class="sf-hero-thumb-label">Cumpleaños</div>
                </div>
                <div class="sf-hero-thumb sf-hero-thumb--company">
                  <div class="sf-hero-thumb-label">Empresa</div>
                </div>
              </div>

              <div class="mt-3 d-flex justify-content-between align-items-center" style="font-size:.8rem; color:#9ca3af;">
                <span>Los invitados suben sus fotos desde cualquier teléfono.</span>
                <span>📲</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- CÓMO FUNCIONA --}}
  <section id="como-funciona" class="sf-section">
    <div class="sf-section-title">
      <h2>Cómo funciona selfiando.cl</h2>
      <p>
        En 3 pasos tienes un álbum digital listo para que todos tus invitados
        compartan fotos y videos de tu evento sin instalar nada.
      </p>
    </div>

    <div class="row g-4">
      <div class="col-md-4">
        <div class="sf-step-card">
          <div class="sf-step-badge">1</div>
          <h3>Crea tu evento</h3>
          <p>
            Configura el nombre del evento, fecha y portada. Personaliza el fondo
            y el mensaje de bienvenida para que combine con tu boda, fiesta
            o evento de empresa.
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="sf-step-card">
          <div class="sf-step-badge">2</div>
          <h3>Comparte tu código QR</h3>
          <p>
            Descarga el QR o el enlace y compártelo en invitaciones, pantallas
            o impresiones en las mesas. Tus invitados solo escanean y listo:
            comienzan a subir fotos y videos.
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="sf-step-card">
          <div class="sf-step-badge">3</div>
          <h3>Disfruta todas las fotos juntos</h3>
          <p>
            Todas las fotos quedan en una sola galería, ordenadas y seguras,
            listas para descargar y revivir tu evento una y otra vez.
          </p>
        </div>
      </div>
    </div>
  </section>

  {{-- TIPOS DE EVENTOS --}}
  <section class="sf-section">
    <div class="row align-items-center g-4">
      <div class="col-lg-6">
        <div class="sf-section-title text-lg-start text-center">
          <h2>Perfecto para cualquier tipo de evento</h2>
          <p>
            Selfiando está pensado para todo: desde una boda íntima hasta
            un gran evento corporativo o un viaje entre amigos.
          </p>
        </div>

        <div class="mt-2">
          <div class="sf-event-pill">
            💍 <span>Bodas y aniversarios</span>
          </div>
          <div class="sf-event-pill">
            🎉 <span>Cumpleaños y graduaciones</span>
          </div>
          <div class="sf-event-pill">
            🏢 <span>Eventos de empresa y lanzamientos</span>
          </div>
          <div class="sf-event-pill">
            🎓 <span>Giras de estudio y paseos de curso</span>
          </div>
          <div class="sf-event-pill">
            🌎 <span>Viajes, fiestas de fin de año y más</span>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="sf-hero-card">
          <div style="font-size:.85rem; text-transform:uppercase; letter-spacing:.12em; color:#9ca3af; margin-bottom:.25rem;">
            Vista previa del álbum
          </div>
          <div style="font-weight:600; margin-bottom:.8rem;">
            Fiesta de fin de año — selfiando.cl
          </div>

          <div class="sf-hero-gallery-strip">
            <div class="sf-hero-thumb sf-hero-thumb--party">
              <div class="sf-hero-thumb-label">Fiesta</div>
            </div>
            <div class="sf-hero-thumb sf-hero-thumb--company">
              <div class="sf-hero-thumb-label">Equipo</div>
            </div>
            <div class="sf-hero-thumb sf-hero-thumb--wedding">
              <div class="sf-hero-thumb-label">Brindis</div>
            </div>
          </div>

          <div class="mt-3" style="font-size:.86rem; color:#cbd5f5;">
            <strong>Consejo:</strong> imprime el código QR en las mesas o muéstralo
            en pantalla grande para que nadie se quede sin compartir sus fotos.
          </div>
        </div>
      </div>
    </div>
  </section>

{{-- PLANES / PRECIOS DESDE BD --}}
<section id="pricing" class="sf-section">
  <div class="sf-section-title">
    <h2>Planes pensados para tu evento</h2>
    <p>
      Elige el plan que mejor se adapte a tu celebración. Paga una sola vez y
      comparte todas las fotos de tu evento en un solo lugar.
    </p>
  </div>

  @if(isset($plans) && $plans->count())
    <div class="sf-pricing-grid">

      @foreach($plans as $plan)
        <div class="sf-pricing-card {{ $plan->is_featured ? 'sf-featured' : '' }}">
          @if(!empty($plan->is_featured))
            <div class="sf-pricing-tag">Más elegido</div>
          @endif

          <div>
            {{-- Nombre del plan --}}
            <h3 style="font-size:1.05rem; font-weight:600; margin-bottom:.35rem;">
              {{ $plan->name }}
            </h3>

            {{-- Precio --}}
            <div class="sf-price">
              ${{ number_format($plan->price, 0, ',', '.') }}
              <span>/ {{ $plan->frequency_label ?? 'pago único' }}</span>
            </div>

            {{-- Descripción corta --}}
            @if(!empty($plan->short_description))
              <p style="font-size:.9rem; color:#cbd5f5;">
                {{ $plan->short_description }}
              </p>
            @endif

            {{-- Lista de características --}}
            <ul>
              {{-- 🔢 Cantidad de eventos incluidos (ajusta el nombre de columna si es distinto) --}}
              @if(!empty($plan->event_limit))
                <li>
                  <span class="sf-pricing-dot"></span>
                  <span>
                    Hasta {{ $plan->event_limit }} evento{{ $plan->event_limit > 1 ? 's' : '' }} incluidos
                  </span>
                </li>
              @endif

              {{-- ⏱️ Duración del plan (en meses o días) --}}
              @if(!empty($plan->duration_months))
                <li>
                  <span class="sf-pricing-dot"></span>
                  <span>
                    Disponible por {{ $plan->duration_months }} mes{{ $plan->duration_months > 1 ? 'es' : '' }}
                  </span>
                </li>
              @elseif(!empty($plan->duration_days))
                <li>
                  <span class="sf-pricing-dot"></span>
                  <span>
                    Disponible por {{ $plan->duration_days }} día{{ $plan->duration_days > 1 ? 's' : '' }}
                  </span>
                </li>
              @endif

              {{-- Features escritos manualmente desde la BD (uno por línea) --}}
              @if(!empty($plan->features))
                @foreach(preg_split("/\r\n|\n|\r/", $plan->features) as $feature)
                  @if(trim($feature) !== '')
                    <li>
                      <span class="sf-pricing-dot"></span>
                      <span>{{ $feature }}</span>
                    </li>
                  @endif
                @endforeach
              @endif
            </ul>
          </div>

          {{-- CTA --}}
          <div class="sf-pricing-cta">
            @guest
              <a href="{{ route('register') }}" class="sf-btn-ghost w-100 text-center">
                Elegir {{ $plan->name }}
              </a>
            @else
              @if (Route::has('events.create'))
                <a href="{{ route('events.create') }}" class="sf-btn-primary w-100 text-center">
                  Usar {{ $plan->name }} en mi evento
                </a>
              @else
                <button class="sf-btn-ghost w-100 text-center" disabled>
                  Sesión iniciada
                </button>
              @endif
            @endguest
          </div>
        </div>
      @endforeach

    </div>
  @else
    <p class="text-center text-muted">
      Pronto publicaremos los planes disponibles en selfiando.cl.
    </p>
  @endif
</section>


  {{-- TESTIMONIOS (placeholder) --}}
  <section id="reseñas" class="sf-section">
    <div class="sf-section-title">
      <h2>Lo que dicen quienes ya probaron selfiando.cl</h2>
      <p>
        Algunos comentarios reales que podrías destacar en tu sitio
        (reemplaza estos ejemplos con testimonios de tus usuarios).
      </p>
    </div>

    <div class="row g-4">
      <div class="col-md-4">
        <div class="sf-testimonial-card">
          “Nunca habíamos tenido tantas fotos de nuestra boda. Todos los invitados
          subieron sus mejores selfies y momentos. Fue como revivir el día completo.”
          <div class="sf-testimonial-name">Boda de Antonia &amp; Martín</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="sf-testimonial-card">
          “Lo usamos para la fiesta de fin de año de la empresa. En vez de perseguir
          a la gente para que nos enviara fotos por WhatsApp, todo quedó en un solo enlace.”
          <div class="sf-testimonial-name">Evento empresa TechCorp</div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="sf-testimonial-card">
          “Para el cumpleaños de 15 fue perfecto. Pusimos el QR en las mesas y en la
          pantalla gigante. Terminamos con un álbum hermoso y cero estrés.”
          <div class="sf-testimonial-name">Cumpleaños de Sofía</div>
        </div>
      </div>
    </div>
  </section>

  {{-- FAQ --}}
  <section id="faq" class="sf-section">
    <div class="row g-4">
      <div class="col-lg-6">
        <div class="sf-section-title text-lg-start text-center">
          <h2>Preguntas frecuentes</h2>
          <p>
            Responde aquí las dudas más comunes sobre el uso de la plataforma,
            tiempos de almacenamiento y privacidad.
          </p>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="sf-faq-item">
          <div class="sf-faq-q">¿Mis invitados tienen que instalar alguna aplicación?</div>
          <div class="sf-faq-a">
            No. Solo necesitan escanear el código QR o abrir el enlace desde su celular
            para subir fotos y videos al álbum del evento.
          </div>
        </div>
        <div class="sf-faq-item">
          <div class="sf-faq-q">¿Por cuánto tiempo se guardan las fotos?</div>
          <div class="sf-faq-a">
            Depende del plan que elijas. Por ejemplo, el plan Básico puede incluir 1 mes
            y el Pro hasta 6 meses. Ajusta este texto según tu configuración real.
          </div>
        </div>
        <div class="sf-faq-item">
          <div class="sf-faq-q">¿Puedo descargar todas las fotos después del evento?</div>
          <div class="sf-faq-a">
            Sí, podrás descargar todas las fotos y videos en tu computador para guardarlos
            o hacer respaldos adicionales.
          </div>
        </div>
        <div class="sf-faq-item">
          <div class="sf-faq-q">¿Se puede usar en más de un evento?</div>
          <div class="sf-faq-a">
            Para eventos individuales, cada compra está asociada a un evento. Para
            empresas o colegios con varios eventos, podemos armar un plan especial.
          </div>
        </div>
      </div>
    </div>
  </section>

</div>

@endsection