/* style.css - básico y elegante para retropc */
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at 0% 0%, #e0f2fe 0, rgba(224,242,254,0) 45%),
    radial-gradient(circle at 100% 100%, #fee2e2 0, rgba(254,226,226,0) 45%),
    #ffffff;
  color: #0f1724;
  margin:0;
  padding:0;
}

a { color: #cbd5e1; text-decoration:none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.site-brand {
  display:flex;
  align-items:center;
}
.site-logo img {
  height:50px;
}
.navbar {
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,0.1);
  background:#2563eb;
  color:#fff;
}
.navbar .nav-link { color:#fff !important; }

/* Banderas de idioma sin recuadro blanco */
.lang-flags a {
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 4px;
}
.lang-flags img {
  border:none;
  box-shadow:none;
}

/* Hero section */
.hero-card {
  background:#1e293b;
  color:#ffffff;
  box-shadow:0 4px 16px rgba(15,23,42,0.3);
}
.hero-img-main {
  max-height:260px;
  object-fit:contain;
}

/* Product cards layout */
.product-card {
  display:flex;
  background:#1e293b;
  border-radius:12px;
  overflow:hidden;
  color:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,0.5);
}

/* Columna 1: foto */
.product-image-col {
  flex:0 0 33%;
  max-width:33%;
}
.product-image-col img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Columna 2: título + descripción */
.product-middle-col {
  flex:0 0 34%;
  max-width:34%;
  padding:16px;
  display:flex;
  flex-direction:column;
}
.product-middle-col h2 {
  font-family: 'Courier New', Courier, monospace;
  font-size:2.25rem;
  font-weight:700;
  margin-bottom:8px;
}
.product-middle-col .desc {
  flex:1;
  max-height:260px;
  overflow:auto;
}

/* Columna 3: precio + botón + vídeo */
.product-meta-col {
  flex:0 0 33%;
  max-width:33%;
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.product-meta-top {
  margin-bottom:10px;
}
.product-meta-video {
  flex:1;
  display:flex;
}
.product-video {
  width:100%;
  border-radius:6px;
  object-fit:cover;
  aspect-ratio:4/3;
}

/* Precio y botón Comprar */
.product-price {
  font-size:1.2rem;
  font-weight:700;
}
.product-price-label {
  opacity:0.85;
  margin-right:4px;
}
.product-price-value {
  font-size:1.4rem;
}

.btn-buy {
  display:inline-block;
  background:#f97316;
  border:1px solid #ea580c;
  color:#111827 !important;
  font-weight:600;
  padding:8px 18px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.btn-buy:hover {
  background:#ea580c;
  color:#111827 !important;
  text-decoration:none;
}

/* Card general */
.card {
  border-radius:12px;
  padding:14px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.3);
  margin-bottom:18px;
  background:#1e293b;
}
.card-title { font-size:1.15rem; margin-bottom:6px; }
.card-desc { font-size:0.95rem; color:#cbd5e1; margin-bottom:10px; }

/* Contact form */
form input,
form textarea,
form select {
  background:#f9fafb;
  color:#0f1724;
  border:1px solid #cbd5e1;
}
form input:focus,
form textarea:focus,
form select:focus {
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,0.3);
}

/* Footer */
.site-footer {
  margin-top:30px;
  padding:20px 0;
  border-top:1px solid rgba(0,0,0,0.1);
  text-align:center;
  font-size:0.9rem;
  background:#2563eb;
  color:#fff;
}
.site-footer a {
  color:#e5e7eb;
}

/* "Cómo funciona" layout */
.card-como-funciona {
  background:#1e293b;
  color:#eef2ff;
}
.card-como-funciona ul {
  margin-top:8px;
}
.card-como-funciona li {
  margin-bottom:4px;
}
.como-top {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.como-text {
  flex:1 1 260px;
}
.como-videos {
  flex:1.2 1 320px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
.video-slot video {
  width:100%;
  border-radius:8px;
  background:#020617;
}
.video-slot small {
  display:block;
  margin-top:2px;
  font-size:0.75rem;
  opacity:0.85;
}

/* Imágenes dentro de "Cómo funciona": 50% con espacio correcto */
.como-media {
  margin-top:12px;
  display:flex;
  gap:16px;
}
.como-media img {
  width:calc(50% - 8px);
  height:auto;
  border-radius:6px;
  display:block;
}

/* Enlace al manual dentro "Cómo funciona" */
.manual-link {
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(15,23,42,0.7);
}
.manual-link img {
  height:42px;
  width:auto;
  border-radius:4px;
  background:#0f172a;
}
.manual-link-text {
  font-size:0.95rem;
}
.manual-link-text a {
  color:#bfdbfe;
  font-weight:600;
  text-decoration:none;
}
.manual-link-text a:hover {
  text-decoration:underline;
}

/* Card personalización */
.card-personalizacion {
  background:#1e293b;
  color:#e5e7eb;
}
.card-personalizacion h5 {
  margin-top:10px;
  margin-bottom:4px;
}
.card-personalizacion p {
  margin-bottom:6px;
}
.personalizacion-block {
  margin-top:10px;
}

/* Personalización: imágenes centradas tipus col-2/3 */
.personalizacion-images {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
}

/* per defecte */
.personalizacion-images img {
  max-height:200px;
  width:auto;
  border-radius:6px;
  background:#0f172a;
}

/* Una sola imatge: 3-6-3 (centrada) */
.personalizacion-images img:only-child {
  margin:0 auto;
  flex:0 0 50%;
}

/* Exactament dues imatges: simular 2-3-2-3-2 */
.personalizacion-images img:first-child:nth-last-child(2) {
  flex:0 0 25%;
  margin-left:16.66%;
}
.personalizacion-images img:last-child:nth-child(2) {
  flex:0 0 25%;
  margin-right:16.66%;
}

/* Carrusel d’imatges */
.retro-carousel {
  display:flex;
  align-items:center;
  gap:10px;
}
.rc-window {
  overflow:hidden;
  flex:1;
}
.rc-track {
  display:flex;
  transition:transform 0.35s ease;
}
.rc-item {
  padding:4px;
}
.rc-item img {
  width:100%;
  height:auto;
  border-radius:8px;
  max-height:220px;
  object-fit:cover;
  background:#020617;
}
.rc-arrow {
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,0.8);
  color:#e5e7eb;
  border-radius:999px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:1.4rem;
  line-height:1;
  padding:0;
}
.rc-arrow:hover {
  background:#f97316;
  color:#111827;
}

/* Stats / comptadors */
.stats-strip {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:space-between;
}
.stat-box {
  flex:1 1 0;
  min-width:200px;
  text-align:center;
  padding:10px 8px;
}
.stat-number {
  font-size:1.9rem;
  font-weight:800;
  color:#f97316;
}
.stat-label {
  margin-top:4px;
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#e5e7eb;
}

/* Buy page */
.buy-card {
  background:#1e293b;
  color:#ffffff;
}
.buy-card h3,
.buy-card h5,
.buy-card label,
.buy-card p,
.buy-card li,
.buy-card span,
.buy-card small {
  color:#ffffff;
}
.price-big {
  font-size:1.7rem;
  font-weight:700;
  color:#f97316;
}
.product-header-buy {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.product-header-buy h3 {
  font-family:'Courier New', Courier, monospace;
  font-size:1.6rem;
}

.product-video-main {
  width:100%;
  border-radius:8px;
  margin-top:4px;
  aspect-ratio:16/9;
}

.config-help {
  font-size:0.9rem;
  opacity:0.95;
}

.extra-icon {
  height:22px;
  width:auto;
  margin-right:6px;
  vertical-align:middle;
}

.box-images {
  display:flex;
  gap:10px;
  margin-top:8px;
}
.box-image {
  text-align:center;
  flex:1;
}
.box-image img {
  max-height:80px;
  width:auto;
  object-fit:contain;
  border-radius:6px;
  background:#0f172a;
}
.box-image small {
  display:block;
  margin-top:2px;
  font-size:0.75rem;
}

.cert-images {
  display:flex;
  gap:8px;
  margin-top:6px;
}
.cert-icon {
  max-height:50px;
  width:auto;
  object-fit:contain;
  border-radius:4px;
  background:#0f172a;
}

.order-summary {
  background:#0f172a;
  color:#e5e7eb;
}
.order-summary h5 {
  margin-bottom:8px;
}
.order-summary ul {
  margin:0 0 6px 0;
  padding-left:0;
  list-style:none;
  font-size:0.9rem;
}
.order-summary li {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:2px;
}
.summary-label {
  flex:1;
  padding-right:8px;
}
.summary-price {
  white-space:nowrap;
}

/* total alineado a la derecha */
.order-summary-total {
  text-align:right;
  margin:0;
  margin-top:4px;
}

.payment-info {
  font-size:0.9rem;
  color:#fbbf24;
}

/* Buttons row buy page */
.buy-buttons-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Legal cards (privacy / cookies) */
.legal-card {
  background:#1e293b;
  color:#ffffff;
}
.legal-card a {
  color:#bfdbfe;
}

/* Cookie banner */
.cookie-banner {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(15,23,42,0.96);
  color:#e5e7eb;
  padding:10px 16px;
  font-size:0.85rem;
  z-index:50;
}
.cookie-banner .btn-cookie {
  background:#f97316;
  border:1px solid #ea580c;
  color:#111827;
  font-weight:600;
  padding:4px 12px;
  border-radius:999px;
  font-size:0.8rem;
}
.cookie-banner a {
  color:#bfdbfe;
}

/* Sidebar de modelos retro a la derecha */
.models-sidebar {
  position:fixed;
  top:120px;
  right:20px;
  width:230px;
  z-index:40;
}
.models-inner {
  background:#020617;
  color:#e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(15,23,42,0.8);
  padding:12px;
  border:1px solid rgba(148,163,184,0.5);
}
.models-inner img {
  width:100%;
  height:auto;
  border-radius:8px;
  background:#0f172a;
}
.model-name {
  font-family:'Courier New', Courier, monospace;
  font-weight:700;
  font-size:1.05rem;
}
.model-desc {
  font-size:0.85rem;
  opacity:0.9;
}

/* Ocultar sidebar en pantallas pequeñas */
@media (max-width:991px){
  .models-sidebar {
    display:none;
  }
}

/* Reviews section */
.card-reviews {
  background:#1e293b;
  color:#e5e7eb;
}
.review-card {
  background:rgba(15,23,42,0.8);
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 4px 12px rgba(15,23,42,0.5);
}
.review-stars {
  color:#facc15;
  font-size:0.9rem;
  letter-spacing:1px;
}
.review-text {
  font-size:0.9rem;
  margin:4px 0 6px 0;
}
.review-meta {
  font-size:0.8rem;
  opacity:0.8;
}

/* Botons flotants WhatsApp / Telegram */
.floating-chat {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:10px;
  animation:floatY 3s ease-in-out infinite;
}
.float-btn {
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  cursor:pointer;
  border:none;
  text-decoration:none;
}
.float-btn svg {
  width:26px;
  height:26px;
  fill:#ffffff;
}
.float-btn.wa {
  background:#22c55e;
}
.float-btn.tg {
  background:#0ea5e9;
}
.float-btn:hover {
  transform:translateY(-2px) scale(1.04);
}

/* animació suau amunt/avall */
@keyframes floatY {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}

/* Responsive tweaks */
@media (max-width:767px){
  .site-logo img { height:40px; }
  .container { padding:12px; }
  .product-card { flex-direction:column; }
  .product-image-col,
  .product-middle-col,
  .product-meta-col {
    flex:0 0 100%;
    max-width:100%;
  }
  .product-middle-col .desc {
    max-height:none;
  }

  .como-top {
    flex-direction:column;
  }
  .como-videos {
    grid-template-columns:1fr;
  }

  .buy-buttons-row {
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .buy-buttons-row a {
    text-align:center;
  }
}