/*
Theme Name: Marido Líder
Theme URI: https://maridolider.com
Description: Child theme de GeneratePress para Marido Líder. Tipografía editorial, paleta navy/gold/marfil, estilo carta-memo. Aplica a todas las páginas de venta.
Author: Francisco Mersault
Author URI: https://maridolider.com
Template: generatepress
Version: 1.11.0
Text Domain: maridolider
*/

/* ============================================================
   FUENTE: Inter — la cargo desde functions.php para que tenga
   `display=swap` y preconnect; acá solo declaro las variables.
   ============================================================ */

:root{
  --ml-bg: #ffffff;
  --ml-bg-contrast: #ffffff;
  --ml-ink: #1a1a1a;
  --ml-ink-soft: #3a3a3a;
  --ml-ink-mute: #6b6b6b;
  --ml-gold: #c08a2e;
  --ml-gold-deep: #8a6320;
  --ml-gold-bright: #d6a23f;
  --ml-rule: #ececec;
  --ml-highlight: #fff5dc;
}

/* ============================================================
   BODY GENERAL
   ============================================================ */

body{
  background: var(--ml-bg);
  color: var(--ml-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{
  background: var(--ml-gold);
  color: var(--ml-bg);
}

/* ============================================================
   FONDO Y CONTENEDORES — pisamos todos los contenedores de
   GeneratePress (Contained / Separate / Full Width) para que
   todo respire el mismo color crema, sin caja blanca interior.
   ============================================================ */

html,
body,
body.page,
body.single,
body.archive,
body.home,
#page,
.site,
#content,
.site-content,
.content-area,
.site-main,
.inside-article,
.inside-content-area,
.inside-page-header,
.entry-content,
.entry-header,
.entry-summary{
  background: var(--ml-bg) !important;
  background-color: var(--ml-bg) !important;
  box-shadow: none !important;
  border: none !important;
}

/* Contenedor principal: ancho de lectura cómodo, sin fondo distinto */
.inside-article,
.inside-content-area,
.site-content > .grid-container{
  max-width: 760px;
  margin: 0 auto;
  padding: 30px 0 60px;
}

/* En GeneratePress el contenido vive dentro de .entry-content */
.entry-content,
.entry-summary{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 28px;
  font-size: 20px;
  line-height: 1.65;
  color: var(--ml-ink-soft);
}

.entry-header{
  max-width: 780px;
  margin: 0 auto 20px;
  padding: 0 28px;
}

/* Cuando GeneratePress está en modo "Separate" cada artículo
   tiene padding propio — lo neutralizamos para que no haya caja */
.separate-containers .inside-article,
.separate-containers .inside-content-area{
  padding: 30px 0 60px;
}

/* ============================================================
   HEADER DEL SITIO
   GeneratePress mete .site-header, .inside-header, .site-branding
   Lo hago compacto, con el león chico y nombre al costado.
   ============================================================ */

.site-header,
.site-header .inside-header{
  background: var(--ml-bg) !important;
  padding: 18px 0;
}
/* Solo el contenedor exterior pinta la línea — antes ambos lo hacían
   (anidados) y se veía como "doble HR". */
.site-header{
  border-bottom: 1px solid var(--ml-rule);
}
.site-header .inside-header{
  border-bottom: none !important;
}

.inside-header{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-logo,
.header-image{
  margin: 0 !important;
}

.site-logo img,
.header-image img,
.site-branding img{
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50%;
  display: block;
}

/* Nombre del sitio */
.site-branding{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.main-title{
  font-family: "Inter", sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.2;
}

.main-title a{
  color: var(--ml-ink) !important;
  text-decoration: none !important;
}

.site-description{
  font-size: 14px;
  color: var(--ml-ink-mute);
  margin: 0;
  font-style: normal;
}

/* Si en tu site se duplica "Marido Líder" (logo + título visible),
   esto oculta el título de texto y deja solo el logo + nombre clean.
   Si querés al revés (texto sin logo), usá la regla de abajo. */
.has-header-image .main-title,
.site-logo + .site-branding .main-title{
  /* Si querés ocultar el título cuando hay logo, descomentar: */
  /* display: none; */
}

/* Si hay menú principal, lo hago discreto. Si no querés mostrarlo,
   te paso un snippet aparte para ocultarlo. */
.main-navigation{
  background: transparent !important;
  border: none !important;
  margin-left: auto;
}

.main-navigation .menu > li > a{
  font-size: 15px;
  font-weight: 500;
  color: var(--ml-ink-soft) !important;
  padding: 10px 14px;
  background: transparent !important;
}

.main-navigation .menu > li > a:hover{
  color: var(--ml-gold-deep) !important;
  background: transparent !important;
}

/* ============================================================
   TÍTULOS (H1, H2, H3)
   Tu copy actual usa H1 para el titular y H2/H3 para subtítulos.
   ============================================================ */

.entry-title,
.entry-content h1{
  font-family: "Inter", sans-serif;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ml-ink);
  margin: 40px 0 24px;
}

.entry-content h2{
  font-family: "Inter", sans-serif;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ml-ink);
  margin: 50px 0 18px;
}

.entry-content h3{
  font-family: "Inter", sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ml-ink);
  margin: 40px 0 14px;
}

.entry-content h4{
  font-family: "Inter", sans-serif;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ml-ink);
  margin: 30px 0 12px;
}

/* Primer h1 de la página: queda más arriba sin tanto margin top */
.entry-content > h1:first-child,
.entry-content > h2:first-child{
  margin-top: 10px;
}

/* ============================================================
   PÁRRAFOS Y TEXTO
   ============================================================ */

.entry-content p{
  margin: 0 0 18px;
  color: var(--ml-ink-soft);
}

.entry-content p strong,
.entry-content strong{
  color: var(--ml-ink);
  font-weight: 600;
}

.entry-content em,
.entry-content p em{
  font-style: italic;
}

/* Resaltado tipo "marker" — útil para frases-bandera */
.entry-content mark{
  background: var(--ml-highlight);
  color: var(--ml-ink);
  padding: 1px 4px;
  border-radius: 2px;
}

/* ============================================================
   LISTAS
   Bullets dorados elegantes, números dorados.
   ============================================================ */

.entry-content ul,
.entry-content ol{
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.entry-content ul li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--ml-ink-soft);
}

.entry-content ul li::before{
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--ml-gold);
  font-weight: 700;
}

.entry-content ul li strong{
  color: var(--ml-ink);
  font-weight: 600;
}

.entry-content ol{
  counter-reset: ml-counter;
}

.entry-content ol li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  color: var(--ml-ink-soft);
  counter-increment: ml-counter;
}

.entry-content ol li::before{
  content: counter(ml-counter) ".";
  position: absolute;
  left: 0;
  color: var(--ml-gold);
  font-weight: 600;
}

/* Listas anidadas: bullets distintos */
.entry-content ul ul li::before{
  content: "–";
  font-weight: 400;
}

/* ============================================================
   BLOCKQUOTE
   Para resúmenes ejecutivos, citas destacadas tipo Taki.
   ============================================================ */

.entry-content blockquote{
  border-left: 3px solid var(--ml-gold);
  background: #fdfaf1;
  padding: 22px 26px;
  margin: 28px 0;
  border-radius: 0 4px 4px 0;
  font-style: normal;
  color: var(--ml-ink);
}

.entry-content blockquote p{
  margin-bottom: 14px;
  color: var(--ml-ink);
  font-size: 19px;
  line-height: 1.6;
}

.entry-content blockquote p:last-child{
  margin-bottom: 0;
}

.entry-content blockquote strong{
  color: var(--ml-ink);
  font-weight: 700;
}

.entry-content blockquote cite{
  display: block;
  margin-top: 12px;
  font-size: 15px;
  color: var(--ml-ink-mute);
  font-style: normal;
}

/* ============================================================
   LINKS
   ============================================================ */

.entry-content a{
  color: var(--ml-gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.entry-content a:hover{
  color: var(--ml-gold);
}

/* Links a la home y otros internos: hereda */
a{
  color: var(--ml-gold-deep);
}

a:hover, a:focus{
  color: var(--ml-gold);
}

/* ============================================================
   BOTONES
   El shortcode [ml-cta] genera <a class="ml-cta">
   PERO TAMBIÉN: detectamos automáticamente tus CTAs viejos
   escritos como <p><a><strong>TEXTO EN MAYÚSCULAS</strong></a></p>
   y los renderizamos como botón sin tocar el contenido viejo.
   ============================================================ */

/* CTA principal — botón dorado limpio */
.entry-content a.ml-cta,
a.ml-cta,
.entry-content .ml-cta a,
.entry-content p > a:has(> strong:only-child),
.entry-content p:has(> a > strong:only-child) > a{
  display: inline-block;
  background: var(--ml-gold) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  padding: 16px 28px !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 6px !important;
  margin: 18px 0 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.3 !important;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 8px 18px -8px rgba(192,138,46,.4) !important;
  cursor: pointer;
  text-transform: none !important;
}

/* El strong adentro de los CTAs viejos: que no se vea bold,
   ya el botón completo es bold */
.entry-content p > a:has(> strong:only-child) > strong,
.entry-content a.ml-cta > strong{
  font-weight: 600 !important;
  color: inherit !important;
}

/* Hover */
.entry-content a.ml-cta:hover,
a.ml-cta:hover,
.entry-content p > a:has(> strong:only-child):hover{
  background: var(--ml-gold-bright) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 12px 24px -8px rgba(192,138,46,.55) !important;
}

/* Flecha automática solo en los .ml-cta (no en los detectados,
   porque sus textos ya tienen → o ↓ propios a veces) */
.entry-content a.ml-cta::after{
  content: " →";
  font-weight: 600;
}

/* Centrado del párrafo donde vive el botón viejo */
.entry-content p:has(> a:only-child > strong:only-child){
  text-align: center;
  margin: 28px 0;
}

/* ============================================================
   FALLBACK para navegadores que no soportan :has()
   (Chrome 105+, Safari 15.4+, Firefox 121+ — soportan)
   Si tu audiencia tiene navegadores muy viejos, podés agregar
   manualmente la clase ml-cta a tus links existentes.
   ============================================================ */

/* Variante: link "apply" estilo Taki — sin botón, solo más grande */
.entry-content a.ml-link{
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: var(--ml-gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin: 8px 0;
}

.entry-content a.ml-link::before{
  content: "→ ";
}

.entry-content a.ml-link:hover{
  color: var(--ml-gold);
}

/* ============================================================
   ESCASEZ — línea de cupos con tachado
   Uso: <p class="ml-scarcity">Quedan <s>5</s> <span class="num">2 cupos</span>...</p>
   ============================================================ */

.entry-content p.ml-scarcity{
  font-size: 19px;
  font-weight: 500;
  color: var(--ml-ink);
  margin-bottom: 18px;
}

.entry-content p.ml-scarcity em{
  color: var(--ml-ink-soft);
  font-weight: 400;
}

.entry-content p.ml-scarcity s{
  color: var(--ml-ink-mute);
  text-decoration-thickness: 2px;
}

.entry-content p.ml-scarcity .num{
  color: var(--ml-gold-deep);
  font-weight: 700;
}

/* ============================================================
   FECHA DE ACTUALIZACIÓN — tipo Taki
   Uso: <p class="ml-updated">Última actualización · 26 de abril, 2026</p>
   ============================================================ */

.entry-content p.ml-updated{
  font-size: 15px;
  color: var(--ml-ink-mute);
  margin-bottom: 30px;
  letter-spacing: 0.01em;
}

/* ============================================================
   SEPARADOR (HR)
   ============================================================ */

.entry-content hr{
  border: none;
  border-top: 1px solid var(--ml-rule);
  margin: 50px 0;
}

/* ============================================================
   FIRMA — tipo carta
   Uso: <p class="ml-signature">Mersault</p>
   ============================================================ */

.entry-content p.ml-signature{
  font-size: 19px;
  font-weight: 700;
  color: var(--ml-ink);
  margin-top: 30px;
  margin-bottom: 8px;
}

/* P.S. */
.entry-content p.ml-ps{
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--ml-rule);
}

/* ============================================================
   IMÁGENES Y FIGURES
   ============================================================ */

.entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.entry-content figure{
  margin: 28px 0;
}

.entry-content figcaption{
  font-size: 15px;
  color: var(--ml-ink-mute);
  text-align: center;
  margin-top: 8px;
}

/* Centrado de imágenes/videos embebidos */
.entry-content .wp-block-embed,
.entry-content iframe{
  display: block;
  margin: 28px auto;
  max-width: 100%;
  border-radius: 4px;
}

/* ============================================================
   FOOTER
   GeneratePress: .site-footer, .footer-widgets, .site-info
   Lo dejo minimal.
   ============================================================ */

.site-footer,
.site-footer .inside-site-info{
  background: var(--ml-bg) !important;
  padding: 30px 0;
  font-size: 15px;
  color: var(--ml-ink-mute) !important;
}
/* Mismo bug que tenía el header: los dos elementos anidados pintaban
   border-top y se veía como "doble HR". Solo el contenedor exterior. */
.site-footer{
  border-top: 1px solid var(--ml-rule);
}
.site-footer .inside-site-info{
  border-top: none !important;
}

.site-info{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px;
  text-align: left;
  background: var(--ml-bg) !important;
}

.site-info a{
  color: var(--ml-ink-mute) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.site-info a:hover{
  color: var(--ml-ink) !important;
}

.copyright-bar{
  background: transparent !important;
  color: var(--ml-ink-mute);
  padding: 0;
}

/* Footer widgets si los hubiera: respetan el fondo crema */
.footer-widgets,
.footer-widgets-container{
  background: var(--ml-bg) !important;
}

/* ============================================================
   ELEMENTOS QUE QUEREMOS ESCONDER (decisiones de "aplicar o irse")
   En las páginas de venta no queremos sidebar, comentarios,
   metadata de autor/fecha del post, etc.
   ============================================================ */

/* Sin sidebar en páginas */
.page #right-sidebar,
.page #left-sidebar,
.single #right-sidebar,
.single #left-sidebar{
  display: none;
}

.page .content-area,
.single .content-area{
  width: 100%;
}

/* Sin metadata de post (autor, fecha, categorías) */
.entry-meta,
.posted-on,
.byline,
.cat-links,
.tags-links,
.entry-meta-after-title{
  display: none !important;
}

/* Sin comentarios en las páginas */
#comments,
.comments-area{
  display: none;
}

/* Sin "Read more" o navegación de posts */
.post-navigation,
.nav-below{
  display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px){
  body{
    font-size: 19px;
  }

  /* Mitad de padding (era 18px → 9px) — el body se sentía muy apretado.
     El wrapper exterior .one-container .site-content (de GP) ya aporta
     padding generoso, así que sumar 18px más era excesivo. */
  .entry-content,
  .entry-summary{
    font-size: 19px;
    padding: 0 9px !important;
  }

  .entry-header{
    padding: 0 9px !important;
  }

  /* Reducir el padding del wrapper one-container en mobile para que el
     body no quede acolchonado de más. GP padre pone 40px en desktop. */
  .one-container .site-content{
    padding: 20px !important;
  }

  .entry-title,
  .entry-content h1{
    font-size: 30px;
    margin: 30px 0 20px;
  }

  .entry-content h2{
    font-size: 23px;
    margin: 40px 0 14px;
  }

  .entry-content h3{
    font-size: 20px;
  }

  .entry-content blockquote{
    padding: 18px 20px;
    margin: 22px 0;
  }

  .entry-content blockquote p{
    font-size: 17px;
  }

  .entry-content p.ml-scarcity{
    font-size: 17px;
  }

  .entry-content a.ml-cta{
    font-size: 17px;
    padding: 14px 22px;
  }

  .entry-content a.ml-link{
    font-size: 18px;
  }

  /* En mobile, GP padre fuerza .inside-header a flex-direction:column +
     text-align:center. Lo revertimos para mantener el layout tipo index_4.
     Padding lateral más generoso (24px) — con 18px se veía pegado al borde. */
  .inside-header{
    padding: 0 24px !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .site-branding-container{
    flex: 1 1 auto;
    margin: 0 !important;
  }

  /* La fecha en mobile cae a una segunda línea, full width, alineada a
     la izquierda (no a la derecha), para que no quede apretada al lado. */
  .ml-header-date{
    flex: 1 1 100%;
    margin-left: 0 !important;
    margin-top: 8px;
    text-align: left;
    flex-direction: row;
    gap: 6px;
    font-size: 14px;
  }

  /* También por si alguien dejó la opción "Header centrado" en Customizer:
     reseteamos el centrado en mobile. */
  body.header-aligned-center .inside-header,
  body.header-aligned-center .site-branding-container{
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .main-title{
    font-size: 16px;
  }
}

@media (max-width: 480px){
  /* Tamaño legible para 45-50: 20px es lo mínimo cómodo en iPhone.
     Antes estaba en 17-18 que es fatigante para esa edad. */
  body{
    font-size: 20px;
  }

  .entry-content,
  .entry-summary{
    font-size: 20px;
  }

  .entry-title,
  .entry-content h1{
    font-size: 26px;
  }

  .entry-content h2{
    font-size: 21px;
  }
}

/* ============================================================
   BLOQUES DE GUTENBERG comunes
   Por si algunas páginas usan bloques nativos de WP.
   ============================================================ */

.wp-block-quote{
  border-left: 3px solid var(--ml-gold);
  background: #fdfaf1;
  padding: 22px 26px;
  margin: 28px 0;
  border-radius: 0 4px 4px 0;
}

.wp-block-quote p{
  font-size: 19px;
  line-height: 1.6;
  color: var(--ml-ink);
}

.wp-block-button__link,
.wp-block-button .wp-element-button{
  background: var(--ml-gold) !important;
  background-color: var(--ml-gold) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 16px 28px !important;
  font-size: 18px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  transition: background .15s ease;
}

/* Cualquier hijo (strong/em/span) tiene que ser blanco también — sino
   las reglas globales de p strong {color: ink} pintan el texto negro */
.wp-block-button__link *,
.wp-block-button .wp-element-button *{
  color: #ffffff !important;
  text-decoration: none !important;
}

.wp-block-button__link:hover,
.wp-block-button .wp-element-button:hover{
  background: var(--ml-gold-bright) !important;
  background-color: var(--ml-gold-bright) !important;
  color: #ffffff !important;
}

.wp-block-separator{
  border-top: 1px solid var(--ml-rule);
  border-bottom: none;
  max-width: 100%;
  margin: 50px 0;
}

/* ============================================================
   FIX 1.3.0 — header layout cuando GeneratePress mete el wrapper
   .site-branding-container envolviendo logo + branding.
   Sin esto, el logo queda apilado arriba del nombre.
   ============================================================ */

.site-branding-container{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
}

/* Por si Customizer dejó header-aligned-center: lo forzamos a left */
body.header-aligned-center .inside-header,
body.header-aligned-center .site-branding-container{
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ============================================================
   FIX 1.3.0 — anular el segundo border que mete GeneratePress
   debajo del entry-header (causaba la "doble HR" después del H1).
   ============================================================ */

.entry-header,
.page-header,
.inside-article > .entry-header{
  border-bottom: none !important;
  border-top: none !important;
}

/* ============================================================
   FIX 1.6.0 — Header tipo index_4.html
   Logo (44px circular) + Nombre/Tagline (apilados) a la izquierda,
   "Última actualización · fecha" a la derecha. Solo en singulares.
   ============================================================ */

/* El name (blogname) y la description (tagline) apilados verticalmente,
   pegados al logo. Por default GP los pone en línea o con margen raro. */
.site-branding{
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  line-height: 1.3;
}

.main-title{
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.site-description{
  display: block !important;          /* GP a veces lo oculta */
  font-size: 15px !important;
  color: var(--ml-ink-mute) !important;
  font-style: normal !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* La fecha a la derecha del header */
.ml-header-date{
  margin-left: auto;
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ml-ink-mute);
}
.ml-header-date-label,
.ml-header-date-value{
  display: block;
}

@media (max-width: 540px){
  .ml-header-date{
    font-size: 13px;
  }
}