/*
Theme Name: Almas de Barro (Astra Child)
Theme URI: https://almasdebarro.com
Description: Child theme de Astra para Almas de Barro (taller de ceramica).
Author: Flor10
Template: astra
Version: 1.3.1
Text Domain: astra-child
*/

/* ==========================================================================
   ALMAS DE BARRO — Sistema visual  (ver SISTEMA-VISUAL.md)
   Editorial artesanal calido. Terracota primario + verde oliva secundario.
   ========================================================================== */

:root{
  /* --- Paleta --- */
  --ab-crema:#f4ede2;        /* fondo principal */
  --ab-hueso:#faf6ee;        /* fondo elevado */
  --ab-terracota:#c97b5a;    /* acento primario */
  --ab-terracota-700:#a85a3e;
  --ab-verde:#5a6b3f;        /* acento secundario */
  --ab-verde-700:#47552f;
  --ab-tinta:#2a1f17;        /* texto principal */
  --ab-marron:#6b4a35;       /* texto secundario */
  --ab-piedra:#d4c7b3;       /* bordes / filetes */
  --ab-espresso:#231a13;     /* footer oscuro */
  --ab-success:#5a6b3f;
  --ab-error:#8a3a1f;

  /* --- Tipografia --- */
  --ab-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ab-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Escala fluida --- */
  --ab-h1:clamp(2.6rem, 1.55rem + 3.6vw, 4.5rem);
  --ab-h2:clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
  --ab-h3:clamp(1.3rem, 1.05rem + 1vw, 1.6rem);
  --ab-body:1.075rem;
  --ab-eyebrow:0.8rem;

  /* --- Otros --- */
  --ab-radius:2px;
  --ab-radius-card:4px;
  --ab-shadow-card:0 18px 40px -24px rgba(42,31,23,.35);
  --ab-maxw:1180px;
  --ab-t:200ms ease;
}

/* --- Base ---------------------------------------------------------------- */
body{
  background-color:var(--ab-crema);
  color:var(--ab-tinta);
  font-family:var(--ab-sans);
  font-size:var(--ab-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,
.entry-title,
.elementor-heading-title,
.ast-single-post .entry-title{
  font-family:var(--ab-serif);
  color:var(--ab-tinta);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.01em;
}
h1{font-size:var(--ab-h1);}
h2{font-size:var(--ab-h2);}
h3{font-size:var(--ab-h3);}

a{
  color:var(--ab-terracota);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--ab-t);
}
a:hover{color:var(--ab-terracota-700);}

::selection{background:var(--ab-terracota);color:#fff;}

/* --- Eyebrow (etiqueta superior de seccion) ------------------------------ */
.ab-eyebrow{
  display:inline-block;
  font-family:var(--ab-sans);
  font-size:var(--ab-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ab-terracota);
  font-weight:600;
  margin-bottom:.6rem;
}

/* --- Botones (rectangulares 2px, no pill) -------------------------------- */
.ab-btn,
.wp-block-button__link,
.ast-custom-button,
.ast-custom-button-link,
.menu-item.ab-cta > a,
.elementor-button{
  border-radius:var(--ab-radius) !important;
  font-family:var(--ab-sans);
  font-weight:600;
  letter-spacing:.02em;
  transition:background-color var(--ab-t), color var(--ab-t), border-color var(--ab-t);
}
.ab-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.6rem;text-decoration:none;}
.ab-btn--primary,
.menu-item.ab-cta > a,
.elementor-button.ab-primary{
  background-color:var(--ab-terracota);
  color:var(--ab-hueso);
  border:1px solid var(--ab-terracota);
}
.ab-btn--primary:hover,
.menu-item.ab-cta > a:hover,
.elementor-button.ab-primary:hover{background-color:var(--ab-terracota-700);border-color:var(--ab-terracota-700);color:#fff;}
.ab-btn--ghost{
  background:transparent;
  border:1px solid var(--ab-terracota);
  color:var(--ab-terracota);
}
.ab-btn--ghost:hover{background:var(--ab-terracota);color:#fff;}

/* --- Chips (tira de valores, estilo Clayra) ------------------------------ */
.ab-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--ab-hueso);
  border:1px solid var(--ab-piedra);
  border-radius:2px;
  padding:.6rem 1rem;
  font-size:.9rem;color:var(--ab-marron);
}

/* --- Tarjetas ------------------------------------------------------------ */
.ab-card{
  background:var(--ab-hueso);
  border:1px solid var(--ab-piedra);
  border-radius:var(--ab-radius-card);
  box-shadow:var(--ab-shadow-card);
  overflow:hidden;
}

/* --- Enlace con flecha (motivo CeraArt) ---------------------------------- */
.ab-link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.ab-link-arrow .ab-arrow{transition:transform var(--ab-t);}
.ab-link-arrow:hover .ab-arrow{transform:translateX(4px);}

/* --- Cabecera (Astra) ---------------------------------------------------- */
/* OJO: el fondo crema va acotado a la cabecera NO transparente. Sin el
   :not(), esta regla pinta .site-header siempre y deja opaca la cabecera
   transparente de Astra (era el motivo de que "no se pudiera activar"). */
body:not(.ast-theme-transparent-header) .site-header,
body:not(.ast-theme-transparent-header) .ast-primary-header-bar,
body:not(.ast-theme-transparent-header) .main-header-bar{background-color:var(--ab-crema);}

.main-header-menu a,
.ast-header-navigation-markup a,
.main-header-bar .main-navigation a{font-family:var(--ab-sans);}

body:not(.ast-theme-transparent-header) .main-header-menu a,
body:not(.ast-theme-transparent-header) .ast-header-navigation-markup a,
body:not(.ast-theme-transparent-header) .main-header-bar .main-navigation a{color:var(--ab-tinta);}

.main-header-menu a:hover{color:var(--ab-terracota);}

/* --- Cabecera transparente sobre el hero --------------------------------- */
/* Astra marca el <body> con .ast-theme-transparent-header y saca #masthead
   del flujo (position:absolute). Las filas deben quedar sin fondo ni filete
   para que se vea la foto de debajo. */
body.ast-theme-transparent-header .site-header,
body.ast-theme-transparent-header .ast-above-header-bar,
body.ast-theme-transparent-header .ast-primary-header-bar,
body.ast-theme-transparent-header .ast-below-header-bar,
body.ast-theme-transparent-header .main-header-bar{
  background-color:transparent;
  border-bottom:0;
  box-shadow:none;
}

/* Texto claro: los nueve heros llevan velo #231a13 al 50-55%, así que el
   contraste está garantizado en todas las páginas. */
body.ast-theme-transparent-header .main-header-menu a,
body.ast-theme-transparent-header .ast-header-navigation-markup a,
body.ast-theme-transparent-header .main-header-bar .main-navigation a,
body.ast-theme-transparent-header .ast-builder-html-element,
body.ast-theme-transparent-header .site-title a{color:var(--ab-crema);}
body.ast-theme-transparent-header .main-header-menu a:hover,
body.ast-theme-transparent-header .ast-builder-html-element a:hover{color:var(--ab-terracota);}
/* Hamburguesa y aspas del móvil, también en claro. */
body.ast-theme-transparent-header .ast-mobile-menu-trigger-minimal,
body.ast-theme-transparent-header .menu-toggle .ast-mobile-svg{color:var(--ab-crema);fill:var(--ab-crema);}
/* Los desplegables sí van opacos: en el aire no se leerían. */
body.ast-theme-transparent-header .main-header-menu .sub-menu{
  background-color:var(--ab-hueso);
}
body.ast-theme-transparent-header .main-header-menu .sub-menu a{color:var(--ab-tinta);}

/* Filete tenue bajo el top bar: separa las dos filas sin cerrar la cabecera. */
body.ast-theme-transparent-header .ast-above-header-wrap{
  border-bottom:1px solid rgba(244,237,226,.22);
}
.ast-above-header-wrap .ast-builder-html-element{
  letter-spacing:.04em;
}

/* Compensar la superposición: al flotar la cabecera sobre el contenido, el
   primer bloque necesita hueco propio o el titular queda bajo el logo.
   --ab-header-h = alto real del header en el Customizer (top bar + fila
   principal): 44+110 escritorio, 40+100 tablet, 36+80 móvil. Si se cambian
   esas alturas en Astra, hay que actualizarlas aquí. */
:root{--ab-header-h:154px;}
@media (max-width:921px){:root{--ab-header-h:140px;}}
@media (max-width:544px){:root{--ab-header-h:116px;}}

body.ast-theme-transparent-header .elementor > .e-con.e-parent:first-child,
body.ast-theme-transparent-header .elementor > .elementor-section:first-child{
  padding-top:calc(var(--ab-header-h) + 60px);
}

/* --- Footer oscuro + marca de agua (estilo CeraArt/Clayra) --------------- */
footer.site-footer{
  position:relative;
  background-color:var(--ab-espresso);
  color:var(--ab-crema);
  overflow:hidden;
}
footer.site-footer a{color:var(--ab-crema);}
footer.site-footer a:hover{color:var(--ab-terracota);}
footer.site-footer .ast-small-footer{background:transparent;color:inherit;border:0;}
footer.site-footer::after{
  content:"Almas de Barro";
  position:absolute;left:50%;bottom:-0.32em;transform:translateX(-50%);
  font-family:var(--ab-serif);
  font-weight:600;
  font-size:clamp(4rem, 14vw, 13rem);
  line-height:1;
  color:rgba(244,237,226,.05);
  white-space:nowrap;pointer-events:none;z-index:0;
}
footer.site-footer .ast-footer-overlay,
footer.site-footer > *{position:relative;z-index:1;}

/* --- Contenedor Elementor coherente -------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con-boxed > .e-con-inner{max-width:var(--ab-maxw);}

/* --- Full-width real en páginas maquetadas con Elementor (plantilla Full Width) ---
   Astra envuelve el contenido en #content .ast-container (max-width ~1200) y deja
   márgenes blancos a los lados. Lo liberamos para que las secciones vayan a sangre
   completa; el contenido interior sigue centrado por .e-con-inner (--ab-maxw). */
.elementor-template-full-width #content .ast-container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.elementor-template-full-width #primary,
.elementor-template-full-width .site-content > .ast-container > #primary{
  margin:0 !important;
  padding:0 !important;
}