/* GoServix — landings de dominios (/dominios/ y sus hijas .com/.es/.net/.org).
   Reutiliza las variables de marca del sitio (--gs-navy, --gs-blue, --gs-orange…) y
   el mismo lenguaje visual que la home: hero navy, tarjetas claras con sombra suave,
   titulares Poppins y radios generosos. Prefijo .gsdom- para no chocar con .mk-*. */

.gsdom { font-family: 'Poppins', sans-serif; color: #22303c; }
.gsdom .gs-container { max-width: var(--gs-container, 1600px); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.gsdom .gsdom-wrap { max-width: 1080px; margin: 0 auto; }

/* El contenido de la página vive dentro del contenedor de The7, que lo estrecha y deja
   franjas blancas a los lados de las bandas de color. Esto las saca a ancho completo
   sin tocar la plantilla del tema. */
.gsdom > section { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* The7 impone su tipografía a los titulares; aquí mandamos nosotros, para que las
   landings se lean igual que la home (Poppins, no la serif del tema). */
.gsdom h1, .gsdom h2, .gsdom h3, .gsdom summary, .gsdom .val, .gsdom .cifra {
  font-family: 'Poppins', sans-serif !important;
}

/* ---------- HERO ---------- */
/* El padding superior generoso deja respirar bajo la cabecera fija del tema. */
.gsdom-hero { background: linear-gradient(160deg, var(--gs-navy, #0A2540) 0%, var(--gs-navy-light, #071A2E) 100%); color: #fff; padding: 86px 0 64px; }
.gsdom-hero .eyebrow { display: inline-block; color: #7cc4f7; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 14px; }
.gsdom-hero h1 { font-size: 46px; line-height: 1.08; font-weight: 800; margin: 0 0 14px; color: #fff !important; -webkit-text-fill-color: #fff; }
.gsdom-hero h1 .tld { color: var(--gs-orange, #FF7F22); -webkit-text-fill-color: var(--gs-orange, #FF7F22); }
.gsdom-hero .lead { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 62ch; margin: 0 0 28px; }

.gsdom-precio { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.gsdom-precio .cifra { font-size: 52px; font-weight: 800; line-height: 1; color: #fff; }
.gsdom-precio .cic { font-size: 16px; color: rgba(255,255,255,.75); font-weight: 500; }
.gsdom-hero .coniva { font-size: 13.5px; color: rgba(255,255,255,.6); margin: 0 0 26px; }

/* Buscador */
.gsdom-buscador { display: flex; gap: 10px; max-width: 620px; flex-wrap: wrap; }
.gsdom-buscador input[type=text] { flex: 1 1 320px; min-width: 240px; border: 0; border-radius: var(--gs-radius, 100px); padding: 15px 24px; font-size: 15px; font-family: inherit; color: #22303c; }
.gsdom-buscador input[type=text]:focus { outline: 3px solid rgba(16,145,239,.55); }
.gsdom-buscador button { border: 0; border-radius: var(--gs-radius, 100px); padding: 15px 34px; font-size: 15px; font-weight: 700; font-family: inherit; color: #fff; background: var(--gs-orange, #FF7F22); cursor: pointer; transition: background .18s; }
.gsdom-buscador button:hover { background: var(--gs-orange-hover, #E66D10); }
.gsdom-hero .nota { font-size: 13px; color: rgba(255,255,255,.55); margin: 14px 0 0; }

/* ---------- FRANJA DE PRECIOS ---------- */
.gsdom-tarifas { background: #fff; padding: 42px 0; border-bottom: 1px solid #e9eef3; }
/* Flex y no grid: hay extensiones con 3 tarifas y otras con 2 (el .es no tiene
   transferencia configurada). Así las que haya reparten el ancho sin dejar huecos. */
.gsdom-tarifas .grid { display: flex; flex-wrap: wrap; gap: 16px; }
.gsdom-tarifas .grid > * { flex: 1 1 210px; }
.gsdom-tar { background: #f7f9fb; border: 1px solid #e6edf3; border-radius: 16px; padding: 22px 24px; }
.gsdom-tar .et { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #7a8794; margin-bottom: 8px; }
.gsdom-tar .val { font-size: 28px; font-weight: 800; color: var(--gs-navy, #0A2540); line-height: 1.1; }
.gsdom-tar .sub { font-size: 13px; color: #7a8794; margin-top: 5px; }
.gsdom-tar.destacada { background: #eef7ff; border-color: #bfe0fb; }

/* ---------- SECCIONES ---------- */
.gsdom-sec { padding: 66px 0; }
.gsdom-sec.alt { background: #f7f9fb; }
.gsdom-sec .head { text-align: center; max-width: 720px; margin: 0 auto 42px; }
.gsdom-sec h2 { font-size: 34px; font-weight: 800; line-height: 1.15; color: var(--gs-navy, #0A2540); margin: 0 0 12px; }
.gsdom-sec .head p { font-size: 16.5px; line-height: 1.6; color: #62707d; margin: 0; }

.gsdom-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.gsdom-card { background: #fff; border: 1px solid #e6edf3; border-radius: 16px; padding: 26px; box-shadow: 0 2px 10px rgba(10,37,64,.04); }
.gsdom-sec.alt .gsdom-card { box-shadow: 0 4px 16px rgba(10,37,64,.06); }
.gsdom-card .ic { width: 48px; height: 48px; border-radius: 13px; background: #eef7ff; color: var(--gs-blue, #1091EF); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
.gsdom-card h3 { font-size: 17px; font-weight: 700; color: var(--gs-navy, #0A2540); margin: 0 0 8px; }
.gsdom-card p { font-size: 14.5px; line-height: 1.6; color: #62707d; margin: 0; }

/* Lista de "qué incluye" */
.gsdom-incluye { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 30px; max-width: 900px; margin: 0 auto; }
.gsdom-incluye li { list-style: none; display: flex; gap: 13px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: #3d4b58; }
.gsdom-incluye i { color: #1f9d57; font-size: 16px; margin-top: 3px; flex-shrink: 0; }
.gsdom-incluye b { color: var(--gs-navy, #0A2540); }

/* ---------- FAQ ---------- */
.gsdom-faq { max-width: 820px; margin: 0 auto; }
.gsdom-faq details { background: #fff; border: 1px solid #e6edf3; border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
.gsdom-faq summary { cursor: pointer; padding: 19px 54px 19px 24px; font-size: 16px; font-weight: 600; color: var(--gs-navy, #0A2540); list-style: none; position: relative; }
.gsdom-faq summary::-webkit-details-marker { display: none; }
.gsdom-faq summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--gs-blue, #1091EF); transition: transform .2s; }
.gsdom-faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.gsdom-faq .resp { padding: 0 24px 20px; font-size: 15px; line-height: 1.65; color: #52606d; }
.gsdom-faq .resp p { margin: 0 0 10px; }
.gsdom-faq .resp p:last-child { margin-bottom: 0; }
/* Los enlaces cruzados entre extensiones deben verse: The7 los deja en gris. */
.gsdom .resp a, .gsdom-sec p a { color: var(--gs-blue, #1091EF); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(16,145,239,.35); }
.gsdom .resp a:hover, .gsdom-sec p a:hover { border-bottom-color: var(--gs-blue, #1091EF); }

/* ---------- CTA FINAL ---------- */
.gsdom-cta { background: var(--gs-navy, #0A2540); color: #fff; padding: 58px 0; text-align: center; }
.gsdom-cta h2 { font-size: 32px; font-weight: 800; color: #fff !important; -webkit-text-fill-color: #fff; margin: 0 0 12px; }
.gsdom-cta p { font-size: 16.5px; color: rgba(255,255,255,.78); margin: 0 0 26px; }
.gsdom-cta .btn { display: inline-block; background: var(--gs-orange, #FF7F22); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; padding: 15px 38px; border-radius: var(--gs-radius, 100px); transition: background .18s; }
.gsdom-cta .btn:hover { background: var(--gs-orange-hover, #E66D10); color: #fff; }

/* ---------- REJILLA DE EXTENSIONES (índice) ---------- */
.gsdom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.gsdom-ext { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #e6edf3; border-radius: 14px; padding: 16px 20px; text-decoration: none; transition: .16s; }
.gsdom-ext:hover { border-color: var(--gs-blue, #1091EF); box-shadow: 0 6px 18px rgba(16,145,239,.12); transform: translateY(-2px); }
.gsdom-ext b { font-size: 18px; color: var(--gs-navy, #0A2540); font-weight: 800; }
.gsdom-ext .p { font-size: 14px; font-weight: 700; color: var(--gs-blue, #1091EF); }
.gsdom-ext .p small { display: block; font-weight: 500; color: #90a0ad; font-size: 11.5px; }
.gsdom-destacadas { margin-bottom: 34px; }
.gsdom-destacadas .gsdom-ext { padding: 22px 24px; }

.gsdom-tabla { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(10,37,64,.05); }
.gsdom-tabla th { background: #f2f6fa; text-align: left; padding: 14px 18px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: #62707d; }
.gsdom-tabla td { padding: 13px 18px; border-top: 1px solid #eef2f6; }
.gsdom-tabla td:first-child { font-weight: 700; color: var(--gs-navy, #0A2540); }
.gsdom-tabla .iva { color: #90a0ad; font-size: 12.5px; }

/* ---------- MÓVIL ---------- */
@media (max-width: 860px) {
  .gsdom-hero { padding: 54px 0 40px; }
  .gsdom-hero h1 { font-size: 33px; }
  .gsdom-precio .cifra { font-size: 40px; }
  .gsdom-sec { padding: 46px 0; }
  .gsdom-sec h2 { font-size: 26px; }
  .gsdom-cta h2 { font-size: 25px; }
  .gsdom-buscador button { flex: 1 1 100%; }
  .gsdom-tabla { font-size: 14px; }
  .gsdom-tabla th, .gsdom-tabla td { padding: 11px 12px; }
}

/* --- Creador de webs con IA (loop #7, B4) -----------------------------------
   Reutiliza el armazón de las landings de dominios; solo se añade lo propio. */
.gsia-precio { font-size: 30px; font-weight: 800; color: var(--gs-navy, #0A2540); margin: 4px 0 10px; }
.gsia-precio em { font-size: 14px; font-weight: 600; color: #62707d; font-style: normal; }
.gsdom-card.destacada { border-color: #bfe0fb; background: #f7fbff; }
.gsdom-card .badge { display: inline-block; vertical-align: middle; margin-left: 6px; background: var(--gs-blue, #1091EF);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 8px; border-radius: 999px; }
.gsia .gsdom-hero .nota { margin-top: 18px; color: #cfe6fa; font-size: 14.5px; text-align: left; max-width: 62ch; }
.gsia .nota { font-size: 14.5px; line-height: 1.6; color: #62707d; text-align: center; margin-top: 28px; }
/* El botón del hero: mismo aspecto que el de la sección de cierre. */
.gsia-accion { margin: 26px 0 0; }
.gsia-accion .btn { display: inline-block; background: var(--gs-orange, #FF7F22); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 16px; padding: 15px 38px; border-radius: var(--gs-radius, 100px); transition: background .18s; }
.gsia-accion .btn:hover { background: var(--gs-orange-hover, #E66D10); color: #fff; }
.gsdom-cta .gsia-accion { margin-top: 0; }