/* ==========================================================================
   EdusoTV · Mejoras visuales y de rendimiento
   Dirección de arte A: "editorial y humana"
   Fecha: 2026-11-13
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --etv-ink:        #10222E;
  --etv-blue:       #0B3A5B;
  --etv-blue-2:     #14567F;
  --etv-orange:     #F5821F;   /* solo acentos, nunca con texto blanco */
  --etv-orange-ink: #B34E00;   /* botones con texto blanco (contraste 5,24:1) */
  --etv-cream:      #FBF8F3;
  --etv-line:       #E8E2D9;
}

/* ---------- Tipografía ---------------------------------------------------- */

body,
.site,
.entry-content,
.ast-button,
input,
textarea,
select{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4,
.entry-title,
.ast-single-entry-title,
.site-title,
.widget-title{
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  color: var(--etv-blue) !important;
  letter-spacing: -.015em;
  font-weight: 600 !important;
}

h1, .entry-title{ line-height: 1.15 !important; }
h2{ line-height: 1.2 !important; }

body{ background-color: var(--etv-cream) !important; color: var(--etv-ink); }

/* ---------- Cabecera simplificada (P2) ------------------------------------ */

/* fuera SOLO el banner promocional (se conserva el logo de esa franja) */
.ast-above-header-wrap img[src*="cabeceras-estrechas"],
.ast-above-header-wrap img[src*="cabecera"]{
  display: none !important;
}
.ast-above-header-wrap{ padding-top: 8px !important; padding-bottom: 0 !important; }
.ast-above-header-bar{ border-bottom: none !important; }

/* fuera la barra de 8 iconos sociales (van al pie) */
.ast-header-social-wrap,
.header-social-inner-wrap,
.ast-builder-social-element.header-social-item{ display: none !important; }

/* cabecera más limpia y pegajosa */
.site-header{
  background: rgba(251,248,243,.94) !important;
  border-bottom: 1px solid var(--etv-line) !important;
  backdrop-filter: saturate(1.2) blur(8px);
}
.site-header .ast-primary-header-bar{ background: transparent !important; }
.site-logo-img img{ max-height: 48px !important; width: auto !important; }

/* menú: interletraje y peso más editorial */
.main-header-menu > .menu-item > .menu-link{
  font-size: 13px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--etv-blue) !important;
}
.main-header-menu > .menu-item > .menu-link:hover{ color: var(--etv-orange-ink) !important; }

/* ---------- Botones (P5: contraste accesible) ----------------------------- */

.ast-button,
.button,
button,
input[type="submit"],
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background-color: var(--etv-orange-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  padding: 12px 22px !important;
  transition: background-color .18s ease, transform .18s ease !important;
}
.ast-button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background-color: #8F3E00 !important;
  transform: translateY(-1px);
}

/* enlaces */
a{ color: var(--etv-blue-2); }
a:hover{ color: var(--etv-orange-ink); }

/* ---------- Tarjetas de producto (P4) ------------------------------------- */

.woocommerce ul.products li.product{
  background: #fff !important;
  border: 1px solid var(--etv-line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.woocommerce ul.products li.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(11,58,91,.10);
}

/* imagen con proporción única 4:5 */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{ display: block; }
.woocommerce ul.products li.product a img{
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* título legible: sin mayúsculas forzadas */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3{
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--etv-ink) !important;
  padding: 14px 16px 6px !important;
  min-height: 58px;
}

.woocommerce ul.products li.product .price{
  color: var(--etv-blue) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 0 16px 10px !important;
  display: block;
}
.woocommerce ul.products li.product .price del{ opacity: .55; font-weight: 500; }

.woocommerce ul.products li.product .button{
  margin: 0 16px 16px !important;
  width: calc(100% - 32px) !important;
  text-align: center;
}

/* etiqueta de oferta */
.woocommerce span.onsale{
  background: var(--etv-orange) !important;
  color: #10222E !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  min-height: 30px !important;
  line-height: 30px !important;
  padding: 0 12px !important;
}

/* ---------- Portada: secciones con aire ----------------------------------- */

.elementor-section .elementor-container{ position: relative; }
.entry-content h2{ margin-top: 1.6em; }

/* pies de foto / metadatos legibles */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .posted_in{
  font-size: 12px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7A8792 !important;
  padding: 0 16px 12px !important;
  display: block;
}

/* ---------- Móvil (P1) ---------------------------------------------------- */

@media (max-width: 921px){

  html, body{ overflow-x: hidden !important; max-width: 100vw !important; }

  /* nada debe ser más ancho que la pantalla */
  .site, .site-content, .ast-container,
  .elementor-container, .elementor-top-section > .elementor-container{
    max-width: 100% !important;
  }
  img, video, iframe{ max-width: 100% !important; height: auto !important; }

  /* las columnas de Elementor se apilan */
  .elementor-column,
  .elementor-col-50, .elementor-col-33, .elementor-col-25, .elementor-col-66,
  .elementor-col-75, .elementor-col-20, .elementor-col-40, .elementor-col-60{
    width: 100% !important;
  }

  /* tipografía móvil */
  h1, .entry-title{ font-size: 1.85rem !important; }
  h2{ font-size: 1.4rem !important; }
  h3{ font-size: 1.15rem !important; }
  body{ font-size: 16px !important; line-height: 1.65 !important; }

  /* productos: dos columnas con botón cómodo */
  .woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 14px !important; min-height: 66px; }
  .woocommerce ul.products li.product .button{ min-height: 44px; font-size: 13px !important; padding: 10px 8px !important; }

  /* cabecera móvil compacta */
  .site-header{ position: sticky; top: 0; z-index: 9999; }
  .ast-mobile-header-wrap .ast-builder-grid-row{ grid-template-columns: auto 1fr auto !important; }

  /* botones táctiles grandes */
  .ast-button, .button, .woocommerce a.button{ min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 544px){
  .woocommerce ul.products{ grid-template-columns: 1fr 1fr !important; }
  h1, .entry-title{ font-size: 1.6rem !important; }
}

/* respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Franja del botón REGÍSTRATE (contraste) ----------------------- */
.ast-custom-button,
.ast-header-button,
.ast-below-header .ast-button,
.ast-builder-button-wrap .ast-button{
  background-color: var(--etv-orange-ink) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  padding: 10px 22px !important;
}
.ast-custom-button:hover,
.ast-header-button:hover{
  background-color: #8F3E00 !important;
}
.ast-below-header-wrap,
.ast-below-header-bar{
  background: transparent !important;
  border-bottom: none !important;
}
.ast-below-header-bar{ padding-top: 4px !important; padding-bottom: 8px !important; }

/* iconos de cuenta y carrito en azul corporativo */
.ast-header-account-wrap .ast-account-icon,
.ast-site-header-cart .cart-container i{ color: var(--etv-blue) !important; }


/* ---------- Arreglo fuerte del desbordamiento en móvil (P1) --------------- */
@media (max-width: 921px){
  .elementor,
  .elementor-section,
  .elementor-section-wrap,
  .elementor-top-section,
  .elementor-inner-section,
  .elementor-container,
  .elementor-row,
  .elementor-column,
  .elementor-widget,
  .elementor-widget-container,
  .elementor-text-editor,
  .elementor-heading-title{
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .elementor-column-wrap, .elementor-widget-wrap{ padding-left: 8px !important; padding-right: 8px !important; }
  .elementor-top-section{ padding-left: 0 !important; padding-right: 0 !important; }
  /* cualquier cosa posicionada de forma absoluta que se salga */
  .elementor-element{ max-width: 100vw !important; }
  body, html{ max-width: 100% !important; overflow-x: hidden !important; }
}