/* ============================================================
   ANGEL ORTIZ – CONSULTOR TÉCNICO
   theme.css — Estilos principales
   ============================================================ */

/* ── Variables locales ─────────────────────────────────── */
:root {
  --ao-oro:          #B8973A;
  --ao-oro-claro:    #D4AD55;
  --ao-oro-oscuro:   #8A6E25;
  --ao-negro:        #1A1A18;
  --ao-negro-suave:  #2C2B27;
  --ao-crema:        #F5F0E8;
  --ao-crema-oscura: #EDE5D4;
  --ao-blanco:       #FDFBF7;
  --ao-gris:         #6B6860;
  --ao-gris-claro:   #9E9B93;
  --ao-radius:       4px;
  --ao-radius-lg:    8px;
  --ao-sombra:       0 4px 24px rgba(26,26,24,.10);
  --ao-transicion:   .3s ease;
}

/* ── Base ──────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img  { max-width: 100%; height: auto; display: block; }

/* ── Tipografía global ─────────────────────────────────── */
.t-eyebrow {
  font-family: var(--wp--preset--font-family--body) !important;
  font-size: .75rem !important;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ao-oro) !important;
  margin-bottom: .5rem;
}

h1 em, .hero-titulo em { color: var(--ao-oro); font-style: italic; }

/* ── Separador dorado ──────────────────────────────────── */
.separador,
.wp-block-separator.separador {
  width: 48px !important;
  height: 2px;
  background: var(--ao-oro) !important;
  border-color: var(--ao-oro) !important;
  margin: 1.5rem auto;
  opacity: 1;
}

/* ── Botones ───────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--wp--preset--font-family--body);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .05em;
  padding: 14px 28px;
  border-radius: var(--ao-radius);
  transition: all var(--ao-transicion);
  text-decoration: none;
}

.wp-block-button.btn-oro .wp-block-button__link,
.has-oro-background-color.wp-block-button__link {
  background-color: var(--ao-oro) !important;
  color: var(--ao-blanco) !important;
  border: 1.5px solid var(--ao-oro);
}
.wp-block-button.btn-oro .wp-block-button__link:hover {
  background-color: var(--ao-oro-oscuro) !important;
  border-color: var(--ao-oro-oscuro) !important;
  transform: translateY(-1px);
}

.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid rgba(26,26,24,.3) !important;
  color: var(--ao-negro) !important;
}
.is-style-outline .wp-block-button__link:hover {
  background: var(--ao-negro) !important;
  color: var(--ao-blanco) !important;
}

.btn-link .wp-block-button__link,
.wp-block-button.is-style-link .wp-block-button__link {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--ao-oro) !important;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .03em;
}
.btn-link .wp-block-button__link::after { content: ' →'; }
.btn-link .wp-block-button__link:hover { color: var(--ao-oro-oscuro) !important; }

/* ── NAVEGACIÓN ────────────────────────────────────────── */
.site-header,
.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ao-blanco);
  border-bottom: 1px solid rgba(26,26,24,.08);
  transition: box-shadow var(--ao-transicion);
}
.site-header.scrolled { box-shadow: var(--ao-sombra); }

.contenedor.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem,4vw,3rem);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-logo { display: flex; flex-direction: column; line-height: 1; }
.nav-logo-nombre {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 1.25rem !important;
  font-weight: 600;
  color: var(--ao-negro) !important;
  letter-spacing: .05em;
}
.nav-logo-sub {
  font-size: .65rem !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ao-gris);
  margin-top: 2px;
}

.nav-menu .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: clamp(.75rem,2vw,1.75rem);
  list-style: none;
}
.nav-menu .wp-block-navigation-item__content {
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ao-negro-suave);
  text-decoration: none;
  position: relative;
  transition: color var(--ao-transicion);
}
.nav-menu .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--ao-oro);
  transition: width var(--ao-transicion);
}
.nav-menu .wp-block-navigation-item:hover .wp-block-navigation-item__content { color: var(--ao-oro); }
.nav-menu .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { width: 100%; }

/* ── HERO ──────────────────────────────────────────────── */
.hero,
.hero-section { min-height: 90vh; background: var(--ao-negro); }

.hero-inner { height: 100%; }

.hero-contenido {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem,6vw,5rem) clamp(2rem,5vw,5rem);
  gap: 1.25rem;
}

.hero-titulo { color: var(--ao-blanco) !important; }

.hero-descripcion {
  color: rgba(245,240,232,.75) !important;
  font-size: 1rem;
  max-width: 480px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: .5rem;
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Tarjeta libro */
.hero-libro {
  position: absolute;
  bottom: 2.5rem;
  right: 2rem;
  background: var(--ao-blanco) !important;
  border-radius: var(--ao-radius-lg);
  padding: 1rem;
  width: 220px;
  box-shadow: var(--ao-sombra);
  z-index: 3;
}
.hero-libro-portada img {
  border-radius: var(--ao-radius);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: .75rem;
}
.hero-libro-titulo { font-size: 1rem !important; line-height: 1.3; margin-bottom: .4rem; }
.hero-libro-sub { font-size: .72rem; color: var(--ao-gris); margin-bottom: .75rem; }

/* ── SERVICIOS ─────────────────────────────────────────── */
.servicios-seccion { background: var(--ao-blanco); }

.servicios-grid { margin-top: 3rem; }

.wp-block-column.servicio-card,
.servicio-card {
  padding: 2rem 1.5rem;
  border: 1px solid rgba(26,26,24,.08);
  border-radius: var(--ao-radius-lg);
  transition: all var(--ao-transicion);
  position: relative;
}
.servicio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 2px;
  background: transparent;
  transition: background var(--ao-transicion);
  border-radius: 0 0 var(--ao-radius) var(--ao-radius);
}
.servicio-card:hover {
  border-color: rgba(184,151,58,.25);
  transform: translateY(-4px);
  box-shadow: var(--ao-sombra);
}
.servicio-card:hover::before { background: var(--ao-oro); }

.servicio-titulo { font-size: 1.2rem !important; line-height: 1.3; margin-bottom: .5rem; }
.servicio-desc   { font-size: .88rem; color: var(--ao-gris); line-height: 1.6; margin-bottom: 1.25rem; }

/* ── ESTADÍSTICAS ──────────────────────────────────────── */
.stats-band {
  background: var(--ao-negro) !important;
  padding: clamp(3rem,5vw,4.5rem) 0;
}
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 0 !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem,4vw,3rem);
}
.stat-item {
  text-align: center;
  padding: 1.5rem;
  border-right: 1px solid rgba(245,240,232,.1);
}
.stat-item:last-child { border-right: none; }
.stat-numero {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: clamp(2.5rem,5vw,3.5rem) !important;
  font-weight: 600;
  color: var(--ao-oro) !important;
  line-height: 1;
  margin-bottom: .5rem;
}
.stat-label { font-size: .8rem; color: rgba(245,240,232,.6); letter-spacing: .03em; line-height: 1.4; }

/* ── CASOS REALES ──────────────────────────────────────── */
.casos-grid .wp-block-post {
  background: var(--ao-blanco);
  border: 1px solid rgba(26,26,24,.08);
  border-radius: var(--ao-radius-lg);
  padding: 1.75rem;
  transition: all var(--ao-transicion);
}
.casos-grid .wp-block-post:hover {
  border-color: rgba(184,151,58,.3);
  box-shadow: var(--ao-sombra);
}
.caso-titulo { font-size: 1.15rem !important; margin-bottom: .75rem; }

/* ── SOBRE MÍ ──────────────────────────────────────────── */
.sobre-mi { background: var(--ao-crema) !important; }

.sobre-mi-fotos {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .75rem;
}
.sobre-mi-foto { border-radius: var(--ao-radius-lg); overflow: hidden; }
.sobre-mi-foto:first-child { margin-top: 2rem; }
.sobre-mi-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }

/* ── CUADERNO / NEWSLETTER / ASISTENTE ─────────────────── */
.cuaderno-newsletter {
  background: var(--ao-crema) !important;
  border-radius: var(--ao-radius-lg);
  padding: 2rem;
}
.cuaderno-asistente {
  background: var(--ao-negro) !important;
  border-radius: var(--ao-radius-lg);
  padding: 2rem;
  color: var(--ao-crema);
}

/* Form newsletter */
.ao-newsletter-form { display: flex; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.ao-newsletter-form input[type="email"] {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border: 1px solid rgba(26,26,24,.15);
  border-radius: var(--ao-radius);
  font-family: var(--wp--preset--font-family--body);
  font-size: .85rem;
  color: var(--ao-negro);
  background: var(--ao-blanco);
  outline: none;
  transition: border-color var(--ao-transicion);
}
.ao-newsletter-form input[type="email"]:focus { border-color: var(--ao-oro); }
.ao-newsletter-form input::placeholder { color: var(--ao-gris-claro); }
.ao-newsletter-form button {
  background: var(--ao-oro);
  color: var(--ao-blanco);
  border: none;
  padding: 10px 18px;
  border-radius: var(--ao-radius);
  font-family: var(--wp--preset--font-family--body);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ao-transicion);
}
.ao-newsletter-form button:hover { background: var(--ao-oro-oscuro); }
.ao-form-aviso { font-size: .72rem; color: var(--ao-gris); margin-top: .5rem; }

/* ── CTA FINAL ─────────────────────────────────────────── */
.cta-final { background: var(--ao-negro-suave) !important; }
.cta-final-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem,4vw,3rem);
}
.cta-final-texto h3 { font-size: 1.3rem; color: var(--ao-crema) !important; margin-bottom: .25rem; }
.cta-final-texto p  { font-size: .85rem; color: rgba(245,240,232,.6) !important; }

/* ── FOOTER ────────────────────────────────────────────── */
.site-footer.footer,
.footer { background: var(--ao-negro) !important; }

.footer-grid { margin-bottom: 3rem; }

.footer-col-title {
  font-size: .75rem !important;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(245,240,232,.35) !important;
  margin-bottom: 1.25rem;
}
.footer-col .wp-block-navigation-item__content {
  font-size: .85rem;
  color: rgba(245,240,232,.55) !important;
  transition: color var(--ao-transicion);
  text-decoration: none;
}
.footer-col .wp-block-navigation-item__content:hover { color: var(--ao-oro) !important; }

.footer-desc { color: rgba(245,240,232,.5) !important; line-height: 1.7; }

.footer-sep { background: rgba(245,240,232,.08) !important; border-color: rgba(245,240,232,.08) !important; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(245,240,232,.08);
}
.footer-bottom p { font-size: .78rem; color: rgba(245,240,232,.4) !important; }
.footer-legal .wp-block-navigation-item__content {
  font-size: .78rem !important;
  color: rgba(245,240,232,.4) !important;
}
.footer-legal .wp-block-navigation-item__content:hover { color: var(--ao-oro) !important; }

/* Social links footer */
.footer-social .wp-block-social-link {
  background: transparent !important;
  border: 1px solid rgba(245,240,232,.15);
  border-radius: var(--ao-radius);
  transition: all var(--ao-transicion);
}
.footer-social .wp-block-social-link:hover {
  border-color: var(--ao-oro);
  background: rgba(184,151,58,.1) !important;
}
.footer-social .wp-block-social-link a { padding: 8px; }
.footer-social .wp-social-link__space { display: none; }

/* ── ASISTENTE TÉCNICO ─────────────────────────────────── */
.ao-asistente {
  border: 1px solid rgba(26,26,24,.1);
  border-radius: var(--ao-radius-lg);
  overflow: hidden;
  font-family: var(--wp--preset--font-family--body);
}
.ao-asistente__chat {
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
  padding: 1.25rem;
  background: var(--ao-crema);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ao-msg {
  padding: .75rem 1rem;
  border-radius: var(--ao-radius-lg);
  font-size: .875rem;
  line-height: 1.6;
  max-width: 85%;
}
.ao-msg--user {
  background: var(--ao-oro);
  color: var(--ao-blanco);
  align-self: flex-end;
}
.ao-msg--bot {
  background: var(--ao-blanco);
  border: 1px solid rgba(26,26,24,.08);
  align-self: flex-start;
}
.ao-msg--typing { opacity: .6; font-style: italic; }

.ao-asistente__form {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(26,26,24,.08);
}
.ao-asistente__form input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  border: none;
  font-family: var(--wp--preset--font-family--body);
  font-size: .875rem;
  color: var(--ao-negro);
  background: var(--ao-blanco);
  outline: none;
}
.ao-asistente__form button {
  background: var(--ao-oro);
  color: var(--ao-blanco);
  border: none;
  padding: 12px 20px;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ao-transicion);
  font-family: var(--wp--preset--font-family--body);
}
.ao-asistente__form button:hover { background: var(--ao-oro-oscuro); }
.ao-asistente__aviso {
  padding: .5rem 1rem;
  font-size: .72rem;
  color: var(--ao-gris);
  background: var(--ao-blanco);
  border-top: 1px solid rgba(26,26,24,.06);
  text-align: center;
}

/* ── ANIMACIONES FADE-UP ───────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-delay-1 { transition-delay: .1s; }
.fade-delay-2 { transition-delay: .2s; }
.fade-delay-3 { transition-delay: .3s; }
.fade-delay-4 { transition-delay: .4s; }

/* ── RESPONSIVO ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .stat-item:nth-child(2) { border-right: none; }
  .hero-libro { position: relative; bottom: auto; right: auto; width: 100%; margin-top: 2rem; }
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .cta-final-inner { flex-direction: column; text-align: center; }
  .sobre-mi-fotos { grid-template-columns: 1fr 1fr !important; }
  .footer-grid .wp-block-columns { flex-wrap: wrap; }
  .footer-grid .wp-block-column { flex-basis: calc(50% - 1rem) !important; }
}
@media (max-width: 480px) {
  .hero-acciones { flex-direction: column; }
  .hero-acciones .wp-block-button { width: 100%; text-align: center; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .footer-grid .wp-block-column { flex-basis: 100% !important; }
}

/* ── WOOCOMMERCE ───────────────────────────────────────── */
.woocommerce-page .woocommerce-breadcrumb { color: var(--ao-gris); font-size: .8rem; }
.woocommerce div.product .product_title {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.75rem,4vw,2.5rem);
  font-weight: 600;
}
.woocommerce .price { color: var(--ao-oro); font-weight: 600; }
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--ao-oro) !important;
  color: var(--ao-blanco) !important;
  border-radius: var(--ao-radius) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  transition: background var(--ao-transicion) !important;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background-color: var(--ao-oro-oscuro) !important; }

/* ── UTILIDADES ────────────────────────────────────────── */
.centrado, .has-text-align-center { text-align: center; }
.t-display { font-family: var(--wp--preset--font-family--display) !important; }
.t-display-lg { font-size: clamp(2.8rem,6vw,4.5rem) !important; }
.t-display-md { font-size: clamp(2rem,4vw,3rem) !important; }
.t-display-sm { font-size: clamp(1.5rem,3vw,2rem) !important; }
.seccion { padding: clamp(4rem,8vw,7rem) 0; }
.seccion-sm { padding: clamp(2rem,4vw,3.5rem) 0; }

/* Skip link (accesibilidad) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--ao-oro);
  color: var(--ao-blanco);
  padding: .5rem 1rem;
  font-size: .875rem;
  border-radius: 0 0 var(--ao-radius) var(--ao-radius);
  transition: top var(--ao-transicion);
}
.skip-link:focus { top: 0; }