/* ══════════════════════════════════════════════════════════════
   CÁCERES ABOGADOS — THEME PROFESIONAL
   Paleta:  Fondo #0E1D34 · Navbar #FFFFFF · Texto navbar #0F0F0F
            Footer #142F1E · Acento #BBA260
   Solo estilos: no altera estructura, SEO, headings ni textos.
   ══════════════════════════════════════════════════════════════ */

:root{
  --navy:        #0E1D34;
  --navy-card:   #15294a;   /* superficie elevada */
  --navy-card-2: #1a325a;   /* hover / acento */
  --green:       #142F1E;
  --gold:        #BBA260;
  --gold-soft:   #d8c489;
  --gold-deep:   #9c854a;
  --ink:         #0F0F0F;
  --light:       #EAF0F8;
  --muted:       #AdBace;
  --line:        rgba(187,162,96,.18);
  --shadow-sm:   0 6px 18px rgba(0,0,0,.28);
  --shadow-md:   0 14px 38px rgba(0,0,0,.40);
  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* ── Tipografía global elegante (sobre Helvetica original) ── */
body{
  background: var(--navy);
  color: var(--light);
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, main{ background: var(--navy); }

main{
  position: relative;
  background:
    radial-gradient(900px 460px at 88% -6%, rgba(187,162,96,.07), transparent 60%),
    radial-gradient(760px 520px at -8% 14%, rgba(187,162,96,.05), transparent 55%),
    var(--navy);
}

/* enlaces de contenido legibles sobre fondo oscuro */
main a{ color: var(--gold-soft); transition: color .25s var(--ease); }
main a:hover{ color: var(--gold); }

/* selección */
::selection{ background: rgba(187,162,96,.32); color:#fff; }

/* scrollbar discreta */
*{ scrollbar-color: var(--gold-deep) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(187,162,96,.45); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ══════════════ HOME · TÍTULO DE SECCIÓN ══════════════ */
#servicios{ padding: 24px 0 40px; }

.title-services{ margin-top: 54px; margin-bottom: 40px; }
.title-services h3{
  background: transparent !important;
  color: var(--light) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  position: relative;
  padding: 0 26px !important;
}
.title-services h3::after{
  content:'';
  position:absolute;
  left:50%; bottom:-14px;
  transform: translateX(-50%);
  width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft), var(--gold-deep));
  border-radius: 3px;
}
.line-left, .line-right{ border-color: rgba(255,255,255,.10) !important; }

/* ══════════════ HOME · CARDS DE ÁREAS ══════════════ */
.content-services{ gap: 1.7rem; }

.content-services .item{
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  isolation: isolate;
}
.content-services .item::before{   /* línea dorada superior animada */
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft), var(--gold-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
  z-index: 3;
}
.content-services .item:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}
.content-services .item:hover::before{ transform: scaleX(1); }

.content-services .item .content-image{
  border-radius: 0;
  position: relative;
}
.content-services .item .content-image::after{   /* velo dorado al hover */
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(14,29,52,.55));
  opacity:.85; transition: opacity .45s var(--ease);
}
.content-services .item img{
  height: 220px !important;
  object-fit: cover;
  transition: transform .6s var(--ease) !important;
}
.content-services .item:hover img{ transform: scale(1.12) !important; }

.content-services .item p{
  margin: 0; padding: 0 16px;
  text-align: center;
}
.content-services .item p:first-of-type{ padding-top: 16px; }
.content-services .item p:last-of-type{ padding-bottom: 18px; }

.content-services .item p b a{
  color: var(--light) !important;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.content-services .item:hover p b a{ color: var(--gold-soft) !important; }

.content-services .item p i a{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold) !important;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .4px;
  font-weight: 600;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.content-services .item p i a::after{ content:'\2192'; transition: transform .3s var(--ease); }
.content-services .item p i a:hover{ color: var(--gold-soft) !important; }
.content-services .item p i a:hover::after{ transform: translateX(4px); }

/* ══════════════ DETALLE DE SERVICIO ══════════════ */
.service-detail-content{ margin-top: 26px; padding-bottom: 30px; }

.service-detail-content-navigation h5{
  color: var(--gold) !important;
  font-weight: 700;
  letter-spacing: .4px;
}
.service-detail-content .service-detail-content-navigation ul{
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.service-detail-content .service-detail-content-navigation ul li{
  background: var(--navy-card) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-bottom: none !important;
  transition: background .3s var(--ease), padding-left .3s var(--ease);
  position: relative;
}
.service-detail-content .service-detail-content-navigation ul li:last-child{
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.service-detail-content .service-detail-content-navigation ul li::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:0;
  background: var(--gold); transition: width .3s var(--ease);
}
.service-detail-content .service-detail-content-navigation ul li:hover{
  background: var(--navy-card-2) !important;
  box-shadow: none !important;
  padding-left: 18px;
}
.service-detail-content .service-detail-content-navigation ul li:hover::before{ width:3px; }
.service-detail-content .service-detail-content-navigation ul li a{
  color: var(--muted) !important;
  font-size: 14px;
  transition: color .25s var(--ease);
}
.service-detail-content .service-detail-content-navigation ul li:hover a{ color: var(--gold-soft) !important; }

.service-detail-content-info{
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 30px 34px;
  box-shadow: var(--shadow-sm);
}
.service-detail-content .service-detail-content-info h3{
  color: var(--gold) !important;
  font-size: 30px;
  letter-spacing: .4px;
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.service-detail-content .service-detail-content-info h3::after{
  content:''; position:absolute; left:0; bottom:0;
  width:58px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}
.service-detail-content .service-detail-content-info p,
.service-detail-content .service-detail-content-info ul li{
  color: #cdd6e6 !important;
  line-height: 1.7;
}
.service-detail-content .service-detail-content-info ul{
  background: transparent !important;
  background-color: transparent !important;
}
.service-detail-content-info .vineta ul li{
  position: relative;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.service-detail-content-info .vineta ul li::marker{ color: var(--gold); }
.service-detail-content-info .vineta ul li:hover{ color:#fff !important; transform: translateX(3px); }
.image-service{ border-radius: 12px; box-shadow: var(--shadow-sm); }

/* ══════════════ NUESTRA FIRMA ══════════════ */
.nuestra-firma-content-banner{
  border-radius: 0 0 16px 16px;
  position: relative;
  box-shadow: var(--shadow-md);
}
.nuestra-firma-content-banner::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(14,29,52,.30), rgba(14,29,52,.78));
  border-radius: inherit;
}
.nuestra-firma-quienes-somos{ margin-top: 38px !important; }
.nuestra-firma-quienes-somos h5{
  color: var(--gold) !important;
  font-size: 30px;
  position: relative; display:inline-block; left:50%; transform:translateX(-50%);
  padding-bottom: 14px;
}
.nuestra-firma-quienes-somos h5::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:60px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft), var(--gold-deep));
}
.nuestra-firma-quienes-somos p{ color:#cdd6e6 !important; line-height: 1.8; }

.nuestra-firma-content-detail{ margin-top: 40px !important; }
.nuestra-firma-content-detail .item{
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid var(--gold) !important;
  border-radius: 12px;
  padding: 26px 24px !important;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nuestra-firma-content-detail .item:first-child{ border-left: 3px solid var(--gold) !important; }
.nuestra-firma-content-detail .item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.nuestra-firma-content-detail h5{ color: var(--gold) !important; font-size: 22px; }
.nuestra-firma-content-detail p{ color:#cdd6e6 !important; line-height: 1.7; }
.nuestra-firma-content-detail p li,
.nuestra-firma-content-detail .item p li{
  color: #cdd6e6 !important;
  list-style: none;
  position: relative; padding-left: 22px; margin-bottom: 4px;
}
.nuestra-firma-content-detail .item p li::before{
  content:'\f058'; font-family:'Font Awesome 5 Free'; font-weight:900;
  position:absolute; left:0; color: var(--gold); font-size: 13px;
}

/* ══════════════ CONTACTO ══════════════ */
.contacto-detail-content{ margin-top: 30px; padding-bottom: 24px; }
.contacto-detail-content-info,
.contacto-detail-content-form{
  background: var(--navy-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
}
.contacto-detail-content h3{
  color: var(--gold) !important;
  border-bottom: 1px solid var(--line) !important;
}
.contacto-detail-content p{ color:#cdd6e6 !important; }
.contacto-detail-content .item-contact{
  border-top: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 8px;
  transition: background .3s var(--ease);
}
.contacto-detail-content .item-contact:hover{ background: rgba(187,162,96,.05); }
.contacto-detail-content .item-contact h5{ color: var(--light) !important; }
.contacto-detail-content i,
.contacto-detail-content svg{ color: var(--gold) !important; fill: var(--gold) !important; }

.contacto-detail-content-form label{ color: var(--muted) !important; font-weight:500; }
.contacto-detail-content-form .form-group input,
.contacto-detail-content-form .form-group select,
.contacto-detail-content-form .form-group textarea{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px !important;
  color: var(--light) !important;
  padding: 11px 13px !important;
  font-family: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.contacto-detail-content-form .form-group input::placeholder,
.contacto-detail-content-form .form-group textarea::placeholder{ color: rgba(234,240,248,.4); }
.contacto-detail-content-form .form-group input:focus,
.contacto-detail-content-form .form-group select:focus,
.contacto-detail-content-form .form-group textarea:focus{
  outline: none;
  border-color: var(--gold) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 0 0 3px rgba(187,162,96,.16) !important;
}

/* ══════════════ BOTONES ══════════════ */
.contacto-detail-content-form button[type=submit]{
  position: relative;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%) !important;
  color: #1a1407 !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 10px !important;
  padding: 13px 46px !important;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(187,162,96,.28);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease) !important;
}
.contacto-detail-content-form button[type=submit]::after{
  content:''; position:absolute; top:0; left:-130%;
  width:60%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
.contacto-detail-content-form button[type=submit]:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(187,162,96,.42);
  filter: brightness(1.04);
  opacity: 1 !important;
}
.contacto-detail-content-form button[type=submit]:hover::after{ left: 130%; }
.contacto-detail-content-form button[type=submit]:active{ transform: translateY(-1px) scale(.99); }

/* ══════════════ OFICINAS · TABS ══════════════ */
.oficinas-detail-content{ margin-top: 30px; }
.tabs{ border-bottom: 1px solid var(--line) !important; gap: 6px; }
.tab{
  background: var(--navy-card) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-bottom: none !important;
  color: var(--muted) !important;
  border-radius: 10px 10px 0 0 !important;
  font-weight: 600; letter-spacing: .4px;
  transition: background .3s var(--ease), color .3s var(--ease) !important;
}
.tab:hover{ background: var(--navy-card-2) !important; color: var(--gold-soft) !important; }
.tab.active{
  background: var(--navy-card-2) !important;
  color: var(--gold) !important;
  border-top: 3px solid var(--gold) !important;
}
.tab-content{
  background: var(--navy-card) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 12px 12px 12px !important;
  animation: fadeTab .45s var(--ease);
}
@keyframes fadeTab{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.oficinas-detail-content-info h3{ color: var(--gold) !important; border-bottom: 1px solid var(--line) !important; }
.oficinas-detail-content-info p{ color:#cdd6e6 !important; }
.oficinas-detail-content-info .item-contact h5{ color: var(--light) !important; }
.oficinas-detail-content-info i,
.oficinas-detail-content-info svg{ color: var(--gold) !important; fill: var(--gold) !important; }
.oficinas-detail-content-info .mapa iframe{
  width: 100%; border-radius: 12px; box-shadow: var(--shadow-sm);
  filter: saturate(1.05);
}

/* ══════════════ FOOTER ══════════════ */
footer{
  background: var(--green) !important;
  background-image: none !important;
  background-attachment: scroll !important;
  margin-top: 60px !important;
  position: relative;
  padding: 0;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-soft) 50%, var(--gold) 70%, transparent) 1;
}
footer::before{ display: none !important; content: none !important; }
footer .container{ padding-top: 52px; padding-bottom: 40px; }
footer .content-footer{ gap: 2.4rem; }
footer .content-footer .item{ position: relative; }
footer .content-footer h5{
  color: var(--gold) !important;
  font-size: 18px !important;
  letter-spacing: .5px;
  padding-bottom: 12px;
  position: relative;
}
footer .content-footer h5::after{
  content:''; position:absolute; left:0; bottom:0;
  width:40px; height:2px; background: var(--gold);
  opacity:.7; border-radius:2px;
}
footer .content-footer p,
footer .content-footer ul li{
  color: #cfe0d4 !important;
  line-height: 1.7;
  font-size: 14px;
}
footer .content-footer b{ color:#fff !important; }
footer .content-footer hr{
  border: none; height: 1px;
  background: rgba(255,255,255,.12);
  margin: 10px 0 14px;
}
footer .content-footer i,
footer .content-footer svg{ color: var(--gold) !important; fill: var(--gold) !important; margin-right: 6px; }
footer .content-footer ul li{
  transition: color .25s var(--ease), transform .25s var(--ease);
  cursor: default;
}
footer .content-footer ul li:hover{ color:#fff !important; transform: translateX(4px); }
footer .content-footer a{ color:#cfe0d4 !important; transition: color .25s var(--ease); }
footer .content-footer a:hover{ color: var(--gold-soft) !important; }

/* ══════════════ FLOTANTE WHATSAPP ══════════════ */
.whatsapp{
  transition: transform .3s var(--ease), filter .3s var(--ease);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
  animation: waPulse 2.8s ease-in-out infinite;
}
.whatsapp:hover{ transform: scale(1.12) translateY(-2px); animation-play-state: paused; }
@keyframes waPulse{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}

/* ══════════════ ANIMACIONES SCROLL (reveal) ══════════════ */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in{ opacity: 1; transform: none; }

/* aparición global suave de la página */
main{ animation: pageIn .6s var(--ease) both; }
@keyframes pageIn{ from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .whatsapp{ animation: none !important; }
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 768px){
  .title-services h3{ font-size: 24px !important; }
  .service-detail-content-info{ padding: 22px 20px; }
  .nuestra-firma-content-detail .item{ border-left: 3px solid var(--gold) !important; }
  footer .container{ padding-top: 40px; }
  footer .content-footer{ gap: 1.6rem; }
}
@media (max-width: 480px){
  .content-services .item img{ height: 200px !important; }
}