/*
Estilo: Tiza v1.2 (2026)
Autor: @darriagada
Fecha: Viernes 6 de febrero de 2026
Actualizado: Martes 10 de marzo de 2026
*/

/* Reset */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

ol, ul {
	list-style: none;
}

html {
  box-sizing: border-box;
  scrollbar-color: #000 transparent;
  scrollbar-width: thin;
}

img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
}

input, button, textarea {
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--header-color);
    font-weight: 700;
    font-family: var(--headers);
}


::selection {
  color: var(--fondo);
  background: var(--color);
}

/* Variables */
:root {
    --color: #444444;
    --header-color: #333;
    --bordes: #333;
    --bordes-s: #E4E3DD;
    --fondo: #F6F5F1; /* #F6F5F1 */
    --navbar: #fff;
    --navbar-border: #eee;
    --quotes: #edebe4;
    --contact: #E8E6DE; /* #ffda53 */
    --contact-text: #333;
    --footer: #ffffff;
    --max-width: 1140px; /* 1140px  */
    --static-width: 1140px;
    --headers: "reiher-headline", sans-serif;
    --body: "komet", sans-serif;
}

/* Gato */
@media only screen and (min-width:980px) {
.cat-eyes {display: block !important;}
.mobile-only {display: none !important;}
}

@media (pointer:coarse) {
.cat-eyes {display: none!important;}
.mobile-only {display: block !important;}
}

.mobile-only {
display: block;
}

.cat-eyes {
    position: relative;
    display: none;
    user-select: none;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.eyes {
    top: 25%;
    left: 45%; 
    position: absolute;
    display: flex;
    gap: 15px;
    z-index: -1;
    pointer-events: none;
}

.eye {
    position: relative;
    width: 22px; 
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    overflow: hidden;
}

.pupil {
    width: 10px;
    height: 10px;
    background: #2e2d21;
    border-radius: 50%;
    position: absolute; 
}

.wide {
  width: auto;
  max-width: 1400px;
}

@media (min-width: 1400px) {
.wide {margin-left: -8rem;margin-right: -8rem;}
}

/* General */
body {
    color: var(--color);
    background: var(--fondo);
    font-size: calc(15px + 0.390625vw);
    line-height: 1.5;
    font-weight: 400;
    font-style: normal;
    font-family: var(--body);
}

/* Custom Pages */
.proyectos #grid-doble {
    margin: calc(4em + 1.5625vw) auto;
}

#grid-doble aside p {
  padding: 0 .8rem;
}

@media only screen and (min-width:700px) {
#grid-doble aside p {padding: 0;}
}

.normal #grid-doble {
     margin: calc(2em + 1.5625vw) auto 1em auto;
}

.about #page a {
    color: #111;
    text-decoration-color: #969696;
}

.about #page a:hover {
    text-decoration-color: #111;
}

.about #main {
    max-width: 720px;
    margin: calc(1em + 1.5625vw) auto;
}

@media only screen and (min-width:700px) {
  .about #main {margin: calc(4em + 1.5625vw) auto;}
}

.about-intro {
  width: 100%;
  margin-bottom:calc(2em + 1.5625vw);
}

.profile {
  margin-bottom:calc(2em + 1.5625vw);
}

.about .contacto {
    padding: 2rem;
    border-radius: 10px;
    background-color: #fff;
    margin: 4rem auto;
    position: relative;
    font-size: 90%;
}

.about .contacto .available::after {
    content: "\02022";
    color: greenyellow;
    padding-left: 3px;
}

.about .skills {
  display: grid;
  gap: auto;
  grid-template-columns: repeat(2, 1fr);
  margin:calc(1em + 1.5625vw) auto;
}

.about .skills .skill-wrapper ul.default li {
  margin-bottom: .32rem;
}

.about .skills .skill-wrapper ul.default li:last-of-type {
  margin-bottom: 0;
}

.about .skills .skill-wrapper ul.default li::before {
  content: "\2726";
  display: inline-block;
  padding-right: 8px;
  font-size: 1rem;
  opacity: 0.2;
  font-family: "Arial", sans-serif;
}

.about .skills .toolset li {
  gap: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.about .skills .toolset li:last-of-type {
  margin-bottom: 0;
}

.about .skills .toolset li img {
  width: 25px;
  height: 100%;
  border-radius: 0 !important;
}

/*
@media only screen and (min-width:700px) {
.about .skills {grid-template-columns: 1fr 1fr;} 
}*/

.colophon {
    font-size: 70%;
}

.pill {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 99px;
    background-color: greenyellow;
    font-size: .8rem;
    font-weight: bold;
    position: absolute;
    top: -5px;
    right: -10px;
    transform: rotateZ(10deg);
}

.socials {
    gap: 10px;
    display: flex;
    align-items: center;
}

.socials a > svg {
    width: 25px;
    height: 25px;
}

.socials a:hover #icon {
    fill: #000;
}

#page {
    margin-bottom: 8em;
}

.about #page img {
    border-radius: 10px;
}

.about #page h1,
.about #page h2,
.about #page h3 {
    margin-top: calc(1px + 1.5625vw);
    margin-bottom: 1rem;
}

#page h1:first-child {
    margin-top: 0;
}

.about #page h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--body);
}

.about #page p {
    line-height: 1.5;
    margin-bottom: calc(.5rem + 1.5625vw);
}

/* Navbar */
#header {
    width: 100%;
    background: var(--navbar);
    border-bottom: 1px solid var(--navbar-border);
    position: sticky;
    top: 0;
    z-index: 9999;
}

#header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;   
    margin: 0 auto; 
    padding: .8em calc(8px + 1.5625vw);
}

#header .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    font-size: 1rem;
    color: var(--header-color);
    font-weight: 700;
}

#header .logo svg {
    width: 30px;
    height: 30px;
}

#header .logo:hover svg #ojos {
    animation: blink 1s ease-in-out 0s 1 normal forwards;
}

@media screen and (max-width: 600px) { 
#header .logo {text-indent: -9999px;}
}

#header #menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1em;
}

#header #menu li a {
    color: #666;
    font-size: 1rem;
    text-transform: capitalize;
    text-decoration: none;
    position: relative;
}

#header #menu li a.active {
    color: var(--header-color);
    font-weight: 700;
}

#header #menu li a.active::after {
    display: none;
}

#header #menu li a::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: -5px;
  left: 0;
  background-color: var(--bordes);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease-in-out;
}

#header #menu li a:hover,
#header #menu li a:hover::after,
#header #menu li a:focus {
  color: var(--header-color);
  transform: scaleX(1);
  transform-origin: left;
}

/* Grids */
#grid-doble {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    text-align: center;
    margin: calc(1em + 1.5625vw) auto;
    gap: 1em;
}

#grid-doble aside:last-child {
    order: 1;
}

#grid-doble aside:last-child img {
    margin: 0 auto;
}

#grid-doble aside:first-child {
    order: 2;
}

@media only screen and (min-width:700px) {
   #grid-doble aside:last-child {order: 2;}
   #grid-doble { grid-template-columns: 1fr 1fr; gap: 4em; text-align: left;}
}


#page-heading {max-width: 400px;margin: 4rem auto;text-align: center;}
@media only screen and (min-width:700px) {
  #page-heading {margin: 6rem auto;max-width: 500px;}
}

.big-boi {
    font-size: clamp(2.6rem,5.5vw,5.5rem);
    line-height: 1.5; 
}

.button {
    display: flex;
    gap: 5px;
    align-items: center;
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    max-width: fit-content;
    line-height: normal;
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--header-color);
    border: 2px solid var(--header-color);
    text-decoration: none;
    background-color: transparent;
    transition: all 160ms ease-in-out;
}

.button:hover,
.button:focus {
    color: var(--fondo);
    background-color: var(--header-color);
    transform: scale(1.1);
}

.button:hover::after,
.button:focus::after {
  margin-left: 5px;
}

.button::after {
  margin-top: -3px;
  content: "\203A";
}

.boton {
    display: flex;
    gap: 5px;
    align-items: center;
    width: 100%;
    font-size: 1rem;
    font-weight: normal;
    max-width: fit-content;
    line-height: normal;
    padding: 7px 12px;
    border-radius: 6px;
    color: var(--header-color);
    border: 2px solid var(--header-color);
    text-decoration: none;
    background-color: transparent;
    transition: all 160ms ease-in-out;
}

.boton.filled {
    color: #f4f4f4 !important;
    background-color: var(--header-color);
}

.boton:hover,
.boton:focus {
    color: #f4f4f4 !important;
    background-color: var(--header-color);
    transform: scale(1.1);
}

.botonera {
    gap:10px;
    display: flex;
    align-items: center;
    margin: 1em auto;
}

#main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 calc(8px + 1.5625vw);
}

.hello-banner {
    max-width: var(--static-width);
    margin: 0 auto;
    padding: calc(8px + 1.5625vw);    
}

/* Ayudantes */
.alinear-centro {
    align-items: center;
}

/* Filtros */
.filtros {
    max-width: 600px;
    height: min-content;
    overflow-x: auto;
    gap: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: calc(1em + 1.5625vw) auto;
}

@media only screen and (min-width:700px) {
    .filtros {justify-content: flex-start;max-width: 100%;}
}

.filtros button {
    font-size:13px;
    padding: 5px 10px;
    border: 1px solid var(--bordes);
    background: transparent;
    border-radius: 99px;
    cursor: pointer;
    transition: all 160ms ease-in-out;
}

.filtros button:hover,
.filtros button:focus {
    color: var(--fondo);
    background: var(--bordes);
}

.filtros button[aria-pressed="true"]{
    color: var(--fondo);
    font-weight: 700;
    background: var(--bordes);
}

/* Grid — Trabajos */
#work-grid {
    gap: 1em;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: calc(1em + 1.5625vw);
}

@media only screen and (min-width:700px) {
    #work-grid {grid-template-columns: repeat(2, 1fr);gap: 2em;}
}

@media only screen and (min-width:1024px) {
    #work-grid {grid-template-columns: repeat(3, 1fr);gap: 1.5em;}
}

#work-grid .item {
    color: var(--bordes);
    text-decoration: none;
}

#work-grid .item.last {
    grid-column: span 2;
}

#work-grid .item article {
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: all 160ms ease-in-out;
}

#work-grid .item article img {
    border-radius: 6px;
    object-fit: cover;
    transition: all 160ms ease-in-out;
}

#work-grid .item article h2 {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--body);
    line-height: normal;
    margin-bottom: 0;
}

#work-grid .item article .item-data {
    display: flex;
    align-items: center;
    gap:8px;
    margin-top: 15px;
}

.tags > span {
    font-size: 12px;
    display: block;
    color: #999;
}

#work-grid .item:hover .hover,
#work-grid .item:focus .hover {
    opacity: 1;
}

.miniatura {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.miniatura .hover {
    z-index: 1;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
}

@media screen and (max-width: 600px) { 
  .miniatura .hover { display: none; }
}

#work-grid .item:hover article img,
#work-grid .item:focus article img {
    opacity: 0.8;
}

.hidden {
    display: none;
}


/* Ext: Proyectos */
.labs-hero {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.proyectos .item-data {
    gap: 0;
    display: flex;
    flex-direction: column;
    padding: .9rem;
    align-items: flex-start !important;
    margin-top: 6px !important;
    margin-bottom: .4rem;
}

.proyectos .item {
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--bordes-s);
    transition: all 160ms ease-in-out;
}

.proyectos .item:hover {
    transform: translateY(-3px);
    box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.1);
}

.proyectos .item-data p {
    font-size: .9rem;
    color: #717171;
}

.proyectos .miniatura img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
}

.status::after {
  content: "\2022";
  font-size: .92rem;
  border-radius: 4px;
  display: inline-flex;
  padding: 1px;
  color: #333;
}

.status.activo::after {
  color: #27cd1a;
}

.status.pronto::after {
  color: #bbb;
}

.status.inactivo::after {
  color: #fe4444;
}

/* Paginacion */
.paginate {
	width: 100%;
    padding: 0 calc(8px + 1.5625vw);
	display: flex;
    justify-content: space-between;
	margin: 2em auto 6em auto;
    max-width: var(--max-width);
}

@media (min-width:1400px){
  .paginate {max-width: 1400px;}
}

.pagination img {
	width: 100%;
	max-width: 40px;
	border-radius: 6px;
}

.pagination {
	text-decoration: none;
	transition: all 250ms ease-in-out;
}

.pagination:hover,
.pagination:focus {
	opacity: 0.5;
}

.pagination .data {
	display: flex;
	align-items: center;
	gap: 1em;
	width: 100%;
}

.next-work .data div {
	text-align: right;
}

.pagination .data span {
    display: none;
    opacity: 0.3;
    font-size: .7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    line-height: normal;
}

.pagination .data h3 {
    font-size: .9rem;
	margin-bottom: 0;
    margin-top: 0;
    font-family: var(--headers);
}

@media (min-width:700px){
.pagination img {max-width: 90px;}
.pagination .data span {display: block;}
.pagination .data h3 {font-size: 1.2rem;}
}


/* Portfolio */
.workHeader h1 {
font-size: clamp(2.6rem,4.5vw,4.5rem);
animation: .5s .25s fade backwards ease-out; 
}

.workHeader .button {
        animation: .5s .45s fade backwards ease-out; 
}

.workHeader span.fecha {
    font-size: 13px;
    font-family: var(--body);
    display: inline-block;
    margin: 0 15px;
    animation: .5s .25s fade backwards ease-out; 
}

.workHeader p {
    text-wrap: pretty;
    animation: .5s .5s fade backwards ease-out;
}

@keyframes fade {
  from {
    transform:translateY(.25em);
    opacity:0
  }
}

.workHeader {
    display: flex;
    gap: 1.2em;
    flex-direction: column;
    align-items: center;
    margin: calc(1.5em + 1.5625vw) auto;
    max-width: 100%;
    text-align: center;
}


@media only screen and (min-width:700px) {
.workHeader {margin: calc(2em + 1.5625vw) auto;max-width: 720px;}
.workHeader p {text-wrap: balance;}
}

.workHeader .tags {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.workHeader .tags li {
    opacity: 0.8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    animation: .5s .45s fade backwards ease-out; 
}

.workHeader .tags li::before {
    content: "# ";
    opacity: 0.5;
    display: inline-block;
}


.work-inner figure {
    border-radius: 6px !important;
    margin-bottom: calc(2em + 1.5625vw);
}

.work-inner figure > img,
.work-inner figure > video {
    margin-bottom: 0;
    border-radius: 10px !important;
}

#comparador {
    width: 100%;
    border-radius: 10px;
    margin-bottom: calc(2em + 1.5625vw);
}

#comparador img {
    margin-bottom: 0;
    border-radius: 10px;
}

.textblock {
    width: 100%;
    max-width: 100%;
    text-align: center;
    text-wrap: pretty;
    margin: calc(4em + 1.5625vw) auto;
}

@media only screen and (min-width:700px) {
  .textblock {max-width: calc(700px + 1.5625vw);text-wrap: balance;}
}

.textblock h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--body);
    margin-bottom: .6rem;
}

figure figcaption {
    opacity: 0.5;
    max-width: 800px;
    font-size: .8rem;
    margin: 1em auto 0 auto;
    text-align: center;
}

.dobleImg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);gap: 1em;
}

.tripleImg {
    display: grid;
    grid-template-columns: repeat(1, 1fr);gap: 2em;    
}

.dobleImg > img,
.tripleImg > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width:700px) {
.dobleImg {gap: 2em;}
.tripleImg {gap: 2em;grid-template-columns: repeat(3, 1fr);}
}

.imgFeat  {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
}

.imgFeat {
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
}

.imgFeat hgroup {
    padding: 2em;
    font-size: 1.1rem;
    text-wrap: balance;
}

.imgFeat hgroup h2 {
    margin-bottom: 10px;
}

.imgFeat video {
    border-radius: 0;
}

.imgFeat img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	min-height: auto; 
    margin-bottom: 0;
    border-radius: 0px;
}

@media only screen and (min-width:700px) {
    .imgFeat {grid-template-columns: repeat(2, 1fr);gap: 0;align-items: center;}
    .imgFeat hgroup {padding: 4em;}
    .imgFeat img {	min-height: 100%; }
}

.work-inner img {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

img.fadeIn {
    opacity: 1;
    transform: translateY(0);
}

/* Contacto */
.contact {
    color: var(--contact-text);
    background: var(--contact);
    height: 50vh;
    display: flex;
    align-items: center;
    margin-top: 4em;
    user-select: none;
}

.contact h2 {
    color: var(--contact-text);
    font-size: clamp(2.6rem,4.5vw,4.5rem);
    margin-bottom: .2em;
}

.contact:hover .hello {
    animation-play-state: running;
    animation: swing 1s infinite ease-in-out both;
}

.hello {
    display: inline-block;
}

@keyframes swing {
  20% {
  transform: rotate3d(1, 1, 1, 15deg);
  }
  40% {
  transform: rotate3d(1, 1, 1, -10deg);
  }
  60% {
  transform: rotate3d(1, 1, 1, 5deg);
  }
  80% {
  transform: rotate3d(1, 1, 1, -5deg);
  }
  100% {
  transform: rotate3d(1, 1, 1, 0deg);
  }
}


.contact .inner {
    max-width: 600px;
    margin: 0 auto;  
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    text-align: center;
    align-items: center;
    padding: 0 1em;
}

.boton-primario,
.boton-secundario {
    transition: all 160ms ease-in-out;
}

.boton-primario {
    width: 100%;
    color: var(--contact);
    background: var(--contact-text);
    border: 2px solid var(--contact-text);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 99px;
    display: inline-block;
    max-width: fit-content;
}

.boton-primario:hover,
.boton-primario:focus {
    color: var(--color);
    background: #F6F5F1;
    border-color: #F6F5F1;
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.boton-secundario {
    width: 100%;
    color: var(--contact-text);
    background: transparent;
    border: 2px solid var(--contact-text);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 99px;
    display: inline-block;
    max-width: fit-content;
}

.boton-secundario:hover,
.boton-secundario:focus {
    color: var(--color);
    background-color: #F6F5F1;
    border-color: #F6F5F1;
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);    
}

.contact .botones {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Footer */
#footer {
    color: var(--contact-text);
    background-color: var(--footer);
    transition: 0.3s;
}

#footer .inner {
    margin: 0 auto;
    padding: 2em calc(8px + 1.5625vw); 
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1em;
}

@media only screen and (min-width:700px) {
  #footer .inner {flex-direction: row;justify-content: space-between;gap: 0;}  
}

#footer .footer-logo {
    width: 25px;
}

#footer .footer-logo #body {
    fill: #333;
}

#footer .footer-one {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: .8rem;
}

#footer .footer-two {
    display: flex;
    align-items: center;
    gap:10px;
}

#footer .footer-two svg {
    fill: #a5a5a5;
    transition: all 160ms ease-in-out;
}

#footer .footer-two a {
    text-decoration: none;
}

#footer .footer-two a svg {
    width: 18px;
    height: 18px;
}

#footer .footer-two a:hover svg #icon {
    fill: var(--header-color);
}

#footer .footer-two a:hover svg {
    transform: scale(1.1);
}

@media only screen and (min-width:700px) {
#footer .footer-two a svg {width: 22px;height: 22px;}
}

@keyframes blink {
	0%,
	50%,
	100% {
		opacity: 1;
        transform: skew(1);
	}

	25%,
	75% {
		opacity: 0;
        transform:skew(1.7)
	}
}

/* Shields.io badge */
.mini-badge {
    margin-bottom: 0 !important;
}

.item-data h2 {
    gap: 6px;
    display: flex;
    align-items: center;
}