/*
Theme Name: DTF Infra
Theme URI: https://www.factoriadatos.com/
Author: DTF - La Factoria del Dato
Author URI: https://www.factoriadatos.com/
Description: Tema de bloques (Full Site Editing) para DTF - La Factoria del Dato. Orientado a la venta y configuracion de infraestructura de IA local, nube e hibrida, venta de servidores dedicados y servicios de asesoria en datos y ciberseguridad. Incluye catalogo de servidores, configurador-cotizador y patrones de bloques en espanol.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dtf-infra
Tags: full-site-editing, block-patterns, business, technology, dark-mode, one-column, custom-colors, custom-menu, wide-blocks
*/

/* =========================================================
   1. Base
   ========================================================= */

/* Sin esto, un elemento con height:100% y relleno se desborda de su fila de
   rejilla justo lo que miden el relleno y el borde, y se monta sobre la fila
   siguiente. WordPress no lo garantiza para elementos propios del tema. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--wp--preset--color--primary);
  color: #00122B;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where(summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

.dtf-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--wp--preset--color--primary);
  color: #00122B;
  font-weight: 600;
  border-radius: 0 0 10px 0;
}
.dtf-skip-link:focus { left: 0; }

/* Fondo global con textura de retícula muy sutil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(93, 219, 155, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 219, 155, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 0%, transparent 75%);
}
.wp-site-blocks { position: relative; z-index: 1; }

/* =========================================================
   2. Utilidades de composición
   ========================================================= */

.dtf-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.dtf-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.dtf-surface {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 22px;
}

.dtf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary);
  margin: 0 0 1rem;
}
.dtf-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 4px rgba(72, 208, 255, .18);
}

.dtf-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--wp--preset--color--muted);
  line-height: 1.65;
  max-width: 62ch;
}

.dtf-muted { color: var(--wp--preset--color--muted); }
.dtf-mono  { font-family: var(--wp--preset--font-family--mono); }

.dtf-grid { display: grid; gap: 1.25rem; }
.dtf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dtf-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dtf-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.dtf-split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .dtf-split { grid-template-columns: 1.05fr .95fr; }
  .dtf-split--reverse > *:first-child { order: 2; }
}

.dtf-stack-sm > * + * { margin-top: .65rem; }
.dtf-stack-md > * + * { margin-top: 1.15rem; }

/* =========================================================
   3. Cabecera
   ========================================================= */

.dtf-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(0, 18, 43, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.dtf-header .wp-block-navigation {
  font-size: .9375rem;
  font-weight: 500;
}
.dtf-header .wp-block-navigation a { color: var(--wp--preset--color--contrast); }
.dtf-header .wp-block-navigation a:hover,
.dtf-header .wp-block-navigation .current-menu-item > a {
  color: var(--wp--preset--color--primary);
}
.dtf-header .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--surface) !important;
  border: 1px solid var(--wp--preset--color--border) !important;
  border-radius: 14px;
  padding: .5rem;
  min-width: 260px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .8);
}
.dtf-header .wp-block-navigation__submenu-container a {
  border-radius: 9px;
  padding: .55rem .75rem !important;
}
.dtf-header .wp-block-navigation__submenu-container a:hover {
  background: var(--wp--preset--color--surface-alt);
}

.dtf-logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
/* Isotipo del logo oficial (hexágono + cubo de datos). */
.dtf-logo__mark {
  width: 44px;
  height: 46px;
  flex: none;
  display: block;
  object-fit: contain;
}

/* Logotipo completo con texto: pie de página y páginas internas. */
.dtf-logo__full {
  display: block;
  width: min(300px, 100%);
  height: auto;
}
.dtf-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.dtf-logo__name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--contrast);
  letter-spacing: -.02em;
}
.dtf-logo__tag {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.dtf-topbar {
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
  font-size: .8125rem;
  color: var(--wp--preset--color--muted);
}
.dtf-topbar a { color: var(--wp--preset--color--muted); text-decoration: none; }
.dtf-topbar a:hover { color: var(--wp--preset--color--primary); }

/* =========================================================
   4. Hero
   ========================================================= */

.dtf-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 10vw, 8rem);
}
.dtf-hero::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 120%;
  background: var(--wp--preset--gradient--halo);
  pointer-events: none;
  z-index: 0;
}
.dtf-hero > * { position: relative; z-index: 1; }

.dtf-hero h1 { max-width: 17ch; }
.dtf-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--wp--preset--color--primary) 0%, #65F9D0 55%, var(--wp--preset--color--secondary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dtf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}

.dtf-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.dtf-hero__proof > div { min-width: 130px; }
.dtf-hero__proof strong {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--wp--preset--color--contrast);
  line-height: 1.1;
}
.dtf-hero__proof span {
  font-size: .8125rem;
  color: var(--wp--preset--color--muted);
}

/* Panel de "terminal" decorativo del hero */
.dtf-terminal {
  background: #000C1D;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
}
.dtf-terminal__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .95rem;
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.dtf-terminal__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--border); }
.dtf-terminal__dot--live { background: var(--wp--preset--color--success); }
.dtf-terminal__title {
  margin-left: .5rem;
  font-size: .75rem;
  color: var(--wp--preset--color--muted);
  letter-spacing: .04em;
}
.dtf-terminal__body { padding: 1.1rem 1.15rem; line-height: 1.85; }
.dtf-terminal__body .c-key { color: var(--wp--preset--color--secondary); }
.dtf-terminal__body .c-val { color: var(--wp--preset--color--primary-soft); }
.dtf-terminal__body .c-ok  { color: var(--wp--preset--color--success); }
.dtf-terminal__body .c-dim { color: var(--wp--preset--color--muted); }

/* =========================================================
   5. Tarjetas
   ========================================================= */

.dtf-card {
  position: relative;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  padding: 1.6rem;
  transition: transform 180ms cubic-bezier(.4, 0, .2, 1),
              border-color 180ms cubic-bezier(.4, 0, .2, 1),
              background 180ms cubic-bezier(.4, 0, .2, 1);
  height: 100%;
}
.dtf-card:hover {
  transform: translateY(-3px);
  border-color: rgba(72, 208, 255, .45);
  background: var(--wp--preset--color--surface-alt);
}
.dtf-card h3 { margin: 0 0 .6rem; font-size: 1.1875rem; }
.dtf-card p  { margin: 0; color: var(--wp--preset--color--muted); font-size: .9375rem; }

.dtf-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: rgba(72, 208, 255, .12);
  border: 1px solid rgba(72, 208, 255, .28);
  color: var(--wp--preset--color--primary);
}
.dtf-card__icon svg { width: 22px; height: 22px; }
.dtf-card__icon--blue {
  background: rgba(93, 219, 155, .12);
  border-color: rgba(93, 219, 155, .28);
  color: var(--wp--preset--color--secondary);
}

.dtf-card__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.dtf-card__link::after { content: "\2192"; transition: transform 180ms; }
.dtf-card:hover .dtf-card__link::after { transform: translateX(3px); }

.dtf-card--outline {
  background: transparent;
  border-style: dashed;
}

/* Lista de checks */
.dtf-checks { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.dtf-checks li {
  position: relative;
  padding-left: 1.65rem;
  margin: 0 0 .55rem;
  font-size: .9375rem;
  color: var(--wp--preset--color--muted);
}
.dtf-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 15px;
  height: 9px;
  border-left: 2px solid var(--wp--preset--color--success);
  border-bottom: 2px solid var(--wp--preset--color--success);
  transform: rotate(-45deg);
}

/* =========================================================
   6. Catálogo de servidores
   ========================================================= */

.dtf-server {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  transition: transform 180ms cubic-bezier(.4, 0, .2, 1), border-color 180ms;
}
.dtf-server:hover { transform: translateY(-4px); border-color: rgba(72, 208, 255, .5); }

.dtf-server--destacado {
  border-color: rgba(72, 208, 255, .55);
  box-shadow: var(--wp--preset--shadow--glow);
}

.dtf-server__head {
  padding: 1.5rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
  background: linear-gradient(180deg, rgba(72, 208, 255, .06), transparent);
}
.dtf-server__cat {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--wp--preset--color--secondary);
}
.dtf-server__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.375rem;
  font-weight: 700;
  margin: .4rem 0 .5rem;
  letter-spacing: -.02em;
}
.dtf-server__claim { font-size: .9375rem; color: var(--wp--preset--color--muted); margin: 0; }

.dtf-server__body { padding: 1.25rem 1.5rem; flex: 1; }

.dtf-spec { margin: 0; display: grid; gap: .55rem; }
.dtf-spec > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: .75rem;
  font-size: .875rem;
  align-items: baseline;
}
.dtf-spec dt {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wp--preset--color--muted);
}
.dtf-spec dd { margin: 0; color: var(--wp--preset--color--contrast); }

.dtf-server__foot {
  padding: 1.15rem 1.5rem 1.5rem;
  border-top: 1px solid var(--wp--preset--color--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dtf-server__price { line-height: 1.25; }
.dtf-server__price small {
  display: block;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--mono);
}
.dtf-server__price strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.375rem;
  color: var(--wp--preset--color--contrast);
}

.dtf-badge {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--mono);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--muted);
}
.dtf-badge--hot    { background: rgba(72, 208, 255, .14); border-color: rgba(72, 208, 255, .4); color: var(--wp--preset--color--primary); }
.dtf-badge--blue   { background: rgba(93, 219, 155, .12); border-color: rgba(93, 219, 155, .38); color: var(--wp--preset--color--secondary); }
.dtf-badge--green  { background: rgba(101, 249, 208, .12); border-color: rgba(101, 249, 208, .38); color: var(--wp--preset--color--success); }

/* Escalera de equipos: tres columnas para que 9 tarjetas cuadren en 3 filas */
.dtf-escalera__grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.dtf-server__peldano {
  display: inline-block;
  margin-bottom: .65rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--base);
  background: var(--wp--preset--color--primary);
}

.dtf-escalera__nota {
  margin-top: 1.75rem;
  font-size: .8125rem;
  color: var(--wp--preset--color--muted);
  max-width: 70ch;
}

/* Botones auxiliares (fuera del bloque core/button) */
.dtf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4, 0, .2, 1);
  font-family: var(--wp--preset--font-family--body);
}
.dtf-btn--primary { background: var(--wp--preset--color--primary); color: #00122B; }
.dtf-btn--primary:hover { background: var(--wp--preset--color--primary-soft); color: #00122B; }
.dtf-btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--border);
}
.dtf-btn--ghost:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }
.dtf-btn--sm { padding: .6rem 1.15rem; font-size: .875rem; }
.dtf-btn--block { width: 100%; }

/* =========================================================
   7. Modalidades de despliegue (pestañas)
   ========================================================= */

.dtf-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .4rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}
.dtf-tabs__btn {
  border: none;
  background: transparent;
  color: var(--wp--preset--color--muted);
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 180ms;
}
.dtf-tabs__btn:hover { color: var(--wp--preset--color--contrast); }
.dtf-tabs__btn[aria-selected="true"] {
  background: var(--wp--preset--color--primary);
  color: #00122B;
}
.dtf-tabs__panel[hidden] { display: none; }

/* =========================================================
   8. Proceso
   ========================================================= */

.dtf-steps { counter-reset: paso; display: grid; gap: 1rem; }
@media (min-width: 900px) { .dtf-steps { grid-template-columns: repeat(4, 1fr); } }

.dtf-step {
  position: relative;
  padding: 1.5rem 1.35rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
}
.dtf-step::before {
  counter-increment: paso;
  content: "0" counter(paso);
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .8125rem;
  color: var(--wp--preset--color--primary);
  letter-spacing: .12em;
  margin-bottom: .85rem;
}
.dtf-step h3 { font-size: 1.0625rem; margin: 0 0 .5rem; }
.dtf-step p  { font-size: .875rem; color: var(--wp--preset--color--muted); margin: 0; }

/* =========================================================
   9. Stack tecnológico
   ========================================================= */

.dtf-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.dtf-chip {
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  font-size: .8125rem;
  font-family: var(--wp--preset--font-family--mono);
  color: var(--wp--preset--color--muted);
  transition: all 180ms;
}
.dtf-chip:hover { border-color: rgba(93, 219, 155, .5); color: var(--wp--preset--color--secondary); }

/* =========================================================
   10. FAQ
   ========================================================= */

.dtf-faq { display: grid; gap: .75rem; }
.dtf-faq details {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  overflow: hidden;
}
.dtf-faq summary {
  cursor: pointer;
  padding: 1.15rem 3rem 1.15rem 1.35rem;
  font-weight: 600;
  font-size: 1rem;
  position: relative;
  list-style: none;
}
.dtf-faq summary::-webkit-details-marker { display: none; }
.dtf-faq summary::after {
  content: "+";
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  color: var(--wp--preset--color--primary);
  font-weight: 400;
  transition: transform 180ms;
}
.dtf-faq details[open] summary::after { content: "\2013"; }
.dtf-faq details > div {
  padding: 0 1.35rem 1.25rem;
  color: var(--wp--preset--color--muted);
  font-size: .9375rem;
}

/* =========================================================
   11. CTA
   ========================================================= */

.dtf-cta {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(72, 208, 255, .22) 0%, transparent 60%),
    var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
}
.dtf-cta h2 { max-width: 20ch; }
.dtf-cta .dtf-lead { max-width: 52ch; }
.dtf-cta__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* =========================================================
   12. Configurador / cotizador
   ========================================================= */

.dtf-config {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1000px) {
  .dtf-config { grid-template-columns: 1fr 380px; }
  .dtf-config__resumen { position: sticky; top: 110px; }
}

.dtf-config__paso {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  padding: 1.5rem;
  margin-bottom: 1.15rem;
}
.dtf-config__paso > h3 {
  font-size: 1rem;
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.dtf-config__paso > h3 span {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: rgba(72, 208, 255, .15);
  border: 1px solid rgba(72, 208, 255, .4);
  color: var(--wp--preset--color--primary);
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-family: var(--wp--preset--font-family--mono);
}
.dtf-config__hint {
  font-size: .8125rem;
  color: var(--wp--preset--color--muted);
  margin: 0 0 1.15rem;
  padding-left: 2.1rem;
}

.dtf-opts { display: grid; gap: .6rem; }
.dtf-opts--2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dtf-opts--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.dtf-opt { position: relative; display: block; cursor: pointer; }
.dtf-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.dtf-opt__box {
  display: block;
  padding: .95rem 1.05rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 13px;
  background: var(--wp--preset--color--base);
  transition: all 160ms;
  height: 100%;
}
.dtf-opt:hover .dtf-opt__box { border-color: rgba(72, 208, 255, .45); }
.dtf-opt input:checked + .dtf-opt__box {
  border-color: var(--wp--preset--color--primary);
  background: rgba(72, 208, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(72, 208, 255, .5);
}
.dtf-opt input:focus-visible + .dtf-opt__box {
  outline: 2px solid var(--wp--preset--color--secondary);
  outline-offset: 2px;
}
.dtf-opt__t { display: block; font-weight: 600; font-size: .9375rem; }
.dtf-opt__d { display: block; font-size: .78125rem; color: var(--wp--preset--color--muted); margin-top: .2rem; line-height: 1.45; }

/* Precio de cada componente dentro de su tarjeta de opcion */
.dtf-opt__p {
  display: block;
  margin-top: .5rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--wp--preset--color--primary);
}
.dtf-opt input:checked + .dtf-opt__box .dtf-opt__p { color: var(--wp--preset--color--contrast); }
.dtf-opt input:disabled + .dtf-opt__box { opacity: .85; cursor: default; }

/* Selector de unidades (GPU, discos) */
.dtf-field--cant {
  max-width: 220px;
  margin: 1.15rem 0 0;
}

/* Precio a la derecha de cada linea del resumen */
.dtf-resumen__precio {
  display: block;
  font-style: normal;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  font-weight: 400;
  color: var(--wp--preset--color--muted);
  margin-top: .1rem;
}

.dtf-config__resumen {
  background: var(--wp--preset--color--surface);
  border: 1px solid rgba(72, 208, 255, .35);
  border-radius: 20px;
  padding: 1.5rem;
}

/* En escritorio el panel se queda fijo y, si la lista crece, es la lista la que
   se desplaza por dentro: el total y los botones nunca se salen de pantalla. */
@media (min-width: 1000px) {
  .dtf-config__resumen {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 8rem);
  }
  .dtf-resumen__lineas {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: -.4rem;
    padding-right: .4rem;
  }
  .dtf-config__resumen > h3,
  .dtf-config__resumen > .dtf-resumen__total,
  .dtf-config__resumen > .dtf-btn,
  .dtf-config__resumen > .dtf-form__msg { flex: 0 0 auto; }
}

/* =========================================================
   12b. Barra de total fija (moviles y pantallas cortas)
   ========================================================= */

.dtf-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 86;
  background: rgba(0, 26, 63, .96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid rgba(72, 208, 255, .38);
  box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, .7);
}

.dtf-barra__panel {
  max-height: min(46vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .9rem 1.1rem 0;
  border-bottom: 1px solid var(--wp--preset--color--border);
  display: none;
}
.dtf-barra.is-abierta .dtf-barra__panel { display: block; }

.dtf-barra__fila {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.1rem;
  padding-right: 4.6rem; /* deja libre el boton flotante de WhatsApp */
  padding-bottom: max(.7rem, env(safe-area-inset-bottom));
}

.dtf-barra__cifra { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.dtf-barra__cifra small {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wp--preset--color--muted);
}
.dtf-barra__cifra strong {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.15rem;
  color: var(--wp--preset--color--primary);
  font-variant-numeric: tabular-nums;
}

.dtf-barra__ver {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--body);
  font-size: .8125rem;
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: 999px;
  cursor: pointer;
}
.dtf-barra__ver:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

.dtf-barra__ir { flex: 0 0 auto; padding: .55rem 1.1rem; font-size: .8125rem; }

/* Con la barra visible, el boton de WhatsApp sube para no taparla. */
body.dtf-con-barra .dtf-wa { bottom: 84px; }

@media (min-width: 1000px) {
  .dtf-barra { display: none; }
  body.dtf-con-barra .dtf-wa { bottom: 18px; }
}
.dtf-config__resumen h3 { font-size: 1.0625rem; margin: 0 0 1.15rem; }
.dtf-resumen__linea {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px dashed var(--wp--preset--color--border);
  font-size: .875rem;
}
.dtf-resumen__linea span:first-child {
  color: var(--wp--preset--color--muted);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dtf-resumen__linea span:last-child { text-align: right; font-weight: 600; }

.dtf-resumen__total {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.dtf-resumen__total small {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wp--preset--color--muted);
}
.dtf-resumen__total strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.75rem;
  color: var(--wp--preset--color--contrast);
  display: block;
  margin-top: .2rem;
}
.dtf-resumen__nota { font-size: .75rem; color: var(--wp--preset--color--muted); margin: .6rem 0 0; line-height: 1.5; }

/* Campos de formulario */
.dtf-field { display: block; margin-bottom: .9rem; }
.dtf-field > span {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--wp--preset--color--contrast);
}
.dtf-field input,
.dtf-field select,
.dtf-field textarea {
  width: 100%;
  padding: .8rem .95rem;
  border-radius: 11px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-family: inherit;
  font-size: .9375rem;
  transition: border-color 160ms;
}
.dtf-field input::placeholder,
.dtf-field textarea::placeholder { color: #5B7EA3; }
.dtf-field input:focus,
.dtf-field select:focus,
.dtf-field textarea:focus {
  border-color: var(--wp--preset--color--primary);
  outline: none;
}
.dtf-field textarea { min-height: 110px; resize: vertical; }
.dtf-field--check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .8125rem;
  color: var(--wp--preset--color--muted);
}
.dtf-field--check input { width: auto; margin-top: .2rem; }

.dtf-form__msg {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 11px;
  font-size: .875rem;
  display: none;
}
.dtf-form__msg--ok   { display: block; background: rgba(101, 249, 208, .12); border: 1px solid rgba(101, 249, 208, .4); color: var(--wp--preset--color--success); }
.dtf-form__msg--err  { display: block; background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .4); color: #FF8FA3; }

.dtf-hp { position: absolute !important; left: -9999px !important; }

/* =========================================================
   13. Tabla comparativa
   ========================================================= */

.dtf-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtf-compare {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .875rem;
}
.dtf-compare th,
.dtf-compare td {
  padding: .95rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.dtf-compare thead th {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wp--preset--color--secondary);
  background: var(--wp--preset--color--surface);
}
.dtf-compare thead th:first-child { border-radius: 12px 0 0 0; }
.dtf-compare thead th:last-child  { border-radius: 0 12px 0 0; }
.dtf-compare tbody tr:hover td { background: rgba(4, 41, 79, .6); }
.dtf-compare td:first-child { font-weight: 600; color: var(--wp--preset--color--contrast); }

/* =========================================================
   14. Entradas / blog
   ========================================================= */

.dtf-post-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 180ms, transform 180ms;
  height: 100%;
}
.dtf-post-card:hover { border-color: rgba(72, 208, 255, .45); transform: translateY(-3px); }

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.wp-block-post-date,
.wp-block-post-terms {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.wp-block-post-featured-image img { border-radius: 14px; }
.wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); font-size: .9375rem; }

.dtf-prose > * + * { margin-top: 1.25rem; }
.dtf-prose h2 { margin-top: 2.75rem; }
.dtf-prose h3 { margin-top: 2rem; }
.dtf-prose ul,
.dtf-prose ol { padding-left: 1.35rem; color: var(--wp--preset--color--muted); }
.dtf-prose li + li { margin-top: .45rem; }

/* =========================================================
   15. Pie de página
   ========================================================= */

.dtf-footer {
  border-top: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.dtf-footer__cols {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.dtf-footer__marca {
  grid-column: span 2;
  min-width: 240px;
}
.dtf-footer__marca p { max-width: 38ch; }
.dtf-footer h4 {
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--wp--preset--color--muted);
  margin: 0 0 1rem;
  font-weight: 500;
}
.dtf-footer ul { list-style: none; margin: 0; padding: 0; }
.dtf-footer li + li { margin-top: .5rem; }
.dtf-footer a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  font-size: .9375rem;
}
.dtf-footer a:hover { color: var(--wp--preset--color--primary); }

/* Columna de contacto generada por [dtf_contactos] */
.dtf-contactos li + li { margin-top: .85rem; }
.dtf-contactos-etiqueta {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--wp--preset--color--muted);
  margin-bottom: .1rem;
}
.dtf-contactos .dtf-muted { font-size: .9375rem; }

/* Version de una linea, para la barra superior */
.dtf-contactos-linea {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.dtf-contactos-linea a { white-space: nowrap; }

.dtf-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .8125rem;
  color: var(--wp--preset--color--muted);
}

.dtf-social { display: flex; gap: .6rem; }
.dtf-social a {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--wp--preset--color--border);
  display: grid;
  place-items: center;
  color: var(--wp--preset--color--muted);
  transition: all 180ms;
}
.dtf-social a:hover {
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  transform: translateY(-2px);
}
.dtf-social svg { width: 17px; height: 17px; fill: currentColor; }

/* Botón flotante de WhatsApp */
.dtf-wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .6);
  transition: transform 180ms;
}
.dtf-wa:hover { transform: scale(1.07); }
.dtf-wa svg { width: 27px; height: 27px; fill: #062B14; }

/* =========================================================
   16. Accesibilidad / movimiento reducido
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .dtf-header, .dtf-footer, .dtf-wa, .dtf-cta { display: none !important; }
  body { background: #fff; color: #000; }
}