/*
Theme Name: Luna Marsella
Theme URI: https://lunamarsella.com
Description: Tema de Luna Marsella - disenadora de contenidos y video. Tema hijo de Illustrator Designer con la identidad visual de la marca (colores, tipografia Prata + Inter, botones, cabecera) homogeneizada con la landing page de Lenguajes Web.
Author: Luna Marsella
Version: 1.1
Template: illustrator-designer
Text Domain: luna-marsella
*/

@import url('https://fonts.googleapis.com/css2?family=Prata&family=Inter:wght@400;500;600;700&display=swap');

/* ===== LUNA MARSELLA - marca sobre el tema Illustrator Designer ===== */

:root{
  --lm-panel:#1e1a16;
  --lm-text:#f4efe9;
  --lm-muted:#b7ad9f;
  --lm-red:#e63419;
  --lm-blue:#485cba;
  --lm-line:rgba(244,239,233,.14);
}

/* 1 - Recolorea el tema redefiniendo sus variables */
body{
  --wp--preset--color--primary:#f4efe9;
  --wp--preset--color--secondary:#17130f;
  --wp--preset--color--tertiary:#17130f;
  --wp--preset--color--accent:#e63419;
  --wp--preset--color--thirdaccent:#1e1a16;
  --wp--preset--color--secaccent:#485cba;
  --wp--preset--font-family--syne:"Prata", Georgia, serif;
  background-color:#17130f !important;
  color:#f4efe9;
  font-family:"Inter", system-ui, sans-serif !important;
}

/* 2 - Tipografias: Prata en titulos, Inter en el resto */
h1,h2,h3,h4,h5,h6,
h1 a,h2 a,h3 a,h4 a,
.wp-block-site-title a,
.wp-block-post-title,
.wp-block-post-title a,
.wp-block-query-title{
  font-family:"Prata", Georgia, serif !important;
  font-weight:400 !important;
}
p,li,a,button,input,textarea,select,
.wp-block-navigation{
  font-family:"Inter", system-ui, sans-serif !important;
}

/* 3 - Logo + menu */
.wp-block-site-title a{ color:#f4efe9 !important; font-size:24px !important; }
.wp-block-navigation a{ color:#f4efe9 !important; }
.wp-block-site-title a:hover,
.wp-block-navigation a:hover{ color:#e63419 !important; }

/* 4 - Fondos claros sueltos del tema -> superficie oscura */
.has-background-background-color,
.has-fourground-background-color,
.has-secbackground-background-color,
.has-fourthaccent-background-color,
.has-white-background-color,
.has-base-background-color,
.wp-block-group.lite-shadow,
.inner-post-box{
  background-color:#1e1a16 !important;
  color:#f4efe9 !important;
}
.wp-block-group.lite-shadow,
.inner-post-box{ border:1px solid var(--lm-line); }

/* 5 - Titulos blancos dentro de las portadas de color */
.wp-block-cover .wp-block-post-title,
.wp-block-cover .wp-block-query-title,
.wp-block-cover h1,
.wp-block-cover h2{ color:#ffffff !important; }

/* 6 - Botones: azul base, naranja al pasar el raton */
.wp-block-button__link,
.wp-element-button,
.wpcf7-submit,
.wp-block-search__button{
  background-color:#485cba !important;
  color:#f4efe9 !important;
  border:0 !important;
  border-radius:10px !important;
  text-decoration:none !important;
  padding:10px 22px !important;
  font-size:13px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600 !important;
  transition:background-color .18s ease, border-color .18s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.wpcf7-submit:hover,
.wp-block-search__button:hover{
  background-color:#e63419 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background-color:transparent !important;
  border:1px solid #485cba !important;
  color:#f4efe9 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background-color:#e63419 !important;
  border-color:#e63419 !important;
}

/* 7 - Formularios (Contact Form 7 + buscador) */
input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
textarea,select,
.wp-block-search__input{
  background-color:#1e1a16 !important;
  color:#f4efe9 !important;
  border:1px solid var(--lm-line) !important;
  border-radius:0 !important;
}
::placeholder{ color:#b7ad9f; }

/* 8 - Pie de pagina */
footer,
footer .wp-block-template-part{
  background-color:#120f0c !important;
  color:#f4efe9 !important;
}
footer a{ color:#f4efe9 !important; }
footer a:hover{ color:#e63419 !important; }

/* 9 - Baja el ruido del texto gigante del banner */
.slider-main-box .has-huge-font-size{ opacity:.1; }

/* 10 - Nunca scroll horizontal */
html,body{ overflow-x:hidden; max-width:100%; }

/* 11 - Movil */
@media(max-width:781px){
  .wp-block-site-title a{ font-size:20px !important; }
}

/* 12 - Sin cajas detras de los titulos */
h1,h2,h3,h4,h5,h6{ background:none !important; box-shadow:none !important; }

/* 13 - Header: sin bordes laterales, logo a la izquierda, menu a la derecha */
header .wp-block-columns.has-thirdaccent-background-color{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  width:100% !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 32px !important;
}
header .left-empty,
header .wp-block-columns.has-thirdaccent-background-color > .wp-block-column:last-child{
  display:none !important;
}
header .inner-menu-col{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  border-left:0 !important;
}
header .menu-group{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  width:auto !important;
  border:0 !important;
  border-radius:0 !important;
}
header .header-logo{
  flex:0 0 auto !important;
  width:auto !important;
  padding-left:0 !important;
}
header .header-inner-menu{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
header .wp-block-navigation{
  width:auto !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
}
header .wp-block-navigation__container{
  width:auto !important;
  display:flex !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
}
header .toggler_icon_col{ flex:0 0 auto !important; width:auto !important; }

/* 14 - Texto legible dentro de las portadas (Cover) */
.wp-block-cover p,
.wp-block-cover li,
.wp-block-cover a:not(.wp-block-button__link){
  color:#f4efe9 !important;
  opacity:1 !important;
}

/* 15 - Pildora del hero: ancho solo del texto */
.wp-block-cover p.has-border-color{
  display:inline-block;
}

/* 16 - Hero: todo alineado a la izquierda, margen consistente */
.wp-block-cover{
  padding-left:0 !important;
  padding-right:0 !important;
}
.wp-block-cover .wp-block-cover__inner-container{
  max-width:700px;
  margin-left:8%;
  margin-right:auto;
}
.wp-block-cover .wp-block-cover__inner-container > *{
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:100% !important;
}
/* 17 - Contacto: layout dividido */
.contacto-split{ align-items:stretch !important; }
.contacto-split .wp-block-column:last-child form.wpcf7-form label{
  color:#17130f !important;
  font-weight:600;
  display:block;
  margin-bottom:.3rem;
}
.contacto-split .wp-block-column:last-child input:not([type=submit]),
.contacto-split .wp-block-column:last-child textarea{
  background:#fff !important;
  color:#17130f !important;
  border:1px solid rgba(23,19,15,.25) !important;
  border-radius:6px !important;
}
.contacto-split .wp-block-column:last-child input[type=submit]{
  background:#17130f !important;
  color:#f4efe9 !important;
  border:0 !important;
  border-radius:10px !important;
  padding:12px 28px !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  cursor:pointer;
}
.contacto-split .wp-block-column:last-child input[type=submit]:hover{ filter:brightness(1.15); }
@media(max-width:781px){
  .contacto-split{ flex-wrap:wrap !important; }
  .contacto-split .wp-block-column{ flex-basis:100% !important; }
}
/* 18 - Proyectos: tarjetas */
.lm-tile{ border-radius:14px; overflow:hidden; transition:transform .2s ease; }
.lm-tile h2 a, .lm-tile h3 a{ text-decoration:none; }
.lm-tile h2 a::after, .lm-tile h3 a::after{ content:""; position:absolute; inset:0; z-index:2; }
.lm-tile:hover{ transform:translateY(-3px); }

/* 19 - Ocultar panel de demo del tema y traducir "Read more" */
header .toggler_icon_col,
header .library_toggler_body{ display:none !important; }

.wp-block-post-excerpt__more-link{ font-size:0 !important; }
.wp-block-post-excerpt__more-link::after{ content:"Leer más"; font-size:15px; }