/* =========================
   CONUGAR - THEME (Bootstrap + tu estilo)
   ========================= */

/* ---- Variables de marca ---- */
:root{
  --conu-text: #46474b;
  --conu-muted: #6b6d73;
  --conu-bg: #ffffff;
  --conu-soft: #f6f6f7;
  --conu-border: #e7e7ea;

  --conu-accent: #f3b400;       /* amarillo */
  --conu-accent-soft: #ffe08a;  /* amarillo suave */

  --radius-xl: 18px;
  --shadow-sm: 0 8px 24px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 14px 40px rgba(20, 20, 20, 0.12);
}

/* ---- Base ---- */
html{
  scroll-behavior: smooth;
}
body{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--conu-text);
  background: var(--conu-bg);
}

/* Asegura que las anclas no queden ocultas por navbar sticky */
section{
  scroll-margin-top: 90px;
}

/* Tipografía de títulos (como tu look elegante) */
h1, h2, h3, .navbar-brand{
  font-family: "Playfair Display", serif;
  letter-spacing: 0.4px;
}

h2{
  font-size: clamp(22px, 2.2vw, 34px);
}

/* =========================
   NAVBAR
   ========================= */
.navbar{
  padding: 14px 0;
}

.navbar .navbar-brand{
  font-size: 28px;
  line-height: 1;
}

.navbar .nav-link{
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: var(--conu-text) !important;
  padding: 10px 14px !important;
  border-radius: 10px;
}

.navbar .nav-link:hover{
  background: rgba(243, 180, 0, 0.12);
}

.navbar .nav-link.active{
  background: rgba(243, 180, 0, 0.18);
}

/* Icono hamburguesa visible (BS5 requiere esto si tu background es claro) */
.navbar-toggler{
  border: 1px solid var(--conu-border);
  border-radius: 12px;
  padding: 10px 12px;
}
.navbar-toggler:focus{
  box-shadow: 0 0 0 0.2rem rgba(243, 180, 0, 0.25);
}
.navbar .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2868,71,75,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================
   HERO / INICIO
   ========================= */
#inicio{
  position: relative;
  overflow: hidden;
}

/* Fondo tipo “plano + puntitos + acentos amarillos” */
#inicio::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto -40px;
  height: 100%;
  background:
    radial-gradient(circle at 12% 18%, rgba(243,180,0,0.85) 0 70px, transparent 72px),
    radial-gradient(circle at 92% 30%, rgba(243,180,0,0.85) 0 70px, transparent 72px),
    radial-gradient(circle at 7% 80%, rgba(243,180,0,0.85) 0 70px, transparent 72px),
    linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    56px 56px,
    56px 56px;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  z-index: 0;
  pointer-events:none;
  opacity: 0.85;
}

/* Puntitos decorativos */
#inicio::after{
  content:"";
  position:absolute;
  right: 7%;
  top: 18%;
  width: 130px;
  height: 70px;
  background-image: radial-gradient(var(--conu-accent) 4px, transparent 5px);
  background-size: 18px 18px;
  opacity: 0.95;
  z-index: 0;
  pointer-events:none;
}

/* Asegura contenido encima del fondo */
#inicio .container{
  position: relative;
  z-index: 1;
}

#inicio h2{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: var(--conu-text);
  line-height: 1.15;
  font-size: clamp(22px, 2.4vw, 40px);
  margin-top: 12px;
}

#inicio .btn{
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

#inicio .btn-outline-dark{
  border-color: var(--conu-text);
  color: var(--conu-text);
}
#inicio .btn-outline-dark:hover{
  background: rgba(70,71,75,0.08);
}

#inicio .btn-dark{
  background: var(--conu-text);
  border-color: var(--conu-text);
}
#inicio .btn-dark:hover{
  filter: brightness(0.95);
}

#inicio img.img-fluid{
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.18));
}

/* Mobile: reduce decoraciones para no estorbar */
@media (max-width: 576px){
  #inicio::after{
    opacity: 0.6;
    transform: scale(0.85);
    right: 2%;
    top: 8%;
  }
  #inicio::before{
    opacity: 0.65;
  }
  #inicio img.img-fluid{
    max-height: 360px;
  }
}

/* =========================
   SERVICIOS (Cards)
   ========================= */
#servicios{
  background: #fff;
}

#servicios .card{
  border: 1px solid var(--conu-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#servicios .card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

#servicios .card-img-top{
  height: 240px;
  object-fit: cover;
}

#servicios .card-title{
  font-family: "Playfair Display", serif;
  letter-spacing: 0.35px;
  color: var(--conu-text);
}

#servicios .card-text{
  color: var(--conu-muted);
  line-height: 1.55;
}

/* =========================
   PORTAFOLIO
   ========================= */
#portafolio{
  background: var(--conu-soft);
}

#portafolio .list-group-item{
  border-color: var(--conu-border);
  background: #fff;
  color: var(--conu-text);
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(20,20,20,0.06);
}

/* =========================
   SLIDER (más pequeño + responsivo + transición lenta)
   ========================= */

#portafolio .slider{
  /* ancho máximo y centrado */
  max-width: min(980px, 92vw);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--conu-border);
  background: #fff;
}

/* Altura responsiva del área del slider (reduce tamaño en pantalla) */
#portafolio .slides{
  position: relative;
  height: clamp(240px, 42vw, 420px); /* <-- más pequeño que antes */
}

/* Cada slide ocupa todo el contenedor, con fade lento */
#portafolio .slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1600ms ease; /* <-- animación más lenta */
}

#portafolio .slide.active{
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Imagen siempre adaptada */
#portafolio .slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* En móvil baja un poco la altura */
@media (max-width: 576px){
  #portafolio .slides{
    height: clamp(200px, 60vw, 320px);
  }
}

/* Botones del slider más discretos (opcional) */
#portafolio .prev,
#portafolio .next{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  opacity: 0.9;
}
#portafolio .prev:hover,
#portafolio .next:hover{
  opacity: 1;
}


/* =========================
   CONTACTO
   ========================= */
#contacto{
  background: #fff;
}

#contacto .border{
  border-color: var(--conu-border) !important;
}

#contacto .rounded-3{
  border-radius: var(--radius-xl) !important;
}

#contacto .form-control{
  border-radius: 14px;
  border-color: var(--conu-border);
  padding: 12px 14px;
}

#contacto .form-control:focus{
  border-color: rgba(243,180,0,0.55);
  box-shadow: 0 0 0 0.2rem rgba(243,180,0,0.15);
}

#contacto .btn-success{
  border-radius: 14px;
  font-weight: 800;
}

/* =========================
   FOOTER
   ========================= */
footer{
  background: #1f1f22 !important;
}

footer small{
  opacity: 0.9;
}

/* =========================
   WhatsApp floating button
   (tu archivo whatsapp.css lo tiene, esto es un refuerzo por si)
   ========================= */
.float{
  position: fixed;
  width: 58px;
  height: 58px;
  bottom: 18px;
  right: 18px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float:hover{
  filter: brightness(0.98);
}

.my-float{
  margin: 0;
}
/* =========================
   Footer
   ========================= */

   /* =========================
   CONTACTO con imagen de fondo (manteniendo tu diseño)
   ========================= */

/* 1) Fondo + overlay (cambia la ruta por tu imagen real) */
#contacto{
  position: relative;
  color: #fff;
  background:
    linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.62)),
    url("../imagenes/footer.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* En móvil NO uses fixed (a veces se ve raro/lag). 
   Si lo quieres en escritorio, actívalo solo arriba de 992px */
@media (min-width: 992px){
  #contacto{
    background-attachment: fixed;
  }
}

/* 2) Mantener el diseño “tarjeta”, pero legible sobre el fondo */
#contacto .p-4.border.rounded-3{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

/* 3) Textos y links en blanco */
#contacto h2,
#contacto h3,
#contacto p,
#contacto label{
  color: #fff !important;
}

#contacto a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#contacto a:hover{
  opacity: 0.9;
}

/* 4) Inputs como tu screenshot: blancos y limpios */
#contacto .form-control{
  background: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.35);
  color: #1c1c1c;
}
#contacto .form-control::placeholder{
  color: rgba(0,0,0,0.55);
}

/* 5) Botón ENVIAR estilo barra (opcional, si quieres parecido a la captura) */
#contacto button[type="submit"]{
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
}


footer{
  color: #fff;
  background:
    linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
    url("../imagenes/footer.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(255,255,255,0.12);
}


/* =========================
   Portafolio: icono más grande (responsivo)
   ========================= */

#portafolio .portfolio-icon{
  width: min(28vw, 320px);   /* crece con la pantalla, con tope */
  height: auto;
  max-width: 100%;
}

/* En pantallas medianas: un poquito más chica para que respire */
@media (max-width: 992px){
  #portafolio .portfolio-icon{
    width: min(55vw, 360px);
  }
}

/* En móvil: grande pero sin exagerar */
@media (max-width: 576px){
  #portafolio .portfolio-icon{
    width: min(75vw, 320px);
    margin-inline: auto;
    display: block;
  }
}

/* =========================
   HERO: izquierda (logo+texto) / derecha (imagen)
   ========================= */

#inicio .hero-copy{
  text-align: center; /* antes: left */
}

#inicio .hero-brand{
  display: flex;
  align-items: center;
  justify-content: center; /* antes: flex-start */
}

/* Logo tipo “header” (mismo tamaño arriba) */
#inicio .hero-logo{
  width: clamp(150px, 14vw, 210px);
  height: auto;
}

/* Título como tu referencia: grande y con ancho controlado */
#inicio .hero-title{
  font-family: "Playfair Display", serif;
  color: var(--conu-text);
  line-height: 1.15;
  font-size: clamp(22px, 2.2vw, 40px);
  max-width: 620px;
  margin-left: auto;   /* centra el bloque del título */
  margin-right: auto;  /* centra el bloque del título */
}

/* Botones centrados */
#inicio .hero-cta{
  justify-content: center; /* antes: flex-start */
}

/* Imagen a la derecha: centrada */
#inicio .hero-figure{
  display: flex;
  justify-content: center; /* centra el contenido horizontal */
  align-items: center;     /* centra el contenido vertical (si hay altura) */
}

#inicio .hero-image{
  max-height: 520px;
  width: 100%;
  object-fit: contain;
}

/* Responsive: en móvil se apila (texto arriba, imagen abajo) */
@media (max-width: 992px){
  #inicio .hero-image{
    max-height: 420px;
  }
}

@media (max-width: 576px){
  #inicio .hero-copy{
    text-align: center; /* antes: left */
  }
  #inicio .hero-logo{
    width: clamp(140px, 46vw, 200px);
  }
  #inicio .hero-image{
    max-height: 360px;
  }
}