/* ==========================================================================
   墨西哥风格主题  (mx-theme.css)
   --------------------------------------------------------------------------
   在 style.css / responsive.css / index-uwxvLKRO.css 之后引入。
   这里只做「叠加」，不改动上面几个文件，方便日后单独回退或微调。

   配色：
     国旗绿   #006847  品牌 / 标题
     rosa     #E4007C  CTA / 强调（rosa mexicano）
     amarillo #FFC72C  点缀
     turquesa #00A99D  辅助点缀（talavera）
     crema    #FFF8F0  页面底色
   ========================================================================== */

:root {
  --mx-verde: #006847;
  --mx-verde-claro: #0a8a5e;
  --mx-rosa: #e4007c;
  --mx-rosa-oscuro: #b3005f;
  --mx-amarillo: #ffc72c;
  --mx-turquesa: #00a99d;
  --mx-crema: #fff8f0;
}

/* ==========================================================================
   1. 标题字体：木活字 / 海报感，呼应 lotería 卡片与 cantina 招牌
   Alfa Slab One 只有 400 字重，所以把 font-weight 归一到 400
   ========================================================================== */

.banner-one__content h3,
.block-title h3,
#products h2 {
  font-family: "Alfa Slab One", "Nunito", Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Alfa Slab One 字面比 Nunito 宽约 20%，所以字号按 0.83 等比收缩。
   断点沿用 responsive.css 自己的（70 / 60 / 45px），只做同比缩放，
   避免另起一套断点把模板调好的节奏盖掉。 */

.banner-one__content h3 {
  font-size: 58px; /* 70 × 0.83 */
  line-height: 1.1;
}

.block-title h3 {
  font-size: 38px; /* 46 × 0.83 */
  line-height: 1.24;
}

#products h2 {
  /* 原本是 Tailwind 的 text-4xl / md:text-5xl（36 / 48px） */
  font-size: clamp(30px, 4.2vw, 40px);
  line-height: 1.2;
}

@media (max-width: 1199px) {
  .banner-one__content h3 {
    font-size: 50px; /* 60 × 0.83 */
  }
}

@media (max-width: 375px) {
  .banner-one__content h3 {
    font-size: 37px; /* 45 × 0.83 */
    line-height: 1.15;
  }
  .block-title h3 {
    font-size: 32px; /* 38 × 0.83 */
    line-height: 1.2;
  }
}

/* ==========================================================================
   2. Papel picado 彩旗条
   data-URI 内联，不额外增加图片请求；repeat-x 横向平铺
   ========================================================================== */

/* 主视觉下沿的彩旗：垂向下方米色区（.banner-one::before 原本引用的图片不存在，
   这里顺带把它用起来；加 z-index 让它盖在 ::after 的底图之上） */
.banner-one::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='52' viewBox='0 0 168 52'%3E%3Cpath d='M4 0h48v30L28 52 4 30z' fill='%23E4007C'/%3E%3Cpath d='M60 0h48v30L84 52 60 30z' fill='%23FFC72C'/%3E%3Cpath d='M116 0h48v30l-24 22-24-22z' fill='%2300A99D'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
  z-index: 3;
  pointer-events: none;
}

/* 页脚顶部的彩旗条。
   原样式把 padding-top 注释掉了（只有 padding-bottom），不补回来标题会被旗子压住 */
.site-footer__upper {
  position: relative;
  padding-top: 84px;
}

.site-footer__upper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='52' viewBox='0 0 168 52'%3E%3Cpath d='M4 0h48v30L28 52 4 30z' fill='%23E4007C'/%3E%3Cpath d='M60 0h48v30L84 52 60 30z' fill='%23FFC72C'/%3E%3Cpath d='M116 0h48v30l-24 22-24-22z' fill='%2300A99D'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top left;
  pointer-events: none;
}

/* ==========================================================================
   3. 产品卡片：塔拉韦拉瓷砖式顶边
   四张卡片依次用 rosa / turquesa / amarillo / verde 轮转
   ========================================================================== */

#products .grid > .rounded-xl {
  border-top: 5px solid var(--mx-rosa);
}

#products .grid > .rounded-xl:nth-child(1) {
  border-top-color: var(--mx-rosa);
}
#products .grid > .rounded-xl:nth-child(2) {
  border-top-color: var(--mx-turquesa);
}
#products .grid > .rounded-xl:nth-child(3) {
  border-top-color: var(--mx-amarillo);
}
#products .grid > .rounded-xl:nth-child(4) {
  border-top-color: var(--mx-verde);
}

/* 计算器那张卡也加一条，保持同族 */
#products .rounded-2xl {
  border-top: 5px solid var(--mx-verde);
}

/* ==========================================================================
   4. 米色区块的 greca（米特拉回纹）几何底纹
   极低透明度，只做质感，不抢内容
   ========================================================================== */

/* 只放在产品区。.cta-four 上另有一张铺开的装饰图（mx-crema-shape.jpg），
   两者叠加会在图的下沿出现一道「有纹/无纹」的接缝，所以那一区不铺纹样。 */
#products {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 24V12h8V4h8v8h8v12' fill='none' stroke='%23006847' stroke-opacity='0.07' stroke-width='2.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* #products 原本是 Tailwind 的 bg-gray-50，这里换成米色并叠上回纹 */
#products {
  background-color: var(--mx-crema);
}

/* ==========================================================================
   5. 按钮与强调色微调
   ========================================================================== */

/* 主 CTA 按钮（计算器里的「Solicitar ahora」）加一点「贴纸」投影 */
#applyNowBtn {
  box-shadow: 0 8px 22px rgba(228, 0, 124, 0.32);
}

/* 侧边菜单遮罩用品牌绿，替换模板残留的深色 */
.side-menu__block-overlay {
  background-color: var(--mx-verde);
}

/* 语言切换按钮的悬停态用 amarillo，与导航绿形成对比 */
.lang-btn:hover {
  background: rgba(255, 199, 44, 0.35);
}

/* ==========================================================================
   6. 尊重「减少动态效果」偏好
   模板用了 animate.css 的 fadeInUp / wow.js，元素默认 opacity:0，
   靠入场动画显示。对前庭敏感的用户关掉动画后必须显式置为可见，
   否则首屏配图会停在半透明状态。
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wow,
  .animated,
  .banner-one__image img,
  [class*="banner-one__bg-shape-"],
  .apply-modal__overlay,
  .apply-modal__card {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}