/* =============================================================================
   DOTCRAFT BASE — COMPONENTS
   Botones, cards, nav, footer, hero y componentes reutilizables.
   =============================================================================

   API PÚBLICA — Clases estables entre versiones del base theme.
   Los child themes pueden usar y extender estas clases con seguridad.

   Layout:        .dc-container  .dc-container--wide  .dc-section  .dc-section--sm/lg
   Botones:       .dc-btn  .dc-btn--primary/secondary/ghost  .dc-btn--sm/lg
   Cards:         .dc-card  .dc-card__image  .dc-card__body  .dc-card__title  .dc-card__text
   Hero:          .dc-hero  .dc-hero__content  .dc-hero__title  .dc-hero__subtitle  .dc-hero__actions
   Prose:         .dc-prose
   Animaciones:   .dc-reveal  .dc-reveal.is-visible  .dc-reveal--delay-1/2/3/4

   INTERNOS — Pueden cambiar entre versiones. No usar en child themes.

   .dc-header__inner  .dc-header__nav  .dc-header__burger
   .dc-nav__list

   NOTA: Componentes específicos de cliente (service cards, support sections,
   CTA form overrides, page detail sections) van en el child theme.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------------------- */
.dc-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--dc-space-2);
	padding:         var(--dc-space-3) var(--dc-space-6);
	font-size:       var(--dc-font-size-base);
	font-weight:     var(--dc-font-weight-semibold);
	line-height:     1;
	border-radius:   var(--dc-radius-md);
	cursor:          pointer;
	transition:      background var(--dc-duration-base) var(--dc-ease),
	                 color var(--dc-duration-base) var(--dc-ease),
	                 box-shadow var(--dc-duration-base) var(--dc-ease),
	                 transform var(--dc-duration-fast) var(--dc-ease);
	text-decoration: none;
	white-space:     nowrap;
}

.dc-btn:focus-visible {
	outline:        2px solid var(--dc-color-accent);
	outline-offset: 3px;
}

.dc-btn:active { transform: translateY(1px); }

/* Primario */
.dc-btn--primary {
	background: var(--dc-black);
	color:      #ffffff;
}

.dc-btn--primary:hover {
	background: #111111;
	color:      #ffffff;
}

/* Secundario */
.dc-btn--secondary {
	background: transparent;
	color:      var(--dc-color-text);
	border:     1px solid var(--dc-outline-variant);
}

.dc-btn--secondary:hover {
	background: var(--dc-surface-container-highest);
	color:      var(--dc-color-text);
}

/* Ghost */
.dc-btn--ghost {
	background: transparent;
	color:      var(--dc-color-accent);
}

.dc-btn--ghost:hover {
	background: var(--dc-surface-container-low);
	color:      var(--dc-color-accent-hover);
}

/* Tamaños */
.dc-btn--sm { padding: var(--dc-space-2) var(--dc-space-4); font-size: var(--dc-font-size-sm); }
.dc-btn--lg { padding: var(--dc-space-4) var(--dc-space-8); font-size: var(--dc-font-size-md); }

/* ---------------------------------------------------------------------------
   CARDS
   --------------------------------------------------------------------------- */
.dc-card {
	background:    var(--dc-color-bg-card);
	border-radius: var(--dc-radius-lg);
	border:        var(--dc-border);
	box-shadow:    var(--dc-shadow-sm);
	overflow:      hidden;
	transition:    box-shadow var(--dc-duration-base) var(--dc-ease),
	               transform  var(--dc-duration-base) var(--dc-ease);
}

.dc-card:hover {
	box-shadow: var(--dc-shadow-lg);
	transform:  translateY(-2px);
	cursor:     pointer;
}

.dc-card__image img {
	width:      100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.dc-card__body {
	padding: var(--dc-space-6);
}

.dc-card__title {
	font-size:   var(--dc-font-size-lg);
	font-weight: var(--dc-font-weight-semibold);
	margin-bottom: var(--dc-space-2);
}

.dc-card__text {
	font-size: var(--dc-font-size-base);
	color:     var(--dc-color-text-muted);
	line-height: var(--dc-line-height-base);
}

/* ---------------------------------------------------------------------------
   HEADER
   --------------------------------------------------------------------------- */
.dc-header {
	position:   sticky;
	top:        0;
	z-index:    var(--dc-z-header);
	width:      100%;
	background: var(--dc-surface);
	border-bottom: var(--dc-border);
	transition: background var(--dc-duration-base) var(--dc-ease),
	            box-shadow  var(--dc-duration-base) var(--dc-ease),
	            backdrop-filter var(--dc-duration-base) var(--dc-ease);
}

/* WordPress admin bar — 32px desktop, 46px mobile */
.admin-bar .dc-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .dc-header {
		top: 46px;
	}
}

.dc-header.is-scrolled {
	background:       var(--dc-header-sticky-bg);
	backdrop-filter:  blur(var(--dc-header-sticky-blur));
	-webkit-backdrop-filter: blur(var(--dc-header-sticky-blur));
	box-shadow:       var(--dc-shadow-md);
	border-bottom:    none;
}

.dc-header__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         var(--dc-space-5) 0;
}

.dc-header__logo {
	font-size:   var(--dc-font-size-lg);
	font-weight: var(--dc-font-weight-bold);
	color:       var(--dc-color-text);
	text-decoration: none;
	letter-spacing: var(--dc-letter-spacing-tight);
}

.dc-header__logo:hover { color: var(--dc-color-text); }

/* Navegación */
.dc-nav__list {
	display:     flex;
	align-items: center;
	gap:         var(--dc-space-6);
}

.dc-nav__list li {
	list-style: none;
}

.dc-nav__list a {
	font-size:   var(--dc-font-size-sm);
	font-weight: var(--dc-font-weight-medium);
	color:       var(--dc-color-text-muted);
	transition:  color var(--dc-duration-fast) var(--dc-ease);
	position:    relative;
	text-decoration: none;
}

.dc-nav__list a::after {
	content:    '';
	position:   absolute;
	bottom:     -2px;
	left:       0;
	width:      0;
	height:     1px;
	background: var(--dc-color-accent);
	transition: width var(--dc-duration-base) var(--dc-ease);
}

.dc-nav__list a:hover,
.dc-nav__list .current-menu-item > a {
	color: var(--dc-color-text);
}

.dc-nav__list a:hover::after,
.dc-nav__list .current-menu-item > a::after {
	width: 100%;
}

/* Actions wrapper (CTA + burger) */
.dc-header__actions {
	display:     flex;
	align-items: center;
	gap:         var(--dc-space-3);
}

/* Burger — mobile */
.dc-header__burger {
	display:     none;
	flex-direction: column;
	gap:         5px;
	cursor:      pointer;
	padding:     var(--dc-space-2);
}

.dc-header__burger span {
	display:    block;
	width:      24px;
	height:     2px;
	background: var(--dc-color-text);
	border-radius: var(--dc-radius-full);
	transition: transform var(--dc-duration-base) var(--dc-ease),
	            opacity   var(--dc-duration-base) var(--dc-ease);
}

/* ---------------------------------------------------------------------------
   FOOTER MINIMAL
   --------------------------------------------------------------------------- */
.dc-footer-minimal {
	background-color:    var(--dc-surface-container-low);
	border-top:          var(--dc-border);
}

.dc-footer-minimal__inner {
	max-width: var(--dc-max-width);
	margin:    0 auto;
	padding:   var(--dc-space-16) var(--dc-gutter);
	display:   flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:       var(--dc-space-6);
}

.dc-footer-minimal__copy {
	font-size:      var(--dc-font-size-xs);
	font-weight:    var(--dc-font-weight-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color:          var(--dc-color-text);
}

.dc-footer-minimal__links {
	display: flex;
	gap:     var(--dc-space-8);
}

.dc-footer-minimal__links a {
	font-size:      var(--dc-font-size-xs);
	font-weight:    var(--dc-font-weight-medium);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color:          var(--dc-color-text-muted);
	transition:     color var(--dc-duration-fast) var(--dc-ease);
}

.dc-footer-minimal__links a:hover {
	color: var(--dc-color-text);
}

/* ---------------------------------------------------------------------------
   404
   --------------------------------------------------------------------------- */
.dc-404 {
	padding:    var(--dc-space-32) 0;
	text-align: center;
}

.dc-404__number {
	font-size: var(--dc-font-size-5xl);
	opacity:   0.15;
}

.dc-404__cta {
	margin-top: var(--dc-space-8);
}

/* ---------------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------------- */
.dc-hero {
	min-height:  70vh;
	display:     flex;
	align-items: center;
	background:  var(--dc-surface);
	padding:     var(--dc-space-12) 0;
}

.dc-hero__content {
	max-width: 760px;
}

.dc-hero__eyebrow {
	display:         block;
	font-size:       var(--dc-font-size-xs);
	font-weight:     var(--dc-font-weight-bold);
	letter-spacing:  var(--dc-letter-spacing-wider);
	text-transform:  uppercase;
	color:           var(--dc-color-text-muted);
	margin-bottom:   var(--dc-space-4);
}

.dc-hero__title {
	font-size:     clamp(var(--dc-font-size-3xl), 5vw, var(--dc-font-size-5xl));
	line-height:   0.95;
	letter-spacing:var(--dc-letter-spacing-tight);
	margin-bottom: var(--dc-space-6);
}

.dc-hero__subtitle {
	font-size:     var(--dc-font-size-lg);
	color:         var(--dc-color-text-muted);
	line-height:   var(--dc-line-height-base);
	max-width:     600px;
	margin-bottom: var(--dc-space-8);
}

.dc-hero__actions {
	display:       flex;
	gap:           var(--dc-space-4);
	flex-wrap:     wrap;
	margin-bottom: var(--dc-space-8);
}

/* ---------------------------------------------------------------------------
   EYEBROW — etiqueta de sección reutilizable
   --------------------------------------------------------------------------- */
.dc-eyebrow {
	display:        block;
	font-size:      var(--dc-font-size-xs);
	font-weight:    var(--dc-font-weight-bold);
	letter-spacing: var(--dc-letter-spacing-wider);
	text-transform: uppercase;
	color:          var(--dc-color-text-muted);
	margin-bottom:  var(--dc-space-4);
}

/* ---------------------------------------------------------------------------
   PROSE — contenido editorial de páginas
   --------------------------------------------------------------------------- */
.dc-prose {
	max-width: 720px;
}

.dc-prose h1,
.dc-prose h2 {
	margin-top:    var(--dc-space-10);
	margin-bottom: var(--dc-space-4);
	letter-spacing:var(--dc-letter-spacing-tight);
}

.dc-prose h1:first-child,
.dc-prose h2:first-child {
	margin-top: 0;
}

.dc-prose h3 {
	margin-top:    var(--dc-space-8);
	margin-bottom: var(--dc-space-3);
}

.dc-prose p {
	font-size:     var(--dc-font-size-base);
	color:         var(--dc-color-text-muted);
	line-height:   var(--dc-line-height-base);
	margin-bottom: var(--dc-space-4);
}

.dc-prose ul,
.dc-prose ol {
	font-size:     var(--dc-font-size-base);
	color:         var(--dc-color-text-muted);
	line-height:   var(--dc-line-height-base);
	margin-bottom: var(--dc-space-4);
	padding-left:  var(--dc-space-6);
}

.dc-prose ul { list-style: disc; }
.dc-prose ol { list-style: decimal; }

.dc-prose li { margin-bottom: var(--dc-space-2); }

.dc-prose a {
	color:           var(--dc-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dc-prose strong { font-weight: var(--dc-font-weight-semibold); color: var(--dc-color-text); }

/* ---------------------------------------------------------------------------
   ANIMACIONES DE ENTRADA (Intersection Observer)
   --------------------------------------------------------------------------- */
.dc-reveal {
	opacity:   0;
	transform: translateY(24px);
	transition:opacity  var(--dc-duration-slow) var(--dc-ease-out),
	           transform var(--dc-duration-slow) var(--dc-ease-out);
}

.dc-reveal.is-visible {
	opacity:   1;
	transform: translateY(0);
}

.dc-reveal--delay-1 { transition-delay: 100ms; }
.dc-reveal--delay-2 { transition-delay: 200ms; }
.dc-reveal--delay-3 { transition-delay: 300ms; }
.dc-reveal--delay-4 { transition-delay: 400ms; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
	.dc-header__cta { display: none; }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {

	/* Ocultar nav en mobile por defecto */
	.dc-header__nav {
		display:        none;
		position:       fixed;
		top:            var(--dc-header-height);
		left:           0;
		right:          0;
		max-height:     calc(100vh - var(--dc-header-height));
		overflow-y:     auto;
		-webkit-overflow-scrolling: touch;
		background:     var(--dc-surface);
		border-bottom:  var(--dc-border);
		box-shadow:     var(--dc-shadow-md);
		padding:        var(--dc-space-6);
		z-index:        var(--dc-z-overlay);
	}

	.admin-bar .dc-header__nav {
		top: calc(var(--dc-header-height) + 46px);
	}

	.dc-header__nav.is-open {
		display: block;
	}

	.dc-header__nav .dc-nav__list {
		flex-direction: column;
		align-items:    flex-start;
		gap:            var(--dc-space-4);
	}

	/* Touch targets mínimos WCAG 44px */
	.dc-nav__list a {
		display:    block;
		min-height: 44px;
		line-height: 44px;
	}

	.dc-btn,
	.dc-btn--sm {
		min-height: 44px;
	}

	.dc-footer-minimal__inner {
		flex-direction: column;
		text-align:     center;
	}

	.dc-hero {
		min-height:  60vh;
		padding:     var(--dc-space-16) 0;
	}

	.dc-hero__title {
		line-height: 1;
	}

	.dc-header__burger { display: flex; }

	/* Animación burger → X */
	.dc-header__burger[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}
	.dc-header__burger[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}
	.dc-header__burger[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {

	.dc-hero {
		min-height: 50vh;
	}

	.dc-hero__actions {
		flex-direction: column;
	}

	.dc-btn--lg {
		width:      100%;
		text-align: center;
		justify-content: center;
	}
}