/* Paleta tomada de Index.html: fondo crema y acentos rojos/rosas */
:root{
  --bg: #FFF8E1; /* crema */
  --accent-1: #D90429; /* rojo principal */
  --accent-2: #ff6f86; /* rosa gradient start */
  --accent-3: #ff94a2; /* rosa gradient end */
  --text: #333;
}

*{box-sizing:border-box}
body{font-family: 'Segoe UI', Tahoma, sans-serif;margin:0;background:var(--bg);color:var(--text)}

.page-header{background:linear-gradient(135deg,var(--accent-2) 0%, var(--accent-3) 50%, var(--accent-2) 100%);color:#fff;padding:48px 20px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.page-header h1{font-family:'Satisfy', cursive;font-size:48px;margin:0;text-shadow:0 6px 18px rgba(0,0,0,0.18)}
.page-header .lead{margin:8px 0 0;opacity:0.95}

.container{max-width:1100px;margin:28px auto;padding:0 18px}

.gallery-section{background:rgba(255,255,255,0.6);padding:22px;border-radius:12px;border:1px solid rgba(217,4,41,0.06)}

/* Galería horizontal: fila scrollable con snap */
.gallery-grid{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gallery-grid::-webkit-scrollbar{height:10px}
.gallery-grid::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:10px}

.card{flex:0 0 320px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.08);margin:0;scroll-snap-align:center}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card figcaption{padding:12px}
.card h3{margin:0 0 6px;color:var(--accent-1)}
.card p{margin:0;color:#444;font-size:14px}

.gallery-subtitle{text-align:center;margin:20px 0 10px;color:var(--accent-1)}
.about-text{max-width:900px;margin:0 auto;color:#333;line-height:1.6;font-size:15px}

.site-footer{background:var(--accent-3);color:#fff;text-align:center;padding:18px;border-top-left-radius:8px;border-top-right-radius:8px;margin-top:18px}

/* Hover effect */
.card:hover{transform:translateY(-6px);transition:transform 0.18s}

/* Responsive */
@media (max-width:800px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .card img{height:180px}
}

@media (max-width:480px){
  .gallery-grid{grid-template-columns:1fr}
  .page-header h1{font-size:36px}
  .card img{height:160px}
}

/* Small helper styles for links or buttons if needed */
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--accent-1);color:#fff;text-decoration:none;font-weight:700}