/* =========================
   HOME – Play Fan (home.css)
========================= */

/* =========================
   HERO SPLIT (imagen izq + texto der)
========================= */
.pf-home-hero{
  position: relative;
  overflow: hidden;
  padding: 90px 20px;
  color:#fff;

  background:
    radial-gradient(900px 420px at 18% 20%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(800px 380px at 85% 55%, rgba(34,197,94,.18), transparent 62%),
    linear-gradient(180deg, #0b1220 0%, #070c16 100%);
}

.pf-home-hero__shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 30% 20%, rgba(0,0,0,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.58) 100%);
}

.pf-home-hero__inner{
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.pf-home-hero__inner--split{
  display:grid;
  grid-template-columns: 520px 1fr;
  gap: 48px;
  align-items: center;
}

.pf-home-hero__media-card{
  border-radius: 26px;
  overflow:hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.35);
  transform: translateZ(0);
}

.pf-home-hero__img{
  width:100%;
  height:auto;
  display:block;
  transform: scale(1.02);
}

.pf-home-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  margin-bottom: 18px;
}

.pf-home-title{
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.04;
  margin: 0 0 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* ✅ ÚNICO FIX DEL HERO: que Play Fan no corte en desktop */
.pf-home-title span{
  color:#ff4d4d;
  white-space: nowrap;
}

.pf-home-sub{
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  margin: 0 0 26px;
  max-width: 740px;
  color: rgba(255,255,255,.86);
}

.pf-home-cta{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 22px 0 18px;
}

.pf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration:none !important;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff !important;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.pf-btn:hover{ transform: translateY(-1px); opacity:.96; }

.pf-btn--primary{
  background: #ff4d4d;
  border-color: rgba(255,77,77,.35);
  box-shadow: 0 16px 34px rgba(255,77,77,.22);
}
.pf-btn--ghost{ background: rgba(255,255,255,.06); }

.pf-home-chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pf-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
  font-weight: 800;
  font-size: 14px;
}

/* Responsive HERO */
@media (max-width: 980px){
  .pf-home-hero{ padding: 70px 18px; }
  .pf-home-hero__inner--split{
    grid-template-columns: 1fr;
    gap: 26px;
    text-align:center;
  }
  .pf-home-cta{ justify-content:center; }
  .pf-home-chips{ justify-content:center; }
  .pf-home-sub{ margin-left:auto; margin-right:auto; }

  /* ✅ en mobile dejamos cortar normal */
  .pf-home-title span{ white-space: normal; }
}

/* =========================
   SECCIÓN EXPERIENCIAS
========================= */
.pf-home-section{
  padding: 74px 20px;
  background: #f7f8fb;
}

.pf-home-section__inner{
  max-width: 1200px;
  margin: 0 auto;
}

.pf-home-h2{
  text-align:center;
  font-size: clamp(34px, 4vw, 54px);
  margin: 0 0 10px;
  color: #1e40af;
  font-weight: 900;
}

.pf-home-intro{
  text-align:center;
  margin: 0 auto 34px;
  max-width: 760px;
  color:#475569;
  font-weight: 800;
  font-size: 18px;
}

/* =========================
   BLOQUES STACK (imagen + tarjeta) uno debajo del otro
========================= */
.pf-exp-stack{
  display:grid;
  gap: 26px;
}

/* ✅✅✅ FIX DEFINITIVO (sin tocar HTML):
   - SIEMPRE FOTO IZQ / TARJETA DER (inclusive en --flip)
   - Misma altura (foto se estira al alto de la tarjeta)
   - Fotos un poquito más anchas
*/
.pf-exp-row{
  display:grid;
  grid-template-columns: 560px 1fr; /* ✅ foto un poco más ancha */
  gap: 22px;
  align-items: stretch;            /* ✅ misma altura */
  grid-template-areas: "media card";
}

/* aunque el HTML esté invertido en --flip, la grilla manda */
.pf-exp-row--flip{
  grid-template-columns: 560px 1fr;
  align-items: stretch;
  grid-template-areas: "media card";
}

/* asignación por áreas (NO depende del orden HTML) */
.pf-exp-row .pf-exp-media{ grid-area: media; }
.pf-exp-row .pf-card{ grid-area: card; }

.pf-exp-media{
  border-radius: 26px;
  overflow:hidden;
  box-shadow: 0 22px 46px rgba(0,0,0,.12);
  background:#fff;
}

.pf-exp-media img{
  width:100%;
  height:100%;         /* ✅ llena el alto de la fila */
  display:block;
  object-fit: cover;   /* ✅ sin deformar */
}

/* tarjeta */
.pf-card{
  background:#fff;
  border-radius: 26px;
  padding: 26px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
  position: relative;
  overflow:hidden;

  /* para que no queden espacios vacíos */
  display:flex;
  flex-direction: column;
}

.pf-card:before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(255,77,77,.10);
  filter: blur(0px);
}

.pf-card--party:before{
  background: rgba(30,64,175,.10);
}

.pf-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background:#fff;
  border:1px solid #e7eaf2;
  font-weight: 800;
  color:#0f172a;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  width: fit-content;
  margin-bottom: 14px;
}

/* ✅ ÚNICO CAMBIO DE LAS PILLS: degradado suave por tipo */
.pf-card--free .pf-pill{
  border-color: rgba(255,77,77,.22);
  background:
    radial-gradient(120px 70px at 18% 35%, rgba(255,77,77,.18), rgba(255,77,77,0) 62%),
    linear-gradient(135deg, rgba(255,77,77,.10) 0%, #ffffff 58%);
}

.pf-card--party .pf-pill{
  border-color: rgba(30,64,175,.22);
  background:
    radial-gradient(120px 70px at 18% 35%, rgba(30,64,175,.18), rgba(30,64,175,0) 62%),
    linear-gradient(135deg, rgba(30,64,175,.10) 0%, #ffffff 58%);
}

.pf-card h3{
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
}

.pf-card--free h3{ color:#ff4d4d; }
.pf-card--party h3{ color:#1e40af; }

.pf-card-meta{
  margin: 0 0 14px;
  color:#475569;
  font-weight: 900;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
  font-size: 14px;
}

.pf-list{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
  color:#0f172a;
  font-weight: 850;
  font-size: 15px;
}

.pf-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

/* ✅✅✅ FONDO DEGRADADO SOLO PARA LA LISTA DEL PASE LIBRE (NO TOCA NADA MÁS) */
.pf-list--playbox{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,77,77,.20);

  background:
    radial-gradient(140px 90px at 15% 25%, rgba(255,77,77,.12), rgba(255,77,77,0) 62%),
    radial-gradient(160px 100px at 85% 55%, rgba(34,197,94,.10), rgba(34,197,94,0) 65%),
    linear-gradient(135deg, rgba(255,77,77,.06) 0%, rgba(255,255,255,1) 55%);
}

.pf-good{
  margin: 14px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  color:#166534;
  background: #eafff2;
  border: 1px solid #b9f2cf;
  width: fit-content;
}

/* Bloque "incluye" con fondo suave */
.pf-includes{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 14px;
}
.pf-includes strong{
  display:block;
  margin-bottom: 6px;
  font-weight: 950;
}
.pf-includes ul{
  margin: 8px 0 0;
  padding-left: 18px;
}
.pf-includes li{
  margin-bottom: 6px;
  font-weight: 800;
  color:#0f172a;
}

.pf-includes--play{
  background: linear-gradient(135deg, #fff5f5, #ffffff);
  border: 1px solid #ffd6d6;
}

.pf-includes--party{
  background: linear-gradient(135deg, #f3f6ff, #ffffff);
  border: 1px solid #dfe6ff;
}

/* Botones: bien dentro y sin “huecos” */
.pf-card .pf-btn{
  margin-top: 16px;
  align-self: flex-start;
  padding: 14px 20px;
}

.pf-btn--cta{
  background:#ff4d4d;
  border-color: rgba(255,77,77,.35);
  box-shadow: 0 16px 34px rgba(255,77,77,.18);
  color:#fff !important;
}

/* Responsive experiencias */
@media (max-width: 980px){
  .pf-exp-row,
  .pf-exp-row--flip{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "card";
  }
  .pf-exp-media{
    min-height: 260px;
  }
  .pf-card{ padding: 22px 20px; }
  .pf-card h3{ font-size: 30px; }
}

/* =========================
   FEATURES (si las seguís usando)
========================= */
.pf-features{
  padding: 70px 20px;
  background: #dffcff;
}
.pf-features__inner{
  max-width: 1200px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pf-feature{
  background:#fff;
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.pf-feature__icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color:#1e40af;
  margin-bottom: 10px;
}
.pf-feature h4{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color:#0f172a;
}
.pf-feature p{
  margin: 8px 0 0;
  color:#475569;
  font-weight: 800;
}

@media (max-width: 980px){
  .pf-features__inner{ grid-template-columns: 1fr; }
}
/* =========================
   BOTÓN MAPS (hero)
========================= */
.pf-btn--maps {
  font-size: 14px !important;
  padding: 12px 18px !important;
}

/* =========================
   EXPERIENCIAS — 2 tarjetas lado a lado
========================= */
.pf-exp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pf-exp-card {
  background: #fff;
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,.10);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.pf-exp-card::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  filter: blur(0px);
}

.pf-exp-card--free::before { background: rgba(255,77,77,.10); }
.pf-exp-card--party::before { background: rgba(30,64,175,.10); }

.pf-exp-card h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
}

.pf-exp-card--free h3 { color: #ff4d4d; }
.pf-exp-card--party h3 { color: #1e40af; }

.pf-exp-card__desc {
  margin: 0;
  color: #475569;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.55;
}

.pf-exp-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pf-exp-card__list li {
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.pf-exp-card .pf-btn {
  margin-top: auto;
  align-self: flex-start;
}

.pf-btn--cta-blue {
  background: #1e40af !important;
  border-color: rgba(30,64,175,.35) !important;
  box-shadow: 0 16px 34px rgba(30,64,175,.18) !important;
  color: #fff !important;
}

@media (max-width: 860px) {
  .pf-exp-cards {
    grid-template-columns: 1fr;
  }
}