/*
 Theme Name:   Astra Child
 Description:  Mi tema hijo personalizado para Astra.
 Author:       Fran
 Template:     astra
 Version:      1.0
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 35px !important;
}

p {
  font-family: 'Poppins', sans-serif !important;
}

/* Enlaces */
p a,
.uagb-tabs__body-wrap a {
    /* Subrayado con color ffa500 */
    text-decoration: underline !important;
    text-decoration-color: #ffa500 !important;
	text-decoration-thickness: 3px !important;
    
    /* Negrita */
    font-weight: bold !important;
    
    /* Color de texto por defecto */
    color: #333333 !important;
}

.ast-single-post .entry-content a

/* Enlaces hover */
.uagb-tabs__body-wrap a:hover,
body p a:hover {
    /* Color de texto al pasar el ratón */
    color: #ffa500 !important;
    
    /* Mantiene el subrayado y su color */
    text-decoration: underline !important;
    text-decoration-color: #ffa500 !important;
}
/* Spacing */

/* 1) Margen superior de 90px SÓLO para el contenido de los artículos */
body.single #content {
    padding-top: 90px !important;
}

/* 2) Margen superior de 90px para el encabezado/banner de archivos, 404 y búsqueda */
body.archive .ast-archive-entry-banner,
body.error404 .ast-archive-entry-banner,
body.search .ast-archive-entry-banner,
body.blog .ast-archive-entry-banner,
body.search-results .ast-archive-entry-banner {
    padding-top: 100px;
	padding-bottom: 100px;
}

/* 3) Margin top FAQs */
.uagb-faq-content p {
	padding-top:15px !important;
}

/* Logo header */
/* Logo en blanco en HOME */
.home .custom-logo-link img {
  filter: brightness(0) invert(1);
}

/* Logo en blanco en /clippers */
.page-id-596 .custom-logo-link img {
  filter: brightness(0) invert(1);
}

/* Logo en blanco en /afeitadoras-electricas-shavers */
.page-id-600 .custom-logo-link img {
  filter: brightness(0) invert(1);
}

/* Logo en blanco en /economicas */
.page-id-2045 .custom-logo-link img {
  filter: brightness(0) invert(1);
}

/* Logo en blanco en /trimmers */
.page-id-598 .custom-logo-link img {
  filter: brightness(0) invert(1);
}

/* Logo en blanco en /marcas */
.page-id-477 .custom-logo-link img {
  filter: brightness(0) invert(1);
}

/**************************************** CAJA DE AUTOR ***********************************************/

.hl-autor {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Imagen 1/3, info 2/3 */
  gap: 20px;
  background: #e9eaeb;
  padding: 45px;
  margin-top: 35px;
  margin-bottom: 35px !important;
  align-items: start;
  box-shadow: 3px 5px 8px rgb(0 0 0 / 36%);
}

.hl-autor__col--img {
  display: flex;
  flex-direction: column;   /* ⬅️ apila imagen y redes */
  align-items: center;      /* ⬅️ centra ambos elementos */
  justify-content: flex-start;
}

.hl-autor__avatar {
  width: 100%;
  max-width: 150px; /* controla el tamaño máximo */
  border-radius: 50%;
  display: block;
}

.hl-autor__nombre {
  margin: 0 0 6px 0;
  font-weight: 700;
  font-size: 1.2rem;
}

.hl-autor__bio {
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: #333;
}

.hl-autor__social {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  justify-content: center;  /* ⬅️ centra los iconos bajo la imagen */
}

.hl-autor__social-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #d10000; /* rojo */
}

.hl-autor__icon {
  width: 30px;
  height: 30px;
  fill: currentColor;
  margin-top: 20px;
}

/* Responsivo: en móvil apilar */
@media (max-width: 768px) {
  .hl-autor {
    grid-template-columns: 1fr; /* una sola columna */
    text-align: center;
  }
  .hl-autor__col--img {
    justify-content: center; /* se mantiene centrado */
  }
}

/**************************************** BUTTONS POR DEFECTO ***********************************************/
/* Base */
main :is(.wp-block-button__link,
         .wp-element-button,
         a.button,
         button,
         input[type="submit"],
         input[type="button"]) {
  --btn-radius: 100px;
  --btn-pad-x: 18px;
  --btn-pad-y: 12px;
  --btn-grad: linear-gradient(90deg,#3B82F6 0%, #8B5CF6 100%);
  --btn-border: rgba(59,130,246,.25);
  --btn-shadow: 0 2px 10px rgba(79,70,229,.12);

  display: inline-flex !important;
  align-items: center !important;
  gap: .55em !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  border: 1.5px solid var(--btn-border) !important;
  border-radius: var(--btn-radius) !important;
  background-color: #fff !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  box-shadow: var(--btn-shadow) !important;
  transition: background .25s ease, color .25s ease, transform .15s ease, box-shadow .25s ease, border-color .25s ease !important;

  color: transparent !important;
  background-image: var(--btn-grad) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Icono automático */
main :is(.wp-block-button__link,
         .wp-element-button,
         a.button,
         button,
         input[type="submit"],
         input[type="button"])::before {
  content: "" !important;
  width: 1.15em !important;
  height: 1.15em !important;
  display: inline-block !important;
  margin-right: .55em !important;
  background: var(--btn-grad) !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z'/%3E%3C/svg%3E") no-repeat center/contain; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z'/%3E%3C/svg%3E") no-repeat center/contain; }

/* Hover */
main :is(.wp-block-button__link,
         .wp-element-button,
         a.button,
         button,
         input[type="submit"],
         input[type="button"]):hover {
  background: var(--btn-grad) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(79,70,229,.22) !important;
}
main :is(.wp-block-button__link,
         .wp-element-button,
         a.button,
         button,
         input[type="submit"],
         input[type="button"]):hover::before {
  background: #fff !important;
}

/**************************************** QUOTES ***********************************************/
:root{
  --brand-dark:#2C3E50;
  --brand-accent:#FFA500;
  --brand-white:#fff;
}

/* Aumentamos especificidad duplicando selectores */
.entry-content .wp-block-quote.wp-block-quote,
.entry-content blockquote.blockquote {
  position: relative;
    margin: 3rem auto !important;
    padding: 3rem 1.5rem 2.5rem 2rem !important;
    border-left: 6px solid var(--brand-accent) !important;
    border-radius: 0px !important;
    background: var(--brand-dark) !important;
    box-shadow: 0 5px 10px rgb(44 62 80 / 64%) !important;
    color: var(--brand-white) !important;
}

/* Reemplazar las comillas por el SVG */
.entry-content .wp-block-quote.wp-block-quote::before,
.entry-content blockquote.blockquote::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1.25rem;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: var(--brand-dark)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff'><path stroke-linecap='round' stroke-linejoin='round' d='M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z'/></svg>")
    no-repeat center;
  background-size: 25px 25px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 6px;
  box-shadow: 0 2px 6px rgba(44,62,80,0.2);
}

/* Texto */
.entry-content .wp-block-quote.wp-block-quote p,
.entry-content blockquote.blockquote p{
  text-align:center;
  margin:0 0 .75rem 0 !important;
  font-size:16px !important;
  line-height:1.6 !important;
  font-weight:500 !important;
  color:var(--brand-whit) !important;
}

/* Autor */
.entry-content .wp-block-quote.wp-block-quote cite,
.entry-content .wp-block-quote.wp-block-quote footer{
  display:inline-flex; gap:.5rem; align-items:center;
  font-style:normal !important; font-size:.95rem !important;
  color:color-mix(in srgb, var(--brand-dark) 65%, white) !important;
}
.entry-content .wp-block-quote.wp-block-quote cite::before,
.entry-content .wp-block-quote.wp-block-quote footer::before{content:"—"; color:var(--brand-accent); font-weight:700}

/* Enlaces dentro de la cita (lo que te está lavando el tema) */
.entry-content .wp-block-quote.wp-block-quote a,
.entry-content blockquote.blockquote a{
  color:var(--brand-white) !important;
  text-decoration:underline var(--brand-accent) !important;
  text-decoration-thickness:2px !important;
  text-underline-offset:3px !important;
  box-shadow:none !important; border-bottom:none !important;
  font-weight: 900;
}
.entry-content .wp-block-quote.wp-block-quote a:hover,
.entry-content blockquote.blockquote a:hover{
  color: var(--brand-accent) !important;
}

/* Variante grande de Gutenberg */
.entry-content .wp-block-quote.is-style-large{
  padding:2rem 2rem 2rem 2.25rem !important;
  border-left-width:8px !important;
}

/* Pullquote reforzado */
.entry-content .wp-block-pullquote.wp-block-pullquote{
  margin:2.5rem 0 !important;
  padding:2.25rem 2rem !important;
  text-align:center;
  background:radial-gradient(1200px 400px at 0% 0%,
              color-mix(in srgb, var(--brand-accent) 18%, #fff) 0%, #fff 60%) !important;
  border:1px solid color-mix(in srgb, var(--brand-dark) 10%, #fff) !important;
  border-radius:16px !important;
  box-shadow:0 14px 34px rgba(44,62,80,.12) !important;
  color:var(--brand-dark) !important;
}
.entry-content .wp-block-pullquote p{ 
  font-size:clamp(1.25rem,1.1rem + .9vw,1.8rem) !important; 
  font-weight:700 !important; line-height:1.35 !important; 
}

/* Reset de estilos agresivos comunes de temas */
.entry-content .wp-block-quote *{ background:none !important; }
.entry-content .wp-block-quote p:last-child{ margin-bottom:0 !important; }
.entry-content .wp-block-quote p:first-child{ margin-top:0 !important; }

/* Centrar título + pastilla en el banner */
.ast-single-entry-banner .ast-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/**************************************** PASTILLAS AÑO ***********************************************/
.actualizado-anio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  margin-top: 10px;
  border-radius: 999px;
  background: #8f8f8fc4;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: background 0.3s ease;
}

.actualizado-anio:hover {
  background: #8f8f8fed;
}

/* SVG icono */
.actualizado-anio .icono-actualizado {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/**************************************** H1 DE LA HOME ESTILO PASTILLA ***********************************************/
.h1-home {
    display: flex !important;
    width: fit-content !important;
    
    /* Centrado en Desktop */
    margin: 10px auto; 
    justify-content: center; /* Centra el texto DENTRO de la pastilla */
    
    /* --- El resto de tus estilos --- */
    align-items: center;
    gap: 6px;
    padding: 10px 25px;
    border-radius: 999px;
    background: #8f8f8fc4;
    color: #fff;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: background 0.3s ease;
}

/* --- ESTILOS MÓVIL (max-width: 768px) --- */
@media (max-width: 768px) {
  .h1-home {
    /* 1. Mueve la PASTILLA a la izquierda */
    /* Sobrescribimos 'margin: auto' por márgenes específicos. */
    /* Esto es: 40px arriba/abajo, 0px izquierda/derecha. */
    margin: 40px 0 !important;
	font-size: 15px !important;
    
    /* 2. (OPCIONAL) Si también quieres el TEXTO interno a la izquierda */
    /* Descomenta la siguiente línea si lo necesitas */
    justify-content: flex-start !important;
	}
}

/**************************************** TEXTO DESTACADO ***********************************************/
/* 1. Estilos por defecto (Desktop) */
.text-decoration-important {
    font-family: 'Poppins', sans-serif; /* ¡Añade esto! */
    font-size: 45px;
    text-align: center;
    font-weight: 900;
    line-height: 1.3;
    margin-top: 40px !important;
    color: #2c3e50;
}

/* 2. Estilos para pantallas más pequeñas (Mobile) */
@media (max-width: 768px) {
  .text-decoration-important {
  font-size: 35px;
  text-align: left;
  }
}

/**************************************** TEXTOS EN PASTILLA DECORATION ***********************************************/
.pastis-decoration {
    display: flex !important;
    width: fit-content !important;
    
    /* Centrado en Desktop */
    margin: 10px auto; 
    justify-content: center; /* Centra el texto DENTRO de la pastilla */
    
    /* --- El resto de tus estilos --- */
    align-items: center;
    gap: 6px;
    padding: 10px 25px;
    border-radius: 999px;
    background: #2c3e50;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 400 !important;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: background 0.3s ease;
}

/* --- ESTILOS MÓVIL (max-width: 768px) --- */
@media (max-width: 768px) {
  .pastis-decoration {
    /* 1. Mueve la PASTILLA a la izquierda */
    /* Sobrescribimos 'margin: auto' por márgenes específicos. */
    /* Esto es: 40px arriba/abajo, 0px izquierda/derecha. */
    margin: 40px 0 !important;
    
    /* 2. (OPCIONAL) Si también quieres el TEXTO interno a la izquierda */
    /* Descomenta la siguiente línea si lo necesitas */
    /* justify-content: flex-start !important; */
	}
}

/* --- ALINEACIÓN IZQUIERDA EN MÓVIL (max-width: 768px) --- */
@media (max-width: 768px) {
.align-lef-mobile {
	text-align: left !important;
}
}

/**************************************** AMAZON BUTTON ***********************************************/
.amazon-pure-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
   
  /* Estilos visuales */
  background: linear-gradient(to bottom, #ffa500, #f0c14b);
  border: 1px solid #a88734;
  border-radius: 100px; 
  padding: 12px 24px;
   
  /* Texto */
  font-family: poppins;
  color: #111 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 16px;
   
  /* Sombras */
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 2px 5px rgba(0,0,0,.1);
  transition: all 0.2s ease;
}

/* El Nuevo Icono (inyectado via CSS) */
.amazon-pure-btn::before {
  content: "";
  display: block;
  width: 18px; /* Ajustado un poco para este icono */
  height: 18px;
  background-color: #111; /* Color del icono */
  
  /* Aquí está tu nuevo icono SVG codificado */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M10.813 11.968c.157.083.36.074.5-.05l.005.005a90 90 0 0 1 1.623-1.405c.173-.143.143-.372.006-.563l-.125-.17c-.345-.465-.673-.906-.673-1.791v-3.3l.001-.335c.008-1.265.014-2.421-.933-3.305C10.404.274 9.06 0 8.03 0 6.017 0 3.77.75 3.296 3.24c-.047.264.143.404.316.443l2.054.22c.19-.009.33-.196.366-.387.176-.857.896-1.271 1.703-1.271.435 0 .929.16 1.188.55.264.39.26.91.257 1.376v.432q-.3.033-.621.065c-1.113.114-2.397.246-3.36.67C3.873 5.91 2.94 7.08 2.94 8.798c0 2.2 1.387 3.298 3.168 3.298 1.506 0 2.328-.354 3.489-1.54l.167.246c.274.405.456.675 1.047 1.166ZM6.03 8.431C6.03 6.627 7.647 6.3 9.177 6.3v.57c.001.776.002 1.434-.396 2.133-.336.595-.87.961-1.465.961-.812 0-1.286-.619-1.286-1.533M.435 12.174c2.629 1.603 6.698 4.084 13.183.997.28-.116.475.078.199.431C13.538 13.96 11.312 16 7.57 16 3.832 16 .968 13.446.094 12.386c-.24-.275.036-.4.199-.299z'/%3E%3Cpath d='M13.828 11.943c.567-.07 1.468-.027 1.645.204.135.176-.004.966-.233 1.533-.23.563-.572.961-.762 1.115s-.333.094-.23-.137c.105-.23.684-1.663.455-1.963-.213-.278-1.177-.177-1.625-.13l-.09.009q-.142.013-.233.024c-.193.021-.245.027-.274-.032-.074-.209.779-.556 1.347-.623'/%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M10.813 11.968c.157.083.36.074.5-.05l.005.005a90 90 0 0 1 1.623-1.405c.173-.143.143-.372.006-.563l-.125-.17c-.345-.465-.673-.906-.673-1.791v-3.3l.001-.335c.008-1.265.014-2.421-.933-3.305C10.404.274 9.06 0 8.03 0 6.017 0 3.77.75 3.296 3.24c-.047.264.143.404.316.443l2.054.22c.19-.009.33-.196.366-.387.176-.857.896-1.271 1.703-1.271.435 0 .929.16 1.188.55.264.39.26.91.257 1.376v.432q-.3.033-.621.065c-1.113.114-2.397.246-3.36.67C3.873 5.91 2.94 7.08 2.94 8.798c0 2.2 1.387 3.298 3.168 3.298 1.506 0 2.328-.354 3.489-1.54l.167.246c.274.405.456.675 1.047 1.166ZM6.03 8.431C6.03 6.627 7.647 6.3 9.177 6.3v.57c.001.776.002 1.434-.396 2.133-.336.595-.87.961-1.465.961-.812 0-1.286-.619-1.286-1.533M.435 12.174c2.629 1.603 6.698 4.084 13.183.997.28-.116.475.078.199.431C13.538 13.96 11.312 16 7.57 16 3.832 16 .968 13.446.094 12.386c-.24-.275.036-.4.199-.299z'/%3E%3Cpath d='M13.828 11.943c.567-.07 1.468-.027 1.645.204.135.176-.004.966-.233 1.533-.23.563-.572.961-.762 1.115s-.333.094-.23-.137c.105-.23.684-1.663.455-1.963-.213-.278-1.177-.177-1.625-.13l-.09.009q-.142.013-.233.024c-.193.021-.245.027-.274-.032-.074-.209.779-.556 1.347-.623'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Hover */
.amazon-pure-btn:hover {
  background: #f4d078;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  color: #111 !important; 
  border-color: #a88734;
}

/***********************************LISTADOS***********************************************/
article ul {
    list-style-type: disc;
    padding-left: 1.5em; /* Espacio estándar */
    margin: 1em 0;
}

article ul li {
    font-family: 'Poppins', sans-serif; /* Asegúrate de poner tu fuente aquí */
}

/* 1. Preparamos la lista */
ul.mi-lista-custom {
    list-style: none; /* Quita el punto negro por defecto */
    padding-left: 0;  /* Resetea el padding izquierdo del contenedor */
    margin-left: 0;
}

/* 2. Preparamos el elemento de lista (el texto) */
ul.mi-lista-custom li {
    position: relative; /* ¡IMPORTANTE! Esto actúa como "ancla" para el icono */
    padding-left: 2rem; /* Deja espacio a la izquierda para que quepa el icono (aprox 32px) */
    margin-bottom: 1rem; /* Espacio entre cada punto */
    line-height: 1.5;   /* Altura de línea para buena lectura */
}

/* 3. Insertamos tu SVG */
ul.mi-lista-custom li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px; /* Ajusta esto para alinear verticalmente */
  width: 1.25rem;
  height: 1.25rem;
  
  /* Esto asegura que el elemento ocupe espacio físico */
  display: block; 
  
  /* Aquí está tu SVG convertido a Base64 (más seguro) */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNDAzIDEyLjY1MmEzIDMgMCAwIDAgMC01LjMwNCAzIDMgMCAwIDAtMy43NS0zLjc1MSAzIDMgMCAwIDAtNS4zMDUgMCAzIDMgMCAwIDAtMy43NTEgMy43NSAzIDMgMCAwIDAgMCA1LjMwNSAzIDMgMCAwIDAgMy43NSAzLjc1MSAzIDMgMCAwIDAgNS4zMDUgMCAzIDMgMCAwIDAgMy43NTEtMy43NVptLTIuNTQ2LTQuNDZhLjc1Ljc1IDAgMCAwLTEuMjE0LS44ODNsLTMuNDgzIDQuNzktMS44OC0xLjg4YS43NS43NSAwIDEgMC0xLjA2IDEuMDYxbDIuNSAyLjVhLjc1Ljc1IDAgMCAwIDEuMTM3LS4wODlsNC01LjVaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIC8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Header flotante */
.mi-cabecera-flotante {
    position: absolute; /* Saca la cabecera del flujo normal */
    top: 0;
    left: 0;
    width: 100%; /* Ocupar todo el ancho */
    z-index: 999; /* Asegurar que esté encima de todo */
    box-sizing: border-box; /* OBLIGATORIO: Evita que la barra se salga de la pantalla al añadir padding */
}

@media (max-width: 768px) {
    .mi-cabecera-flotante {
        position: fixed !important;
        top: auto !important;    /* Soltamos el techo */
        bottom: 0 !important;    /* Anclamos al suelo */
        left: 0 !important;
		padding-top: 5px;
        width: 100% !important;
        z-index: 99999;
        background-color: #2c3e50 !important;
        
        /* Ajuste visual */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2); /* Sombra hacia arriba */
    }

    /* CRUCIAL: Hacemos que el menú desplegable se abra hacia ARRIBA */
    #quadmenu .quadmenu-navbar-collapse {
        bottom: 100% !important; /* Se abre encima de la barra */
        top: auto !important;
        max-height: 80vh; /* Que no se salga de la pantalla */
        overflow-y: auto;
    }
}

/* --- SOLO PARA ESCRITORIO (Más de 769px) --- */
@media (min-width: 769px) {
    .mi-cabecera-flotante {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 100%;
        z-index: 99999;
        background: rgba(44, 46, 51, 0.95) !important; 
    }

    /* --- SOLUCIÓN PARA LA ADMIN BAR --- */
    /* Si el body tiene la clase 'admin-bar', bajamos la cabecera 32px */
    body.admin-bar .mi-cabecera-flotante {
        top: 32px !important;
    }
}

.size-full {
    height: 0% !important;
}

/* Contenedor principal */
.comparison-cards-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  padding: 20px 0 0 0; /* Reducido padding inferior */
  flex-wrap: wrap;
  box-sizing: border-box;
}

/* Estilos base genéricos para las tarjetas */
.comp-card {
  background-color: #fff;
  border-radius: 80px 0px 80px 0px;
  padding: 40px;
  flex: 1;
  min-width: 300px;
  max-width: 550px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Eliminado margin-top: auto que usaban los botones */
}

/* Estilos Específicos PROS (Verde) */
.comp-card-pros { border: 2px solid #28a745; }
.comp-card-pros .comp-card-header h3 { color: #28a745; }

/* Estilos Específicos CONTRAS (Rojo) */
.comp-card-cons { border: 2px solid #dc3545; }
.comp-card-cons .comp-card-header h3 { color: #dc3545; }

/* Estilos Internos Genéricos */
.comp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.comp-card-header h3 { font-size: 1.6rem; margin: 0; font-weight: 700; line-height: 1.2;}
.comp-card-icon { font-size: 2rem; }

.comp-card-description {
  font-size: 1rem; color: #555; margin-bottom: 25px; line-height: 1.5;
}

.comp-card-list-section h4 { font-size: 1.1rem; margin-bottom: 15px; color: #333; font-weight: 600; }
.comp-card-list-section ul { padding-left: 20px; margin-bottom: 0; margin-top: 0;} /* Margin bottom 0 porque ya no hay botón debajo */
.comp-card-list-section ul li { margin-bottom: 10px; color: #444; line-height: 1.4; list-style-type: disc !important;}
.comp-card-list-section ul li strong { color: #000; font-weight: 700;}

/* SE HAN ELIMINADO LOS ESTILOS DE .comp-card-button */
/* Tu clase .amazon-pure-btn se encargará del estilo del nuevo botón */

/* Móvil */
@media (max-width: 768px) {
  .comparison-cards-container { flex-direction: column; gap: 20px; padding: 10px 0;}
  .comp-card { max-width: 100%; min-width: auto; }
}