* { margin:0; padding:0; box-sizing:border-box; }

    :root{
      --amby-orange:#F5A623;
      --amby-gold:#E89A3C;
      --amby-dark:#121212;
      --amby-black:#1F1F1F;
      --amby-white:#FFFFFF;
      --amby-light-gray:#F4F1EA;

      --glass: rgba(18,18,18,.42);
      --glass-2: rgba(12,12,12,.30);
      --stroke: rgba(255,255,255,.10);

      --font-display:'Montserrat', sans-serif;
      --font-body:'Inter', sans-serif;
      --font-accent:'Space Grotesk', monospace;
    }

    body{
      font-family:var(--font-body);
      color:var(--amby-dark);
      overflow-x:hidden;
      line-height:1.6;
      padding-top:88px;
      background:#fff;
    }

    @media (max-width:768px){
      body{ padding-top:78px; }
    }

    /* HEADER - Minimal Premium */
    header{
      position:fixed;
      top:0; left:0; right:0;
      padding:18px 0;
      z-index:1000;

      background: rgba(18,18,18,0.55);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);

      border-bottom:1px solid rgba(255,255,255,0.06);
      transition:all 0.25s ease;
    }

    header.scrolled{
      padding:14px 0;
      background: rgba(18,18,18,0.92);
      border-bottom:1px solid rgba(255,255,255,0.10);
      box-shadow:0 12px 30px rgba(0,0,0,0.25);
    }

    nav{
      max-width:1400px;
      margin:0 auto;
      padding:0 40px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }

    .logo{
      font-family:var(--font-display);
      font-size:1.55rem;
      font-weight:800;
      color:white;
      text-decoration:none;
      letter-spacing:0.2px;
      user-select:none;
    }
    .logo span{ color:var(--amby-orange); }

    .nav-links{
      display:flex;
      gap:28px;
      list-style:none;
      align-items:center;
    }

    nav a{
      color: rgba(255,255,255,0.84);
      text-decoration:none;
      font-weight:500;
      font-size:0.95rem;
      letter-spacing:0.2px;
      position:relative;
      padding:10px 2px;
      transition:color 0.2s ease;
    }

    nav a:hover{ color:white; }

    nav a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:6px;
      width:0%;
      height:2px;
      background: rgba(198,164,95,0.9);
      border-radius:2px;
      transition:width 0.25s ease;
    }
    nav a:hover::after{ width:100%; }

    .nav-cta{
      padding:10px 18px;
      border-radius:999px;
      background: rgba(198,164,95,0.14);
      border:1px solid rgba(198,164,95,0.55);
      color: rgba(255,255,255,0.95) !important;
      font-weight:600;
    }
    .nav-cta::after{ display:none; }
    .nav-cta:hover{
      background: rgba(198,164,95,0.22);
      border-color: rgba(198,164,95,0.75);
    }

    /* Mobile toggle */
    .nav-toggle{
      display:none;
      width:44px;
      height:44px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(10px);
      cursor:pointer;
      align-items:center;
      justify-content:center;
      gap:6px;
      padding:0;
    }
    .nav-toggle span{
      display:block;
      width:18px;
      height:2px;
      background: rgba(255,255,255,0.9);
      border-radius:2px;
      transition: transform .2s ease, opacity .2s ease;
    }

    .mobile-backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,0.55);
      opacity:0;
      pointer-events:none;
      transition: opacity .2s ease;
      z-index:998;
    }

    .mobile-menu{
      position:fixed;
      top:14px;
      right:14px;
      width:min(420px, calc(100vw - 28px));
      height: calc(100vh - 28px);
      border-radius:18px;
      background: rgba(18,18,18,0.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border:1px solid rgba(255,255,255,0.10);
      transform: translateX(110%);
      transition: transform .25s ease;
      z-index:999;
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .mobile-menu-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding-bottom:12px;
      border-bottom:1px solid rgba(255,255,255,0.08);
    }

    .mobile-close{
      width:44px;
      height:44px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.9);
      cursor:pointer;
    }

    .mobile-menu-links{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding-top:6px;
    }

    .mobile-menu-links a{
      color: rgba(255,255,255,0.90);
      text-decoration:none;
      font-weight:600;
      font-size:1.05rem;
      padding:14px 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }

    .mobile-menu-links a:hover{
      transform: translateY(-1px);
      border-color: rgba(198,164,95,0.35);
      background: rgba(255,255,255,0.06);
    }

    .mobile-cta{
      margin-top:6px;
      background: rgba(198,164,95,0.14) !important;
      border:1px solid rgba(198,164,95,0.55) !important;
    }

    body.menu-open .mobile-backdrop{
      opacity:1;
      pointer-events:auto;
    }
    body.menu-open .mobile-menu{
      transform: translateX(0);
    }

    @media (max-width:768px){
      .nav-links{ display:none; }
      .nav-toggle{ display:inline-flex; }
    }

    /* HERO */
    .hero{
      position:relative;
      height:100vh;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .hero-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:1;
      filter: brightness(0.85) contrast(1.08) saturate(1.05);
      transform: scale(1.06);
    }

    /* overlay cinematográfico (más premium) */
    .hero-overlay{
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      background:
        radial-gradient(1200px 650px at 50% 40%,
          rgba(0,0,0,.08) 0%,
          rgba(0,0,0,.48) 70%,
          rgba(0,0,0,.78) 100%),
        linear-gradient(180deg,
          rgba(0,0,0,.78) 0%,
          rgba(0,0,0,.30) 45%,
          rgba(0,0,0,.82) 100%);
    }

    .hero-content{
      position:relative;
      z-index:3;
      color:white;
      text-align:center;
      max-width: 980px;
      padding: 0 18px;
      animation: fadeInUp 1.1s ease-out;
    }

    /* headline editorial */
    .hero h1{
      font-family: var(--font-display);
      font-weight: 800;                /* FIX: antes estaba 1800 (no existe) */
      letter-spacing: -0.03em;
      line-height: 0.94;
      text-shadow: 0 14px 46px rgba(0,0,0,.50);
      font-size: clamp(2.6rem, 5.2vw, 4.6rem);
      margin-bottom: 16px;
    }

    .hero h1 .accent{
      color: var(--amby-orange);
      white-space: nowrap;
    }

    .hero p{
      color: rgba(255,255,255,.84);
      max-width: 720px;
      margin: 0 auto 28px;
      line-height: 1.55;
      font-size: clamp(1.0rem, 1.15vw, 1.15rem);
      text-shadow: 0 10px 30px rgba(0,0,0,.45);
    }

    .hero-ctas{
      display:flex;
      gap:14px;
      justify-content:center;
      flex-wrap:wrap;
    }

    .btn{
      padding: 16px 34px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
      letter-spacing: .2px;
    }

    /* Botón primary más “architectural” */
    .btn-primary{
      background: linear-gradient(135deg, var(--amby-orange), var(--amby-gold));
      color: white;
      box-shadow: 0 16px 40px rgba(245,166,35,0.28);
    }
    .btn-primary:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 55px rgba(245,166,35,0.38);
    }

    /* Secondary glass (más premium que borde blanco plano) */
    .btn-secondary{
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.92);
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .btn-secondary:hover{
      transform: translateY(-2px);
      border-color: rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.09);
    }

    /* Panel flotante (glass premium, más fino y menos pesado) */
    .hero-front-panel{
      position:absolute;
      left:0; right:0;
      bottom: 18px;
      z-index:4;
      display:flex;
      justify-content:center;
      padding: 0 16px;
      pointer-events:none;
    }

    .hero-front-inner{
      width: min(980px, 100%);
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;

      padding: 10px 12px;
      border-radius: 18px;

      background: linear-gradient(180deg, var(--glass), var(--glass-2));
      border: 1px solid var(--stroke);
      box-shadow: 0 18px 70px rgba(0,0,0,.42);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero-front-inner::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      top:0;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
      pointer-events:none;
    }

    .hero-front-inner{ position: relative; }

    .hero-pill{
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.88);
      font-weight: 600;
      font-size: .92rem;
      letter-spacing: .2px;
    }

    @media (max-width: 767px){
      .hero-front-panel{ bottom: 14px; }
      .hero-front-inner{ border-radius: 16px; }
      .hero-pill{ font-size: .88rem; }
    }

    /* STATS */
    .stats{
      background: var(--amby-black);
      padding: 78px 40px;
      position:relative;
      overflow:hidden;
    }

    .stats::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:200%;
      height:100%;
      background: linear-gradient(90deg, transparent, rgba(245,166,35,0.10), transparent);
      animation: shimmer 5s infinite;
    }

    .stats-grid{
      max-width:1400px;
      margin:0 auto;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 56px;
      position:relative;
    }

    .stat-item{ text-align:center; }
    .stat-number{
      font-family: var(--font-accent);
      font-size: clamp(2.7rem, 5vw, 4.6rem);
      font-weight:700;
      color: var(--amby-orange);
      line-height:1;
      margin-bottom: 14px;
      display:block;
    }
    .stat-label{
      color:white;
      font-size: .92rem;
      text-transform: uppercase;
      letter-spacing: 1.4px;
      font-weight: 500;
      opacity: .92;
    }

    /* BENEFITS */
    .benefits{
      padding: 110px 40px;
      background: #fff;
    }

    .section-header{
      text-align:center;
      max-width: 860px;
      margin: 0 auto 70px;
    }

    .section-header h2{
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.4rem);
      font-weight: 800;
      color: var(--amby-black);
      margin-bottom: 16px;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    .section-header p{
      font-size: 1.15rem;
      color: rgba(18,18,18,.72);
    }

    .benefits-grid{
      max-width: 1400px;
      margin: 0 auto;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
    }

    /* Card más premium: borde sutil + sombra limpia + menos “cartoon” */
    .benefit-card{
      text-align:left;
      padding: 34px 30px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(18,18,18,.08);
      box-shadow: 0 14px 38px rgba(0,0,0,.06);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .benefit-card:hover{
      transform: translateY(-6px);
      box-shadow: 0 22px 58px rgba(0,0,0,.10);
      border-color: rgba(245,166,35,.24);
    }

    /* Ícono pro (SVG), sin emojis */
    .benefit-icon{
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom: 18px;

      background: linear-gradient(135deg, rgba(245,166,35,.22), rgba(232,154,60,.12));
      border: 1px solid rgba(245,166,35,.30);
      box-shadow: 0 18px 45px rgba(245,166,35,.12);
      color: rgba(18,18,18,.92);
    }

    .benefit-icon svg{
      width: 26px;
      height: 26px;
      display:block;
      stroke: currentColor;
    }

    .benefit-card h3{
      font-family: var(--font-display);
      font-size: 1.45rem;
      font-weight: 800;
      color: var(--amby-black);
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }

    .benefit-card p{
      color: rgba(18,18,18,.74);
      line-height: 1.7;
      font-size: 1rem;
    }

    /* MODELS (dejé tu estilo, solo micro-ajustes visuales) */
    .models{
      padding: 110px 40px;
      background: var(--amby-light-gray);
    }

    .models-grid{
      max-width:1400px;
      margin:0 auto;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 34px;
    }

    .model-card{
      background:white;
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(0,0,0,.06);
      box-shadow: 0 10px 30px rgba(0,0,0,0.08);
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .model-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 22px 60px rgba(0,0,0,0.14);
    }

    .model-image{
      position:relative;
      height: 280px;
      background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }

    .model-image::after{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(800px 380px at 30% 30%, rgba(245,166,35,.10), transparent 60%),
        radial-gradient(650px 320px at 70% 70%, rgba(232,154,60,.10), transparent 60%);
    }

    .model-badge{
      position:absolute;
      top: 18px;
      right: 18px;
      background: var(--amby-orange);
      color:white;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .5px;
      box-shadow: 0 14px 35px rgba(0,0,0,.18);
      z-index:2;
    }

    .model-content{ padding: 32px; }

    .model-title{
      font-family: var(--font-display);
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--amby-black);
      margin-bottom: 8px;
    }

    .model-tagline{
      color: var(--amby-orange);
      font-weight: 700;
      font-size: 0.92rem;
      margin-bottom: 18px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .model-specs{
      display:flex;
      gap: 22px;
      margin-bottom: 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .spec{ display:flex; flex-direction:column; gap: 4px; }
    .spec-label{
      font-size: .75rem;
      color: rgba(18,18,18,.62);
      text-transform: uppercase;
      letter-spacing: .5px;
    }
    .spec-value{
      font-family: var(--font-accent);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--amby-orange);
    }

    .model-footer{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 14px;
    }

    .model-price{
      font-family: var(--font-accent);
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--amby-black);
      line-height: 1.1;
    }

    .model-price small{
      display:block;
      font-size: .8rem;
      font-family: var(--font-body);
      color: rgba(18,18,18,.58);
      font-weight: 500;
      margin-top: 4px;
    }

    /* CTA */
    .cta-section{
      padding: 110px 40px;
      background: linear-gradient(135deg, var(--amby-black) 0%, #2d2d2d 100%);
      position:relative;
      overflow:hidden;
    }

    .cta-section::before{
      content:'';
      position:absolute;
      top:-50%;
      right:-20%;
      width: 100%;
      height: 200%;
      background: radial-gradient(circle, rgba(245,166,35,0.15), transparent 60%);
    }

    .cta-content{
      max-width: 980px;
      margin: 0 auto;
      text-align:center;
      position:relative;
    }

    .cta-content h2{
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3.3rem);
      font-weight: 800;
      color: white;
      margin-bottom: 18px;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    .cta-content p{
      font-size: 1.2rem;
      color: rgba(255,255,255,0.82);
      margin-bottom: 40px;
    }

    /* FOOTER */
    footer{
      background: var(--amby-black);
      color:white;
      padding: 80px 40px 40px;
    }

    .footer-content{
      max-width: 1400px;
      margin:0 auto;
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 60px;
      margin-bottom: 60px;
    }

    .footer-column h3{
      font-family: var(--font-display);
      font-size: 1.3rem;
      margin-bottom: 25px;
      color: var(--amby-orange);
    }

    .footer-column p,
    .footer-column a{
      color: rgba(255,255,255,0.72);
      text-decoration:none;
      display:block;
      margin-bottom: 12px;
      transition: color 0.2s ease;
    }
    .footer-column a:hover{ color: var(--amby-orange); }

    .footer-bottom{
      text-align:center;
      padding-top: 40px;
      border-top: 1px solid rgba(255,255,255,0.10);
      color: rgba(255,255,255,0.52);
    }

    /* WHATSAPP FLOAT */
    .whatsapp-float{
      position:fixed;
      bottom:30px;
      right:30px;
      width:65px;
      height:65px;
      background:#25D366;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 6px 30px rgba(37,211,102,0.5);
      cursor:pointer;
      z-index:999;
      transition: all 0.2s ease;
      animation: pulse 2s infinite;
    }
    .whatsapp-float:hover{
      transform: scale(1.06);
      box-shadow: 0 10px 44px rgba(37,211,102,0.65);
    }
    .whatsapp-float::after{ content:'💬'; font-size:2rem; }

    /* ANIMATIONS */
    @keyframes fadeInUp{
      from{ opacity:0; transform: translateY(24px); }
      to{ opacity:1; transform: translateY(0); }
    }
    @keyframes shimmer{
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes pulse{
      0%,100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    /* Reveal */
    .reveal{
      opacity:0;
      transform: translateY(28px);
      transition: all 0.75s ease;
    }
    .reveal.active{
      opacity:1;
      transform: translateY(0);
    }

    /* Responsive */
    @media (max-width:768px){
      nav{ padding: 0 18px; }
      .hero-ctas{ flex-direction: column; }
      .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 34px; }
      .benefits-grid, .models-grid{ grid-template-columns: 1fr; }
      .footer-content{ grid-template-columns: 1fr; }
      .btn{ width: min(420px, 100%); justify-content:center; }
    }
    
    /* === Catálogo === */
.catalog{
  padding: 110px 18px;
  background: #fff;
}
.catalog-head{
  width: min(1100px, 100%);
  margin: 0 auto 50px;
  text-align: center;
}
.catalog-head h2{
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.catalog-head p{
  color: rgba(18,18,18,.70);
  font-size: 1.1rem;
}

.poster-grid{
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 1000px){
  .poster-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  .poster-grid{ grid-template-columns: 1fr; }
}

/* === Poster Card === */
.poster-card{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(18,18,18,.08);
  box-shadow: 0 14px 38px rgba(0,0,0,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.poster-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 58px rgba(0,0,0,.10);
  border-color: rgba(245,166,35,.25);
}

/* Render arriba */
.poster-media{
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #0f0f0f;
}
.poster-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.92) contrast(1.05) saturate(1.05);
  transform: scale(1.02);
}
.poster-media-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 420px at 50% 35%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}

/* Badges arriba */
.poster-badges{
  position:absolute;
  top: 14px;
  left: 14px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  z-index: 2;
}

.badge{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
}
.badge-hot{
  background: rgba(245,166,35,.20);
  border-color: rgba(245,166,35,.55);
}
.badge-ghost{ opacity: .92; }

/* Título sobre el render (abajo a la izquierda) */
.poster-title{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
}

.poster-code{
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 14px 46px rgba(0,0,0,.55);
}
.poster-code .c{ color: var(--amby-orange, #F5A623); }

.poster-sub{
  color: rgba(255,255,255,.82);
  font-weight: 600;
  font-size: .95rem;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* Cuerpo: plano + specs + acciones */
.poster-body{
  padding: 18px 18px 20px;
}

.poster-plan{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
}
.poster-plan img{
  width: 100%;
  height: auto;
  display: block;
}

/* Specs */
.poster-specs{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;

  font-weight: 700;
  color: rgba(18,18,18,.82);
}
.poster-specs .m2{
  color: var(--amby-orange, #F5A623);
  font-family: var(--font-accent, "Space Grotesk", monospace);
  font-weight: 700;
}
.poster-specs .sep{ opacity: .35; }

/* Acciones */
.poster-actions{
  display:flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap:wrap;
}
@media (max-width: 680px){
  .poster-actions .btn{ width: 100%; justify-content:center; }
}

.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:32px;
  max-width:1200px;
  margin:60px auto 0 auto;
  padding:0 20px;
}

.poster-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:all .35s ease;
  display:flex;
  flex-direction:column;
}

.poster-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,0.15);
}

.poster-media{
  position:relative;
  height:220px;
  overflow:hidden;
}

.poster-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.poster-specs{
  padding:20px;
  font-size:14px;
  color:#555;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.poster-actions{
  padding:0 20px 22px 20px;
  display:flex;
  gap:10px;
}
.poster-card{
  height:100%;
}

.poster-card:hover img{
  transform:scale(1.05);
}

.poster-media img{
  transition:transform .6s ease;
}

/* =========================
   MODELOS - MOBILE FIX
   Pegalo AL FINAL del styles.css
========================= */
@media (max-width: 720px){

  /* sección */
  .catalog{
    padding-left: 0;
    padding-right: 0;
  }

  /* grid: 1 columna si o si */
  .poster-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
    margin-top: 28px !important;
  }

  /* card: full width */
  .poster-card{
    width: 100%;
    border-radius: 16px;
  }

  /* imagen: altura más chica en mobile */
  .poster-media{
    height: 190px; /* ajustable: 170-220 */
  }

  /* textos y acciones más cómodas */
  .poster-title{
    padding: 14px 14px 10px 14px;
  }

  .poster-specs{
    padding: 14px;
    font-size: 13px;
    line-height: 1.35;
  }

  /* botones: uno debajo del otro */
  .poster-actions{
    padding: 0 14px 14px 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .poster-actions .btn{
    width: 100%;
    justify-content: center;
  }
}