@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600&display=swap');

:root {
      --background-green: #335955;
      --background-light-green: #004D40;
      --background-dark-green: #00332b;
      --background-black: #161A1D;
      --background-light-black: #0D1F1C;
      --bakground-yellow: #AE8420;

      --header-table: #004D30;

      --font-family: 'Noto Sans', sans-serif;

      --font-weight-regular: 400;
      --font-weight-semibold: 600;

      --font-size-base: 16px;
      --font-size-title: 24px;
      --font-size-subtitle: 24px;

      --color: #161A1D;
      --color-white: #ffffff;
      --color-green: #004D40;

      --padding: clamp(24px, 5vw, 80px);
      --padding-global: clamp(28px, 4vw, 48px);
      --padding-block: clamp(8px, 1.5vw, 16px);
}

* {
      box-sizing: border-box;
}

body {
      font-family: var(--font-family);
      font-size: var(--font-size-base);
      color: var(--color);
      margin: 0;
      padding: 0;
      overflow-x: hidden;
}

.header-bg {
      background-color: var(--background-light-black);
}

.header-primary {
      background-color: var(--background-light-green);
}

.header-bg-secundary {
      background-color: var(--background-dark-green);
}

.background-gradient {
      background: linear-gradient(
            to right,
            var(--background-green),
            70%,
            var(--background-light-green)
      );
}

.padding-main {
      padding-inline: var(--padding);
}

.padding-global {
      padding-inline: var(--padding);
      padding-block: var(--padding-global);
}

.padding-block {
      padding-block: var(--padding-block);
}

.padding-list {
      padding-block: 8px;
}

.header-font {
      color: var(--color-white);
}

.font-color-primary {
      color: var(--color);
}

.color_main {
      color: var(--background-light-black);
}

.bloque-gobmx {
      margin-bottom: 20px;
}

.footer-main {
      background-color: #19312C;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: white;
      padding: 20px 40px;
      margin-top: auto;
}

.footer-cont {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 32px;
      width: 100%;
}

.footer-cont > div {
      flex: 1 1 0;
      min-width: 0;
      padding-inline: 12px;
      box-sizing: border-box;
}

.footer-logo img {
      display: block;
      width: 100%;
      max-width: 330px;
      height: auto;
}

.footer-info p.titulo-gobmx {
      font-size: 1.2rem !important;
      line-height: 1.25;
}

.footer-info a.link-leer-mas {
      font-weight: 600;
      text-decoration: underline;
}

.links-cont {
      margin-bottom: 8px;
}

.links {
      text-decoration: none !important;
      font-size: 14px !important;
      margin-bottom: 8px;
      color: var(--color-white);
}

.links a {
      color: var(--color-white);
}

.links a:hover {
      text-decoration: underline !important;
}

.parrafo-main {
      font-size: 14px !important;
      margin-bottom: 8px;
}

.parrafo-sec {
      font-size: 12px !important;
}

.social {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      margin-block: 16px;
}

.social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
}

.social img {
      display: block;
      max-height: 2rem;
}

.comunicate {
      display: block;
      width: auto;
      max-width: 100%;
      height: 4rem;
}

.siam-hero {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      background-color: #ffffff;
      display: block;
      padding: 0;
      overflow: hidden;
}

.siam-hero-container {
      width: 100%;
      max-width: none;
      height: 350px;
      min-height: 350px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin: 0;
      padding: 0;
      overflow: hidden;
}

.siam-hero-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;
      padding: 48px 64px;
      box-sizing: border-box;
}

.siam-hero-title {
      margin: 0;
      color: #ffffff;
      font-size: var(--font-size-title);
      font-weight: var(--font-weight-semibold);
      line-height: 1.2;
}

.siam-hero-subtitle {
      margin: 0;
      color: #ffffff;
      font-size: var(--font-size-subtitle);
      font-weight: var(--font-weight-semibold);
      line-height: 1.35;
}

.siam-hero-description {
      max-width: 520px;
      margin: 0;
      color: #ffffff;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-regular);
      line-height: 1.5;
}

.siam-hero-image {
      width: 100%;
      height: 100%;
      overflow: hidden;
}

.siam-hero-image img {
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      object-fit: cover;
}


.siam-options-section {
      width: 100%;
      padding: 24px clamp(24px, 4vw, 60px) 36px;
      background-color: #ffffff;
      box-sizing: border-box;
      overflow: hidden;
}

.siam-text {
      color: var(--color-green) !important; 
}

.siam-cont-text {
      text-align: start !important;
      padding-left: 24px !important;
}

.siam-search-panel {
      width: 100%;
      max-width: 1328px;
      margin: 0 auto;
      padding: 16px 40px 24px;
      border-radius: 16px;
      box-sizing: border-box;
      box-shadow: 0 2px 5px rgb(0 0 0 / 25%);
}

.siam-search-title {
      margin: 0 0 20px;
      color: #ffffff;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
}

.siam-search-form {
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
}

.siam-search-control {
      display: flex;
      align-items: center;
      width: 100%;
      height: 44px;
      padding: 0 16px;
      overflow: hidden;
      background-color: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 999px;
      box-sizing: border-box;
      box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
}

.siam-search-icon {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      color: #434343;
      font-size: 20px;
}

.siam-search-input {
      flex: 1;
      min-width: 0;
}

.siam-search-input input {
      width: 100% !important;
      height: 42px !important;
      min-width: 0 !important;
      padding: 0 !important;
      color: #434343 !important;
      font-family: inherit !important;
      font-size: 16px !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      outline: none !important;
      box-shadow: none !important;
}

.siam-search-input input:focus {
      border: 0 !important;
      outline: none !important;
      box-shadow: none !important;
}

.siam-captcha-container,
.siam-captcha-field {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 24px;
}

.siam-captcha-field input {
      color: black;
      background-color: #FFFFFF;
      border-radius: 8px;
      width: 150px;
      height: 30px; 
}

.captcha {
      margin-bottom: 8px;
      min-width: 150px; 
      height: 30px; 
}

.siam-form-errors {
      color: #ffffff;
      font-size: 16px;
}

.siam-cards-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: end;
      width: 100%;
      max-width: 1300px;
      margin: 24px auto 0;
      gap: 20px;
}

.siam-option-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      align-self: end;
}

.siam-option-image {
      position: relative;
      z-index: 2;
      flex: 0 0 200px;
      width: 200px;
      height: 200px;
      margin-bottom: -50px;
      overflow: hidden;
      background-color: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
}

.siam-option-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
}

.siam-option-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 296px;
      min-height: 314px;
      padding: 68px 28px 30px;
      color: #ffffff;
      text-align: center;
      background: linear-gradient(to bottom, #004d40, #335955);
      border-radius: 15px;
      box-sizing: border-box;
      box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
}

.siam-option-title {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 88px;
      margin: 0;
      font-size: var(--font-size-subtitle);
      font-weight: 600;
      line-height: 1.25;
}

.siam-option-description {
      width: 100%;
      margin: 4px 0 0;
      color: #ffffff;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.35;
      overflow-wrap: break-word;
}

.siam-option-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 202px;
      height: 50px;
      margin-top: 24px;
      gap: 38px;
      color: #004d40;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      background-color: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 6px;
      box-sizing: border-box;
      box-shadow: 0 3px 7px rgb(0 0 0 / 15%);
      transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
}

.siam-option-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
      border-color: #000000;
}


.siam-history-card {
      align-self: end;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
}

.siam-history-placeholder {
      position: relative;
      z-index: 2;
      display: flex;
      flex: 0 0 200px;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 200px;
      margin-bottom: -50px;
      color: #004d40;
      font-size: 64px;
      background-color: #edd897;
      border: 1px solid #d8c074;
      border-radius: 50%;
      box-sizing: border-box;
      box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
}

.siam-option-body-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 296px;
      min-height: 314px;
      padding: 20px;
      color: #161a1d;
      text-align: center;
      background: #EDD897;
      border-radius: 15px;
      box-sizing: border-box;
      box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
}

.siam-history-title {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 58px;
      margin: 0 0 12px;
      color: #161a1d;
      font-size: 24px;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
}

.siam-history-list {
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
}

.siam-history-item {
      width: 100%;
      border-bottom: 1px solid rgb(22 26 29 / 45%);
}

.siam-history-item:last-child {
      border-bottom: 0;
}

.siam-history-link {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 11px 4px;
      gap: 14px;
      color: #161a1d;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      box-sizing: border-box;
      transition:
            padding-left 0.2s ease,
            color 0.2s ease;
}

.siam-history-link:hover {
      padding-left: 9px;
      color: #004d40;
}

.siam-history-link i {
      flex: 0 0 auto;
      width: 16px;
      text-align: center;
}

.siam-history-link span {
      min-width: 0;
      overflow-wrap: anywhere;
}

.siam-history-empty {
      padding: 32px 4px;
      color: #4b5563;
      font-size: 14px;
      font-style: italic;
      text-align: center;
}

.siam-history-button-placeholder {
      width: 202px;
      height: 50px;
      margin-top: 24px;
}

.busquedas-title {
      font-size: larger;
      font-weight: 600;
      margin-bottom: 2rem;
}

#tabla-historial {
      color: #161A1D !important;
      background-color: #AE8420;
      min-height: 314px;
      margin-bottom: 72px;
      border-radius: 15px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
}

#tabla-historial table {
      border-collapse: collapse;
      border: none;
      width: 100%;
}

#tabla-historial table th,
#tabla-historial table td {
      border: none;
      border-bottom: 1px solid #000000;
      padding: 12px 16px;
      text-align: left;
}
data-secc-card
#tabla-historial table tr:last-child td {
      border-bottom: none;
}


.siam-data-secc-title {
      margin: 0 0 16px;
      color: var(--color);
      font-size: var(--font-size-subtitle);
      font-weight: var(--font-weight-semibold);
      line-height: 1.2;
      text-align: center;
}

.top-header {
      padding: 1rem;
}

.top-header-white {
      background-color: #FFFFFF !important;
}

.header-img {
    display: block;
    flex-shrink: 1;
    min-width: 0;
    max-width: calc(100% - 56px);
}

.top-header-img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    object-fit: contain;
}

.bottom-header {
      padding: 0.5rem 1rem;
}


.siam-seccion {
      display: flex;
      align-items: start;
      gap: 10px;
      cursor: pointer;
}

.siam-secc-icon {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      object-fit: contain;
}


@media (max-width: 1200px) {
      .siam-cards-grid {
            grid-template-columns: repeat(2, minmax(0, 296px));
            justify-content: center;
            row-gap: 40px;
      }
}

@media (max-width: 1050px) {
      .siam-cards-grid {
            grid-template-columns: repeat(2, minmax(0, 296px));
            justify-content: center;
      }
}

@media (max-width: 767px) {
      .siam-options-section {
            padding: 20px 16px 32px;
      }

      .siam-search-panel {
            padding: 20px;
      }

      .siam-search-title {
            font-size: 28px;
      }

      .siam-search-input input {
            font-size: 17px !important;
      }

      .siam-cards-grid {
            grid-template-columns: minmax(0, 296px);
            justify-content: center;
      }

      .siam-option-card,
      .siam-option-body,
      .siam-option-body-list {
            max-width: 100%;
      }

      .siam-history-card {
            align-self: end;
      }

      .siam-hero {
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
      }

      .siam-hero-container {
            width: 100%;
            max-width: 100%;
            height: auto;
            min-height: auto;
            display: flex;
            flex-direction: column;
      }

      .siam-hero-content {
            min-height: 360px;
            padding: 40px 24px;
      }

      .siam-hero-title {
            font-size: 24px;
      }

      .siam-hero-subtitle {
            font-size: 24px;
      }

      .siam-hero-description {
            max-width: 100%;
            font-size: 16px;
      }

      .siam-hero-image {
            width: 100%;
            height: 280px;
      }

      .siam-hero-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
      }

      .footer-main {
            background-color: #0D1F1C;
            background-size: cover;
            background-position: center;
            padding: 28px 20px 24px;
      }

      .footer-cont {
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 30px;
            width: 100%;
            text-align: center;
      }

      .footer-cont > div {
            flex: none;
            width: 100%;
            min-width: 0;
            padding-inline: 8px;
      }

      .footer-logo {
            display: flex;
            justify-content: center;
            margin-bottom: 22px;
      }

      .footer-logo img {
            width: 130px;
            max-width: 130px;
            height: auto;
      }

      .footer-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
      }

      .footer-info > div:nth-child(2) {
            order: 1;
      }

      .footer-info > .bloque-gobmx {
            order: 2;
            width: 100%;
            margin: 24px 0 0;
      }

      .footer-info p.titulo-gobmx {
            margin: 0 0 10px;
            font-size: 16px !important;
            line-height: 1.3;
      }

      .footer-info p {
            width: 100%;
            max-width: 560px;
            margin-right: auto;
            margin-left: auto;
            font-size: 16px;
            line-height: 1.55;
      }

      .footer-info .subtitle {
            margin: 0 0 20px !important;
            font-size: 16px !important;
            line-height: 1.3;
      }

      .footer-info ul,
      .footer-cont > div:nth-child(3) ul {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin: 0;
            padding: 0;
            list-style: none;
      }

      .links {
            width: 100%;
            margin: 0 0 12px;
            padding: 0;
            font-size: 16px !important;
            font-weight: 500;
            line-height: 1.4;
            text-align: center;
      }

      .links a {
            display: inline-block;
            max-width: 100%;
            color: var(--color-white);
            overflow-wrap: break-word;
      }

      .footer-cont > div:nth-child(3) {
            margin-top: 0;
            text-align: center;
      }

      .footer-cont > div:nth-child(4) {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 0;
            text-align: center;
      }

      .parrafo-main {
            margin: 0 0 16px;
            font-size: 16px !important;
            line-height: 1.4;
      }

      .parrafo-sec {
            margin: 0;
            font-size: 16px !important;
            line-height: 1.4;
      }

      .social {
            justify-content: center;
            width: 100%;
            margin: 16px 0;
            gap: 14px;
      }

      .social img {
            width: 28px;
            height: 28px;
            max-height: none;
            object-fit: contain;
      }

      .footer-cont > div:nth-child(4) .pt-2 {
            display: flex;
            justify-content: center;
            width: 100%;
      }

      .comunicate {
            width: auto;
            max-width: 230px;
            height: auto;
            max-height: none;
      }

      .footer-main,
      .footer-main p,
      .footer-main h3,
      .footer-main li,
      .footer-main a,
      .footer-main .links,
      .footer-main .titulo-gobmx,
      .footer-main .subtitle,
      .footer-main .parrafo-main,
      .footer-main .parrafo-sec {
            font-size: 16px !important;
            line-height: 1.5;
            font-weight: 500 !important;
      }
      .header-img {
            max-width: calc(100% - 60px);
      }

      .header-img {
            max-width: calc(100% - 60px);
      }

      .top-header-img {
            max-width: 230px;
      }
}


@media (max-width: 480px) {
    .top-header-img {
        max-width: 190px;
    }
}

@media (max-width: 360px) {
    .top-header-img {
        max-width: 165px;
    }
}