/* =========================
   MANIERO | CSS COMPLETO (SIN BANDERAS)
   - Fondo limpio
   - Trebuchet MS
   - 2 imágenes decorativas sobre el modal
   - Botones sin emojis
   - Sociales con Font Awesome
   ========================= */

/* ========= SOLO EN ESTA PÁGINA (cambia 1960 si corresponde) ========= */
body.page-id-1960 #masthead,
body.page-id-1960 #colophon { display: none !important; }

html, body { height: 100%; }

body.page-id-1960{
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important; /* sin mantel */
  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif !important;
}

/* Quita restricciones del theme */
body.page-id-1960 #page,
body.page-id-1960 #content,
body.page-id-1960 .site-content,
body.page-id-1960 .content-area,
body.page-id-1960 .site-main,
body.page-id-1960 .entry-content,
body.page-id-1960 .wp-site-blocks,
body.page-id-1960 .wp-block-group,
body.page-id-1960 .wp-block-cover,
body.page-id-1960 .wp-block-template-part{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif !important;
}

/* Contenedor principal */
.maniero-hero{
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 14px;
  position: relative;
  background: transparent !important;
  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif !important;
}

/* Frame */
.maniero-frame{
  width: min(860px, 92vw);
  position: relative;
  overflow: visible !important; /* ✅ que no recorte las imágenes */
}

/* =========================
   IMÁGENES DECORATIVAS (SOBRE EL MODAL)
   ========================= */
.maniero-corner{
  position: absolute !important;
  z-index: 50 !important;          /* por sobre el modal */
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;

  /* Tamaño base (Imagen 1) */
  width: clamp(120px, 18vw, 180px) !important;

  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.12));
}

/* Imagen 1: esquina inferior izquierda (más a la izquierda) */
.maniero-corner--bl{
  left: -55px !important;
  bottom: -18px !important;
}

/* Imagen 2: esquina superior derecha (medidas finales solicitadas) */
.maniero-corner--tr{
  width: clamp(140px, 22vw, 200px) !important;
  right: -150px !important;
  top: -18px !important;
}

/* =========================
   MODAL BLANCO
   ========================= */
.maniero-inner{
  border-radius: 18px;
  background: #ffffff;
  padding: 22px 18px 18px;
  position: relative;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 18px 40px rgba(0,0,0,0.16);
  border: 2px solid rgba(199,163,90,0.45);
  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif !important;
}

/* Logo */
.maniero-logo{
  width: min(520px, 92%);
  height: auto;
  display: block;
  margin: 4px auto 22px;
}

/* Botones */
.maniero-actions{
  width: min(560px, 92%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.maniero-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border-radius: 18px;

  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif !important;
  font-size: 22px;
  line-height: 1;

  color: #2b2b2b !important;
  text-decoration: none !important;

  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: 0 12px 22px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.85);
  background: linear-gradient(180deg, #ffffff 0%, #fff4dc 55%, #f6e6c6 100%);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.maniero-pill:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 26px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.85);
  border-color: rgba(199,163,90,0.65);
}

/* Redes (Font Awesome) */
.maniero-social{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

.maniero-social-icon{
  text-decoration: none !important;
  color: rgba(43,43,43,0.85) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .12s ease, color .12s ease;
}

.maniero-social-icon i{
  font-size: 34px !important;
}

.maniero-social-icon:hover{
  transform: translateY(-1px);
  color: rgba(199,163,90,0.95) !important;
}

/* =========================
   RESPONSIVE (móviles) — NO romper imágenes
   ========================= */
@media (max-width: 640px){
  .maniero-inner{ padding: 18px 14px 16px; }
  .maniero-actions{ width: min(520px, 96%); gap: 14px; }
  .maniero-pill{
    font-size: 18px;
    padding: 16px 14px;
    border-radius: 16px;
  }
  .maniero-social-icon i{ font-size: 30px !important; }

  /* ✅ Mantener tamaños (no romper) */
  .maniero-corner{
    width: clamp(120px, 18vw, 180px) !important;
  }
  .maniero-corner--bl{
    left: -55px !important;
    bottom: -48px !important;
  }
  .maniero-corner--tr{
    width: clamp(140px, 22vw, 200px) !important;
    right: -100px !important;
    top: -18px !important;
  }
}

/* ===== Evitar scroll horizontal por imágenes fuera del marco ===== */
html, body { overflow-x: hidden; }

body.page-id-1960{
  overflow-x: hidden !important;
}

/* Algunos themes usan wrappers que también pueden generar overflow */
body.page-id-1960 #page,
body.page-id-1960 #content,
body.page-id-1960 .site-content,
body.page-id-1960 .content-area,
body.page-id-1960 .site-main,
body.page-id-1960 .entry-content{
  overflow-x: hidden !important;
}