/*
Theme Name: Cine Benefico Comunidad Caminante Impeesa
Theme URI: https://impeesa.transferime.net
Author: Comunidad Caminante Impeesa
Description: Tema a medida para el sitio de venta de entradas del cine benéfico. Home tipo cartelera y ficha de película, integrado con WooCommerce.
Version: 3.0
Text Domain: cine-impeesa
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --negro: #080808;
  --negro-2: #111111;
  --superficie: #181818;
  --rojo: #E50914;
  --rojo-oscuro: #A80710;
  --blanco: #FFFFFF;
  --blanco-2: #E5E5E5;
  --gris: #A7A7A7;
  --border: rgba(255,255,255,.08);
}

*{ box-sizing: border-box; }

body{
  background-color: var(--negro);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(229,9,20,0.08) 0%, transparent 38%),
    radial-gradient(circle at 88% 28%, rgba(229,9,20,0.06) 0%, transparent 42%),
    radial-gradient(circle at 50% 95%, rgba(229,9,20,0.05) 0%, transparent 45%);
  background-attachment: fixed;
  color: var(--blanco);
  font-family: 'Inter', -apple-system, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4,
.oswald{ font-family: 'Oswald', sans-serif; }

a{ color: inherit; }

.container{ max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px){ .container{ padding: 0 18px; } }

/* ===== HEADER ===== */
.site-header{
  background: var(--negro);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
}
.site-header .site-title{
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  line-height: 1.2;
}
.site-header .brand-line-1{
  color: var(--rojo);
  font-family: 'Oswald', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.site-header .brand-line-2{
  color: var(--blanco);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.site-header nav ul{ list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.site-header nav a{
  text-decoration: none;
  color: var(--gris);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-header nav a:hover{ color: var(--blanco); border-color: var(--rojo); }

@media (max-width: 600px){
  .site-header .container{ min-height: 64px; }
  .site-header .brand-line-1{ font-size: 18px; }
  .site-header .brand-line-2{ font-size: 10.5px; letter-spacing: 1px; }
}

.site-footer{
  background: var(--negro);
  color: var(--gris);
  text-align: center;
  padding: 28px;
  font-size: 12.5px;
  border-top: 1px solid var(--border);
}

/* ===== HOME / HERO + CARTELERA ===== */
.cartelera-wrap{ max-width: 1200px; margin: 0 auto; padding: 80px 24px 90px; }
@media (max-width: 600px){ .cartelera-wrap{ padding: 56px 18px 64px; } }

.intro-block{ max-width: 700px; margin: 0 auto 80px; text-align: center; }
.intro-block h1{
  font-weight: 800;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: .2px;
  margin: 0 0 22px;
  color: var(--blanco);
}
.intro-block h1 .rojo{ color: var(--rojo); }
.intro-block p{
  color: var(--gris);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 12px;
}
@media (max-width: 600px){
  .intro-block{ margin-bottom: 56px; }
  .intro-block h1{ font-size: 34px; }
  .intro-block p{ font-size: 15.5px; }
}

.cartelera-titulo{
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--blanco);
  text-align: center;
}
.cartelera-linea{
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--rojo);
  margin: 0 auto 70px;
}
@media (max-width: 600px){
  .cartelera-titulo{ font-size: 26px; }
  .cartelera-linea{ margin-bottom: 44px; }
}

.cartelera-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 360px));
  justify-content: center;
  gap: 36px;
}
@media (max-width: 760px){
  .cartelera-grid{ grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
}

.funcion-card-link{
  display: block;
  text-decoration: none;
  color: var(--blanco);
}
.funcion-poster-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 8px;
  background: var(--superficie);
  box-shadow: 0 15px 40px rgba(0,0,0,0.45);
  transition: box-shadow .28s ease;
}
.funcion-poster-wrap img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .28s ease;
}
.funcion-card-link:hover .funcion-poster-wrap{
  box-shadow: 0 18px 45px rgba(229,9,20,0.18);
}
.funcion-card-link:hover .funcion-poster-wrap img{
  transform: scale(1.025);
}

.badge-duracion, .badge-clasif{
  position: absolute; top: 10px; font-size: 10.5px; font-weight: 600;
  padding: 4px 8px; border-radius: 3px; z-index: 2;
  font-family: 'Oswald', sans-serif; letter-spacing: .3px;
}
.badge-duracion{ left: 10px; background: rgba(255,255,255,.92); color: #111; }
.badge-clasif{ right: 10px; background: var(--rojo); color: #fff; }

.funcion-info{ padding: 16px 2px 0; }
.funcion-nombre{
  font-size: 19px; font-weight: 700; color: var(--blanco);
  margin: 0 0 8px; line-height: 1.3;
}
.funcion-meta{ color: var(--gris); font-size: 13.5px; margin: 0; }

/* ===== FICHA DE PELÍCULA (template-pelicula.php) ===== */
.pelicula-wrap{ max-width: 1200px; margin: 0 auto; padding: 56px 24px 80px; }

/* Grid con áreas nombradas: permite mantener 2 columnas fijas en desktop
   y reordenar los mismos bloques en una sola columna en mobile, sin duplicar HTML. */
.pelicula-grid-2col{
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-areas:
    "poster   titulo"
    "poster   boton"
    "poster   trailer"
    "sinopsis trailer"
    "detalles trailer";
  column-gap: 56px;
  row-gap: 16px;
  align-items: start;
}
@media (max-width: 800px){
  .pelicula-grid-2col{
    grid-template-columns: 1fr;
    grid-template-areas:
      "titulo"
      "poster"
      "sinopsis"
      "detalles"
      "boton"
      "trailer";
    row-gap: 24px;
  }
}

.bloque-titulo{ grid-area: titulo; }
.bloque-poster{ grid-area: poster; }
.bloque-sinopsis{ grid-area: sinopsis; }
.bloque-detalles{ grid-area: detalles; }
.bloque-boton{ grid-area: boton; align-self: start; }
.bloque-trailer{ grid-area: trailer; }

.funcion-eyebrow{
  color: var(--gris); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px;
}
.pelicula-titulo{
  font-size: 30px; font-weight: 800; color: var(--blanco);
  text-transform: uppercase; letter-spacing: .3px; margin: 0; line-height: 1.2;
}
@media (max-width: 800px){ .pelicula-titulo{ font-size: 24px; } }

.poster-col .poster-frame,
.bloque-poster .poster-frame{
  position: relative; border-radius: 8px; overflow: hidden;
  background: var(--superficie); aspect-ratio: 2/3;
  box-shadow: 0 15px 40px rgba(0,0,0,0.45);
}
.bloque-poster .poster-frame img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.sinopsis{ color: var(--blanco-2); font-size: 14.5px; line-height: 1.75; }

.bloque-detalles{ display: flex; flex-direction: column; gap: 14px; }
.detalle-item{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.detalle-item:last-child{ border-bottom: none; padding-bottom: 0; }
.detalle-label{
  color: var(--gris); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
}
.detalle-valor{ text-align: right; }
.detalle-fecha-hora{ color: var(--blanco); font-weight: 700; font-size: 18px; }
.detalle-lugar{ color: var(--blanco-2); font-size: 15px; }
.detalle-secundario{ color: var(--gris); font-size: 13.5px; }

.form-comprar-entrada{
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.cantidad-wrap{ display: flex; flex-direction: column; gap: 6px; }
.cantidad-label{
  color: var(--gris); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
}
.cantidad-select{
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--blanco);
  padding: 12px 14px;
  font-size: 15px;
  min-width: 64px;
  cursor: pointer;
}
.cantidad-select:focus{ border-color: var(--rojo); outline: none; }

.btn-comprar-entrada{
  display: inline-block;
  background: var(--rojo);
  color: var(--blanco);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 14px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background .22s ease, width .3s ease;
}
.btn-comprar-entrada:hover{ background: var(--rojo-oscuro); }
.btn-comprar-entrada .btn-texto{
  display: inline-block;
  transition: opacity .15s ease;
}

.trailer-heading{
  font-size: 15px; font-weight: 700; color: var(--gris); margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: .6px;
}
.video-embed{
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 8px; overflow: hidden; background: #000;
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}
.video-embed iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-embed .trailer-embed-inner{ width: 100%; height: 100%; }

/* ===== CHECKOUT DE WOOCOMMERCE (capa visual, sin tocar el formulario real) ===== */

/* El checkout por bloques de WooCommerce inyecta sus propios estilos de
   layout globales (pensados para temas más nuevos con soporte completo de
   ancho de bloque), que en esta página puntual chocan con nuestro header/
   footer. Forzamos que se comporten igual que en el resto del sitio: ancho
   completo y sin position:sticky (que se rompe visualmente si algún
   ancestro le agrega overflow), solo en esta página. */
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-footer{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: static !important;
  inset: auto !important;
}

/* Refuerzo visual para el checkout "por bloques": oculta País/Región si el
   filtro de locale de functions.php no llega a sacarlo del todo (el valor
   por defecto queda seleccionado igual, así que ocultarlo no rompe el envío
   del formulario). Cubre varios nombres de clase posibles según versión. */
#billing-country,
#billing-company, #billing-address_1, #billing-address_2,
#billing-city, #billing-state, #billing-postcode,
.wc-block-components-address-form__country,
.wc-block-components-address-form__company,
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__address_2,
.wc-block-components-address-form__city,
.wc-block-components-address-form__state,
.wc-block-components-address-form__postcode,
.wc-block-components-address-form__address_2-toggle{
  display: none !important;
}
.checkout-titulo-wrap{ max-width: 1200px; margin: 0 auto; padding: 70px 24px 0; text-align: center; }
.checkout-titulo{
  font-size: 40px; font-weight: 800; color: var(--blanco); margin: 0 0 16px;
  text-transform: uppercase; letter-spacing: .3px;
}
@media (max-width: 600px){ .checkout-titulo{ font-size: 28px; } }
.checkout-linea{ width: 46px; height: 3px; border-radius: 2px; background: var(--rojo); margin: 0 auto 48px; }

.woocommerce-checkout{ max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; }
@media (max-width: 600px){ .woocommerce-checkout{ padding: 0 18px 56px; } }

form.checkout.woocommerce-checkout{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px){
  form.checkout.woocommerce-checkout{ grid-template-columns: 1fr; }
}

#customer_details{ grid-column: 1; grid-row: 1 / span 3; }
#order_review_heading{ grid-column: 2; grid-row: 1; margin: 0 0 16px; color: var(--blanco); font-family: 'Oswald', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: .4px; }
#order_review{ grid-column: 2; grid-row: 2; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .place-order{ grid-column: 2; grid-row: 3; }
@media (max-width: 900px){
  #customer_details, #order_review_heading, #order_review,
  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
  .woocommerce-checkout .place-order{ grid-column: 1; grid-row: auto; }
}

.woocommerce-checkout .form-row label{ color: var(--blanco-2); font-size: 13.5px; margin-bottom: 4px; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection{
  background: var(--superficie) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--blanco) !important;
  padding: 11px 14px !important;
  height: auto !important;
}
.woocommerce-checkout input.input-text::placeholder{ color: #777777; }
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus{
  border-color: var(--rojo) !important;
  outline: none;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--blanco);
}
.woocommerce-checkout h3{
  color: var(--blanco); font-family: 'Oswald', sans-serif;
  font-size: 18px; text-transform: uppercase; letter-spacing: .4px;
  margin: 32px 0 16px;
}

#order_review{
  background: var(--negro-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
#order_review table.shop_table{
  width: 100%; border-collapse: collapse; color: var(--blanco-2); font-size: 14px;
}
#order_review table.shop_table th,
#order_review table.shop_table td{
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  text-align: left;
}
#order_review table.shop_table td:last-child,
#order_review table.shop_table th:last-child{ text-align: right; }
#order_review .order-total td,
#order_review .order-total th{
  border-bottom: none; border-top: 1px solid var(--border);
  padding-top: 16px;
}
#order_review .order-total .woocommerce-Price-amount{
  color: var(--blanco); font-size: 24px; font-weight: 800;
}

#payment{ background: transparent; }
#payment ul.payment_methods{ list-style: none; margin: 16px 0 0; padding: 0; }
#payment ul.payment_methods li{
  background: var(--superficie);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  color: var(--blanco);
}
#payment .payment_box{
  background: rgba(255,255,255,.03);
  color: var(--blanco-2);
  border-radius: 6px;
  margin-top: 10px;
  padding: 12px;
}

#place_order, .woocommerce-checkout .place-order .button{
  background: var(--rojo) !important;
  color: var(--blanco) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  border-radius: 6px !important;
  padding: 15px 24px !important;
  border: none !important;
  width: 100%;
  transition: background .22s ease;
  text-transform: uppercase;
  letter-spacing: .3px;
}
#place_order:hover{ background: var(--rojo-oscuro) !important; }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{ color: var(--gris); font-size: 13px; margin: 16px 0; }
.woocommerce-error,
.woocommerce-message,
.woocommerce-info{
  background: var(--superficie); color: var(--blanco);
  border-top: 3px solid var(--rojo); border-radius: 6px;
  padding: 14px 18px; list-style: none; font-size: 14px;
}
.pelicula-notices{ max-width: 1200px; margin: 0 auto 24px; }