/* @import url('https://fonts.googleapis.com/css2?family=Sanchez:ital@0;1&display=swap'); */
/* @font-face {font-family: 'Sanchez';src: url('/font/SANCHEZ-REGULAR.ttf') format('truetype');font-display: swap;} */

:root {
  --blanco: #fff;
  --gris-claro: #f0f0f0;
  --azul: #3782c0;
  --azul-oscuro: #195485;
  --azul-suave: #8ac7eb;
  --azul-transp: #104a7a94;
  --fondo-transp: rgba(255, 255, 255, 0.1);
  --fondo-transp2: rgba(255, 255, 255, 0.2);
  --texto-suave: rgba(255, 255, 255, 0.9);
}

*, *::before, *::after {box-sizing:border-box;margin: 0;padding: 0;}
*::-webkit-scrollbar {display: none;}
html{overflow: hidden;}
html::before {content: "";position: absolute;top: 0;width: 100%;height: 100vh;background-image: url("media/bg.webp");background-size: cover;background-position: center;opacity: 0.95;z-index: -10;}
body {font-family: "Sanchez", serif;color: var(--blanco);display: flex;justify-content: center;background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));height: 100vh;overflow: hidden;}
@media (max-width:950px) {
  * {*{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select  :none}}
}


/*===== index.html =====*/
h1 {font-size: 4rem;text-shadow: 4px 4px 5px #0005;line-height: 0.58;text-align: center;padding: 50px 0 20px;cursor: pointer;}
h1 span {font-size: 9.1rem;color: var(--blanco);display: block;}
main{display: flex;flex-direction: column;gap:20px;width: 100%;max-width: 580px;}
#OnPage {color: var(--gris-claro);width: 100%;padding: 40px;border-radius: 12px 12px 0 0;background-color: var(--azul-transp);border: 1px solid var(--fondo-transp);overflow-y: scroll;overflow-x: hidden;position: relative;padding-bottom: 50%;}
/* #YO */
.fotoContenedor {display: flex;justify-content: center;}
#yo {position: fixed;width: 320px;max-width: 100%;bottom: -15%;z-index: 3;pointer-events: none;user-select: none;overflow: hidden;}
/* Dock */
.dock {width: 100%;height: 120px;position: fixed;bottom: 0;display: flex;justify-content: center;
overflow-x: hidden;overflow-y: hidden;z-index: 20;background: linear-gradient(to top, #1a5282, transparent);opacity: 0;transition: opacity 0.2s ease-in-out;}
.dock:hover { opacity: 1; }
.dock ul { list-style: none; display: flex; align-items: center; gap:40px}
.dock ul li {
color: var(--blanco);font-size: 22px;background: radial-gradient(circle, #ffffff60 0%, transparent 60%);opacity: .8;display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;border-radius: 10px;transition: transform 0.3s, opacity 0.3s;cursor: pointer;user-select: none;position: relative;}
.dock ul li:hover {opacity: 1;transform: translateY(-12px) scale(1.7) rotate(4deg);}
.dock ul li::after {content: attr(data-tooltip);position: absolute;transform: translateY(80%) translateX(-50%);background-color: #1e537a;color: var(--blanco);padding: 4px;font-size: 12px;border-radius: 4px;white-space: nowrap;opacity: 0;visibility: hidden;transition: opacity 0.3s, transform 0.3s;z-index: 20;}
.dock ul li:hover::after {opacity: 1;visibility: visible;}

@media (max-width: 500px) {
  body { padding-bottom: 80px;}
  h1 { font-size: 1.8rem; text-shadow: 2px 2px rgba(0,0,0,0.123); }
  h1 span { font-size: 4rem; margin-bottom: 8px; }
  main { margin: 0 auto; gap: 0; }
  #OnPage { width: 80%; min-height: 100vh; margin: 0 auto; padding: 30px;padding-bottom: 120%;}
  .dock { overflow-x: auto; overflow-y: hidden;justify-content: flex-start; }
  #yo { width: 220px; bottom: -12%; right: -20px; }
}
/*======================*/

h2 {
  width: 100%;
  text-align: left;
  font-size: 22px;
  line-height: 1.4;
}
/* p { text-align: left; font-size: 14px; line-height: 2; } */

@media (max-width: 500px) {
  h2 { font-size: 16px; }
  p { font-size: 14px; }
}

article{width: 100%;line-height: 2.2;display: flex;flex-direction: column;gap:10px;}




/*===== INICIO =====*/
.descripciones { font-size: 16px; }
.resaltar { padding: 4px; border-radius:4px; font-weight:700; text-shadow: 1px 1px 6px #00000057; }
.Amarillo { background-color: #d48f0e; }
.Azul { background-color: #1469ca; }
.Rojo { background-color: #ca2014; }
#solo-pc { display: inline; }
#solo-movil { display: none; }

@media (max-width: 500px) {
  .descripciones { font-size: 11px; }
  #solo-pc { display: none; }
  #solo-movil { display: inline; }
}
/*======================*/


/*===== RRSS =====*/
.social-links {display: flex;gap: 24px;justify-content: center;align-items: center;margin: 8px 0;}
.social-links a { position: relative; text-decoration: none; }
.social-links svg{padding: 2px;border-radius: 4px;width: 32px;height: 32px;transition: transform 0.3s, background-color 0.3s;}
.social-links svg:hover{transform: scale(0.8);background-color: #21b8ae8a;}
.social-links a::after {content: attr(data-tooltip);position: absolute;top: -40px;transform: translateX(-60%);background-color: var(--azul);color: var(--blanco);padding: 4px 10px;border-radius: 4px;font-size: 12px;white-space: nowrap;box-shadow: 0 2px 8px #0002;pointer-events: none;opacity: 0;visibility: hidden;transition: opacity 0.2s, transform 0.2s;}
.social-links a:hover::after {opacity: 1;visibility: visible;}
@media (max-width: 500px) {.social-links { gap: 12px; margin: 4px 0; }.social-links svg { width: 20px; height: 20px; }}
/*======================*/



/*===== CV =====*/
section {margin-bottom: 20px;position: relative;}
section h2 {margin-bottom: 20px;color: var(--blanco);border-bottom: 2px solid rgba(255,255,255,0.2);padding-bottom: 5px;text-shadow: 1px 1px 2px rgba(0,0,0,0.2);display: flex;align-items: center;gap: 10px;}

#toggle-todo {background-color: #62b7e9;color: var(--blanco);border: none;padding: 4px 8px;border-radius: 4px;font-size: 14px;margin-bottom: 20px;position: absolute;bottom:-6%;right: 10%;cursor: pointer;transition: background-color 0.2s, transform 0.2s;}
#toggle-todo:hover {background-color: #4a9dc9;transform: scale(1.05);}
#contenedor-secciones{width: 100%;}
.seccion-clase { margin-bottom: 30px; }
.seccion-clase label, .seccion-clase h2 label {display: flex;justify-content: center;align-items: center;gap: 12px;font-size: 17px;color: var(--azul-suave);cursor: pointer;}
.filtros {display: flex;gap: 8px;flex-wrap: wrap;margin: 0 0 15px;}
.filtro, .filtro-boton {padding: 6px 12px;font-size: 12px;background-color: var(--fondo-transp);border: 1px solid #ffffff4d;border-radius: 14px;color: var(--blanco);cursor: pointer;transition: background-color 0.3s;}
.filtro:hover, .filtro-boton:hover {background-color: var(--fondo-transp2);}
.filtro.activo { background-color: #4a9dc9; }
.item {background-color: var(--fondo-transp);border-radius: 7px;list-style-type: none;border-left: 8px solid var(--azul-suave);padding: 12px;margin: 20px 0;transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;cursor: pointer;}
.item:hover {transform: translateY(-3px);background-color: #ffffff26;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
.info-item {display: flex;justify-content: space-between;align-items: center;}
.descriptivo { width: 80%; }
.descriptivo h3 {font-size: 1.3rem;color: var(--blanco);margin-bottom: 5px;}
.descriptivo p {font-size: 1rem;color: var(--texto-suave);margin-bottom: 5px;}
.date {color: rgba(255,255,255,0.7);font-style: italic;font-size: 0.95rem;margin-top: 6px;}
.contact-link {color: var(--azul-suave);text-decoration: none;font-weight: 500;margin: 0 10px;border-bottom: 1px dashed rgba(138,199,235,0.3);transition: color 0.3s, border-bottom 0.3s;}
.contact-link:hover {color: var(--blanco);border-bottom: 1px dashed var(--azul-suave);}
@media (max-width: 500px) {
  .cv-container { padding: 10px; }
  #toggle-todo { position: absolute;bottom:12.5%; width: 80%; margin: 20px auto; }
  .bio { font-size: 0.9em; }
  .skills-list { flex-direction: column; align-items: center; }
  .skill { margin-bottom: 5px; }
  /* .item { padding: 15px 10px; } */
  .descriptivo h3 { font-size: 1.1rem; }
  .descriptivo p { font-size: 0.9rem; }
  .filtro-boton { padding: 4px 8px; font-size: 11px; }
}
/*======================*/


/*===== Política =====*/
.mini-galeria{position:relative;display:flex;gap:3px;margin:10px 0;width:100%;max-height:120px}
.galeria-img{position:relative;width:25%;height:120px;overflow:hidden;}
.foto-izquierda{border-radius:8px 0 0 8px}
.foto-derecha{border-radius:0 8px 8px 0}
.galeria-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.galeria-img::after{content:'';position:absolute;inset:0;background:rgba(29,112,181,.3);backdrop-filter:blur(1px);z-index:2;transition:backdrop-filter .3s ease,background .3s ease;pointer-events:none}
.galeria-img:hover::after{backdrop-filter:blur(0);background:rgba(29,112,181,.45)}
.galeria-img:hover img{transform:scale(1.05)}
.yt-button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;background:#ca2014;color:#fff;text-decoration:none;font-weight:600;transition:background-color 0.3s, transform 0.2s;}
.yt-button:hover{background:#a01205;transform:translateY(-2px);}

/*======================*/



/*===== DEV =====*/
.skills-list {display: flex;flex-wrap: wrap;gap: 10px;}
.skill {background-color: #8ac7eb40;color: var(--blanco);padding: 8px 15px;border-radius: 20px;font-size: 0.9em;border: 1px solid rgba(138, 199, 235, 0.5);backdrop-filter: blur(7px);}
i { letter-spacing: 4px; color: rgba(255,255,255,0.7); }
.fun-fact {color: #ffffffcc;font-size: 0.95rem;margin-top: 6px;}
/*======================*/



/*===== MEDIOS =====*/
.grid-container {display: grid;gap: 20px;width: 100%;padding: 20px;margin: 0 auto;}
.grid-item {position: relative;border-radius: 8px;overflow: hidden;min-height: 300px;display: flex;align-items: flex-end;background-color: #2d71be71;transition: transform 0.3s, box-shadow 0.3s;box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.grid-item::before {content: "";position: absolute;inset: 0;background: #1f64aedb;backdrop-filter: blur(1px);z-index: 2;transition: backdrop-filter 0.3s;}
.grid-item.no-image::before {background: transparent;backdrop-filter: blur(8px);}
.grid-item .content {position: relative;z-index: 2;padding: 40px 20px;width: 100%;}
.grid-item h3, .grid-item p {color: var(--gris-claro);margin-bottom: 10px;}
.grid-item h3 {font-size: 18px;line-height: 1.4;font-weight: 600;}
.grid-item p {font-size: 0.95rem;}
.grid-item a {color: var(--gris-claro);text-decoration: none;font-size: 14px;display: inline-block;margin-top: 10px;background-color: var(--fondo-transp2);padding: 5px 10px;border-radius: 4px;transition: background-color 0.3s;}
.grid-item a:hover { background-color: #ffffff4d; }
.grid-item:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0,0,0,0.15);}
.grid-item:hover::before {backdrop-filter: blur(4px);}

@media (max-width: 500px) {
.grid-item .content { padding: 12px; }
.grid-item h3 { font-size: 16px; }
.grid-item p { font-size: 14px; }
}
/*======================*/