/*
 * Diseño derivado de la muestra autocontenida aprobada.
 * Todos los selectores están encapsulados en .sms-page para no alterar el tema.
 */
.sms-page {
      --sms-green: #12594c;
      --sms-green-dark: #0b4037;
      --sms-green-soft: #dcebe5;
      --sms-coral: #b94d51;
      --sms-aqua: #6fbdb7;
      --sms-ochre: #d29a42;
      --sms-cream: #f5f0e6;
      --sms-paper: #fffdf8;
      --sms-ink: #18312c;
      --sms-muted: #61716d;
      --sms-line: #d8ded9;
      --sms-white: #ffffff;
      --sms-warning: #8b5b16;
      --sms-warning-bg: #fff4d9;
      --sms-shadow: 0 20px 60px rgba(16, 54, 46, .11);
      --sms-radius-lg: 30px;
      --sms-radius-md: 20px;
      --sms-radius-sm: 13px;
      --sms-max: 1180px;
    }

    .sms-page, .sms-page * { box-sizing: border-box; }

    .sms-page { scroll-behavior: smooth; }

    .sms-page {
      margin: 0;
      color: var(--sms-ink);
      background: var(--sms-paper);
      font-family: Montserrat, "Segoe UI", Arial, sans-serif;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    .sms-page button,
    .sms-page input,
    .sms-page select { font: inherit; }
    .sms-page button,
    .sms-page a { -webkit-tap-highlight-color: transparent; }
    .sms-page a { color: inherit; }
    .sms-page [hidden] { display: none !important; }

    .sms-page { min-height: 100vh; overflow: hidden; }

    .sms-page .brand-stripe {
      height: 7px;
      background: linear-gradient(90deg,
        var(--sms-aqua) 0 19%,
        var(--sms-ochre) 19% 39%,
        var(--sms-coral) 39% 63%,
        var(--sms-green) 63% 100%);
    }

    .sms-page .wrap { width: min(calc(100% - 40px), var(--sms-max)); margin-inline: auto; }

    .sms-page .hero {
      position: relative;
      isolation: isolate;
      background: var(--sms-cream);
      border-bottom: 1px solid rgba(18, 89, 76, .12);
    }

    .sms-page .hero::before,
    .sms-page .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: 999px;
      filter: blur(1px);
    }

    .sms-page .hero::before {
      width: 410px;
      height: 410px;
      right: -120px;
      top: -180px;
      background: rgba(111, 189, 183, .18);
    }

    .sms-page .hero::after {
      width: 270px;
      height: 270px;
      left: -120px;
      bottom: -170px;
      background: rgba(210, 154, 66, .12);
    }

    .sms-page .crumbs {
      display: flex;
      align-items: center;
      gap: 9px;
      padding-top: 25px;
      color: var(--sms-green);
      font-size: .83rem;
      font-weight: 750;
      letter-spacing: .02em;
    }

    .sms-page .crumbs a { text-decoration: none; }
    .sms-page .crumbs span[aria-hidden="true"] { color: #91a19c; }

    .sms-page .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: 52px;
      align-items: center;
      padding: 66px 0 106px;
    }

    .sms-page .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      margin: 0 0 18px;
      color: var(--sms-green);
      font-size: .78rem;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .sms-page .eyebrow::before {
      content: "";
      width: 34px;
      height: 4px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--sms-coral), var(--sms-ochre));
    }

    .sms-page .hero h1 {
      max-width: 720px;
      margin: 0;
      font-size: clamp(2.6rem, 6vw, 5.4rem);
      line-height: .96;
      letter-spacing: -.055em;
      text-wrap: balance;
    }

    .sms-page .hero-copy {
      max-width: 690px;
      margin: 24px 0 0;
      color: #465d57;
      font-size: clamp(1rem, 1.5vw, 1.18rem);
    }

    .sms-page .hero-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      max-width: 640px;
      margin-top: 23px;
      color: var(--sms-muted);
      font-size: .86rem;
    }

    .sms-page .hero-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--sms-green); }

    .sms-page .hero-art {
      position: relative;
      min-height: 310px;
      display: grid;
      place-items: center;
    }

    .sms-page .hero-art svg { width: min(100%, 420px); overflow: visible; }

    .sms-page .search-shell {
      position: relative;
      z-index: 4;
      margin: -43px auto 0;
    }

    .sms-page .search-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 210px 180px;
      gap: 12px;
      padding: 18px;
      background: var(--sms-white);
      border: 1px solid var(--sms-line);
      border-radius: var(--sms-radius-md);
      box-shadow: var(--sms-shadow);
    }

    .sms-page .field { position: relative; }

    .sms-page .field svg {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--sms-green);
      pointer-events: none;
    }

    .sms-page .field input,
    .sms-page .filter-select {
      width: 100%;
      height: 58px;
      color: var(--sms-ink);
      background: #f8faf8;
      border: 1px solid #d6ddd9;
      border-radius: 13px;
      outline: 0;
      transition: border-color .2s, box-shadow .2s, background .2s;
    }

    .sms-page .field input { padding: 0 18px 0 54px; }
    .sms-page .filter-select { padding: 0 39px 0 15px; cursor: pointer; }

    .sms-page .field input:focus,
    .sms-page .filter-select:focus {
      background: var(--sms-white);
      border-color: var(--sms-green);
      box-shadow: 0 0 0 4px rgba(18, 89, 76, .11);
    }

    .sms-page .clear-button {
      height: 58px;
      padding: 0 20px;
      color: var(--sms-green);
      background: var(--sms-green-soft);
      border: 0;
      border-radius: 13px;
      font-weight: 800;
      cursor: pointer;
      transition: transform .2s, background .2s;
    }

    .sms-page .clear-button:hover { transform: translateY(-1px); background: #cee4db; }

    .sms-page main { padding-bottom: 86px; }

    .sms-page .section { padding-top: 76px; }

    .sms-page .section-heading {
      display: flex;
      justify-content: space-between;
      gap: 28px;
      align-items: end;
      margin-bottom: 28px;
    }

    .sms-page .section-heading h2,
    .sms-page .detail-main h2 {
      margin: 0;
      font-size: clamp(1.7rem, 3vw, 2.55rem);
      line-height: 1.1;
      letter-spacing: -.035em;
    }

    .sms-page .section-heading p { max-width: 590px; margin: 8px 0 0; color: var(--sms-muted); }

    .sms-page .result-count {
      flex: 0 0 auto;
      padding: 8px 12px;
      color: var(--sms-green);
      background: var(--sms-green-soft);
      border-radius: 999px;
      font-size: .78rem;
      font-weight: 850;
    }

    .sms-page .popular-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .sms-page .popular-card,
    .sms-page .service-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      color: inherit;
      background: var(--sms-white);
      border: 1px solid var(--sms-line);
      text-decoration: none;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .sms-page .popular-card {
      min-height: 228px;
      padding: 23px;
      border-radius: var(--sms-radius-md);
      overflow: hidden;
    }

    .sms-page .popular-card::after {
      content: "";
      position: absolute;
      width: 115px;
      height: 115px;
      right: -49px;
      bottom: -54px;
      border-radius: 50%;
      background: var(--accent-soft, var(--sms-green-soft));
    }

    .sms-page .popular-card:hover,
    .sms-page .service-card:hover {
      transform: translateY(-4px);
      border-color: rgba(18, 89, 76, .46);
      box-shadow: 0 18px 38px rgba(14, 65, 55, .10);
    }

    .sms-page .card-icon,
    .sms-page .category-icon {
      display: inline-grid;
      place-items: center;
      color: var(--accent, var(--sms-green));
      background: var(--accent-soft, var(--sms-green-soft));
      border-radius: 13px;
    }

    .sms-page .card-icon { width: 45px; height: 45px; margin-bottom: 28px; }
    .sms-page .card-icon svg,
    .sms-page .category-icon svg { width: 23px; height: 23px; }

    .sms-page .type-label {
      color: var(--sms-muted);
      font-size: .68rem;
      font-weight: 850;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    .sms-page .popular-card h3,
    .sms-page .service-card h3 { margin: 6px 0 0; line-height: 1.2; letter-spacing: -.025em; }

    .sms-page .popular-card h3 { font-size: 1.03rem; }

    .sms-page .card-arrow {
      position: absolute;
      z-index: 1;
      right: 20px;
      bottom: 18px;
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      color: var(--accent, var(--sms-green));
      background: var(--sms-white);
      border: 1px solid currentColor;
      border-radius: 50%;
    }

    .sms-page .category-list { display: grid; gap: 15px; }

    .sms-page .category-block {
      background: var(--sms-white);
      border: 1px solid var(--sms-line);
      border-radius: var(--sms-radius-md);
      overflow: clip;
    }

    .sms-page .category-block[open] { box-shadow: 0 14px 40px rgba(14, 65, 55, .07); }

    .sms-page .category-block summary {
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto 38px;
      gap: 17px;
      align-items: center;
      padding: 20px 22px;
      list-style: none;
      cursor: pointer;
      user-select: none;
    }

    .sms-page .category-block summary::-webkit-details-marker { display: none; }

    .sms-page .category-icon { width: 54px; height: 54px; border-radius: 16px; }
    .sms-page .category-title { font-size: 1.03rem; font-weight: 850; letter-spacing: -.02em; }
    .sms-page .category-subtitle { margin-top: 2px; color: var(--sms-muted); font-size: .82rem; }

    .sms-page .category-count {
      padding: 6px 10px;
      color: var(--sms-green);
      background: #edf4f1;
      border-radius: 999px;
      font-size: .73rem;
      font-weight: 850;
    }

    .sms-page .summary-chevron {
      display: grid;
      place-items: center;
      color: var(--sms-green);
      transition: transform .25s;
    }

    .sms-page .category-block[open] .summary-chevron { transform: rotate(180deg); }

    .sms-page .category-content {
      padding: 0 22px 22px 97px;
      border-top: 1px solid #edf0ee;
    }

    .sms-page .service-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 13px;
      padding-top: 20px;
    }

    .sms-page .service-card {
      min-height: 178px;
      padding: 18px;
      border-radius: var(--sms-radius-sm);
    }

    .sms-page .service-card h3 { font-size: .94rem; }
    .sms-page .service-card p { margin: 10px 0 17px; color: var(--sms-muted); font-size: .78rem; }

    .sms-page .price-tag {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 6px;
      margin-top: auto;
      padding: 6px 9px;
      color: var(--sms-green-dark);
      background: #eef5f2;
      border-radius: 8px;
      font-size: .7rem;
      font-weight: 850;
    }

    .sms-page .no-results {
      padding: 55px 24px;
      text-align: center;
      background: var(--sms-white);
      border: 1px dashed #b9c7c1;
      border-radius: var(--sms-radius-md);
    }

    .sms-page .no-results h3 { margin: 12px 0 4px; }
    .sms-page .no-results p { margin: 0; color: var(--sms-muted); }

    .sms-page .help-card {
      position: relative;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 40px;
      padding: clamp(30px, 5vw, 54px);
      color: var(--sms-white);
      background: var(--sms-green-dark);
      border-radius: var(--sms-radius-lg);
      overflow: hidden;
    }

    .sms-page .help-card::after {
      content: "";
      position: absolute;
      width: 330px;
      height: 330px;
      right: -140px;
      top: -160px;
      border: 62px solid rgba(111, 189, 183, .12);
      border-radius: 50%;
    }

    .sms-page .help-card h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3.15rem); line-height: 1.03; letter-spacing: -.045em; }
    .sms-page .help-card p { max-width: 590px; margin: 18px 0 0; color: #cce0d9; }

    .sms-page .help-meta {
      position: relative;
      z-index: 1;
      display: grid;
      align-content: center;
      gap: 12px;
    }

    .sms-page .help-line {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 14px 16px;
      color: #e7f1ed;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 13px;
      font-size: .83rem;
    }

    .sms-page .help-line svg { flex: 0 0 auto; color: var(--sms-aqua); }
    .sms-page .help-line strong { display: block; color: var(--sms-white); margin-bottom: 2px; }

    .sms-page .source-note {
      padding: 28px 0 0;
      color: var(--sms-muted);
      font-size: .76rem;
      text-align: center;
    }

    .sms-page .source-note a { color: var(--sms-green); font-weight: 750; }

    /* Detail */
    .sms-page .detail-hero { background: var(--sms-cream); border-bottom: 1px solid var(--sms-line); }

    .sms-page .detail-hero .wrap { padding-top: 24px; padding-bottom: 55px; }

    .sms-page .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 33px 0 36px;
      padding: 10px 14px;
      color: var(--sms-green);
      background: var(--sms-white);
      border: 1px solid #cfd9d4;
      border-radius: 999px;
      font-weight: 800;
      font-size: .8rem;
      text-decoration: none;
    }

    .sms-page .detail-kicker { color: var(--sms-green); font-weight: 850; font-size: .77rem; text-transform: uppercase; letter-spacing: .1em; }
    .sms-page .detail-hero h1 { max-width: 920px; margin: 12px 0 0; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.05em; }
    .sms-page .detail-lead { max-width: 790px; margin: 22px 0 0; color: #4f625d; font-size: 1.08rem; }

    .sms-page .detail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 55px;
      align-items: start;
      padding-top: 60px;
    }

    .sms-page .detail-section { padding: 0 0 38px; margin-bottom: 38px; border-bottom: 1px solid var(--sms-line); }
    .sms-page .detail-section:last-child { border-bottom: 0; }
    .sms-page .detail-section h2 { font-size: 1.55rem; margin-bottom: 19px; }

    .sms-page .check-list { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
    .sms-page .check-list li { position: relative; padding-left: 31px; }
    .sms-page .check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 1px;
      display: grid;
      place-items: center;
      width: 20px;
      height: 20px;
      color: var(--sms-green);
      background: var(--sms-green-soft);
      border-radius: 50%;
      font-size: .7rem;
      font-weight: 900;
    }

    .sms-page .steps { display: grid; gap: 12px; counter-reset: sms-step; }
    .sms-page .step {
      counter-increment: sms-step;
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 14px;
      padding: 17px;
      background: #fbfcfa;
      border: 1px solid var(--sms-line);
      border-radius: var(--sms-radius-sm);
    }

    .sms-page .step::before {
      content: counter(sms-step);
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      color: var(--sms-white);
      background: var(--sms-green);
      border-radius: 50%;
      font-weight: 900;
    }

    .sms-page .step h3 { margin: 1px 0 4px; font-size: .94rem; }
    .sms-page .step p { margin: 0; color: var(--sms-muted); font-size: .82rem; }

    .sms-page .fee-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
    .sms-page .fee-table th,
    .sms-page .fee-table td { padding: 12px 10px; border-bottom: 1px solid var(--sms-line); text-align: left; vertical-align: top; }
    .sms-page .fee-table th { color: var(--sms-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; }
    .sms-page .fee-table td:last-child { color: var(--sms-green-dark); font-weight: 850; white-space: nowrap; }

    .sms-page .notice {
      display: flex;
      gap: 12px;
      padding: 16px;
      color: #624712;
      background: var(--sms-warning-bg);
      border: 1px solid #ebd49e;
      border-radius: var(--sms-radius-sm);
      font-size: .8rem;
    }

    .sms-page .notice svg { flex: 0 0 auto; color: var(--sms-warning); margin-top: 1px; }

    .sms-page .detail-aside { position: sticky; top: 20px; }
    .sms-page .info-card { padding: 22px; background: var(--sms-white); border: 1px solid var(--sms-line); border-radius: var(--sms-radius-md); box-shadow: 0 18px 48px rgba(16, 54, 46, .08); }

    .sms-page .info-row { padding: 0 0 19px; margin-bottom: 19px; border-bottom: 1px solid var(--sms-line); }
    .sms-page .info-row:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
    .sms-page .info-label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--sms-green); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
    .sms-page .info-value { font-size: .86rem; }
    .sms-page .info-value strong { font-size: 1.12rem; }

    .sms-page .aside-actions { display: grid; gap: 9px; margin-top: 21px; }
    .sms-page .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 47px;
      padding: 10px 15px;
      border: 1px solid var(--sms-green);
      border-radius: 11px;
      font-weight: 850;
      font-size: .78rem;
      cursor: pointer;
      text-decoration: none;
    }

    .sms-page .button-primary { color: var(--sms-white); background: var(--sms-green); }
    .sms-page .button-secondary { color: var(--sms-green); background: var(--sms-white); }
    .sms-page .button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

    .sms-page .related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }

    @media (max-width: 990px) {
      .sms-page .hero-grid { grid-template-columns: 1fr; padding-top: 50px; }
      .sms-page .hero-art { display: none; }
      .sms-page .popular-grid { grid-template-columns: repeat(2, 1fr); }
      .sms-page .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sms-page .detail-layout { grid-template-columns: 1fr; }
      .sms-page .detail-aside { position: static; }
    }

    @media (max-width: 760px) {
      .sms-page .wrap { width: min(calc(100% - 26px), var(--sms-max)); }
      .sms-page .hero-grid { padding: 45px 0 91px; }
      .sms-page .hero h1 { font-size: clamp(2.55rem, 14vw, 4rem); }
      .sms-page .search-panel { grid-template-columns: 1fr 1fr; }
      .sms-page .field { grid-column: 1 / -1; }
      .sms-page .clear-button { width: 100%; }
      .sms-page .section { padding-top: 58px; }
      .sms-page .section-heading { display: block; }
      .sms-page .result-count { display: inline-block; margin-top: 13px; }
      .sms-page .category-block summary { grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 12px; padding: 16px; }
      .sms-page .category-icon { width: 46px; height: 46px; }
      .sms-page .category-count { display: none; }
      .sms-page .category-content { padding: 0 15px 16px; }
      .sms-page .help-card { grid-template-columns: 1fr; }
      .sms-page .detail-layout { gap: 28px; padding-top: 40px; }
      .sms-page .detail-hero .wrap { padding-bottom: 43px; }
    }

    @media (max-width: 540px) {
      .sms-page .search-panel { grid-template-columns: 1fr; padding: 12px; }
      .sms-page .field,
    .sms-page .filter-select,
    .sms-page .clear-button { grid-column: auto; }
      .sms-page .popular-grid,
    .sms-page .service-grid,
    .sms-page .related-grid { grid-template-columns: 1fr; }
      .sms-page .popular-card { min-height: 195px; }
      .sms-page .category-subtitle { display: none; }
      .sms-page .detail-hero h1 { font-size: 2.35rem; }
      .sms-page .fee-table { font-size: .75rem; }
      .sms-page .fee-table th,
    .sms-page .fee-table td { padding: 10px 5px; }
    }

    @media print {
      .sms-page .brand-stripe,
    .sms-page .search-shell,
    .sms-page .back-link,
    .sms-page .aside-actions,
    .sms-page .related-section { display: none !important; }
      .sms-page .detail-layout { grid-template-columns: 1fr 280px; gap: 25px; }
      .sms-page .detail-aside { position: static; }
      .sms-page { background: #fff; }
    }