/*
Theme Name:   Dra. Diana Quiroz Child
Theme URI:    https://dradianaquiroz.com/
Description:  Child theme for Dra. Diana Quiroz — Centro Veterinario. Basado en el brandbook oficial.
Author:       Estudio de Marca
Author URI:   https://dradianaquiroz.com/
Template:     kadence
Version:      1.0.0
Text Domain:  dra-diana-child
*/

/* ============================================================
   IMPORTAR TIPOGRAFÍAS DEL BRANDBOOK
   - Andrea Bilarosa → no disponible en Google Fonts, usar Cinzel como display
   - Cinzel Black → títulos principales
   - Montserrat → párrafos, descriptivos, navegación
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Montserrat:ital,wght@0,400;0,700;0,900;1,400&display=swap');

/* ============================================================
   VARIABLES DE MARCA — BRANDBOOK OFICIAL
   ============================================================ */
:root {
  /* Colores primarios */
  --ddq-burgundy:     #5b1f2c;   /* Vino oscuro — color dominante */
  --ddq-rose:         #e5c7ce;   /* Rosa palo — fondos suaves */
  --ddq-cream:        #f1e8df;   /* Crema — fondo principal */
  --ddq-charcoal:     #2c2c2c;   /* Casi negro — texto principal */

  /* Colores secundarios */
  --ddq-sage:         #848d73;   /* Verde salvia — acento natural */
  --ddq-forest:       #42523e;   /* Verde oscuro — acento profundo */

  /* Tipografías */
  --font-display:     'Cinzel', serif;
  --font-body:        'Montserrat', sans-serif;

  /* Espaciado base */
  --section-pad:      80px 0;
  --section-pad-sm:   48px 0;
  --radius:           4px;
  --radius-lg:        12px;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ddq-charcoal);
  background-color: var(--ddq-cream);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

/* Destacados (Andrea Bilarosa equivalent — usamos Cinzel en italic) */
.ddq-script,
.wp-block-heading.is-style-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Títulos H1–H2 — Cinzel Black */
h1, h2,
.site-title,
.wp-block-post-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ddq-burgundy);
  line-height: 1.15;
}

/* H3–H4 — Cinzel regular */
h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ddq-charcoal);
}

/* H5–H6 — Montserrat Black */
h5, h6 {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ddq-burgundy);
}

/* Párrafos */
p {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ddq-charcoal);
  margin-bottom: 1.25rem;
}

/* Texto destacado / subtítulo */
.ddq-subtitle,
.tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.05em;
  color: var(--ddq-sage);
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ============================================================
   HEADER / NAVEGACIÓN
   ============================================================ */
.site-header,
#masthead {
  background-color: var(--ddq-cream) !important;
  border-bottom: 1px solid var(--ddq-rose);
}

.site-branding .site-title a,
.site-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ddq-burgundy) !important;
  font-size: 1.1rem !important;
}

/* Nav links */
.main-navigation a,
.primary-menu a,
nav a {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ddq-charcoal) !important;
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.primary-menu a:hover {
  color: var(--ddq-burgundy) !important;
}

/* Nav activo */
.main-navigation .current-menu-item > a,
.primary-menu .current-menu-item > a {
  color: var(--ddq-burgundy) !important;
  border-bottom: 2px solid var(--ddq-burgundy);
}

/* ============================================================
   BOTONES — CTAs
   ============================================================ */
.wp-block-button__link,
.button,
button[type="submit"],
.kt-btn {
  font-family: var(--font-body) !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  border-radius: var(--radius) !important;
  padding: 14px 32px !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

/* Botón primario — Burgundy sólido */
.wp-block-button.is-style-fill .wp-block-button__link,
.btn-primary,
.ddq-btn-primary {
  background-color: var(--ddq-burgundy) !important;
  color: #fff !important;
  border: 2px solid var(--ddq-burgundy) !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.ddq-btn-primary:hover {
  background-color: transparent !important;
  color: var(--ddq-burgundy) !important;
}

/* Botón outline */
.wp-block-button.is-style-outline .wp-block-button__link,
.ddq-btn-outline {
  background-color: transparent !important;
  color: var(--ddq-burgundy) !important;
  border: 2px solid var(--ddq-burgundy) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.ddq-btn-outline:hover {
  background-color: var(--ddq-burgundy) !important;
  color: #fff !important;
}

/* ============================================================
   SECCIONES / FONDOS
   ============================================================ */

/* Fondo crema (principal) */
.ddq-bg-cream,
.has-ddq-cream-background-color {
  background-color: var(--ddq-cream) !important;
}

/* Fondo rosa palo */
.ddq-bg-rose,
.has-ddq-rose-background-color {
  background-color: var(--ddq-rose) !important;
}

/* Fondo burgundy */
.ddq-bg-burgundy,
.has-ddq-burgundy-background-color {
  background-color: var(--ddq-burgundy) !important;
  color: #fff !important;
}
.ddq-bg-burgundy h1,
.ddq-bg-burgundy h2,
.ddq-bg-burgundy h3,
.ddq-bg-burgundy p {
  color: #fff !important;
}

/* Fondo sage */
.ddq-bg-sage {
  background-color: var(--ddq-sage) !important;
  color: #fff !important;
}

/* ============================================================
   SEPARADOR / LÍNEA DECORATIVA
   ============================================================ */
.ddq-divider {
  width: 60px;
  height: 2px;
  background-color: var(--ddq-burgundy);
  margin: 16px auto 32px;
  display: block;
}

.ddq-divider.left {
  margin-left: 0;
}

/* ============================================================
   CARDS / SERVICIOS
   ============================================================ */
.ddq-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  border: 1px solid var(--ddq-rose);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ddq-card:hover {
  box-shadow: 0 8px 32px rgba(91, 31, 44, 0.12);
  transform: translateY(-4px);
}

.ddq-card .ddq-icon {
  width: 56px;
  height: 56px;
  background-color: var(--ddq-rose);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  border: 1px solid var(--ddq-rose) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  background-color: #fff !important;
  color: var(--ddq-charcoal) !important;
  transition: border-color 0.2s ease !important;
  width: 100% !important;
}

input:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--ddq-burgundy) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon {
  background-color: var(--ddq-burgundy) !important;
  color: var(--ddq-rose) !important;
  padding: 48px 0 24px !important;
}

.site-footer a,
#colophon a {
  color: var(--ddq-rose) !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  transition: color 0.2s ease !important;
}

.site-footer a:hover {
  color: #fff !important;
}

.site-footer p,
#colophon p {
  color: var(--ddq-rose) !important;
  font-size: 0.82rem !important;
  opacity: 0.85;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-burgundy  { color: var(--ddq-burgundy) !important; }
.text-sage      { color: var(--ddq-sage) !important; }
.text-rose      { color: var(--ddq-rose) !important; }
.text-center    { text-align: center !important; }
.text-uppercase { text-transform: uppercase !important; letter-spacing: 0.1em !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-8  { margin-bottom: 8px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-48 { margin-bottom: 48px !important; }

/* Ocultar en móvil */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.4rem !important; }
}