@charset "utf-8";

/* Reset básico */
*{ box-sizing: border-box; }

:root{
  --font-body: "Source Serif 4", serif;
  --font-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --measure: 68ch;
  --lh-body: 1.75;
  --lh-head: 1.15;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
}

/* Base global del sitio */
body{
  margin: 0;
  color: #A09F9C; /*Titanium*/
  background-color: #000;

  font-family: var(--font-body);
  line-height: var(--lh-body);
  font-size: 18px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Contenedor de texto (manual/artículo) */
.prose, main article, article.prose{
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1rem;
}

p{ margin: 0 0 var(--space-2); }

/* Títulos */
h1, h2, h3, h4{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.01em;
  margin: var(--space-4) 0 var(--space-2);
}

h1{ font-size: clamp(2rem, 3vw, 2.6rem); }
h2{ font-size: clamp(1.6rem, 2.2vw, 2rem); }
h3{ font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
h4{ font-size: 1.1rem; font-weight: 600; }

/* Evita doble aire al inicio */
.prose > h1:first-child,
.prose > h2:first-child{ margin-top: 0; }

/* Negrita en el cuerpo: 600 (para usar tu Semibold real) */
.prose strong,
.prose b{ font-weight: 600; }

/* Detalles */
ul, ol{ margin: 0 0 var(--space-2); padding-left: 1.2em; }
li{ margin: 0.25em 0; }
a{ text-underline-offset: 0.15em; text-decoration-thickness: 0.08em; }


:root{ --measure: 68ch; }

@media (min-width: 1024px){
  :root{ --measure: 80ch; }
  body{ font-size: 19px; }
}

@media (min-width: 1440px){
  :root{ --measure: 86ch; }
}

.prose, main article, article.prose{
  max-width: min(var(--measure), 980px);
}


/* Footer global */
footer{
  background-color: #272520; /*Black Truffle*/
}

/* enllaços */
a:link {
  
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #B45A7A; /*Tapestry*/
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color:#6082B6; /* Glaucous Color */
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #B4945A; /* Matte Bronze Color */
  background-color: transparent;
  text-decoration: none;
}

/* Utilidades tipográficas (clases) */
.w0-negreta{ font-weight: 900; }              /* “negra” (Montserrat Black) */
.w0-glauco{ color: #5A7AB4; font-weight: 700; } /* énfasis azul + peso */
strong { color: #CFCFCE; /*American Silver*/
}

/* Título responsive SIN recortes */
.w0-jumbo{
  font-size: 8vw; /* Se ajusta automáticamente al ancho */;
}
.w0-ico {
  height: 24px;
  width: auto;
}

.w0-ico-h1 {
  height: 48px;
  width: auto;
}

.w0-nota{
    border-radius: 5px;
    background-color: #272520;
    border-top: 1px solid #BEBEBD;
    border-bottom: 1px solid #BEBEBD;
    border-right: 1px solid #BEBEBD;
    border-left: 7px solid #BEBEBD;
    padding-left: 7px;
    padding-right: 0px;
}


.w0-green,.w0-hover-green:hover{color:#000!important;background-color:#5AB494!important}


/* =========================
   FIRMA DE ESTUDIO (H2)
   ========================= */

#firma-estudio h2{
  /* tamaño responsive (sustituye el w3-xxxlarge SOLO aquí) */
  font-size: clamp(28px, 7vw, 48px);
  line-height: 1.1;

  /* evita recortes y permite salto correcto */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;

  /* por si el recorte viene del contenedor */
  max-width: 100%;
  padding: 0 16px;   /* aire lateral en móvil */
  margin: 0 auto;
}

/* Si algún padre recorta, esto lo neutraliza en esta sección */
#firma-estudio{
  overflow: visible;
}


.w0-footer{
  max-width: 170ch;
  text-align: left;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 16px 16px 24px 16px;
}

/* gradiente horizontal (izquierda → derecha*/
.w0-quote-grad{

  background: linear-gradient(90deg, #4D6892 0%, #ADBFDA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* clave para títulos que pueden partir en 2 líneas */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Línia horitzontal estilitzada, usada a tota la web */
hr{
  border: none;
  border-top: 1px solid #B4945A !important;
  margin: 2em 0;
  opacity:.33;
}
/* =========================================================
   5) Componentes globales (se usan en varias páginas)
   ========================================================= */

/* --------------------------
   5.1 Overlay menú (02_menu)
   -------------------------- */
.overlay{
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.9);

  /* CLAVE: permitir scroll en pantallas pequeñas */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  transition: 0.5s;
}

/* Contenido: menos “empuje” vertical para que no se pierda el cierre */
.overlay-content{
  position: relative;
  width: 100%;
  text-align: center;

  /* en desktop queda bonito, en móvil lo reducimos abajo */
  top: 6%;
  margin-top: 18px;

  /* un poco de padding para que el contenido no toque bordes */
  padding-bottom: 24px;
}

/* Links */
.overlay a{
  padding: 8px;
  text-decoration: none;
  font-size: 16px;
  color: #A09F9C;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus{
  color: #5A7AB4;
}

/* Botón cerrar: dentro del overlay, visible al hacer scroll, pero NO flota fuera */
/* Botón cerrar centrado y sticky dentro del overlay */
#w0CloseMainMenuBtn{
  position: sticky;
  top: 10px;
  z-index: 10001;

  display: block;
  margin: 0 auto;        /* CENTRADO */
  background: transparent;
  border: 0;
  cursor: pointer;
}
.overlay-content .w3-center{
  text-align: center;
}
.overlay .closebtn{
  color: #b45a7a;
}

/* Ajuste móvil: quita “aire” arriba para que el menú quepa mejor */
@media (max-width: 600px){
  .overlay-content{
    top: 0;
    margin-top: 8px;
  }
}


/* Trigger del menú principal (02_menu.php) */
#w0OpenMainMenuBtn{
  position: fixed;
  top: 0px;
  left: 16px;
  z-index: 10000;
  color: #A09F9C;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
}

#w0OpenMainMenuBtn:hover,
#w0OpenMainMenuBtn:focus{
  color: #5A7AB4;
}

/* --------------------------
   5.2 Cookies (banner inferior) · V3
   -------------------------- */
.cookie-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;

  /* Debe estar por debajo del overlay menú (tu overlay suele estar en 9999) */
  z-index: 9000;

  background: rgba(25,25,25,.96);
  border-top: 3px solid #b45a7a;

  /* Evita “jank” en algunos móviles; si el navegador no soporta blur, no pasa nada */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Contenido compacto y centrado */
.cookie-inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Texto: máximo 2 líneas aprox */
.cookie-text{
  font-size: 14px;
  line-height: 1.25;
  opacity: .92;
  color: #f2f2f2;
}
.cookie-text a{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-text a:hover{
  opacity: .9;
}

/* Botones iguales y compactos */
.cookie-actions{
  display: inline-flex;
  gap: 10px;
  flex: 0 0 auto;
}
.cookie-btn{
  min-width: 150px;      /* ajusta según idiomas */
  padding: 8px 12px;
  text-align: center;
  white-space: nowrap;
}

/* Tu estilo */
.button1 { border: 1px solid #5ab494; }

/* Móvil: apilar botones y evitar banner enorme */
@media (max-width: 520px){
  .cookie-inner{
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-actions{
    width: 100%;
  }
  .cookie-btn{
    width: 100%;
    min-width: 0;
    white-space: normal;     /* en móvil permitimos salto si hace falta */
  }
}


/* --------------------------
   5.3 Iconos (SVG/PNG inline)
   -------------------------- */
.w0-ico{
  height: 24px;
  width: auto;
}

.w0-ico-h1{
  height: 48px;
  width: auto;
}

/* --------------------------
  5.4 Rotador de frases (hero)
   -------------------------- */
/* ancho cómodo para el hero (sin limitar como prose) */
.w0-hero-diff{
  max-width: 1100px;   /* ajusta a tu gusto */
  margin-left: auto;
  margin-right: auto;
  padding: 18px 12px 0 12px;
  text-align: center;
}

.w0-hero-diff [data-rotator-text]{
  margin-top: 10px;
  opacity: 1;
  transition: opacity .2s ease;
}

.w0-diff-counter{
  margin-top: 8px;
  font-size: 14px;
  opacity: .8;
  color: #B4945A;
}

/* --------------------------
   5.5 Botón fijo (idioma / acciones flotantes)
   -------------------------- */
/* opción volver a tras*/
.w0-fixed{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
}
.w0-lang-active{
  font-weight:700;
  opacity:1;
}
.w0-closebtn{
  color: #b45a7a;
  text-decoration: none;
}

/* opción volver a tras*/
.w0-fixed_2{
  position: fixed;
  bottom: 0;
  right: 120px;
  z-index: 99;
}
/* Botón selector idioma */
#w0LangBtn{
  color: #A09F9C;
  background: transparent;
  border: 0;
}
#w0LangBtn:hover,
#w0LangBtn:focus{
  color: #5A7AB4;
}

/* --------------------------
   5.6 Contenedor de artículo/caja oscura
   - Fondo gris oscuro + protección ante palabras largas
   -------------------------- */
.w0-article{
  color: #A09F9C;
  background-color: #191919;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
}

/* --------------------------
   5.7 Botón “volver arriba” (#myBtn)
   - Se muestra por JS al hacer scroll
   -------------------------- */
#myBtn{
  display: none;        /* se muestra solo al hacer scroll */
  position: fixed;
  bottom: 0;
  right: 30px;
  z-index: 999;
  font-size: 18px;
  outline: none;
  border: 3px solid #B4945A;
  padding: 3px;
  border-radius: 4px;
}

/* En móvil: centrado */
@media screen and (max-width: 600px){
  #myBtn{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* =========================
   1) Layout base
========================= */
    main#sobre-mi { display:block; }
/* =========================
   ABOUT (06-about) · ajustes locales
   No toca la .prose global
========================= */
#sobre-mi .prose{
  /* Mantiene tu sistema: no lo redefino con 70ch */
  /* Si quieres un poco más ancho aquí, usa var(--measure) o un override suave */
  max-width: min(var(--measure), 980px);
  margin-inline: auto;
}

/* Ritmo local (si quieres ajustar solo en About) */
#sobre-mi .prose h2{
  margin-top: 28px;
  margin-bottom: 10px;
}

#sobre-mi .prose p{
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1.65;
}
    /* Contenedor de sección para controlar ancho y aire */
    .w0-wrap{
      max-width: 1200px;
      margin: 0 auto;
      padding-left: 16px;
      padding-right: 16px;
    }

    /* Grid: 1 columna en móvil, 2 en desktop */
    .w0-grid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
    }
    @media (min-width: 992px){
      .w0-grid{
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
    }





/* =========================================================
   4) Layout responsive (clases legacy que aún usos)
   - Ajusta tamaño de menú y marco central según ancho
   - Nota: este bloque es “V1→V2”, útil mientras migras
   ========================================================= */

/* Móviles pequeños */
@media screen and (min-width: 280px) and (max-width: 415px){

  .w0-marc1{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),
                0 2px 10px 0 rgba(0,0,0,0.12);
    margin: auto;
    z-index: 9;
  }
}

/* Tabletas */
@media screen and (min-width: 415px) and (max-width: 1365px){

  .w0-marc1{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),
                0 2px 10px 0 rgba(0,0,0,0.12);
    margin: auto;
    z-index: 9;
  }
}

/* Escritorio */
@media screen and (min-width: 1365px) and (max-width: 7680px){

  .w0-marc1{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),
                0 2px 10px 0 rgba(0,0,0,0.12);
    max-width: 1920px;
    margin: auto;
    padding: 32px;
    z-index: 9;
  }
}