/*
Theme Name:   Hello Sofiane
Theme URI:    https://sofianechocolatl.com
Description:  Tema hijo de Hello Elementor con el sistema visual de Sofiane Chocolatl. Paleta, tipografías y componentes de galería.
Author:       Sofiane Chocolatl
Template:     hello-elementor
Version:      1.0.3
Text Domain:  hello-sofiane
*/

/* ==========================================================================
   1. PALETA — Dirección B del manual de marca
   Cambiar aquí cambia el sitio entero.
   ========================================================================== */

:root {
  /* Pigmento */
  --sof-navy:      #143A50;
  --sof-navy-lo:   #10303F;
  --sof-navy-hi:   #1B4460;
  --sof-olive:     #4E5B1C;
  --sof-burgundy:  #7E1E17;
  --sof-terra:     #B24A20;
  --sof-gold:      #C89B3F;
  --sof-gold-deep: #96702A;

  /* Papel */
  --sof-cream:     #EDE6DB;
  --sof-cream-hi:  #F6F1E8;
  --sof-cream-lo:  #E2D9CA;

  /* Tinta */
  --sof-ink:       #221A12;
  --sof-ink-soft:  #5C5044;
  --sof-ink-faint: #8B7F70;
  --sof-rule:      #D2C6B2;
  --sof-rule-soft: #DFD6C6;

  /* Tipografía */
  --sof-display: "Playfair Display", Georgia, serif;
  --sof-body:    "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sof-ui:      "Jost", "Avenir Next", Helvetica, Arial, sans-serif;

  /* Encabezado */
  --sof-logo-w: 240px;

  /* Ritmo */
  --sof-gap:     clamp(3.5rem, 9vw, 6.5rem);
  --sof-measure: 62ch;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background: var(--sof-cream);
  color: var(--sof-ink);
  font-family: var(--sof-body);
  font-size: 1rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sof-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--sof-ink);
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sof-gold);
  outline-offset: 3px;
}

/* La marca no usa esquinas redondeadas en ningún lado. */
.sof-sala,
.sof-marco,
.sof-btn,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img {
  border-radius: 0 !important;
}

/* ==========================================================================
   3. TIPOGRAFÍA — clases utilitarias para Elementor
   Se aplican en: widget → Avanzado → Clases CSS
   ========================================================================== */

.sof-display    { font-family: var(--sof-display) !important; }
.sof-body       { font-family: var(--sof-body) !important; }
.sof-ui         { font-family: var(--sof-ui) !important; }

.sof-eyebrow {
  font-family: var(--sof-ui) !important;
  font-size: 0.6875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase;
  color: var(--sof-gold-deep) !important;
  line-height: 1.4 !important;
}

.sof-lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.25rem) !important;
  line-height: 1.62 !important;
  color: var(--sof-ink-soft) !important;
  max-width: 40ch;
}

.sof-quote {
  font-family: var(--sof-display) !important;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem) !important;
  line-height: 1.42 !important;
  color: var(--sof-ink-soft) !important;
}

.sof-narrow { max-width: var(--sof-measure); }

/* ==========================================================================
   4. LA SALA — muro de galería azul a rayas
   Aplicar a un contenedor de sección a ancho completo.
   ========================================================================== */

.sof-sala {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0) 32%, rgba(0,0,0,.42)),
    repeating-linear-gradient(90deg, var(--sof-navy) 0 30px, var(--sof-navy-hi) 30px 60px) !important;
  color: #F2EDE3;
  overflow: hidden;
}

/* Luz cenital de museo */
.sof-sala::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 34%, rgba(255,231,178,.16), rgba(0,0,0,0) 70%);
  z-index: 1;
}

.sof-sala > * { position: relative; z-index: 2; }

.sof-sala h1, .sof-sala h2, .sof-sala h3, .sof-sala h4 { color: #F6F1E8; }
.sof-sala p, .sof-sala li { color: #C9BFAE; }
.sof-sala .sof-eyebrow { color: var(--sof-gold) !important; }
.sof-sala a { color: #F2EDE3; }

/* ==========================================================================
   5. EL MARCO DORADO
   Envolver una imagen de producto. En Elementor: widget Imagen →
   Avanzado → Clases CSS → sof-marco
   ========================================================================== */

.sof-marco {
  position: relative;
  display: block;
  padding: clamp(10px, 1.4vw, 17px);
  background: linear-gradient(135deg,
    #E8CA8B 0%, #B9873A 22%, #8A6224 44%,
    #DFBD73 62%, #9C7229 82%, #E2C384 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,200,.5),
    inset 0 0 0 6px rgba(90,62,18,.28),
    0 2px 0 rgba(0,0,0,.35),
    0 34px 70px rgba(0,0,0,.45);
  transition: transform .32s ease, box-shadow .32s ease;
}

.sof-marco img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: inset 0 0 0 2px rgba(40,26,6,.55);
}

a:hover > .sof-marco,
.sof-marco:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,200,.5),
    inset 0 0 0 6px rgba(90,62,18,.28),
    0 3px 0 rgba(0,0,0,.35),
    0 42px 80px rgba(0,0,0,.55);
}

/* ==========================================================================
   6. LA CARTELA — ficha estilo placa de museo
   ========================================================================== */

.sof-cartela {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding-top: 1.125rem;
}

.sof-cartela__no {
  font-family: var(--sof-ui);
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sof-gold-deep);
}

.sof-cartela__nombre {
  font-family: var(--sof-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
}

.sof-cartela__obra {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--sof-ink-soft);
}

.sof-cartela__pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--sof-rule-soft);
  font-family: var(--sof-ui);
  font-weight: 300;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. ORNAMENTO DIVISOR
   ========================================================================== */

.sof-orn {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--sof-gold);
}
.sof-orn::before,
.sof-orn::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.sof-orn::marker { content: none; }

/* Rombo central usando un pseudo-elemento de texto */
.sof-orn > span {
  font-size: 0.75rem;
  line-height: 1;
  transform: rotate(45deg);
  display: inline-block;
  width: 7px;
  height: 7px;
  background: currentColor;
}

/* ==========================================================================
   8. BOTONES

   IMPORTANTE: el widget Botón de Elementor aplica las clases CSS al
   ENVOLTORIO del widget, no al <a>. Por eso primero se neutraliza el
   envoltorio y luego se estiliza el enlace interno.
   ========================================================================== */

/* Envoltorio: que no dibuje caja propia */
.elementor-widget-button.sof-btn,
.elementor-widget-button.sof-btn > .elementor-widget-container,
.elementor-widget-button.sof-btn .elementor-button-wrapper {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* --- Botón base --- */
.sof-btn .elementor-button,
a.sof-btn,
button.sof-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-block;
  font-family: var(--sof-ui) !important;
  font-weight: 400 !important;
  font-size: 0.78125rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  padding: 1rem 2.125rem !important;
  border-radius: 0 !important;
  border: 1px solid var(--sof-ink) !important;
  background: var(--sof-ink) !important;
  background-image: none !important;
  color: var(--sof-cream) !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .24s ease, color .24s ease, border-color .24s ease;
}

.sof-btn .elementor-button:hover,
a.sof-btn:hover,
button.sof-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: transparent !important;
  color: var(--sof-ink) !important;
  border-color: var(--sof-ink) !important;
}

/* El texto interno del botón de Elementor hereda, no impone */
.sof-btn .elementor-button .elementor-button-text,
.sof-btn .elementor-button .elementor-button-content-wrapper {
  color: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
}

/* --- Dorado --- */
.sof-btn--gold .elementor-button,
a.sof-btn--gold {
  background: var(--sof-gold) !important;
  border-color: var(--sof-gold) !important;
  color: #1B1206 !important;
}
.sof-btn--gold .elementor-button:hover,
a.sof-btn--gold:hover {
  background: transparent !important;
  color: var(--sof-gold) !important;
  border-color: var(--sof-gold) !important;
}

/* --- Contorno sobre fondo claro --- */
.sof-btn--ghost .elementor-button,
a.sof-btn--ghost {
  background: transparent !important;
  color: var(--sof-ink) !important;
  border-color: var(--sof-rule) !important;
}
.sof-btn--ghost .elementor-button:hover,
a.sof-btn--ghost:hover {
  border-color: var(--sof-ink) !important;
  background: transparent !important;
  color: var(--sof-ink) !important;
}

/* --- Sobre la sala azul: cualquier botón sin variante se aclara --- */
.sof-sala .sof-btn:not(.sof-btn--gold) .elementor-button,
.sof-btn--sala .elementor-button,
a.sof-btn--sala {
  background: transparent !important;
  border-color: rgba(238,226,200,.5) !important;
  color: #F2EDE3 !important;
}
.sof-sala .sof-btn:not(.sof-btn--gold) .elementor-button:hover,
.sof-btn--sala .elementor-button:hover,
a.sof-btn--sala:hover {
  background: #F2EDE3 !important;
  color: var(--sof-navy) !important;
  border-color: #F2EDE3 !important;
}

/* --- Claros, para el panel terracota --- */
.sof-btn--claro .elementor-button,
a.sof-btn--claro {
  background: #F6EFE4 !important;
  border-color: #F6EFE4 !important;
  color: var(--sof-terra) !important;
}
.sof-btn--claro .elementor-button:hover,
a.sof-btn--claro:hover {
  background: transparent !important;
  color: #F6EFE4 !important;
  border-color: #F6EFE4 !important;
}

.sof-btn--claro-ghost .elementor-button,
a.sof-btn--claro-ghost {
  background: transparent !important;
  border-color: rgba(246,239,228,.55) !important;
  color: #F6EFE4 !important;
}
.sof-btn--claro-ghost .elementor-button:hover,
a.sof-btn--claro-ghost:hover {
  background: transparent !important;
  border-color: #F6EFE4 !important;
  color: #F6EFE4 !important;
}

/* En móvil el texto sí puede partirse */
@media (max-width: 480px) {
  .sof-btn .elementor-button,
  a.sof-btn { white-space: normal; padding: .875rem 1.5rem !important; }
}

/* ==========================================================================
   9. WOOCOMMERCE — la tienda como galería
   ========================================================================== */

/* --- Catálogo --- */

.woocommerce ul.products {
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

.woocommerce ul.products li.product {
  text-align: left;
  margin-bottom: 0;
}

.woocommerce ul.products li.product a img {
  margin-bottom: 0;
  box-shadow: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sof-display) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  padding: 1rem 0 0.25rem !important;
  color: var(--sof-ink);
}

.woocommerce ul.products li.product .price {
  font-family: var(--sof-ui) !important;
  font-size: 1.0625rem !important;
  font-weight: 300 !important;
  color: var(--sof-ink) !important;
  font-variant-numeric: tabular-nums;
  display: block;
  padding-top: 0.625rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--sof-rule-soft);
}

/* --- La regla más importante: nada de rebajas gritonas --- */

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  display: none !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--sof-ink-faint) !important;
  font-size: 0.875em;
  opacity: 0.7;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 400;
}

/* --- Ficha de producto --- */

.woocommerce div.product .product_title {
  font-family: var(--sof-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--sof-ui);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--sof-ink);
  font-variant-numeric: tabular-nums;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  background: var(--sof-cream-lo);
  border-color: var(--sof-rule);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--sof-cream-hi);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--sof-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Cantidad */
.woocommerce .quantity .qty {
  font-family: var(--sof-ui);
  border: 1px solid var(--sof-rule);
  border-radius: 0;
  padding: 0.75rem 0.5rem;
  background: var(--sof-cream-hi);
  color: var(--sof-ink);
}

/* --- Avisos --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--sof-gold) !important;
  background: var(--sof-cream-hi);
  font-family: var(--sof-ui);
  font-size: 0.9375rem;
  border-radius: 0;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--sof-gold) !important; }

/* --- Carrito y pago: convencionales a propósito --- */

.woocommerce table.shop_table {
  border-radius: 0;
  border-color: var(--sof-rule);
  font-family: var(--sof-ui);
  font-size: 0.9375rem;
}
.woocommerce table.shop_table th {
  font-family: var(--sof-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  border-radius: 0 !important;
  border: 1px solid var(--sof-rule) !important;
  background: var(--sof-cream-hi) !important;
  font-family: var(--sof-ui);
  padding: 0.75rem 0.875rem;
  color: var(--sof-ink);
}

.woocommerce form .form-row label {
  font-family: var(--sof-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--sof-ink-soft);
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {
  .sof-sala { background-size: auto, 40px 100%; }
  .sof-cartela__nombre { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sof-marco,
  .sof-btn,
  .woocommerce a.button { transition: none !important; }
}


/* ==========================================================================
   11. ENCABEZADO Y PIE DEL TEMA
   ========================================================================== */

.site-header {
  background: var(--sof-cream);
  border-bottom: 1px solid var(--sof-rule-soft);
  padding-top: 1.5rem;
  padding-bottom: 1.25rem;
}

/* La marca se apila y el descriptor hereda el ancho exacto del logo. */
.site-header .site-branding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.site-header img.custom-logo,
.site-header .site-logo img,
header img.custom-logo {
  width: auto !important;
  max-width: var(--sof-logo-w) !important;
  height: auto !important;
  display: block;
}

/* El descriptor se centra bajo el logo.
   text-indent compensa el espacio que letter-spacing agrega DESPUÉS
   del último carácter, que es lo que desalineaba el bloque. */
.site-header .site-description,
.site-description {
  font-family: var(--sof-ui) !important;
  font-size: 0.625rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.34em !important;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--sof-ink-faint) !important;
  margin: 0.625rem 0 0 !important;
  line-height: 1.4 !important;
  width: var(--sof-logo-w);
  text-align: center;
  white-space: nowrap;
}

.site-header .site-title:has(img.custom-logo) { font-size: 0; }

@media (max-width: 767px) {
  :root { --sof-logo-w: 185px; }
  .site-header { padding-top: 1rem; padding-bottom: .875rem; }
  .site-header .site-description,
  .site-description {
    font-size: 0.5rem !important;
    letter-spacing: 0.26em !important;
    text-indent: 0.26em;
  }
}

/* --- Pie --- */

.site-footer {
  background: var(--sof-navy-lo);
  color: #CFC5B4;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-top: 0;
}
.site-footer a { color: #CFC5B4; }
.site-footer a:hover { color: #F2EDE3; }
.site-footer img.custom-logo { max-width: 180px !important; }
.site-footer .site-description { color: #8B8172 !important; }