/*
Theme Name: Brok Child
Theme URI: https://brok.qodeinteractive.com
Description: A child theme of Brok
Author: Edge Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: brok
Template: brok
*/

/* =====================================================================
   David Brufau · estilos de marca (maquetación Elementor)
   Tipografía de marca: Codec Pro. Mientras no se instale la fuente,
   se usa Outfit (Google Fonts) como alternativa muy próxima.
   ===================================================================== */
:root {
	--db-black: #000000;
	--db-dark: #3D3D3D;
	--db-light: #E4E4E4;
	--db-white: #FFFFFF;
	--db-font: "Codec Pro", "Outfit", sans-serif;
	--db-ease: cubic-bezier(.22, .61, .36, 1);
}

body { color: var(--db-dark); }
.elementor :is(h1, h2, h3, h4, p) { margin-block: 0; }
.elementor .elementor-widget-text-editor p:not(:last-child) { margin-bottom: 1em; }
.db-lead p { font-size: clamp(18px, 1.6vw, 21px); }

/* ---------- Botones ---------- */
body .db-btn .elementor-button {
	font-family: var(--db-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 19px 34px;
	border: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	color: var(--db-black);
	transition: background-color .35s var(--db-ease), color .35s var(--db-ease), border-color .35s var(--db-ease);
}
body .db-btn--dark .elementor-button:hover,
body .db-btn--dark .elementor-button:focus-visible { background: var(--db-black); color: var(--db-white); }
body .db-btn--light .elementor-button { color: var(--db-white); }
body .db-btn--light .elementor-button:hover,
body .db-btn--light .elementor-button:focus-visible { background: var(--db-white); color: var(--db-black); border-color: var(--db-white); }
body .db-btn--solid .elementor-button { background: var(--db-black); color: var(--db-white); border-color: var(--db-black); }
body .db-btn--solid .elementor-button:hover,
body .db-btn--solid .elementor-button:focus-visible { background: transparent; color: var(--db-black); }
body .db-btn--link .elementor-button {
	padding: 0 0 7px;
	border: 0;
	background: none;
	color: var(--db-black);
	letter-spacing: .2em;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .45s var(--db-ease), color .3s;
}
body .db-btn--link .elementor-button:hover { background-size: 35% 1px; color: var(--db-dark); }

/* ---------- Imágenes ---------- */
.db-img, .db-img a { display: block; overflow: hidden; }
.db-img img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 1.1s var(--db-ease); }
.db-img--portrait img { aspect-ratio: 4 / 5; }
.db-img--landscape img { aspect-ratio: 3 / 2; }
.db-img--wide img { aspect-ratio: 16 / 9; }
.db-img--band img { aspect-ratio: 21 / 7; }
.db-img--contain img { object-fit: contain; }
.db-img a:hover img, .db-card:hover .db-img img { transform: scale(1.035); }
.db-watermark img { max-width: 340px; margin: 0 auto; opacity: .95; }
@media (max-width: 767px) {
	.db-img--band img { aspect-ratio: 3 / 2; }
	.db-watermark img { max-width: 160px; }
}

/* ---------- Hero ---------- */
.db-hero .elementor-widget-heading h1 { max-width: 15ch; }
.db-signature .elementor-heading-title { margin-top: 10px; }

/* ---------- Listas ---------- */
.db-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.18); }
.db-list li { display: flex; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.18); }
.db-list li::before { content: ""; flex: 0 0 18px; height: 1px; margin-top: .9em; background: currentColor; }

/* ---------- Cómo trabajo ---------- */
.db-steps > .e-con-inner, .db-steps { counter-reset: none; }
.db-step { border-top: 1px solid var(--db-black); padding: 28px 28px 8px 0 !important; }
@media (max-width: 1024px) { .db-step { padding-bottom: 32px !important; } }

/* ---------- Preguntas (toggle) ---------- */
.db-faq .elementor-toggle-item { border-bottom: 1px solid rgba(0,0,0,.25); }
.db-faq .elementor-toggle-item:first-child { border-top: 1px solid rgba(0,0,0,.25); }
.db-faq .elementor-tab-title {
	border: 0 !important; padding: 26px 0 !important;
	font-family: var(--db-font); font-size: 20px; font-weight: 400; line-height: 1.35;
}
.db-faq .elementor-tab-title a, .db-faq .elementor-tab-title .elementor-toggle-icon { color: var(--db-black) !important; }
.db-faq .elementor-toggle-icon { font-size: 13px; }
.db-faq .elementor-tab-content {
	border: 0 !important; padding: 0 48px 28px 0 !important;
	font-family: var(--db-font); font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--db-dark);
}

/* ---------- Proyectos ---------- */
.db-project-head { border-bottom: 1px solid rgba(0,0,0,.2); }
.db-gallery .gallery { margin: 0 !important; }
.db-gallery .gallery-item { overflow: hidden; }
.db-gallery .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0 !important; transition: transform 1.1s var(--db-ease), opacity .3s; }
.db-gallery .gallery-item a:hover img { transform: scale(1.04); }

/* ---------- Información de contacto ---------- */
.db-info { border-top: 1px solid rgba(0,0,0,.2); padding-top: 18px !important; }

/* ---------- Ventanas «Ver el alcance del servicio» ---------- */
.db-modal-holder { margin: 0 !important; height: 0; }
dialog.db-modal {
	width: min(760px, calc(100% - 32px));
	max-height: calc(100vh - 48px);
	padding: 0; border: 0;
	background: var(--db-white); color: var(--db-dark);
	font-family: var(--db-font); font-weight: 300; font-size: 17px; line-height: 1.75;
}
dialog.db-modal::backdrop { background: rgba(0,0,0,.62); }
dialog.db-modal[open] { animation: db-in .35s var(--db-ease); }
@keyframes db-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.db-modal__inner { position: relative; padding: 64px 64px 56px; }
.db-modal__inner > * + * { margin-top: 18px; }
.db-modal__label { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--db-dark); }
.db-modal__title { font-family: var(--db-font); font-size: clamp(28px, 3.4vw, 38px); font-weight: 300; line-height: 1.15; color: var(--db-black); }
.db-modal__note { font-size: 15px; color: #666; }
.db-modal__close {
	position: absolute; top: 18px; right: 18px; width: 44px; height: 44px;
	border: 0; background: none; color: var(--db-black); font-size: 30px; line-height: 1; cursor: pointer;
}
.db-modal__cta {
	display: inline-block; margin-top: 28px !important; padding: 19px 34px;
	background: var(--db-black); color: var(--db-white) !important; border: 1px solid var(--db-black);
	font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
	transition: background .3s, color .3s;
}
.db-modal__cta:hover { background: transparent; color: var(--db-black) !important; }
@media (max-width: 767px) { .db-modal__inner { padding: 56px 24px 36px; } }

/* ---------- Formulario Contact Form 7 ---------- */
.db-form { display: grid; gap: 22px; font-family: var(--db-font); }
.db-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 767px) { .db-form__row { grid-template-columns: 1fr; } }
.db-form label { display: block; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--db-black); }
.db-form .wpcf7-form-control-wrap { display: block; margin-top: 10px; }
.db-form input[type="text"], .db-form input[type="email"], .db-form input[type="tel"],
.db-form select, .db-form textarea {
	width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--db-black); border-radius: 0;
	background: transparent; color: var(--db-black);
	font-family: var(--db-font); font-size: 17px; font-weight: 300; letter-spacing: 0; text-transform: none;
	outline: none; transition: border-color .3s;
}
.db-form select { appearance: none; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px; }
.db-form textarea { height: 140px; resize: vertical; }
.db-form input:focus, .db-form select:focus, .db-form textarea:focus { border-bottom-width: 2px; }
.db-form ::placeholder { color: #7a7a7a; }
.db-form .wpcf7-acceptance { font-size: 14px; font-weight: 300; color: var(--db-dark); }
.db-form .wpcf7-acceptance label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 300; color: var(--db-dark); display: flex; gap: 10px; align-items: flex-start; }
.db-form .wpcf7-acceptance input { margin-top: 4px; accent-color: var(--db-black); }
.db-form .wpcf7-list-item { margin: 0; }
.db-form a { color: var(--db-black); text-decoration: underline; }
.db-form input[type="submit"] {
	justify-self: start; padding: 19px 38px; border: 1px solid var(--db-black); border-radius: 0;
	background: var(--db-black); color: var(--db-white); cursor: pointer;
	font-family: var(--db-font); font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
	transition: background .3s, color .3s;
}
.db-form input[type="submit"]:hover { background: transparent; color: var(--db-black); }
.db-form .wpcf7-spinner { margin: 0 0 0 16px; }
.db-form-card .wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 14px 18px; border-width: 1px; font-size: 15px; }
.db-form .wpcf7-not-valid-tip { font-size: 13px; margin-top: 6px; letter-spacing: 0; text-transform: none; }

/* ---------- Pie de página (widgets del tema) ---------- */
#qodef-page-footer { background: var(--db-black); color: #bdbdbd; font-family: var(--db-font); }
#qodef-page-footer a { color: var(--db-white); }
#qodef-page-footer .db-footer-logo img { max-width: 220px; height: auto; }
#qodef-page-footer .db-footer-label { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--db-white); margin-bottom: 14px; }
#qodef-page-footer .db-footer-nav { list-style: none; margin: 0; padding: 0; }
#qodef-page-footer .db-footer-nav li { margin: 0 0 8px; }
#qodef-page-footer p { font-size: 15px; line-height: 1.7; }
#qodef-page-footer-bottom-area { border-top: 1px solid rgba(255,255,255,.14); }
#qodef-page-footer-bottom-area p { font-size: 13px; letter-spacing: .04em; }

#menu-menu-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu-menu-legal li {
  margin: 10px 0 !important;
  padding: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  #menu-menu-legal {
    justify-content: center;
    gap: 8px 20px;
  }
}

/* Móvil */
@media (max-width: 767px) {
  #menu-menu-legal {
    justify-content: center;
    gap: 6px 16px;
  }

  #menu-menu-legal li a {
    font-size: 13px;
  }
}