/*
Theme Name: Didier J. Mendoza — Portafolio
Theme URI: https://didierjmendoza.com
Author: Didier J. Mendoza
Author URI: https://didierjmendoza.com
Description: Tema WordPress personalizado para portafolio de comunicación, fotografía y estrategia digital. Estética editorial oscura con tipografía Cormorant Garamond + Inter. Incluye tipo de contenido "Proyectos" para el portafolio, "Servicios", menú de navegación personalizable y formulario de contacto nativo.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: djm
*/

/* ============================================================
   RESET BÁSICO
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}

/* ------------------------------------------------------------
   1. TIPOGRAFÍAS
   Importa las fuentes usadas en el diseño original:
   - Cormorant Garamond: títulos (serif, elegante, editorial)
   - Inter: cuerpo de texto, menús, botones (sans-serif)
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap');

/* ------------------------------------------------------------
   2. VARIABLES GLOBALES (paleta de colores + medidas)
   ------------------------------------------------------------ */
:root{
  /* Colores */
  --djm-background:      #0B0B0B; /* Fondo general del sitio */
  --djm-foreground:      #F5F5F5; /* Texto principal / títulos */
  --djm-card:            #141414; /* Fondo de tarjetas / bloques */
  --djm-secondary:       #2B2B2B; /* Fondo secundario / bloques de imagen */
  --djm-muted:           #6E6E6E; /* Texto secundario / párrafos apagados */
  --djm-accent:          #D8D2C8; /* Acento cálido (hover, detalles, "Digital.") */
  --djm-input-bg:        #1A1A1A; /* Fondo de inputs de formulario */
  --djm-border:          rgba(255,255,255,0.08); /* Líneas divisorias */
  --djm-border-soft:     rgba(255,255,255,0.06); /* Líneas divisorias suaves */
  --djm-overlay-hover:   rgba(255,255,255,0.025); /* Hover sutil sobre fondo oscuro */
  --djm-destructive:     #D4183D; /* Errores / alertas */

  /* Tipografías */
  --djm-font-heading: 'Cormorant Garamond', Georgia, serif;
  --djm-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Contenedor y layout */
  --djm-container-max: 1280px; /* max-w-screen-xl */
  --djm-container-padding: 32px;    /* px-8  (móvil)   */
  --djm-container-padding-lg: 48px; /* md:px-12 (escritorio) */

  /* Espaciados verticales de sección */
  --djm-space-section: 128px;     /* py-32 */
  --djm-space-section-lg: 160px;  /* md:py-40 */

  /* Radios de borde: el diseño es de líneas rectas (sin bordes redondeados) */
  --djm-radius: 0px;
}

/* ------------------------------------------------------------
   3. BASE / RESET LIGERO
   ------------------------------------------------------------ */
body{
  background-color: var(--djm-background);
  color: var(--djm-foreground);
  font-family: var(--djm-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.djm-heading{
  font-family: var(--djm-font-heading);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--djm-foreground);
  margin: 0 0 24px 0;
}

h1, .djm-h1{ font-size: clamp(56px, 8vw, 120px); color: var(--djm-foreground); } /* clamp(3.5rem,8vw,7.5rem) */
h2, .djm-h2{ font-size: clamp(40px, 6vw, 72px); color: var(--djm-foreground); }
h3, .djm-h3{ font-size: 32px; color: var(--djm-foreground); }
h4, .djm-h4{ font-size: 20px; color: var(--djm-foreground); }
/* H5 y H6 no existen en el diseño original; se agregan siguiendo la misma escala/color */
h5, .djm-h5{ font-family: var(--djm-font-heading); font-weight: 400; font-size: 18px; color: var(--djm-foreground); line-height: 1.4; margin: 0 0 16px 0; }
h6, .djm-h6{ font-family: var(--djm-font-body); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--djm-foreground); line-height: 1.4; margin: 0 0 16px 0; }

p, .djm-body{
  font-family: var(--djm-font-body);
  font-size: 14px;
  color: var(--djm-muted);
  line-height: 1.7;
  margin: 0 0 16px 0;
}

/* ------------------------------------------------------------
   3.1 ENLACES (a)
   Dos comportamientos según contexto:
   - Enlaces de navegación/footer: empiezan apagados (muted) y se aclaran a blanco al hover
   - Enlaces destacados en el cuerpo (ej. email de contacto): empiezan en blanco y pasan a acento
   ------------------------------------------------------------ */
a{
  color: var(--djm-muted);       /* estado por defecto */
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover{ color: var(--djm-foreground); }

.djm-link{ color: var(--djm-muted); }
.djm-link:hover{ color: var(--djm-foreground); }

.djm-link--featured{             /* ej. correo, enlaces dentro del H1/cuerpo */
  font-family: var(--djm-font-heading);
  color: var(--djm-foreground);
}
.djm-link--featured:hover{ color: var(--djm-accent); }

/* ------------------------------------------------------------
   4. TEXTO DE ETIQUETA / NAVEGACIÓN (mayúsculas + tracking)
   Usado en menús, kickers, botones y microcopys
   ------------------------------------------------------------ */
.djm-label,
.djm-nav-link{
  font-family: var(--djm-font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--djm-muted);
  transition: color 0.3s ease;
}
.djm-label--sm{ font-size: 9px; letter-spacing: 0.15em; }
.djm-label--lg{ font-size: 11px; letter-spacing: 0.2em; }

/* Leyendas / captions (ej. "No. 001", "Email", "Ubicación", pie de imagen) */
.djm-caption{
  font-family: var(--djm-font-body);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--djm-muted);
}
.djm-caption--active{ color: var(--djm-foreground); } /* leyenda activa/actual */

/* Cita destacada (blockquote) */
blockquote, .djm-quote{
  font-family: var(--djm-font-heading);
  font-style: italic;
  font-size: 24px;
  color: var(--djm-accent);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   5. CONTENEDOR Y SECCIONES
   ------------------------------------------------------------ */
.djm-container{
  max-width: var(--djm-container-max);
  margin: 0 auto;
  padding-left: var(--djm-container-padding);
  padding-right: var(--djm-container-padding);
}
@media (min-width: 768px){
  .djm-container{
    padding-left: var(--djm-container-padding-lg);
    padding-right: var(--djm-container-padding-lg);
  }
}

.djm-section{
  padding-top: var(--djm-space-section);
  padding-bottom: var(--djm-space-section);
  background-color: var(--djm-background);
  border-top: 1px solid var(--djm-border);
}
@media (min-width: 768px){
  .djm-section{
    padding-top: var(--djm-space-section-lg);
    padding-bottom: var(--djm-space-section-lg);
  }
}

/* ------------------------------------------------------------
   6. HEADER / NAV
   ------------------------------------------------------------ */
.djm-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 64px; /* h-16 */
  display: flex;
  align-items: center;
  background-color: rgba(11,11,11,0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--djm-border-soft);
}
.djm-logo{
  font-family: var(--djm-font-heading);
  font-size: 16px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--djm-foreground);
}
.djm-logo:hover{ color: var(--djm-accent); }

.djm-nav-link{ padding: 4px 0; }
.djm-nav-link:hover,
.djm-nav-link.is-active{ color: var(--djm-foreground); }

/* ------------------------------------------------------------
   7. BOTONES
   ------------------------------------------------------------ */
.djm-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--djm-font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 16px 32px; /* py-4 px-8 */
  border: 1px solid var(--djm-foreground);
  color: var(--djm-foreground);
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}
.djm-btn:hover{
  background-color: var(--djm-foreground);
  color: var(--djm-background);
}

.djm-btn--lg{ padding: 20px 48px; } /* py-5 px-12 */

.djm-btn--text{
  border: none;
  padding: 16px 0;
  color: var(--djm-muted);
}
.djm-btn--text:hover{ color: var(--djm-foreground); }

/* Variante sólida (relleno), por si se necesita un CTA con más peso visual */
.djm-btn--solid{
  background-color: var(--djm-foreground);
  color: var(--djm-background);
  border: 1px solid var(--djm-foreground);
}
.djm-btn--solid:hover{
  background-color: transparent;
  color: var(--djm-foreground);
}

/* ------------------------------------------------------------
   8. TARJETAS / BLOQUES DE SERVICIO
   ------------------------------------------------------------ */
.djm-card{
  padding: 40px; /* p-10 */
  background-color: var(--djm-card);
  border: 1px solid var(--djm-border);
  transition: background-color 0.3s ease;
}
.djm-card:hover{ background-color: var(--djm-overlay-hover); }

.djm-card__icon{
  color: var(--djm-muted);
  margin-bottom: 24px;
  transition: color 0.3s ease;
}
.djm-card:hover .djm-card__icon{ color: var(--djm-accent); }

/* ------------------------------------------------------------
   9. IMÁGENES (efecto blanco y negro -> color al hover)
   ------------------------------------------------------------ */
.djm-media{
  background-color: var(--djm-secondary);
  overflow: hidden;
  position: relative;
}
.djm-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: all 0.7s ease;
}
.djm-media:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* ------------------------------------------------------------
   10. LISTAS CON NÚMERO (proceso / pasos)
   ------------------------------------------------------------ */
.djm-list-item{
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0; /* py-5 */
  border-bottom: 1px solid var(--djm-border);
  cursor: pointer;
  transition: all 0.3s ease;
}
.djm-list-item:hover{ padding-left: 12px; }
.djm-list-item__number{
  font-family: var(--djm-font-heading);
  font-size: 30px;
  width: 48px;
  flex-shrink: 0;
  color: var(--djm-secondary);
  transition: color 0.3s ease;
}
.djm-list-item:hover .djm-list-item__number{ color: var(--djm-muted); }

/* ------------------------------------------------------------
   11. GRIDS
   ------------------------------------------------------------ */
.djm-grid{ display: grid; gap: 32px; } /* gap-8 */
.djm-grid--2{ grid-template-columns: repeat(2, 1fr); }
.djm-grid--3{ grid-template-columns: repeat(3, 1fr); }
.djm-grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px){
  .djm-grid--2,
  .djm-grid--3,
  .djm-grid--4{ grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   12. FOOTER
   ------------------------------------------------------------ */
.djm-footer{
  background-color: var(--djm-background);
  border-top: 1px solid var(--djm-border);
  padding-top: 80px;  /* pt-20 */
  padding-bottom: 48px; /* pb-12 */
}
.djm-footer a{ color: var(--djm-muted); font-size: 12px; }
.djm-footer a:hover{ color: var(--djm-foreground); }

/* ------------------------------------------------------------
   13. UTILIDADES
   ------------------------------------------------------------ */
.djm-divider{
  width: 32px;
  height: 1px;
  background-color: var(--djm-muted);
  margin-bottom: 24px;
}
.djm-text-accent{ color: var(--djm-accent); }
.djm-text-muted{ color: var(--djm-muted); }

/* ============================================================
   14. AJUSTES ESPECÍFICOS DEL TEMA WORDPRESS
   ============================================================ */

/* Header: menú móvil */
.djm-menu-toggle{
  display: none;
  background: none;
  border: none;
  color: var(--djm-foreground);
  padding: 0;
}
@media (max-width: 767px){
  .djm-menu-toggle{ display: block; }
  .djm-nav-desktop{ display: none; }
}
.djm-nav-mobile{
  display: none;
  flex-direction: column;
  gap: 4px;
  background-color: var(--djm-background);
  border-top: 1px solid var(--djm-border-soft);
  padding: 24px 32px;
}
.djm-nav-mobile.is-open{ display: flex; }
.djm-nav-mobile a{
  font-family: var(--djm-font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--djm-muted);
  padding: 12px 0;
  border-bottom: 1px solid var(--djm-border-soft);
}
.djm-nav-mobile a:hover{ color: var(--djm-foreground); }

/* Logo como imagen (custom-logo) */
.djm-logo img{
  max-height: 32px;
  width: auto;
  filter: grayscale(100%) brightness(2);
}

/* Contenido principal: separación del header fijo */
.djm-main{ padding-top: 64px; }

/* Hero home */
.djm-hero{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 56px;
}
.djm-hero__eyebrow-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 64px;
}
.djm-hero__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  flex: 1;
}
@media (min-width: 768px){
  .djm-hero__grid{ grid-template-columns: repeat(12, 1fr); }
  .djm-hero__content{ grid-column: span 7; }
  .djm-hero__media{ grid-column: span 5; }
}
.djm-hero__content{ display: flex; flex-direction: column; }
.djm-hero h1{ font-size: clamp(56px, 8vw, 120px); }
.djm-hero__footer{ margin-top: auto; padding: 64px 0; }
.djm-hero__media{
  background-color: var(--djm-secondary);
  min-height: 400px;
  overflow: hidden;
  position: relative;
}
.djm-hero__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: all 0.7s ease;
  min-height: 400px;
}
.djm-hero__media:hover img{ filter: grayscale(0%); opacity: 1; }
.djm-hero__media-caption{
  position: absolute; bottom: 24px; left: 24px;
  font-family: var(--djm-font-body);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--djm-accent);
}

/* Secciones numeradas (kicker + título) */
.djm-section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  flex-wrap: wrap;
  gap: 24px;
}
.djm-eyebrow{
  font-family: var(--djm-font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--djm-muted);
  display: block;
}

/* Formulario de contacto */
.djm-form{ display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.djm-form label{
  display: block;
  font-family: var(--djm-font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--djm-muted);
  margin-bottom: 12px;
}
.djm-form input,
.djm-form textarea{
  width: 100%;
  background-color: var(--djm-input-bg);
  border: 1px solid var(--djm-border);
  color: var(--djm-foreground);
  padding: 14px 16px;
  font-family: var(--djm-font-body);
  font-size: 13px;
  transition: border-color 0.3s ease;
}
.djm-form input:focus,
.djm-form textarea:focus{
  outline: none;
  border-color: var(--djm-accent);
}
.djm-form textarea{ min-height: 140px; resize: vertical; }
.djm-form__notice{
  font-family: var(--djm-font-body);
  font-size: 12px;
  padding: 16px;
  border: 1px solid var(--djm-border);
}
.djm-form__notice--success{ color: var(--djm-accent); border-color: var(--djm-accent); }
.djm-form__notice--error{ color: var(--djm-destructive); border-color: var(--djm-destructive); }

/* Blog / posts */
.djm-post-card{ display: block; }
.djm-post-card__media{
  background-color: var(--djm-secondary);
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 20px;
}
.djm-post-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%);
  transition: all 0.6s ease;
}
.djm-post-card:hover .djm-post-card__media img{ filter: grayscale(0%); transform: scale(1.03); }
.djm-post-card__cat{ font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--djm-muted); margin-bottom: 8px; }
.djm-post-card__title{ font-family: var(--djm-font-heading); font-size: 22px; color: var(--djm-foreground); margin-bottom: 8px; }
.djm-post-card__excerpt{ font-family: var(--djm-font-body); font-size: 12px; color: var(--djm-muted); line-height: 1.7; }

.djm-single-post{ max-width: 760px; margin: 0 auto; }
.djm-single-post img{ margin-bottom: 32px; }
.djm-single-post .djm-body p{ margin-bottom: 20px; font-size: 15px; color: #C9C9C9; }

/* Paginación */
.djm-pagination{ display: flex; gap: 16px; margin-top: 64px; justify-content: center; }
.djm-pagination a, .djm-pagination span{
  font-family: var(--djm-font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 10px 16px;
  border: 1px solid var(--djm-border);
  color: var(--djm-muted);
}
.djm-pagination a:hover{ color: var(--djm-foreground); border-color: var(--djm-foreground); }
.djm-pagination .current{ color: var(--djm-foreground); border-color: var(--djm-foreground); }

/* 404 */
.djm-404{ text-align: center; padding: 160px 0; }
.djm-404 h1{ font-size: clamp(80px,15vw,160px); }

/* ============================================================
   15. TÍTULO DE PÁGINA (encabezado interno)
   Usado en: Sobre mí, Servicios, Portafolio, Cómo trabajo, Blog, Contacto
   ============================================================ */
.djm-page-header{
  padding-top: 128px; /* separación respecto al header fijo */
}
.djm-page-eyebrow{
  font-family: var(--djm-font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--djm-muted);
  display: block;
  margin-bottom: 24px;
}
.djm-page-title{
  font-family: var(--djm-font-heading);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--djm-foreground);
  margin: 0 0 64px 0;
}
/* Variante compacta: cuando el título va seguido de contenido pegado (ej. Contacto) */
.djm-page-title--tight{ margin-bottom: 16px; }