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


.fredoka-<uniquifier> {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* —— paleta & reset chiquito —— */
:root{
  --paper:#FEE7F2;
  --card:#fffdf8;
  --frame:#ffd27f;
  --ink:#430423;
  --tag:#fff8e7;
  --tag-accent:#ffd27f;
  --title:#B50B5E;
}

.back-button {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 1000;
  display: inline-block;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  text-decoration: none !important;
}

.back-button img {
  width: 100px;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
  display: block;

}

.back-button:hover img {
  transform: scale(1.1);
  background: none !important;
}

.tooltip-text {
  visibility: hidden;
  background-color: #e398b2;
  color: #fff;
  border: 2px dashed #fcd4e2;
  font-size: 14px;
  font-family: "Fredoka", sans-serif;
  text-align: center;
  border-radius: 8px;
  padding: 5px 10px;
  position: absolute;
  top: 60px;
  left: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-button:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


*{ box-sizing:border-box; }

body{
  margin:0; padding:20px; color:var(--ink);
  background: var(--paper) url("https://www.transparenttextures.com/patterns/notebook-dark.png");
  font-family: "Fredoka", sans-serif;;
}

.mis-redes {
  list-style: none;   /* quita las viñetas */
  padding: 0;
  margin: 0;
}

.mis-redes li {
  display: inline;
  margin-right: 15px;
}

.mis-redes a {
  text-decoration: none; /* quita el subrayado */
  color: #e573a3;        /* color bonito */
  font-family: 'Lovely Cute', cursive; /* usa tu fuente */
  font-size: 18px;
}

.mis-redes a:hover {
  color: #ff99cc; /* cambia de color al pasar el mouse */
}


/* —— contenedor principal —— */
.scrapbook-container{
  max-width: 800px; margin:auto; background:var(--card);
  padding: 24px; border:4px solid var(--frame);
  box-shadow: 0 4px 15px rgba(0,0,0,.3);
  position:relative;
  background-color: #fad0e3;
  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
}


/* —— título —— */
h1{
  font-family: "Lovely Cute", sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  text-align:center; color:var(--title);
  margin: 0 0 18px;
  margin-bottom: 25px;
}

.sobre-mi-header{
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  flex-wrap: nowrap !important;   /* nunca baja */
  overflow: visible !important;    /* si no cabe, scroll horizontal */
}


.algo-al-lado{
  flex: 0 0 auto !important;      /* ocupa lo que necesite sin forzar salto */
  min-width: 300px !important;    /* dale un mínimo para que quepa el texto */
  word-break: break-word;
  overflow-wrap: break-word;
}
.algo-al-lado p{
  flex:1;
}

/* —— polaroid —— */
.polaroid{
  flex: 0 0 220px !important;     /* fijo 220px, no se encoge */
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  margin: 0 0 20px 0 !important;
  background:#fff; 
  padding:10px;
  box-shadow: 2px 2px 10px rgba(0,0,0,.2);
  transform: rotate(-2deg);
  position: relative; 
}


.polaroid img{width: 100%;   /* ocupa el espacio interior del marco */
  height: auto;
  display: block; }


.polaroid-caption{
  text-align:center; margin:8px 0 0; font-size:14px;
  color:#666;
}
.tape{
  width: 70px; height: 22px; background: rgba(255,255,153,.75);
  position:absolute; top:-12px; left:50%;
  transform: translateX(-50%) rotate(-5deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  border-radius: 2px;
}

/* —— grilla de datos tipo etiquetas —— */
.data-section{
  display:grid; gap:12px; margin-top:6px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 600px){
  .data-section{ grid-template-columns: 1fr; }
}
.data-item{
  background:var(--tag); padding:10px 12px;
  border-left:6px solid var(--tag-accent);
  box-shadow: 1px 1px 4px rgba(0,0,0,.08);
  border-radius: 6px;
}


/*Carrusel de fotos*/

.carousel {
  position: relative;
  width: 400px; /* tamaño fijo, puedes cambiarlo */
  max-width: 90%; /* para que en móviles no se desborde */
  overflow: hidden;
  margin: auto; /* lo centra */
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: 10px; /* opcional, esquinas redondeadas */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-track img {
  flex: 0 0 100%; /* cada imagen ocupa todo el ancho del carrusel */
  width: 100%;
  height: auto;
  object-fit: cover;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  padding: 0 10px;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

/* —— stickers —— */
.sticker{ position:absolute; width:80px; pointer-events:none; }
.sticker.status{top:18px; left:18px; transform: rotate(8deg);}
.sticker.flower{ bottom:-18px; right:-18px; transform: rotate(6deg); }
.sticker.star{   top:-18px; left:-18px;  transform: rotate(-8deg); }