/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
::selection {
  background: #E80D03;
  color: #FFFFFF;
}

::-moz-selection {
  background: #E80D03;
  color: #FFFFFF;
}

@property --conic-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.conic-outline {
  border: 1.5px solid transparent;
  border-image: conic-gradient(
    from var(--conic-angle),
    rgba(255,255,255,0.9) 0%,
    #E80D03 22%,
    rgba(255,255,255,0.12) 45%,
    #E80D03 68%,
    rgba(255,255,255,0.9) 100%
  ) 1;
  animation: conicSpin 9s linear infinite;
}

@keyframes conicSpin {
  to {
    --conic-angle: 360deg;
  }
}

/* Promociones card elements (shortcodes: dai_promo_badge, dai_promo_precio, dai_promo_extra, dai_promo_enlace, dai_promo_vigencia) */
.promo-badge {
  /* Oculto por pedido de negocio; se conserva el shortcode/campo ACF "destacada" intacto. */
  display: none;
  background: #E80D03;
  color: #FFFFFF;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 8px;
}

.promo-vigencia {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: #747376;
  margin-bottom: 4px;
}

.promo-precio {
  font-family: 'Jost', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #B11117;
  margin: 8px 0;
}

.promo-precio span {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  margin-left: 4px;
}

.promo-extra {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: #191919;
  margin-bottom: 8px;
}

.promo-enlace {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #E80D03;
  text-decoration: none;
  margin-top: 8px;
}

.promo-enlace:hover {
  color: #191919;
  text-decoration: underline;
}

/* -------------------------------------------------------------
   Promoción destacada (campo ACF "destacada")
   La tarjeta ocupa la fila completa del loop grid y va en primer
   lugar, como el banner ancho de la maqueta. El medio toma la
   proporción real del banner (3.94) para que el recorte sea nulo.
------------------------------------------------------------- */
.dai-promo-loop-grid .dai-promo-destacada {
  grid-column: 1 / -1;
  order: -1;
}

.dai-promo-loop-grid .dai-promo-destacada .dai-promo-card {
  border-color: #E80D03;
}

/* Medio de la tarjeta: ahora es un <img> real (widget de imagen), no un
   fondo con cover. Sin aspect-ratio fijo: cada foto conserva su propia
   proporcion natural (width:100%; height:auto), igual que la referencia,
   dejando que la altura de la tarjeta varie segun la imagen. Esto tambien
   resuelve el recorte nulo buscado para la tarjeta destacada, sin necesidad
   de un override especifico por breakpoint. */
.dai-promo-media {
  display: block;
}