/*	---------------------- 
	Variables y Temas      
/*	---------------------- */

:root {
	/* Tipografía */
	--fuente-base: "Chilanka-Regular";
	--fuente-bienvenida: "Satisfaction";
	--fuente-h2: "EE17800D";
	--fuente-citas: "PRESDNTN";
	
	/*tamaño base*/
	--tam-fuente-base: clamp(12px, 1.2vmin+2vmax, 18px);
	
	 /* Colores tema claro */
	--color-fondo: #F5F1E4;
	--color-texto: #291702;
	--color-nav: #f0f0f0;
	--color-nav-hover: #C79C00;
	--color-icono: #4F1B04;
}

/* ---------------------- */
/* Reset básico           */
/* ---------------------- */
*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ===========================
   Tipografías personalizadas
   =========================== */
@font-face {
  font-family: 'Chilanka-Regular';
  src: url('../fonts/Chilanka-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Sqr721e';
  src: url('../fonts/Sqr721e.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'EE17800D';
  src: url('../fonts/EE17800D.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'ArchitectsDaughter';
  src: url('../fonts/ArchitectsDaughter.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Satisfaction';
  src: url('../fonts/Satisfaction.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'GeorgiaAngely';
  src: url('../fonts/GeorgiaAngely.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'VIVALDII';
  src: url('../fonts/VIVALDII.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PRESDNTN';
  src: url('../fonts/PRESDNTN.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

html {
	font-size: var(--tam-fuente-base);
}

body {
/*    height: 100vh;*/
    /*overflow: hidden;*/
    font-family: var(--fuente-base);
    background: #F5F1E4;
    color: #291702;
}

/* Barra de navegación */

.barra-navegacion {
  background: (--var color-nav);
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centrado vertical */
  align-items: center;      /* Centrado horizontal */
  z-index: 1000;
}

.barra-navegacion ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.barra-navegacion a {
  color: var(--color-icono);
  text-decoration: none;
  transition: background 0.3s ease;
  padding: clamp(0.5rem, 1vw, 0.75rem);
  border-radius: 0.5rem;
}

.barra-navegacion a:hover {
  background-color: var(--color-nav-hover);
}

h2 {
	/*font-family: var(--fuente-h2);*/
}

/* --- TOOLTIP PERSONALIZADO --- */

.tooltip {
  position: relative;
  display: inline-block;
}

/* Estado inicial del tooltip */

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%; /* se muestra encima del icono */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  /*font-size: 0.9rem;*/
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  /* Animación fade-in */
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0.1s; /* espera breve antes de aparecer */
}

/* Flecha del tooltip */

.tooltip::before {
  content: '';
  position: absolute;
  bottom: 95%;
  left: 25%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  transition-delay: 0.1s;
}

/* Estado visible al hacer hover */

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
  transform: translateX(-100%) translateY(0);
}







/* **************************************** CSS GLOBAL FINAL SUGERIDO   ***********************************************

/* ==================================================
   VARIABLES GLOBALES
   ================================================== */

:root {

    /* ------------------
       Tipografías
       ------------------ */
/*
    --fuente-base: "Chilanka-Regular";
    --fuente-bienvenida: "Satisfaction";
    --fuente-h2: "EE17800D";
    --fuente-citas: "PRESDNTN";

    /* ------------------
       Escala tipográfica
       ------------------ */
/*
    --tam-fuente-base: clamp(14px, 1.5vmin, 18px);

    /* ------------------
       Colores
       ------------------ */
/*
    --color-fondo: #F5F1E4;
    --color-texto: #291702;

    --color-nav: #F0F0F0;
    --color-nav-hover: #C79C00;
    --color-icono: #4F1B04;

    /* ------------------
       Sombras
       ------------------ */
/*
    --sombra-texto: 0 2px 6px rgba(0, 0, 0, 0.15);

    /* ------------------
       Transiciones
       ------------------ */
/*
    --transicion-rapida: 0.2s ease;
    --transicion-normal: 0.3s ease;

    /* ------------------
       Bordes
       ------------------ */
/*
    --radio-suave: 0.5rem;

}


/* ==================================================
   RESET
   ================================================== */
/*
*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==================================================
   TIPOGRAFÍAS PERSONALIZADAS
   ================================================== */
/*
@font-face {
    font-family: "Chilanka-Regular";
    src: url("../fonts/Chilanka-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sqr721e";
    src: url("../fonts/Sqr721e.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EE17800D";
    src: url("../fonts/EE17800D.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ArchitectsDaughter";
    src: url("../fonts/ArchitectsDaughter.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Satisfaction";
    src: url("../fonts/Satisfaction.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "GeorgiaAngely";
    src: url("../fonts/GeorgiaAngely.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "VIVALDII";
    src: url("../fonts/VIVALDII.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PRESDNTN";
    src: url("../fonts/PRESDNTN.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==================================================
   BASE DOCUMENTO
   ================================================== */
/*
html {
    font-size: var(--tam-fuente-base);
}

body {
    min-height: 100vh;
    font-family: var(--fuente-base);
    font-size: 1rem;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ==================================================
   TIPOGRAFÍA GENERAL
   ================================================== */
/*
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    line-height: 1.2;
}

p {
    margin-bottom: 0.75rem;
}

cite {
    font-family: var(--fuente-citas);
    font-style: normal;
}

/* ==================================================
   ENLACES
   ================================================== */
/*
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transicion-normal);
}

a:hover {
    color: var(--color-nav-hover);
}

/* ==================================================
   NAVEGACIÓN GLOBAL
   ================================================== */
/*
.barra-navegacion {
    position: fixed;
    top: 0;
    right: 0;
    width: 2.5rem;
    height: 100vh;
    background-color: var(--color-nav);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.barra-navegacion ul {
    list-style: none;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.barra-navegacion a {
    color: var(--color-icono);
    padding: 0.5rem;
    border-radius: var(--radio-suave);
    transition:
        background-color var(--transicion-normal),
        transform var(--transicion-rapida);
}

.barra-navegacion a:hover {
    background-color: var(--color-nav-hover);
    transform: scale(1.08);
}

/* ==================================================
   TOOLTIPS
   ================================================== */
/*
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    padding: 0.35rem 0.6rem;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-radius: 0.25rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition:
        opacity var(--transicion-rapida),
        transform var(--transicion-rapida);
    transition-delay: 0.1s;
}

.tooltip::before {
    content: "";
    position: absolute;
    bottom: 95%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color:
        rgba(0, 0, 0, 0.85)
        transparent
        transparent
        transparent;
    opacity: 0;
    transition: opacity var(--transicion-rapida);
    transition-delay: 0.1s;
}

.tooltip:hover::after, .tooltip:hover::before {

    opacity: 1;
}

.tooltip:hover::after {
    transform: translateX(-50%) translateY(0);
}

/* ==================================================
   UTILIDADES
   ================================================== */
/*
.img-circular {
    border-radius: 50%;
    object-fit: cover;
}

.oculto {
    display: none;
}