/* Dynamic DNS for Plesk: the product pages under /dynamic-dns/ (dynamic-dns.tpl), moved from the static site into WHMCS
   on 03-11-2026. The rules are Webs' dynamic-dns.css (dabbleam-design/piezas/dynamic-dns, 30-10-2026) over the theme's
   style.css, plus the few overrides the theme's article rules need. Colours from the style guide, "Color en pantalla". */
.ddns-ancho { max-width: 1024px; margin: 0 auto; padding: 0 1.25em; }
/* product band, under the site header */
.ddns-banda { background: #f3f9fe; border-bottom: 1px solid #e3eef6; }
.ddns-banda .ddns-ancho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em 2em; padding-top: 1.4em; padding-bottom: 1.4em; }
.ddns-producto { display: flex; flex-wrap: wrap; align-items: center; gap: .9em; }
.ddns-producto .ddns-descarga { margin-left: .4em; }
@media (max-width: 560px) { .ddns-producto .ddns-descarga { margin-left: 0; } }
.ddns-producto img { border-radius: 12px; box-shadow: 0 2px 6px rgba(0, 60, 110, .2); }
.ddns-nombre { display: block; font-weight: bold; font-size: 1.35em; color: #0b2a40; }
.ddns-de { display: block; color: #5f6b78; font-size: .9em; margin-top: .15em; } /* 5.1:1 on the band (Webs' grey gave 4.3) */
.ddns-pestanas { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 0; }
.ddns-pestanas li { margin: 0; list-style: none; }
.ddns-pestanas a { display: flex; align-items: center; min-height: 44px; padding: .55em .95em .5em; border-radius: .4em; text-decoration: none; font-weight: bold; font-size: .95em; color: #006bae; } /* 44 px tap target (caza-ux) */
.ddns-pestanas a:hover { background: #e9f6ff; color: #005ca5; }
.ddns-pestanas a[aria-current="page"] { background: #007ac7; color: #fff; }
.ddns-pestanas a:focus-visible, .ddns-indice a:focus-visible { outline: 3px solid #007ac7; outline-offset: 2px; }

/* Objectivity draws capitals .1em over the middle of the line: the text 1px lower, taken from the bottom padding so
   the height stays (Jesús, 03-11-2026) */
/* download: the brand's main button (dark gradient, white text at 4.5:1 or more), with a down arrow */
.ddns-descarga { display: inline-flex; align-items: center; min-height: 44px; gap: .5em; padding: calc(.65em + 1px) 1.2em calc(.6em - 1px); border-radius: .45em; text-decoration: none; font-weight: bold; /* 44 px tap target (caza-ux, 03-11-2026) */
  color: #fff !important; background: linear-gradient(to bottom, #007ac7, #005ca5); box-shadow: 0 2px 6px rgba(0, 60, 110, .25); text-shadow: 0 1px .4px rgba(0,0,0,.35); }
.ddns-descarga:hover { background: #005ca5; }
.ddns-descarga:focus-visible { outline: 3px solid #007ac7; outline-offset: 2px; }
.ddns-descarga::before { content: ""; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat; }

/* text (the theme's article rules centre and enlarge h1 and add side padding: undone here) */
.ddns-texto { max-width: 760px; margin: 0; padding: 2.5em 0 4em; color: #24313d; font-size: 1.02em; line-height: 1.65; }
.ddns-texto h1 { font-size: 2.2em !important; line-height: 1.2; max-width: none; margin: 0 0 .7em; color: #0b2a40; text-align: left; }
.ddns-texto h2 { font-size: 1.45em; line-height: 1.3; text-align: left; margin: 2em 0 .6em; padding-top: .3em; color: #0b2a40; scroll-margin-top: 7em; }
.ddns-texto h3 { font-size: 1.15em; margin: 1.6em 0 .4em; color: #006bae; scroll-margin-top: 7em; }
.ddns-texto p, .ddns-texto ul, .ddns-texto ol { margin: 0 0 1em; }
.ddns-texto ul, .ddns-texto ol { padding-left: 1.4em; }
/* the theme's reset removes bullets, numbering and bold */
.ddns-texto ul { list-style: disc; } .ddns-texto ol { list-style: decimal; } .ddns-texto ul ul { list-style: circle; margin: .35em 0 .2em; }
.ddns-texto strong, .ddns-texto b, .ddns-texto h1, .ddns-texto h2, .ddns-texto h3, .ddns-texto th { font-weight: bold; }
.ddns-texto em { font-style: italic; }
.ddns-texto li { margin-bottom: .35em; }
.ddns-texto li::marker { color: #007ac7; }
.ddns-texto strong { color: #0b2a40; }
.ddns-texto code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .86em;
  background: #f3f9fe; border: 1px solid #e3eef6; border-radius: 3px; padding: .05em .3em; color: #0b2a40; overflow-wrap: anywhere; }
.ddns-texto pre { background: #f3f9fe; border: 1px solid #e3eef6; border-left: 3px solid #00b7ff; border-radius: 0 .4em .4em 0;
  padding: 1em 1.1em; overflow-x: auto; margin: 0 0 1.2em; line-height: 1.5; }
.ddns-texto pre code { background: none; border: 0; padding: 0; font-size: .85em; overflow-wrap: normal; white-space: pre; }
.ddns-texto table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; font-size: .93em; display: block; overflow-x: auto; }
.ddns-texto th { text-align: left; background: #e9f6ff; color: #006bae; border-bottom: 2px solid #00b7ff; padding: .55em .8em; white-space: nowrap; }
.ddns-texto td { border-bottom: 1px solid #e3eef6; padding: .55em .8em; vertical-align: top; }
/* a cell that is one link ("See above" in the settings table): the link fills the cell, 44 px tall (caza-ux) */
.ddns-texto td > .ddns-celda-enlace { display: flex; align-items: center; min-height: 44px; margin: -.55em -.8em; padding: 0 .8em; }
.ddns-texto blockquote { margin: 0 0 1.2em; padding: .9em 1.1em; background: #fff7e6; border-left: 3px solid #f0a000; }
.ddns-texto blockquote p:last-child { margin: 0; }

/* the licence agreement 2.0 (legal/eula-dns-dinamico-<lang>.tpl) comes with the theme's section numbers and tables */
.ddns-texto .condiciones-seccion { display: flex; align-items: baseline; gap: .5em; }
.ddns-texto .condiciones-tabla { display: table; }
/* its headers wrap, unlike the other tables of these pages: on one line they push it out of the page just above 640px */
.ddns-texto .condiciones-tabla th { white-space: normal; }
/* the language selector of the pages that have more than one (the theme's .condiciones-idiomas), under the band */
.ddns-idiomas .condiciones-idiomas { justify-content: flex-start; margin: 1.8em 0 -1em; padding: 0; }
.ddns-idiomas .condiciones-idiomas li { margin: 0; list-style: none; }

/* screenshots in the documentation */
.ddns-capturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin: 1.5em 0 2em; }
.ddns-capturas a { display: block; border-radius: .4em; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 60, 110, .16); }
.ddns-capturas img { display: block; width: 100%; height: auto; }

/* documentation: the index in a fixed side column */
.ddns-con-indice { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3em; }
.ddns-indice { position: sticky; top: 7em; align-self: start; max-height: calc(100vh - 8em); overflow-y: auto; padding: 2.6em 0 2em; font-size: .9em; }
.ddns-indice p { margin: 0 0 .7em; font-size: .8em; letter-spacing: .15em; text-transform: uppercase; color: #006bae; }
.ddns-indice ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid #e3eef6; }
.ddns-indice li { margin: 0; list-style: none; }
.ddns-indice a { display: flex; align-items: center; min-height: 44px; padding: .35em .9em; color: #4a5866; text-decoration: none; line-height: 1.35; } /* 44 px tap target (caza-ux) */
.ddns-indice a:hover { color: #006bae; background: #f3f9fe; }

@media only screen and (max-width: 860px) {
  .ddns-con-indice { display: block; }
  .ddns-indice { position: static; max-height: none; padding: 1.6em 0 0; }
  .ddns-indice ul { columns: 2; column-gap: 1.5em; }
  .ddns-capturas { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 520px) {
  .ddns-indice ul { columns: 1; }
  .ddns-texto h1 { font-size: 1.8em !important; }
}
