body {
  scroll-behavior: smooth;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f9f9f9;
  color: #222;
}

header {
  background: #dd981e;
  position: fixed;
  width: 100%;
  z-index: 1030;
}

header nav a {
  color: white !important;
  font-weight: 600;
  margin-left: 1rem;
  transition: color 0.3s;
}

header nav a:hover {
  color: #ff6f61 !important;
}

main {
  padding-top: 70px;; 
}

.hero {
  background: url('./img/fotofondo.jpg') center center/cover no-repeat;
  min-height: 900px;
  display: flex;
  align-items:normal ;
  justify-content: normal;
  color: white;
  text-shadow: 0 0 8px rgba(0.3,0.3,0.3,1);
  text-align: center;
}

.bg-fd {
  background: url('./img/fp2.jpg') center center/cover no-repeat;
  min-height: 900px;
  display: flex;
  align-items:normal ;
  justify-content: normal;
  color: white;
  text-shadow: 0 0 8px rgba(0.3,0.3,0.3,1);
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
}

section {
  padding: 4rem 0;
}

footer {
  background: #222;
  color: #eee;
  padding: 2rem 0;
}

footer a {
  color: #ff6f61;
  text-decoration: none;
}

.carousel-inner img {
  max-height: 625px;   
  object-fit: contain;  
  width: auto;
  margin: 0 auto;
}

.bg-proyectos {
  background-color: #e9dcc8 !important;
  min-height: 900px;
  display: flex;
  align-items:center ;
  justify-content: center;
  color: white;
  text-shadow: 0 0 8px rgba(0.3,0.3,0.3,1);
  text-align: center;
}

.mb-4.text-center {
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
  color: white;
  text-shadow: 0 0 8px rgba(0.3,0.3,0.3,1);
}

.lead.text-center {
  color: black;
}


@import url(https://fonts.bunny.net/css?family=abel:400);

/* Hide radio buttons */
input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.cards {
	--base-rotation: 0deg;
	--full-circle: 360deg;
	--items: 13;
	--radius: 30vw;
	--duration: 300ms;

	--cards-container-size: calc(var(--radius) * 2);
	--thumb-size: 30px;
	--image-size: calc(var(--radius));
	--image-y: 0%;
	--labels-offset: calc(var(--radius) * -1);
	--title-top: calc(var(--thumb-size) * -3);
	--info-top: calc(100% + 2rem);
	--info-width: 100%;

	position: relative;
	width: var(--cards-container-size);
	height: var(--cards-container-size);
	aspect-ratio: 1;
	border-radius: 50%;
	perspective: 1000px;
	transition: transform 0.3s ease-in-out var(--duration);
	list-style: none;
	margin: 0 auto; /* Centra horizontalmente */
}

@media (min-width: 800px) {
	.cards {
		--radius: 30vw;
		--thumb-size: 40px;
		--title-top: 2rem;
	}
}
@media (min-width: 1200px) {
	.cards {
		--radius: 20vw;
		--thumb-size: 50px;
		--image-y: -20%;
		--info-width: min(100% - 2rem, 65%);

		--info-top: calc(var(--image-size) * 1.3);
	}
}

.cards li {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	transform-origin: center;
	display: grid;
	place-content: center;
	transform: rotate(calc(var(--i) * 360deg / var(--items)));
	pointer-events: none;
}

.cards li > label {
	position: absolute;
	inset: 0;
	margin: auto;
	transform: translateY(var(--labels-offset));
	width: var(--thumb-size);
	height: var(--thumb-size);
	cursor: pointer;
	pointer-events: initial;
	/*outline: 1px dashed red;*/
	transition: var(--duration) ease-in-out;
}
/* thumbs */
.cards li > label > img {
	transform-origin: center;
	width: 100%;
	scale: var(--label-scale, 1);
	opacity: var(--label-opacity, 1);
	transition: scale var(--duration) ease-in-out,
		opacity var(--duration) ease-in-out;
}
/* redudce scale of all thumbs */
.cards:has(label:hover) label {
	--label-scale: 0.75;
}
/* enlarge thumbs either side of hovered */
.cards li:has(+ li > label:hover) > label,
.cards li:has(label:hover) + li > label {
	--label-scale: 1.25;
}
/* hovered thumb */
.cards li > label:hover img {
	--label-scale: 1.5;
}
/* main image */
.cards > li > img {
	width: var(--image-size);
	height: var(--image-size);
	object-fit: contain;
	z-index: 52;

	transform: translateY(var(--image-y));
	transition-property: opacity, scale, width, height, transform, filter;
	transition-duration: var(--duration);
	transition-timing-function: ease-in-out;
	transition-delay: var(--item-delay, 0ms), var(--item-delay, 0ms), 0ms, 0ms, 0ms,
		0ms;

	pointer-events: initial;
	opacity: var(--item-opacity, 0);
	scale: var(--item-scale, 0);
	filter: drop-shadow(0px 0px 5px rgba(255 255 255 / 0.25));
}

.cards > li:has(:checked) > img:hover {
	transform: translateY(var(--image-y)) rotateY(-30deg) rotateX(-5deg);
	transition-delay: 0ms;
	filter: drop-shadow(15px 10px 5px rgba(255 255 255 / 0.25));
}

.cards > li > h2,
.cards > li > p {
	position: absolute;
	left: 50%;
	text-align: center;
	transform: translate(-50%, 0);
	transform-origin: center;
}
.cards > li > h2 {
	top: var(--title-top);
	opacity: var(--title-opacity, 0);
	translate: 0 var(--title-y, -30px);
	transition: var(--duration) ease-in-out var(--title-delay, 0ms);
}
.cards > li > p {
	top: var(--info-top);
	margin: 0 auto;
	width: var(--info-width);
	z-index: 2;
	font-size: clamp(0.8rem, 3.5vw + 0.05rem, 1.1rem);
	text-wrap: balance;
	opacity: var(--info-opacity, 0);
	translate: 0 var(--info-y, 30px);
	transition: var(--duration) ease-in-out var(--info-delay, 0ms);
}

/* update custom properties for checked item */
li:has(input:checked) {
	--label-opacity: 0.25;
	--label-scale: 1;
	--item-scale: 1;
	--item-opacity: 1;
	--item-delay: calc(var(--duration) * 2);
	--title-opacity: 1;
	--title-y: 0;
	--title-delay: calc(var(--duration) * 3);
	--info-opacity: 1;
	--info-y: 0;
	--info-delay: calc(var(--duration) * 3);
	/*outline: 1px dashed red;*/
	z-index: 99;
}

/* rotate container based on checked radio */
.cards:has(input:checked) {
	transform: rotate(
		calc(
			var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))
		)
	);
}
/*
this would be so much simpler if we could use counter values as custom property values
*/
.cards:has(input#item-1:checked) {
	--index: 0;
}
.cards:has(input#item-2:checked) {
	--index: 1;
}
.cards:has(input#item-3:checked) {
	--index: 2;
}
.cards:has(input#item-4:checked) {
	--index: 3;
}
.cards:has(input#item-5:checked) {
	--index: 4;
}
.cards:has(input#item-6:checked) {
	--index: 5;
}
.cards:has(input#item-7:checked) {
	--index: 6;
}
.cards:has(input#item-8:checked) {
	--index: 7;
}
.cards:has(input#item-9:checked) {
	--index: 8;
}
.cards:has(input#item-10:checked) {
	--index: 9;
}
.cards:has(input#item-11:checked) {
	--index: 10;
}
.cards:has(input#item-12:checked) {
	--index: 11;
}
.cards:has(input#item-13:checked) {
	--index: 12;
}
.cards:has(input#item-14:checked) {
	--index: 13;
}


/* general styling */
*,
::before,
::after {
	box-sizing: border-box;
}
:root {
	--clr-bg: #000;
	--clr-primary: rgb(248, 243, 243);
}
html {
	background-color: var(--clr-bg);
	font-family: "Abel", sans-serif;
}

body {
    /* Elimina flex y centering para no afectar el layout general */
    min-height: 100svh;
    line-height: 1.4;
    color: var(--clr-primary);
    padding: 1rem;
    margin: 0;
}