/*
Theme Name:   Casanueva Child
Theme URI:    https://casanuevaarquitectos.com
Description:  Child theme de Divi — Casanueva Arquitectos. Identidad granate + óxido + hueso, header centrado editorial, tarjetas de proyecto, sección académica paramétrica, equipo, contacto. Versión 1.1
Author:       Casanueva Arquitectos
Author URI:   https://casanuevaarquitectos.com
Template:     Divi
Version:      1.2.0
Text Domain:  casanueva-child
*/

/* =====================================================================
   TOKENS — paleta y tipografías
   ===================================================================== */
:root {
  --csn-bg:        #F6F2EA;
  --csn-bg-2:      #ECE7DC;
  --csn-paper:     #FBF8F1;
  --csn-pure:      #FFFFFF;
  --csn-ink:       #1A1410;
  --csn-ink-2:     #2A2520;
  --csn-mute:      #6B5F50;
  --csn-mute-2:    #9A8E7C;
  --csn-rule:      #B8AC97;
  --csn-rule-2:    #D4C9B5;
  --csn-claret:    #6B1F2E;
  --csn-claret-d:  #4A1620;
  --csn-claret-l:  #8C2E40;
  --csn-oxide:     #B8552B;
  --csn-oxide-d:   #8C3E1F;
  --csn-oxide-l:   #D17645;

  --csn-serif:    'Fraunces', Georgia, serif;
  --csn-sans:     'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --csn-mono:     'JetBrains Mono', 'Courier New', monospace;
}

/* =====================================================================
   BASE — fondo, tipografía global
   ===================================================================== */
body,
body.et_pb_pagebuilder_layout {
  background: var(--csn-bg) !important;
  color: var(--csn-ink) !important;
  font-family: var(--csn-sans) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4 {
  font-family: var(--csn-serif) !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.018em !important;
  color: var(--csn-ink) !important;
  line-height: 1.08 !important;
}

h1 { font-size: clamp(48px, 6vw, 78px) !important; font-weight: 300 !important; }
h2 { font-size: clamp(34px, 4vw, 52px) !important; }
h3 { font-size: clamp(24px, 2.6vw, 32px) !important; }
h4 { font-size: 20px !important; }

h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: 300;
  color: var(--csn-claret);
}

p, .et_pb_text p {
  font-family: var(--csn-sans) !important;
  font-size: 16px;
  line-height: 1.62;
  color: var(--csn-ink-2);
  margin-bottom: 1em;
}

a, .et_pb_text a {
  color: var(--csn-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--csn-claret);
  padding-bottom: 1px;
  transition: opacity 0.2s, border-color 0.2s;
}
a:hover { opacity: 0.7; border-color: var(--csn-oxide); }

/* =====================================================================
   HEADER — Variante 03 centrada con teléfonos integrados
   ===================================================================== */
#main-header,
.et-fixed-header {
  background: var(--csn-bg) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--csn-rule) !important;
  padding: 0 !important;
}

/* Estructura de cabecera centrada — se aplica a la cabecera personalizada */
.csn-header {
  background: var(--csn-bg);
  border-bottom: 1px solid var(--csn-rule);
  text-align: center;
  padding: 32px 56px 20px;
}
.csn-header .csn-row-1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
}
.csn-header .csn-since {
  text-align: left;
  font-family: var(--csn-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--csn-mute);
}
.csn-header .csn-since span { color: var(--csn-claret); font-weight: 500; }
.csn-header .csn-offices {
  text-align: right;
  font-family: var(--csn-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--csn-mute);
}
.csn-header .csn-offices strong { color: var(--csn-ink); font-weight: 500; }

.csn-wm {
  display: inline-block;
  line-height: 0;
}
.csn-wm img,
.csn-wm svg {
  display: block;
  height: 56px;
  width: auto;
  max-width: 280px;
}
.csn-wm-sm img,
.csn-wm-sm svg {
  height: 40px;
  max-width: 200px;
}
.csn-wm-lg img,
.csn-wm-lg svg {
  height: 88px;
  max-width: 440px;
}

.csn-header .csn-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  font-family: var(--csn-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-top: 16px;
  border-top: 1px solid var(--csn-rule-2);
}
.csn-header .csn-menu a {
  color: var(--csn-mute);
  text-decoration: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.csn-header .csn-menu a:hover,
.csn-header .csn-menu a.active { color: var(--csn-claret); opacity: 1; }
.csn-header .csn-menu .sep {
  width: 1px; height: 16px;
  background: var(--csn-rule);
  margin: 0 6px;
}
.csn-header .csn-menu .csn-phone {
  color: var(--csn-ink) !important;
  border: 1px solid var(--csn-claret) !important;
  padding: 8px 14px !important;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  transition: all 0.2s;
}
.csn-header .csn-menu .csn-phone::before {
  content: "↗ ";
  color: var(--csn-claret);
}
.csn-header .csn-menu .csn-phone:hover {
  background: var(--csn-claret);
  color: var(--csn-bg) !important;
}
.csn-header .csn-menu .csn-phone:hover::before {
  color: var(--csn-bg);
}

/* Si el cliente quiere mantener el menú nativo de Divi, lo dejamos elegante */
#top-menu li a,
.et_pb_menu .et-menu li a {
  font-family: var(--csn-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--csn-mute) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
#top-menu li a:hover,
#top-menu li.current-menu-item > a,
.et_pb_menu .et-menu li.current-menu-item > a {
  color: var(--csn-claret) !important;
  opacity: 1;
}

@media (max-width: 980px) {
  .csn-header { padding: 22px 24px 18px; }
  .csn-header .csn-row-1 { grid-template-columns: 1fr; gap: 12px; }
  .csn-header .csn-since,
  .csn-header .csn-offices { text-align: center; }
  .csn-header .csn-menu { gap: 14px 18px; flex-wrap: wrap; font-size: 10px; }
  .csn-header .csn-menu .sep { display: none; }
  .csn-header .csn-menu .csn-phone { padding: 6px 10px !important; font-size: 9.5px; }
}

/* =====================================================================
   SECCIONES Divi — espacio y reglas
   ===================================================================== */
.et_pb_section {
  background: transparent !important;
  padding: 100px 0 !important;
  border-bottom: 1px solid var(--csn-rule) !important;
}
.et_pb_section:last-of-type { border-bottom: none !important; }

/* Cabecera de sección numerada — usable en módulos Texto / Code de Divi.
   <div class="csn-section-head">
     <div class="csn-section-num">/01 · OBRA</div>
     <h2 class="csn-section-title">Cuatro líneas <em>de trabajo.</em></h2>
     <div class="csn-section-label">2018 — 2026</div>
   </div>
*/
.csn-section-head {
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  align-items: baseline;
  gap: 32px;
  margin-bottom: 48px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--csn-ink);
}
.csn-section-num {
  font-family: var(--csn-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--csn-claret);
}
.csn-section-title {
  margin: 0 !important;
  font-size: 36px !important;
}
.csn-section-label {
  font-family: var(--csn-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csn-mute);
  text-align: right;
}
@media (max-width: 980px) {
  .csn-section-head { grid-template-columns: 1fr; gap: 12px; }
  .csn-section-label { text-align: left; }
}

/* =====================================================================
   BOTONES
   ===================================================================== */
.et_pb_button,
.et_pb_button_module_wrapper a.et_pb_button {
  background: var(--csn-claret) !important;
  color: var(--csn-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 22px !important;
  font-family: var(--csn-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  transition: background 0.2s !important;
}
.et_pb_button:hover { background: var(--csn-claret-d) !important; }
.et_pb_button::after {
  content: "  →" !important;
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.3s;
}
.et_pb_button:hover::after { transform: translateX(4px); }

/* Botón secundario — usar la clase csn-btn-secondary en cualquier botón Divi */
.et_pb_button.csn-btn-secondary {
  background: transparent !important;
  color: var(--csn-ink) !important;
  border-bottom: 1px solid var(--csn-ink) !important;
  padding: 4px 0 !important;
}
.et_pb_button.csn-btn-secondary:hover {
  background: transparent !important;
  opacity: 0.6;
}

/* =====================================================================
   TARJETAS DE CATEGORÍA — para listar las 4 áreas de trabajo
   ===================================================================== */
.csn-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  background: var(--csn-rule-2);
}
.csn-cat-card {
  background: var(--csn-paper);
  padding: 40px 36px;
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
.csn-cat-card:hover { background: var(--csn-bg-2); opacity: 1; }
.csn-cat-card .csn-num {
  font-family: var(--csn-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--csn-claret);
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.csn-cat-card .csn-num .csn-count {
  background: var(--csn-claret);
  color: var(--csn-bg);
  padding: 3px 10px;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.csn-cat-card h3 {
  font-family: var(--csn-serif) !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.018em !important;
  margin-bottom: 14px !important;
}
.csn-cat-card h3 em { font-style: italic; color: var(--csn-mute); font-weight: 300; }
.csn-cat-card p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--csn-ink-2);
  margin-bottom: 24px;
  max-width: 380px;
}
.csn-cat-card .csn-visual {
  margin-top: auto;
  aspect-ratio: 16/9;
  background: var(--csn-bg-2);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.csn-cat-card .csn-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5));
  pointer-events: none;
  transition: opacity 0.3s;
}
.csn-cat-card:hover .csn-visual::before { opacity: 0.6; }
.csn-cat-card .csn-visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  font-family: var(--csn-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.csn-cat-card .csn-arrow {
  margin-top: 18px;
  font-family: var(--csn-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--csn-claret);
}
.csn-cat-card .csn-arrow::after {
  content: "  →";
  display: inline-block;
  transition: transform 0.3s;
}
.csn-cat-card:hover .csn-arrow::after { transform: translateX(4px); }

/* TARJETA DESTACADA — franjas verticales granate a cada lado */
.csn-cat-card.csn-featured {
  border-left: 6px solid var(--csn-claret);
  border-right: 6px solid var(--csn-claret);
}
.csn-cat-card.csn-featured:hover { background: var(--csn-bg-2); }

@media (max-width: 980px) {
  .csn-cat-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   SECCIÓN ACADÉMICA — paramétrico oscuro con papers
   ===================================================================== */
.csn-academic {
  background: var(--csn-ink) !important;
  color: var(--csn-bg) !important;
  padding: 100px 0 !important;
}
.csn-academic h2,
.csn-academic h3,
.csn-academic h4 { color: var(--csn-bg) !important; }
.csn-academic h2 em,
.csn-academic h3 em { color: var(--csn-oxide-l) !important; }
.csn-academic p { color: rgba(246,242,234,0.86) !important; }
.csn-academic .csn-section-head { border-bottom: 1px solid var(--csn-mute); }
.csn-academic .csn-section-num { color: var(--csn-oxide-l); }
.csn-academic .csn-section-label { color: var(--csn-mute-2); }

.csn-papers {
  display: grid;
  gap: 1px;
  background: var(--csn-mute);
}
.csn-paper {
  background: var(--csn-ink);
  padding: 22px 26px;
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit !important;
  display: grid;
  grid-template-columns: 50px 1fr 80px;
  gap: 20px;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s;
}
.csn-paper:hover { background: #2A2520; opacity: 1; }
.csn-paper .csn-pn {
  font-family: var(--csn-mono);
  font-size: 11px;
  color: var(--csn-oxide-l);
  letter-spacing: 0.1em;
}
.csn-paper .csn-pt {
  font-family: var(--csn-serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  color: var(--csn-bg);
}
.csn-paper .csn-pt em { font-style: italic; color: var(--csn-oxide-l); }
.csn-paper .csn-pf {
  font-family: var(--csn-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--csn-mute-2);
  text-align: right;
}
.csn-paper .csn-pf::before { content: "↓ "; color: var(--csn-oxide-l); }

/* =====================================================================
   EQUIPO — tarjetas con retrato
   ===================================================================== */
.csn-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--csn-rule-2);
}
.csn-team-card {
  background: var(--csn-bg);
  padding: 40px 36px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  align-items: start;
}
.csn-team-portrait {
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #B8AC97, #6B5F50);
  background-size: cover;
  background-position: center top;
  position: relative;
}
.csn-team-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(26,20,16,0.15));
}
.csn-team-info .csn-role-tag {
  font-family: var(--csn-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--csn-claret);
  margin-bottom: 10px;
}
.csn-team-info h4 {
  font-family: var(--csn-serif) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  margin-bottom: 4px !important;
}
.csn-team-info .csn-role {
  font-family: var(--csn-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--csn-mute);
  margin-bottom: 16px;
}
.csn-team-info ul { list-style: none; margin-bottom: 16px; padding: 0; }
.csn-team-info ul li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--csn-ink-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--csn-rule-2);
}
.csn-team-info ul li:last-child { border-bottom: none; }
.csn-team-info ul li em {
  font-family: var(--csn-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--csn-mute);
  display: block;
  margin-bottom: 2px;
}
@media (max-width: 980px) {
  .csn-team-grid { grid-template-columns: 1fr; }
  .csn-team-card { padding: 28px; grid-template-columns: 80px 1fr; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
#main-footer,
.et_pb_section.et_pb_section_footer {
  background: var(--csn-ink) !important;
  border-top: 1px solid var(--csn-rule) !important;
  padding: 56px 0 0 !important;
}
#main-footer * { color: rgba(246,242,234,0.78); }
#main-footer h4 {
  font-family: var(--csn-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--csn-oxide-l) !important;
  margin-bottom: 14px !important;
}
#footer-bottom {
  background: transparent !important;
  border-top: 1px solid var(--csn-mute) !important;
  padding: 18px 0 !important;
}
#footer-info,
#footer-bottom * {
  font-family: var(--csn-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--csn-mute-2) !important;
}

/* =====================================================================
   ÚTILES
   ===================================================================== */
.csn-mono {
  font-family: var(--csn-mono) !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--csn-mute);
}
.csn-claret { color: var(--csn-claret) !important; }
.csn-oxide  { color: var(--csn-oxide) !important; }
.csn-rule { border-top: 1px solid var(--csn-rule); margin: 24px 0; }

/* WhatsApp en óxido */
.csn-whatsapp {
  background: var(--csn-oxide) !important;
  color: var(--csn-bg) !important;
  padding: 12px 18px !important;
  font-family: var(--csn-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  display: inline-block;
}
.csn-whatsapp:hover { background: var(--csn-oxide-d) !important; opacity: 1; }