/*
Theme Name: AirPods Cinematic Editorial
Description: Tema editorial de producto con WooCommerce, galería y efectos de desplazamiento.
Version: 2.2.0
Text Domain: airpods-cinematic
*/

:root {
  color-scheme:dark;
  --bg:#090a0c;
  --ink:#f5f5f4;
  --muted:#aaaeb6
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
img {
  max-width:100%
}
.cin-container {
  width:min(1300px,calc(100% - 9vw));
  margin:auto
}
.cin-header {
  height:78px;
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.5vw;
  background:rgba(9,10,12,.75);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.09)
}
.cin-brand {
  font-size:16px;
  font-weight:750;
  letter-spacing:-.035em;
  max-width:50%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.cin-header nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px
}
.cin-header nav a:hover {
  opacity:.6
}
.cin-cart {
  border:1px solid #777;
  padding:11px 17px;
  border-radius:40px
}
.cin-cart span {
  margin-left:7px;
  color:#b7b7b7
}
.cin-hero {
  height:min(900px,100svh);
  min-height:660px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 68% 48%,#30343b 0%,#101115 44%,#050608 78%)
}
.cin-hero-media {
  position:absolute;
  inset:0 0 0 39%;
  background-image:var(--hero-image);
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  opacity:.94;
  filter:drop-shadow(0 30px 65px #000);
  transform:scale(1.04);
  animation:cin-enter 1.3s ease both
}
.cin-hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,6,8,.9),transparent 85%);
  pointer-events:none
}
.cin-hero-content {
  position:relative;
  z-index:1;
  margin-left:8vw;
  margin-top:5vh;
  max-width:720px
}
.cin-kicker,.cin-overline {
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  color:#a7a7a7
}
.cin-hero h1 {
  font-size:clamp(75px,11vw,175px);
  letter-spacing:-.09em;
  line-height:.88;
  margin:25px 0 35px;
  font-weight:750
}
.cin-hero h1 em,.cin-battery h2 em {
  font-style:normal;
  color:#9c9fa5
}
.cin-hero-content>p {
  font-size:clamp(17px,1.7vw,23px);
  color:#c1c2c6;
  max-width:420px;
  line-height:1.5
}
.cin-hero-actions {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-top:40px
}
.cin-button {
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  padding:19px 24px;
  border-radius:3px;
  font-size:15px;
  font-weight:650;
  transition:background .25s,color .25s,transform .25s
}
.cin-button:hover {
  transform:translateY(-3px)
}
.cin-button-light {
  background:#f7f7f5;
  color:#0b0c0e
}
.cin-button-light:hover {
  background:#d4d4d4
}
.cin-button-outline {
  background:transparent;
  color:white;
  border-color:#65676c
}
.cin-button-outline:hover {
  background:#25262a
}
.cin-text-link {
  font-size:14px;
  color:#d7d7d7;
  border-bottom:1px solid #777;
  padding-bottom:7px
}
.cin-scroll {
  position:absolute;
  z-index:2;
  bottom:35px;
  left:8vw;
  font-size:10px;
  letter-spacing:.15em;
  color:#b8b8b8
}
.cin-scroll span {
  margin-left:16px
}
.cin-intro {
  padding:180px 0 170px;
  text-align:center
}
.cin-intro h2,.cin-statement h2 {
  font-size:clamp(52px,7.5vw,112px);
  line-height:1.04;
  letter-spacing:-.07em;
  margin:30px auto
}
.cin-intro h2 span,.cin-statement h2 span {
  color:#777b83
}
.cin-intro p:last-child,.cin-statement p {
  color:#aeb0b5;
  max-width:630px;
  margin:30px auto 0;
  font-size:19px;
  line-height:1.65
}
.cin-gallery {
  padding:50px 0 150px
}
.cin-gallery-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:50px
}
.cin-gallery-heading h2,.cin-specs h2,.cin-buy h2 {
  font-size:clamp(60px,7vw,105px);
  line-height:1;
  letter-spacing:-.075em;
  margin:0
}
.cin-gallery-heading p {
  color:#9da0a6;
  max-width:250px;
  line-height:1.5
}
.cin-gallery-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:0 2vw
}
.cin-photo {
  position:relative;
  display:block;
  background:radial-gradient(circle,#33363d,#151619 70%);
  border:0;
  overflow:hidden;
  min-height:450px;
  height:55vw;
  max-height:780px;
  padding:5vw
}
.cin-photo:first-child {
  grid-column:span 2;
  height:72vw;
  max-height:1000px
}
.cin-photo img {
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .8s cubic-bezier(.2,.8,.2,1)
}
.cin-photo:hover img {
  transform:scale(1.12)
}
.cin-photo-zoom {
  position:absolute;
  bottom:24px;
  right:25px;
  font-size:13px;
  color:#e2e2e2
}
.cin-statement {
  padding:150px 0 210px;
  text-align:center
}
.cin-feature {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:750px;
  background:#16171a
}
.cin-feature-image {
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,#414349,#1b1c20 65%);
  overflow:hidden;
  padding:7vw
}
.cin-feature-image img {
  width:100%;
  max-height:700px;
  object-fit:contain;
  transition:transform .7s
}
.cin-feature-image:hover img {
  transform:scale(1.08)
}
.cin-feature-copy {
  padding:10vw 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.cin-feature-copy h2 {
  font-size:clamp(65px,7vw,110px);
  letter-spacing:-.075em;
  line-height:1.03;
  margin:30px 0
}
.cin-feature-copy p {
  font-size:18px;
  line-height:1.75;
  color:#b6b8be;
  max-width:490px
}
.cin-specs {
  padding:170px 0
}
.cin-specs>.cin-container {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw
}
.cin-specs h2 {
  margin-top:25px
}
.cin-spec {
  display:grid;
  grid-template-columns:55px 1fr;
  border-top:1px solid #46484b;
  padding:35px 0
}
.cin-spec>span {
  color:#83868d;
  font-size:13px
}
.cin-spec h3 {
  font-size:29px;
  letter-spacing:-.04em;
  margin:0 0 12px
}
.cin-spec p {
  font-size:16px;
  color:#a4a6ad;
  line-height:1.7;
  max-width:400px
}
.cin-battery {
  padding:160px 0;
  background:#17181c
}
.cin-battery h2 {
  font-size:clamp(68px,9vw,140px);
  line-height:.98;
  letter-spacing:-.08em;
  margin:30px 0 85px
}
.cin-battery-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5vw
}
.cin-battery-grid>div {
  border-top:1px solid #696b70;
  padding-top:25px
}
.cin-battery strong {
  font-size:clamp(75px,11vw,160px);
  letter-spacing:-.09em;
  line-height:1
}
.cin-battery-grid p {
  font-size:17px;
  color:#b5b7bd;
  max-width:320px;
  line-height:1.6
}
.cin-battery small {
  display:block;
  margin-top:65px;
  max-width:700px;
  color:#8d9097;
  line-height:1.6
}
.cin-buy {
  padding:160px 0
}
.cin-buy-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:center
}
.cin-buy-visual {
  min-height:600px;
  background:radial-gradient(circle,#34373c,#17181b 70%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:50px
}
.cin-buy-visual img {
  max-height:600px;
  object-fit:contain
}
.cin-buy h2 {
  font-size:clamp(54px,6vw,95px);
  margin:25px 0
}
.cin-buy-content>p {
  color:#b3b4b9;
  font-size:17px
}
.cin-price {
  font-size:32px;
  font-weight:700;
  margin:35px 0
}
.cin-price del {
  color:#999;
  font-size:20px;
  margin-right:10px
}
.cin-buy-content form {
  margin-bottom:12px
}
.cin-buy-btn {
  width:100%;
  max-width:440px
}
.cin-checkout-note {
  font-size:12px!important;
  color:#85868a!important;
  margin-top:25px
}
.cin-lightbox[hidden] {
  display:none
}
.cin-lightbox {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.96);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 30px 30px
}
.cin-lightbox img {
  width:100%;
  height:100%;
  object-fit:contain
}
.cin-lightbox-close {
  position:absolute;
  top:16px;
  right:28px;
  background:none;
  border:0;
  color:white;
  font-size:45px
}
.cin-empty {
  padding:60px;
  background:#222;
  color:#aaa
}
.cin-reveal {
  opacity:0;
  transform:translateY(50px);
  transition:opacity .9s ease,transform .9s ease
}
.cin-reveal.cin-visible {
  opacity:1;
  transform:none
}
@keyframes cin-enter {
  from {
    opacity:0;
    transform:scale(1.12)
  }
  to {
    opacity:.94;
    transform:scale(1.04)
  }
}
@media(max-width:800px) {
  .cin-header {
    height:65px
  }
  .cin-nav-desktop {
    display:none
  }
  .cin-header nav {
    gap:12px
  }
  .cin-hero {
    min-height:700px;
    height:100svh;
    align-items:end
  }
  .cin-hero-media {
    inset:75px 0 30%;
    background-position:center;
    opacity:.75
  }
  .cin-hero:after {
    background:linear-gradient(0deg,#050608 13%,transparent 80%)
  }
  .cin-hero-content {
    margin:0 6vw 110px
  }
  .cin-hero h1 {
    font-size:clamp(62px,15vw,100px)
  }
  .cin-scroll {
    left:6vw;
    bottom:25px
  }
  .cin-intro,.cin-statement {
    padding:110px 0
  }
  .cin-intro h2,.cin-statement h2 {
    font-size:clamp(45px,9vw,70px)
  }
  .cin-gallery {
    padding-bottom:80px
  }
  .cin-gallery-heading {
    display:block
  }
  .cin-gallery-heading h2 {
    font-size:65px
  }
  .cin-gallery-grid {
    grid-template-columns:1fr
  }
  .cin-photo,.cin-photo:first-child {
    grid-column:span 1;
    min-height:350px;
    height:110vw;
    max-height:600px
  }
  .cin-feature {
    grid-template-columns:1fr
  }
  .cin-feature-image {
    min-height:500px
  }
  .cin-feature-copy {
    padding:90px 7vw
  }
  .cin-feature-copy h2 {
    font-size:72px
  }
  .cin-specs {
    padding:100px 0
  }
  .cin-specs>.cin-container {
    grid-template-columns:1fr;
    gap:55px
  }
  .cin-battery {
    padding:100px 0
  }
  .cin-battery h2 {
    font-size:65px
  }
  .cin-battery-grid {
    grid-template-columns:1fr;
    gap:45px
  }
  .cin-battery strong {
    font-size:100px
  }
  .cin-buy {
    padding:90px 0
  }
  .cin-buy-grid {
    grid-template-columns:1fr;
    gap:55px
  }
  .cin-buy-visual {
    min-height:420px
  }
  .cin-buy h2 {
    font-size:60px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .cin-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .cin-hero-media {
    animation:none
  }
  .cin-photo img,.cin-feature-image img {
    transition:none
  }
}
/* Botón de compra de la portada: formulario sin márgenes propios */

.cin-hero-actions form {
  margin: 0;
  display: inline-flex;
}
.cin-hero-actions button {
  font: inherit;
  cursor: pointer;
}
/* Vídeo editorial opcional, gestionado desde Apariencia > Personalizar */

.cin-video-section {
  padding:100px 0 140px;
  background:#0b0c0f
}
.cin-video-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:42px
}
.cin-video-heading h2 {
  font-size:clamp(46px,7vw,100px);
  letter-spacing:-.07em;
  line-height:1;
  margin:0;
  max-width:800px
}
.cin-video-heading p {
  color:#aeb0b5;
  font-size:17px;
  max-width:240px
}
.cin-video-frame {
  width:min(1500px,96%);
  margin:auto;
  background:#000;
  overflow:hidden;
  aspect-ratio:16/9
}
.cin-video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000
}
@media(max-width:800px) {
  .cin-video-section {
    padding:75px 0
  }
  .cin-video-heading {
    display:block
  }
  .cin-video-heading p {
    max-width:none
  }
  .cin-video-frame {
    width:100%;
    aspect-ratio:4/5
  }
  .cin-video {
    object-fit:contain
  }
}
.cin-feature-image {
  position: relative;
  overflow: hidden;
}
.cin-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  visibility: visible;
}


.cin-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  visibility: visible;
}