/*-----------------------------------------------------------------------------------

    Theme Name: Dicor - Creative One Page Multipurpose Template
    Description: Creative One Page Multipurpose Template
    Author: chitrakootweb
    Version: 1.0

-----------------------------------------------------------------------------------*/
/* ----------------------------------

Table of contents
        
    01. Basic
    02. Banner
    03. Navbar
    04. Dicorion
    05. Header
    06. Hero Section
    07. Portfolio
    08. Counter
    09. Team
    10. Price Table
    11. Testimonials
    12. Contact
    13. Clients
    14. Blog
    15. Countdown Coming soon page
    16. Footer
    17. Responsive
    
---------------------------------- */
/* ===== ANTI-OVERFLOW HORIZONTAL GLOBAL ===== */
/* Bootstrap's .row usa márgenes negativos (-15px) compensados por el padding
   del .container; en páginas cortas (ej. /portafolio/ sin elementos, donde no
   hay scroll vertical) un desbordamiento horizontal de 1px suele pasar
   inadvertido salvo por la barra de scroll horizontal que aparece pegada
   hasta abajo del todo. Esta regla evita cualquier overflow-x accidental en
   todo el sitio sin afectar el layout visual (el contenido nunca depende de
   desbordarse horizontalmente). */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
/*============================== 
    Basic
================================*/
.bg-img {
  background-size: cover;
  background-repeat: no-repeat; }

.valign {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.btn {
  display: inline-block;
  font-size: 14px;
  min-width: 160px;
  padding: 12px 20px;
  background: #fff;
  border: 2px solid #222;
  color: #232323;
  letter-spacing: .5px;
  line-height: inherit;
  border-radius: 0;
  text-transform: uppercase;
  width: auto;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out; }
  .btn:hover, .btn:active {
    background: var(--accent, #F24259);
    color: #fff;
    border-color: var(--accent, #F24259); }
  .btn:focus {
    background: var(--accent, #F24259);
    color: #fff;
    box-shadow: none;
    border-color: var(--accent, #F24259); }

/*============================== 
    Banner
================================*/
.banner-headline {
  font-size: 3rem;
  line-height: 1.2; }

@media only screen and (min-width: 768px) {
  .banner-headline {
    font-size: 4.4rem;
    font-weight: 300; } }
@media only screen and (min-width: 1170px) {
  .banner-headline {
    font-size: 6rem; } }
.banner-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left; }
  .banner-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0; }
    .banner-words-wrapper b.is-visible {
      position: relative; }

.no-js .banner-words-wrapper b {
  opacity: 0; }
  .no-js .banner-words-wrapper b.is-visible {
    opacity: 1; }

/* xclip */
.banner-headline.clip span {
  display: inline-block;
  padding: .2em 0; }

.caption .highlight {
  color: var(--accent, #F24259); }

.banner-headline.clip .banner-words-wrapper {
  overflow: hidden;
  vertical-align: top; }
  .banner-headline.clip .banner-words-wrapper:after {
    /* line */
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 2px;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.65); }
.banner-headline.clip b {
  opacity: 0; }
.banner-headline b.is-visible {
  opacity: 1;
  font-weight: 900; }

/* Portada fija: prefijo en blanco y palabra animada en color del sistema */
.banner-headline.clip .banner-words-wrapper b span {
  display: inline;
  padding: 0; }
.hero-prefix {
  color: #fff; }

.owl-theme .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: none;
  margin: 5px 4px;
  border: 2px solid #fff; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: var(--accent, #F24259);
  border-color: var(--accent, #F24259); }

.slider .arrow, .slider-fade .arrow {
  display: none !important; }

.slider .owl-item, .slider-fade .owl-item {
  height: 100vh;
  position: relative; }

.slider .item, .slider-fade .item {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center; }

.slider .item .caption, .slider-fade .item .caption {
  width: 100%;
  z-index: 9; }

.slider .owl-theme .owl-dots, .slider-fade .owl-theme .owl-dots {
  position: absolute;
  bottom: 5vh;
  width: 100%; }

.creative {
  min-height: 100vh; }
  .creative .svg {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    z-index: 2; }
    .creative .svg svg {
      fill: #fff;
      width: 101%; }

.bg-vid {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%; }

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }

/*============================== 
    Navbar
================================*/
.navbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  z-index: 9;
  min-height: 80px;
  padding: 15px 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
  .navbar .icon-bar {
    color: #fff; }
  .navbar .navbar-nav .nav-link {
    font-size: 13px;
    font-weight: 600;
    color: #eee;
    letter-spacing: .5px;
    margin: 0;
    padding: 10px 15px;
    transition: all .5s;
    text-align: left;
    text-transform: uppercase; }
    .navbar .navbar-nav .nav-link:hover {
      color: var(--accent, #F24259) !important; }
  .navbar .navbar-nav .active {
    color: var(--accent, #F24259) !important;
    position: relative; }
    .navbar .navbar-nav .active:after {
      background: var(--accent, #F24259) !important;
      border-radius: 10px;
      bottom: 5px;
      content: "";
      height: 1px;
      left: 15px;
      position: absolute;
      width: 12px; }

.nav-scroll {
  background: #fff;
  box-shadow: 0 5px 10px -10px rgba(0, 0, 0, 0.6);
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  transition: transform .5s;
  transform: translateY(100px); }
  .nav-scroll .icon-bar {
    color: #232323; }
  .nav-scroll .navbar-nav .nav-link {
    color: #232323; }
  .nav-scroll .navbar-nav .logo {
    padding: 15px 0; }

.logo {
  padding: 15px 0;
  width: auto;
  max-width: 220px; }

/*============================== 
    Dicorion
================================*/
.Dicorion-style .card {
  background: transparent;
  box-shadow: none;
  margin-top: 0 !important;
  border: none; }
.Dicorion-style .card-header {
  border: 0px;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: none; }
.Dicorion-style .btn-link {
  background: #ededed !important;
  color: #232323;
  font-size: 13px;
  line-height: 20px;
  position: relative;
  border: none;
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;
  padding: 15px 30px 15px 15px; }
  .Dicorion-style .btn-link:hover {
    background: #ededed !important;
    border: none;
    text-decoration: none; }
  .Dicorion-style .btn-link.collapsed:after {
    background: none;
    content: "+";
    right: 15px;
    left: inherit;
    font-size: 20px;
    height: auto;
    transform: none;
    width: auto;
    top: 15px; }
  .Dicorion-style .btn-link:after {
    background: none;
    content: "-";
    right: 17px;
    left: inherit;
    font-size: 20px;
    height: auto;
    transform: none;
    width: auto;
    top: 15px;
    position: absolute;
    color: var(--accent, #F24259); }
.Dicorion-style .card-body {
  padding: 20px;
  line-height: 24px;
  text-align: left; }

/*============================== 
    Header
================================*/
.header {
  min-height: 100vh;
  overflow: hidden; }
  .header .caption .overflow-hidden {
    display: inline-block; }
  .header .caption h3 {
    font-weight: 200;
    letter-spacing: 3px;
    animation-delay: 0.5s;
    position: relative;
    display: inline-block; }
    .header .caption h3:after {
      background: var(--accent, #F24259);
      content: "";
      height: 1px;
      position: absolute;
      right: -30px;
      top: 50%;
      width: 20px; }
    .header .caption h3:before {
      background: var(--accent, #F24259);
      content: "";
      height: 1px;
      left: -30px;
      position: absolute;
      top: 50%;
      width: 20px; }
  .header .caption h1 {
    margin: 10px 0;
    font-size: 70px;
    font-weight: 500;
    text-transform: uppercase;
    animation-delay: 1s; }
    .header .caption h1 b {
      color: var(--accent, #F24259);
      font-weight: 500; }
  .header .caption p {
    font-size: 16px;
    color: #eee;
    word-spacing: 2px;
    animation-delay: 1s; }
  .header .caption .btn {
    animation-delay: 1.2s;
    display: inline-block;
    font-size: 14px;
    min-width: 160px;
    padding: 12px 20px;
    background: #222;
    border: 2px solid #fff;
    color: #fff;
    letter-spacing: .5px;
    line-height: inherit;
    border-radius: 0;
    text-transform: uppercase;
    width: auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out; }
    .header .caption .btn:hover, .header .caption .btn:active {
      background: var(--accent, #F24259);
      color: #fff;
      border-color: var(--accent, #F24259); }
    .header .caption .btn:focus {
      background: var(--accent, #F24259);
      color: #fff;
      box-shadow: none; }
  .header .arrow {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 13px;
    z-index: 8; }
    .header .arrow a {
      color: #fff; }
      .header .arrow a :hover {
        color: var(--accent, #F24259); }
    .header .arrow i {
      position: relative;
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px; }
      .header .arrow i:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: color-mix(in srgb, var(--accent, #ff214f) 90%, transparent);
        border-radius: 50%;
        z-index: -1;
        transition: all .2s; }
      .header .arrow i:hover:after {
        background: #fff;
        transform: scale(1.2);
        transition: all .5s; }

/*============================== 
    Hero Section
================================*/
.hero .story-video {
  min-height: 500px; }
.hero .skills .prog-item {
  margin-bottom: 25px; }
  .hero .skills .prog-item:last-child {
    margin-bottom: 0; }
  .hero .skills .prog-item p {
    font-size: 14px;
    margin-bottom: 8px; }
  .hero .skills .prog-item .skills-progress {
    width: 100%;
    height: 5px;
    background: #eee;
    border-radius: 5px;
    position: relative; }
    .hero .skills .prog-item .skills-progress span {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: var(--accent, #F24259);
      width: 10%;
      border-radius: 10px;
      transition: all 1s; }
      .hero .skills .prog-item .skills-progress span:after {
        content: attr(data-value);
        position: absolute;
        top: -20px;
        right: 0;
        font-size: 10px;
        color: #777; }

/*============================== 
    Portfolio
================================*/
.portfolio {
  overflow: hidden; }
  .portfolio .filtering span {
    margin-right: 20px;
    color: #333;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 1px solid transparent; }
    .portfolio .filtering span:last-child {
      margin: 0; }
  .portfolio .filtering .active {
    border-color: var(--accent, #F24259);
    color: var(--accent, #F24259); }
  .portfolio .items {
    margin-top: 20px; }
  .portfolio .item-img {
    position: relative;
    overflow: hidden; }
    .portfolio .item-img img {
      width: 100%; }
    .portfolio .item-img:hover .item-img-overlay {
      opacity: 1;
      transform: translateY(0); }
    .portfolio .item-img:hover h6 {
      transform: translateY(0); }
    .portfolio .item-img h6 {
      font-weight: 600;
      position: relative;
      font-size: 16px;
      margin-bottom: 0;
      transform: translateY(-15px);
      transition: all .5s; }
    .portfolio .item-img p {
      margin-bottom: 8px; }
    .portfolio .item-img .fa {
      background: var(--accent, #F24259);
      border: 1px solid var(--accent, #F24259);
      border-radius: 50%;
      color: #fff;
      display: inline-block;
      height: 30px;
      line-height: 28px;
      width: 30px;
      transition: all .5s; }
      .portfolio .item-img .fa:hover {
        background: #fff;
        color: var(--accent, #F24259); }
  .portfolio .item-img-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(255, 255, 255, 0.95);
    color: #35424C;
    opacity: 0;
    transition: all .5s;
    z-index: 2;
    transform: translateY(10px); }

/*============================== 
    Counter
================================*/
.numbers {
  background-attachment: fixed; }
  .numbers .item .icon {
    font-size: 36px;
    margin-bottom: 20px;
    display: inline-block;
    color: var(--accent, #ff214f); }
  .numbers .item h6 {
    font-weight: 500;
    margin-bottom: 5px; }
  .numbers .item p {
    font-size: 13px;
    letter-spacing: 1px;
    color: #232323;
    text-transform: uppercase;
    margin-bottom: 0; }

/*============================== 
    Team
================================*/
.team .owl-theme .owl-dot span {
  border-color: var(--accent, #F24259); }

.team-style img {
  /* El template original de Dicor muestra las fotos del equipo en escala de
     grises y solo las colorea al hacer hover. Se desactiva para que las fotos
     siempre se vean a color. */
  -webkit-filter: none;
  filter: none;
  transition: 0.3s; }

/*============================== 
    Price Table
================================*/
.price .item {
  padding: 30px 0;
  background: #fff;
  border-radius: 5px;
  transition: all .3s; }
  .price .item:hover {
    box-shadow: 0px 5px 40px 0px rgba(148, 146, 245, 0.2); }
.price .type {
  margin-bottom: 30px; }
  .price .type .icon {
    font-size: 45px;
    color: #d6d5d5;
    margin-bottom: 10px; }
  .price .type h4 {
    font-size: 25px; }
.price .value {
  padding: 30px 0;
  position: relative; }
  .price .value:before, .price .value:after {
    content: '';
    background: #eee;
    width: 70%;
    height: 1px;
    position: absolute;
    left: 15%; }
  .price .value:before {
    top: 0; }
  .price .value:after {
    bottom: 0; }
  .price .value h3 {
    display: inline-block;
    padding-right: 10px;
    font-size: 50px;
    font-weight: 700;
    position: relative; }
    .price .value h3 span {
      font-size: 14px;
      position: absolute;
      top: 5px;
      right: 0; }
  .price .value .per {
    font-size: 13px;
    color: var(--accent, #ff214f); }
.price .features {
  padding: 15px 0; }
  .price .features li {
    margin: 15px 0;
    color: #777; }
.price .order {
  padding-top: 15px;
  position: relative; }
.price .active {
  box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.1); }

/*============================== 
    Testimonials
================================*/
.testimonials h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: normal; }
.testimonials p {
  color: #fff;
  margin-bottom: 0; }
.testimonials h6 {
  font-size: 12px;
  color: #b6b6b6;
  margin: 5px 0 0; }
.testimonials .testimonial-quote-icon {
  font-size: 38px;
  line-height: 1; }
.testimonials .owl-theme .owl-dots {
  margin-top: 40px !important;
  display: flex;
  justify-content: center; }
.testimonials .owl-theme .owl-dots .owl-dot {
  outline: none; }
.testimonials .owl-theme .owl-dots .owl-dot span {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.75);
  opacity: 1; }
.testimonials .owl-theme .owl-dots .owl-dot.active span,
.testimonials .owl-theme .owl-dots .owl-dot.hover span {
  background: #F24259;
  border-color: #F24259; }

/*============================== 
    Contact
================================*/
.contact .map {
  padding: 0;
  position: relative;
  z-index: 4;
  min-height: 530px; }
.contact #ieatmaps {
  height: 100%; }
.contact .info {
  background: rgba(0, 0, 0, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  transition: all .5s; }
  .contact .info .icon-toggle {
    width: 100px;
    height: 100px;
    background: var(--accent, #F24259);
    font-size: 20px;
    transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 70px);
    right: -10px;
    border-radius: 5px;
    z-index: -1;
    cursor: pointer; }
    .contact .info .icon-toggle i {
      transform: rotate(-45deg) !important;
      position: absolute;
      right: 2px;
      top: 4px; }
  .contact .info .item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #444; }
    .contact .info .item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none; }
    .contact .info .item .icon {
      font-size: 20px;
      float: left;
      width: 50px;
      text-align: center;
      margin-top: 4px; }
    .contact .info .item .cont {
      margin-left: 55px; }
      .contact .info .item .cont h6 {
        font-size: 15px;
        margin-bottom: 0; }
      .contact .info .item .cont p {
        color: #999;
        margin: 0; }
/* Home: sin mapa, el panel negro (.info) cubre todo el alto de la columna (.map),
   para que el cuadro quede alineado de arriba a abajo con la caja del formulario. */
.contact .map.bg-black > .info {
  position: absolute;
  height: 100%; }
/* /contacto/: la columna izquierda (.col-lg-6 con el div .map.map-fill vacío) debe
   ser contenedor flex para que ese .map se estire al alto exacto de la columna y el
   overlay negro (.info, absolute con height:100%) cubra de arriba a abajo, sin hueco
   blanco cuando el formulario (columna derecha) es más alto. */
.contact .row > .col-lg-6.no-padding:first-child {
  display: flex;
  flex-direction: column; }
.contact .row > .col-lg-6.no-padding:first-child .map {
  flex: 1 1 auto;
  width: 100%; }
.contact .map-show {
  left: -100%; }
  .contact .map-show .icon-toggle {
    z-index: 2;
    transition-delay: .3s; }

/*============================== 
    Clients
 ================================*/
.clients .brand {
  padding: 40px 25px;
  opacity: .5; }
  .clients .brand:hover {
    opacity: 1; }
.clients .brand img {
  max-width: 120px;
  max-height: 80px;
  width: auto;
  height: auto; }
.clients-marquee {
  display: flex;
  width: 100%;
  overflow: hidden; }
  .clients-marquee .clients-track {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    animation: clients-scroll 40s linear infinite; }
  .clients-marquee:hover .clients-track {
    animation-play-state: paused; }

@keyframes clients-scroll {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .clients-marquee .clients-track {
    animation: none; }
  .clients-marquee {
    overflow-x: auto; } }


/*============================== 
    Blog
================================*/
.blog .item {
  box-shadow: 0px 5px 35px 0px rgba(148, 146, 245, 0.15);
  border-radius: 5px; }
  .blog .item .post-img {
    position: relative;
    overflow: hidden; }
    .blog .item .post-img:hover img {
      transform: scale(1.1); }
    .blog .item .post-img img {
      width: 100%;
      transition: all .5s; }
  .blog .item .content {
    padding: 30px;
    background: #fff;
    text-align: left; }
    .blog .item .content .tag {
      font-weight: 500;
      font-size: 12px;
      margin-bottom: 5px;
      letter-spacing: 1px; }
    .blog .item .content .author a {
      color: var(--accent, #F24259); }
    .blog .item .content .read-more {
      margin-top: 20px;
      text-decoration: underline; }
      .blog .item .content .read-more:hover {
        color: var(--accent, #F24259);
        text-decoration: none; }
    .blog .item .content h5 {
      font-weight: 600;
      font-size: 16px;
      line-height: normal;
      text-transform: inherit;
      margin-bottom: 5px; }

.blog-nav {
  position: static !important;
  background: #fff !important;
  margin: 0;
  top: 0;
  transform: translateY(0px); }
  .blog-nav .logo {
    color: #1c1c1c !important; }
  .blog-nav .navbar-nav .nav-link {
    color: #232323; }
  .blog-nav .icon-bar {
    color: #232323; }

.blog-header {
  background: #232323;
  position: relative; }
  .blog-header h5 {
    font-weight: 700;
    letter-spacing: 1px;
    color: #ccc;
    margin-bottom: 15px; }
  .blog-header a {
    position: relative; }
    .blog-header a:after {
      content: '/';
      position: relative;
      margin: 0 10px; }
    .blog-header a:last-child:after {
      display: none; }
    .blog-header a:hover {
      color: #fff; }
    .blog-header a.active {
      color: var(--accent, #F24259); }

.blogs .posts {
  /* pagination */ }
  .blogs .posts .post {
    margin-bottom: 30px; }
    .blogs .posts .post .content {
      padding: 30px;
      background: #fafafa; }
      .blogs .posts .post .content .post-title h5 {
        font-size: 26px;
        line-height: normal;
        font-weight: 500;
        margin-bottom: 0; }
        .blogs .posts .post .content .post-title h5 a {
          color: #232323; }
          .blogs .posts .post .content .post-title h5 a:hover {
            color: var(--accent, #F24259); }
      .blogs .posts .post .content .meta {
        margin-bottom: 15px; }
        .blogs .posts .post .content .meta li {
          display: inline-block;
          font-size: 12px;
          color: #777;
          margin: 5px; }
      .blogs .posts .post .content .spical {
        padding: 15px;
        margin: 30px 0;
        border-left: 2px solid #111;
        background: #f7f7f7;
        font-size: 16px; }
      .blogs .posts .post .content .btn {
        border-color: #6f6f6f;
        color: #6f6f6f;
        min-width: auto;
        padding: 6px 20px;
        font-size: 12px; }
        .blogs .posts .post .content .btn:hover {
          color: #fff;
          border-color: var(--accent, #F24259); }
    .blogs .posts .post .share-post {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px dashed #eee;
      text-align: left; }
      .blogs .posts .post .share-post span {
        font-weight: 700; }
      .blogs .posts .post .share-post ul {
        float: right; }
        .blogs .posts .post .share-post ul li {
          display: inline-block;
          margin: 0 10px; }
    .blogs .posts .post .post-img img {
      width: 100%; }
  .blogs .posts .title-g h3 {
    font-weight: 700;
    font-size: 25px; }
  .blogs .posts .comments-area .comment-box {
    padding-bottom: 30px;
    margin-bottom: 50px;
    border-bottom: 1px solid #eee; }
    .blogs .posts .comments-area .comment-box:nth-child(odd) {
      margin-left: 80px; }
    .blogs .posts .comments-area .comment-box:last-child {
      margin-bottom: 30px; }
    .blogs .posts .comments-area .comment-box .author-thumb {
      width: 80px;
      float: left; }
    .blogs .posts .comments-area .comment-box .comment-info {
      margin-left: 100px; }
      .blogs .posts .comments-area .comment-box .comment-info h6 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px; }
      .blogs .posts .comments-area .comment-box .comment-info .reply {
        margin-top: 10px;
        font-weight: 600; }
        .blogs .posts .comments-area .comment-box .comment-info .reply i {
          padding-right: 5px;
          font-size: 12px; }
  .blogs .posts .pagination {
    border-radius: 0;
    padding: 0;
    margin: 0; }
    .blogs .posts .pagination ul {
      display: inline-block;
      *display: inline;
      *zoom: 1;
      margin: 0 auto;
      padding: 0; }
    .blogs .posts .pagination li {
      display: inline; }
    .blogs .posts .pagination a {
      float: left;
      padding: 0 18px;
      line-height: 40px;
      text-decoration: none;
      border: 1px solid #dbdbdb;
      border-left-width: 0;
      background: #fff; }
      .blogs .posts .pagination a:hover {
        background-color: #232323;
        color: #fff; }
    .blogs .posts .pagination .active a {
      background-color: #f7f7f7;
      color: #999;
      cursor: default; }
    .blogs .posts .pagination .disabled span {
      color: #999;
      background-color: transparent;
      cursor: default; }
    .blogs .posts .pagination .disabled a {
      color: #999;
      background-color: transparent;
      cursor: default; }
      .blogs .posts .pagination .disabled a:hover {
        color: #999;
        background-color: transparent;
        cursor: default; }
    .blogs .posts .pagination li:first-child a {
      border-left-width: 1px; }
.blogs .side-bar .widget {
  margin-bottom: 30px; }
  .blogs .side-bar .widget:last-child {
    margin-bottom: 0; }
  .blogs .side-bar .widget .widget-title h6 {
    position: relative;
    padding-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px; }
    .blogs .side-bar .widget .widget-title h6:after {
      content: '';
      width: 30px;
      height: 1px;
      background: var(--accent, #F24259);
      position: absolute;
      bottom: 0;
      left: 0; }
  .blogs .side-bar .widget li {
    position: relative;
    padding: 0 0 0 12px;
    margin: 0 0 9px 0;
    color: #6f6f6f; }
    .blogs .side-bar .widget li:last-child {
      margin: 0; }
    .blogs .side-bar .widget li:after {
      content: "";
      width: 5px;
      height: 1px;
      background-color: #6f6f6f;
      position: absolute;
      top: 12px;
      left: 0; }
  .blogs .side-bar .widget .social-listing {
    margin-bottom: 0; }
    .blogs .side-bar .widget .social-listing li {
      list-style: none;
      display: inline-block; }
      .blogs .side-bar .widget .social-listing li:after {
        background: none; }
      .blogs .side-bar .widget .social-listing li:first-child {
        padding-left: 0; }
.blogs .side-bar .search form input {
  width: calc(100% - 50px);
  height: 50px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid #d1d1d1;
  background: #f7f7f7; }
.blogs .side-bar .search form button {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #1c1c1c;
  color: #fff;
  border: 0;
  float: right; }

/*============================== 
    Countdown Coming soon page
================================*/
.coming-soon .social-links li {
  display: inline-block;
  font-size: 22px;
  margin-right: 30px; }
  .coming-soon .social-links li:last-child {
    margin-right: 0; }

ul.countdown li {
  display: inline-block;
  padding: 0 30px;
  text-align: center;
  border-right: 1px solid #626262; }
  ul.countdown li:last-child {
    border: none;
    padding-right: 0; }
  ul.countdown li span {
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    position: relative; }
    ul.countdown li span:before {
      content: "";
      height: 1px;
      position: absolute;
      width: 100%; }
  ul.countdown li p.timeRefDays, ul.countdown li p.timeRefHours, ul.countdown li p.timeRefMinutes, ul.countdown li p.timeRefSeconds {
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-transform: uppercase; }

/*============================== 
    Footer
================================*/
.footer-top {
  padding: 80px 0px; }

.footer-bottom {
  padding: 30px 0px; }
  .footer-bottom a:hover {
    color: #000; }

.footer-social {
  margin-top: 24px; }
.footer-social a {
  display: inline-block;
  margin: 0 25px; }
  .footer-social a:first-child {
    margin-left: 0; }
  .footer-social a i {
    color: #626262;
    font-size: 22px; }
  .footer-social a:hover i {
    color: var(--accent, #F24259); }

.back-to-top {
  background: #6f6f6f;
  border-radius: 50%;
  position: fixed;
  z-index: 1000;
  right: 25px;
  bottom: 15px;
  width: 35px;
  height: 35px;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 350ms;
  -o-transition: opacity 350ms;
  transition: opacity 350ms; }
  .back-to-top i {
    position: absolute;
    left: 50%;
    top: 45%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px; }
  .back-to-top:hover {
    background: var(--accent, #F24259) !important; }
  .back-to-top.reveal {
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 1;
    filter: alpha(opacity=100); }
    .back-to-top.reveal:focus, .back-to-top.reveal:hover, .back-to-top.reveal:active {
      opacity: 1;
      filter: alpha(opacity=100); }

/*============================== 
    Responsive
================================*/
@media screen and (max-width: 991px) {
  .hero .story-video {
    min-height: 400px; }

  .navbar {
    border: none; }
    .navbar .navbar-collapse {
      background: #232323;
      text-align: center;
      margin-top: 15px;
      padding: 10px 0; }
    .navbar .nav-link {
      display: block; }

  .nav-scroll .navbar-collapse .nav-link {
    color: #fff !important; }
  .nav-scroll .navbar-collapse .active {
    color: var(--accent, #F24259) !important; }

  .header {
    transition-timing-function: none;
    -moz-transition-timing-function: none;
    -webkit-transition-timing-function: none;
    -o-transition-timing-function: none;
    -ms-transition-timing-function: none;
    transition-duration: 0s;
    -moz-transition-duration: 0s;
    -webkit-transition-duration: 0s;
    -o-transition-duration: 0s;
    -ms-transition-duration: 0s; }
    .header .caption h2 {
      font-size: 30px; }
    .header .caption h1 {
      font-size: 50px; }
    .header .caption p {
      font-size: 16px; }

  .clients {
    padding-bottom: 0; }
    .clients .brand {
      padding: 25px 15px; }
      .clients .brand img {
        max-width: 100px;
        max-height: 65px; }

  .contact .map {
    height: 530px; }
  .contact .info .icon-toggle {
    transform: rotate(135deg);
    top: calc(100% - 80px);
    right: calc(50% - 55px); }
    .contact .info .icon-toggle i {
      transform: rotate(-135deg) !important;
      right: 4px; }
  .contact .map-show {
    top: -100%;
    left: 0; }

  .blog-nav .navbar-nav .nav-link {
    color: #fff; }

  .footer-social a {
    margin: 0 15px; } }
@media screen and (max-width: 767px) {
  .header .caption h1 {
    font-size: 22px;
    margin-top: 5px; }
  .header .caption .btn {
    padding: 8px 15px;
    min-width: 140px;
    font-size: 12px; }
  .header .caption h3 {
    letter-spacing: 1px; }

  .hero .story-video {
    min-height: 360px; }

  .contact .map {
    height: 480px; }

  .btn {
    padding: 8px 15px;
    min-width: 140px;
    font-size: 12px; }

  .blogs .posts .post .content {
    padding: 20px; }
    .blogs .posts .post .content .post-title h5 {
      font-size: 22px; }

  ul.countdown li {
    padding: 0 8px; }

  .coming-soon .social-links li {
    margin-right: 15px; }

  ul.countdown li span {
    font-size: 22px; }

  .footer-top {
    padding: 55px 0; }

  .footer-social a {
    margin: 0 10px; } }

/*# sourceMappingURL=style.css.map */

/* ===== MINDS LOGO CSS TEXT ===== */
.navbar .logo .logo-main { color: #fff; transition: color 0.3s ease; }
.navbar .logo .logo-sub  { color: #e53935; transition: color 0.3s ease; }
.navbar.nav-scroll .logo .logo-main { color: #1a1a1a; }

/* ===== MINDS LOGO ===== */
/* El logo se muestra SIEMPRE a proporción natural (nunca estirado/pachirrado):
   ambos ejes en auto con límites de altura/anchura, de modo que cualquier logo
   subido (más ancho que alto, cuadrado, etc.) quepa en el navbar sin deformarse.
   El ancla .logo se ajusta al ancho real de la imagen en lugar de forzarlo a
   125px (donde un logo de ~220px se salía de su caja). */
.navbar .logo img {
  height: auto;
  width: auto;
  max-height: 55px;
  max-width: 220px;
  transition: filter 0.3s ease, drop-shadow 0.3s ease;
}
/* En estado inicial (hero oscuro) — logo amarillo natural, sin filtro */
/* Al hacer scroll la navbar cambia a fondo blanco — añadir sombra para que el amarillo resalte */
.navbar.nav-scroll .logo img {
    filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.4));
}

/* ===== SWAP DE LOGO ON-SCROLL (logo_secundario) ===== */
/* Cuando existe logo_secundario, el navbar renderiza dos <img> (.logo-img-default y
   .logo-img-scroll). En estado inicial se muestra el principal (claro, sobre hero oscuro)
   y al hacer scroll (nav-scroll, navbar blanca) se muestra el secundario (oscuro).
   El oculto se quita del layout para que no superponga al visible. */
.navbar .logo .logo-img-scroll { display: none; }
.navbar.nav-scroll .logo .logo-img-default { display: none; }
.navbar.nav-scroll .logo .logo-img-scroll { display: inline-block; }

/* ===== FORMULARIO DE CONTACTO (AJAX) ===== */
/* Mapa de /contacto/: llena la columna (el panel .info oscuro va encima, deslizable) */
.contact .map-fill { position: relative; min-height: 480px; }
.contact .map-fill > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Mapa del home: iframe llena el .map (que ya tiene height en breakpoints responsive) */
.contact .map > iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Errores por campo pintados por main.js bajo cada input inválido */
.contact-error-slot { display: none; }
.contact-error-slot.contact-field-error { display: block; color: #e91e63; font-size: 12px; margin-top: -10px; margin-bottom: 12px; }
/* Honeypot anti-spam: campo oculto para bots, invisible para humanos */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* Mensaje global de éxito/error sin recargar la página */
.contact-alert { padding: 12px 18px; margin-bottom: 20px; font-size: 13px; letter-spacing: .5px; border-radius: 0; }
.contact-alert-success { background: #f0faf1; color: #2e7d32; border: 1px solid #43a047; }
.contact-alert-error { background: #fdeeee; color: #c62828; border: 1px solid #ef5350; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* ===== EQUIPO: carrusel con pocas fotos ===== */
/* Owl fija el ancho del stage en px; con menos miembros que slots (ej. 2 de 4)
   el stage queda m�s angosto que el contenedor y los m�rgenes auto lo centran,
   manteniendo cada foto al tama�o del template (25% desktop / 50% tablet). */
.team-style .owl-stage { margin-left: auto; margin-right: auto; }

/* ===== VARIANTE BLOG (navbar clara) ===== */
/* Las p�ginas de blog (lista y detalle) usan la clase .blog-nav del template
   Dicor: navbar blanca est�tica con texto oscuro. Como esas p�ginas no tienen
   hero oscuro, el logo debe ser siempre el secundario (oscuro), sin depender
   de la clase nav-scroll que scripts.js toglea con el scroll. */
.blog-nav .logo .logo-img-default { display: none; }
.blog-nav .logo .logo-img-scroll { display: inline-block; }
@media screen and (max-width: 991px) {
  /* El men� colapsado m�vil tiene fondo oscuro (#232323); los links deben
     quedar claros aunque no se haya hecho scroll (sin nav-scroll). */
  .blog-nav .navbar-collapse .nav-link { color: #fff; }
}

/* ===== POPUP DE VIDEO PROPIO (Sección Nosotros) ===== */
/* Video mp4 alojado en el sitio, reproducido inline (no via iframe) para
   evitar el bloqueo por la cabecera X-Frame-Options que Django agrega
   por defecto a todas las respuestas, incluyendo los archivos de /media/. */
.popup-video-wrapper { width: 100%; max-width: 900px; margin: 0 auto; line-height: 0; background: transparent; }
.mfp-content .popup-video-wrapper video { max-height: 92vh; }

/* ===== PORTAFOLIO (home "Nuestro Trabajo Creativo"): carrusel de tarjetas verticales 9:14 ===== */
/* Tarjeta estilo Stories/Portrait, notablemente más larga: relación 9:14 con tope
   de 520px en escritorio y 440px en móvil (mejor adaptabilidad sin desbordar la
   vista). Utilidad .card-contain para piezas publicitarias (empaques, mockups,
   cajas) cuyo texto o producto no debe recortarse. */
.portfolio .pf-carousel { padding: 0.5rem 0; }
.portfolio .portfolio-swiper { padding-bottom: 0; }
.portfolio .pf-carousel-card { position:relative; aspect-ratio:9/14; width:100%; background:#e8e8e8; border-radius:20px; box-shadow:0 8px 24px rgba(0,0,0,0.08); overflow:hidden; transition:box-shadow .3s ease; }
.portfolio .pf-carousel-card:hover, .portfolio .pf-carousel-card.active { box-shadow:0 14px 32px rgba(0,0,0,0.14); }
.portfolio .pf-carousel-media { position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; }
.portfolio .pf-carousel-media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .6s ease; }
/* Utilidad para elementos publicitarios: el producto/texto se ve completo sobre un
   fondo neutro con aire. Se aplica añadiendo `class="... card-contain"` al <img>. */
.portfolio .pf-carousel-media img.card-contain { object-fit:contain; background:#f0f2f5; padding:15px; }
.pf-grid .pf-media img.card-contain { object-fit:contain; background:#f0f2f5; padding:15px; }
.portfolio .pf-carousel-card:hover .pf-carousel-media img, .portfolio .pf-carousel-card.active .pf-carousel-media img { transform:scale(1.04); }
.portfolio .pf-carousel-badge { position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; background:#fff; color:var(--accent,#F24259); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -10px rgba(35,35,35,.55); z-index:3; }
.portfolio .pf-carousel-overlay { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:70px 18px 18px; background:linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,.45) 45%, rgba(8,8,8,.92) 100%); }
.portfolio .pf-carousel-cat { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent,#F24259); margin-bottom:6px; }
.portfolio .pf-carousel-title { margin:0 0 6px; font-weight:600; font-size:16px; line-height:1.4; color:#fff; }
.portfolio .pf-carousel-desc { margin:0; font-size:13px; line-height:1.5; color:rgba(255,255,255,.85); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.portfolio .pf-carousel-acciones { display:flex; gap:8px; margin-top:12px; }
.portfolio .pf-carousel-cat, .portfolio .pf-carousel-title, .portfolio .pf-carousel-desc, .portfolio .pf-carousel-acciones { opacity:0; transform:translateY(14px); transition:opacity .35s ease, transform .35s ease; }
.portfolio .pf-carousel-cat { transition-delay:.05s; }
.portfolio .pf-carousel-title { transition-delay:.1s; }
.portfolio .pf-carousel-desc { transition-delay:.15s; }
.portfolio .pf-carousel-acciones { transition-delay:.2s; }
.portfolio .pf-carousel-card:hover .pf-carousel-cat, .portfolio .pf-carousel-card:hover .pf-carousel-title, .portfolio .pf-carousel-card:hover .pf-carousel-desc, .portfolio .pf-carousel-card:hover .pf-carousel-acciones,
.portfolio .pf-carousel-card.active .pf-carousel-cat, .portfolio .pf-carousel-card.active .pf-carousel-title, .portfolio .pf-carousel-card.active .pf-carousel-desc, .portfolio .pf-carousel-card.active .pf-carousel-acciones { opacity:1; transform:none; }
.portfolio .pf-carousel-btn { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--accent,#F24259); box-shadow:0 10px 20px -12px rgba(35,35,35,.8); transition:background .25s ease,color .25s ease,transform .25s ease; }
.portfolio .pf-carousel-btn:hover { background:var(--accent,#F24259); color:#fff; transform:scale(1.08); }
.portfolio .pf-carousel-empty { padding:40px 0; }
/* Bullets: estáticos bajo el carrusel, centrados, con separación de 20px y
   color primario de marca en el slide activo. */
.portfolio .portfolio-swiper .swiper-pagination { position:static; width:100%; margin-top:20px; }
.portfolio .portfolio-swiper .swiper-pagination-bullet { background:rgba(242,66,89,.4); opacity:1; width:8px; height:8px; }
.portfolio .portfolio-swiper .swiper-pagination-bullet-active { background:var(--accent,#F24259); }
/* Flechas: centradas verticalmente sobre la zona de slides, fondo semitransparente
   y hover sutil. El top usa calc para no caer encima de los bullets. */
.portfolio .portfolio-swiper .swiper-button-prev, .portfolio .portfolio-swiper .swiper-button-next { top:calc(50% - 20px); transform:translateY(-50%); color:var(--accent,#F24259); width:38px; height:38px; background:rgba(255,255,255,0.9); border-radius:50%; box-shadow:0 8px 18px -12px rgba(35,35,35,.9); transition:background .25s ease, box-shadow .25s ease, transform .25s ease; }
.portfolio .portfolio-swiper .swiper-button-prev:hover, .portfolio .portfolio-swiper .swiper-button-next:hover { background:#fff; box-shadow:0 10px 22px -10px rgba(35,35,35,.95); }
.portfolio .portfolio-swiper .swiper-button-prev:after, .portfolio .portfolio-swiper .swiper-button-next:after { font-size:14px; font-weight:700; }
.portfolio .portfolio-swiper .swiper-button-prev { left:4px; }
.portfolio .portfolio-swiper .swiper-button-next { right:4px; }
@media (max-width:575px){ .portfolio .portfolio-swiper .swiper-button-prev{ left:-4px;} .portfolio .portfolio-swiper .swiper-button-next{ right:-4px;} }
.pf-carousel .swiper-slide { height:auto; }
/* Los slides filtrados fuera de vista se ocultan (no `display:none` en Swiper
   puro: se marca la clase y `swiper.update()` reacomoda la retícula). */
.pf-carousel .swiper-slide-hidden { display: none !important; }

/* Fallback móvil: si Swiper no se inicializa (o falla el bundle), la barra de
   filtros del home hace scroll horizontal para que quepan todos los botones. */
@media (max-width: 767px) {
  .portfolio .filtering {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .portfolio .filtering::-webkit-scrollbar {
    display: none;
  }

  .portfolio .filtering span {
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 0 !important;
  }
}

/* Overlay styles */
/* ===== SERVICIOS: prevenir desbordamiento de tarjetas con texto largo ===== */
/* Cuando el contenido del párrafo contiene palabras sin espacios (URLs, textos
   de prueba), el min-width:auto del contenedor flex-column expande la tarjeta
   más allá del ancho de la columna. min-width:0 permite encogerse y el
   word-break rompe palabras demasiado largas para que no desborden. */
.services .feature-box2 { min-width: 0; }
.services .feature-box2 p  { overflow-wrap: anywhere; word-break: break-word; }

/* ===== X de cierre en los popups de vista previa del portafolio ===== */
/* Magnific Popup ya incluye un boton de cierre (.mfp-close), aqui se hace
   prominente y consistente para imagenes, videos y disenios del portafolio. */
.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  background: rgba(35, 35, 35, 0.85);
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  font-family: Arial, sans-serif;
  opacity: 1;
  text-align: center;
  top: 12px;
  right: 12px;
  z-index: 1047;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.2s, transform 0.2s;
}
.mfp-close:hover,
.mfp-close:focus {
  background: var(--accent, #f24259);
  opacity: 1;
  transform: scale(1.1);
}
.mfp-image-holder .mfp-close,
.mfp-inline-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  right: 12px;
  text-align: center;
  padding-right: 0;
  width: 44px;
}
@media (max-width: 767px) {
  .mfp-close { top: 8px; right: 8px; width: 38px; height: 38px; line-height: 38px; font-size: 22px; }
}

/* ===== POPUP DE VIDEO "NUESTRO EQUIPO" adaptado a la orientacion ===== */
/* El mismo popup inline sirve para videos horizontales (16:9) y verticales
   (9:16, estilo TikTok/Reels). Con .popup-video-adapt el video se centra
   respetando su proporcion real (sin estirarse a todo el ancho ni dejar
   franjas ni recuadro negro); la clase .vertical (añadida por JS en
   scripts.js segun videoHeight/videoWidth) ciñe el popup a una columna
   estrecha. El contenedor es transparente; el atenuado semitransparente
   de Magnific (.mfp-bg, opacity 0.8) se conserva para el fondo negro
   translucido al reproducir. */
.popup-video-adapt { line-height: 0; background: transparent; }
.popup-video-adapt video {
  width: auto;
  max-width: 100%;
  max-height: 92vh;
  height: auto;
  margin: 0 auto;
  display: block;
}
.popup-video-adapt.vertical {
  max-width: 430px;
  border-radius: 24px;
  overflow: hidden;
}
.popup-video-adapt.vertical video {
  width: 100%;
  height: auto;
}
@media (max-width: 575px) {
  .popup-video-adapt.vertical { max-width: 370px; }
}

/* ===== PORTAFOLIO (página /portafolio/): versión minimalista ===== */
/* Diseño limpio: mucho espacio en blanco, tipografía fina y galería
   uniforme sin bordes ni cajas pesadas. Acento rosa Dicor (--accent). */
.portfolio-min .portfolio-min-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 45px;
  margin: 30px 0 50px;
}
.portfolio-min .portfolio-min-links a {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9da5ae;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.portfolio-min .portfolio-min-links a:hover { color: #F24259; border-bottom-color: #F24259; }
.portfolio-min .gallery .items { margin-bottom: 16px; }
.portfolio-min .gallery .item-img {
  position: relative;
  height: 260px;
  margin-bottom: 14px;
  overflow: hidden;
}
.portfolio-min .gallery .item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.portfolio-min .gallery .items:hover .item-img img { transform: scale(1.04); }
.portfolio-min .item-min-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px 12px;
  text-align: left;
  background: linear-gradient(to top, rgba(35,35,35,.72), rgba(35,35,35,0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.portfolio-min .gallery .items:hover .item-min-overlay { opacity: 1; transform: none; }
.portfolio-min .item-min-overlay .min-cat {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F24259;
}
.portfolio-min .item-min-overlay .min-title {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.portfolio-min .min-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35,35,35,.25);
  transition: background .3s, border-color .3s;
}
.portfolio-min .gallery .items:hover .min-play { background: #F24259; border-color: #F24259; }
@media (max-width: 991px) {
  .portfolio-min .gallery .item-img { height: 220px; }
}
@media (max-width: 575px) {
  .portfolio-min .gallery .item-img { height: 200px; }
}

/* ===== PORTFOLIO: retícula uniforme de tarjetas (/portafolio/) ===== */
/* Página /portafolio/ usa una cuadrícula regular de 3 columnas (2 en tablets,
   1 en móvil) con tarjetas de altura constante. Isotope se inicializa igual
   (selectores .gallery/.items/.filtering), pero al ser todas las tarjetas del
   mismo alto el resultado es una rejilla pareja, sin mosaico de alturas. */
/* ===== PORTFOLIO (/portafolio/): retícula uniforme, NO es el grid del home =====
   OJO: esta página NO usa el CSS Grid del home. `.pf-media` y
   `.pf-caption` tienen alto fijo a propósito (260 + 170) y las columnas las
   pone Bootstrap (`col-md-6 col-lg-4`). No le "extiendas" el grid del home
   sin que se pida. */

/* Hero oscuro compacto: padding vertical máximo 2.5rem y solo 20px de aire
   hacia la barra de filtros, que así queda above the fold sin scroll. */
.pf-hero { padding: 2.5rem 0 20px; }
.pf-hero h5 { margin-bottom: 0; }

/* El contenedor de tarjetas NO es `.row`, así que en BS4 las `col-md-6 col-lg-4`
   no flotan ni se acomodan solas (BS4 depende de un padre flex). Sin Isotope
   (ver scripts.js) quedarían apiladas a una columna. Se fuerza flex-wrap para
   que las columnas formen la retícula responsiva y, al filtrar con display:none
   desde el JS vanilla, los tiles restantes refluyan sin huecos ni descuadres.
   `align-items:stretch` + `.pf-card{height:100%}` mantiene todas las tarjetas a
   la misma altura por fila aunque varíe el largo del título/descripción. */
.pf-grid .gallery { display: flex; flex-wrap: wrap; }
/* Por debajo de `md` ningún `col-*` está activo, así que se fuerza ancho completo
   para que las tarjetas apilen de a una (arriba de ese corte manda BS con
   col-md-6 / col-lg-4). Media-query en vez de regla base para no pisar por
   especificidad los breakpoints de Bootstrap. */
@media (max-width: 767.98px) {
  .pf-grid .gallery .items { flex: 0 0 100%; max-width: 100%; }
}
.pf-grid .gallery .items { margin-bottom: 30px; transition: opacity .3s ease, transform .3s ease; }
/* Salida de los tiles al filtrar (el JS vanilla de scripts.js añade/quita la
   clase y pone display:none al terminar la transición). */
.pf-grid .gallery .items.pf-out { opacity: 0; transform: scale(.92); }

.pf-grid .pf-filter {
  border-bottom: 1px solid rgba(35, 35, 35, 0.12);
  padding-bottom: 0;
  margin-bottom: 40px;
}
.pf-grid .pf-filter span {
  display: inline-block;
  margin: 0 4px;
  padding: 10px 26px;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #666;
  cursor: pointer;
  background: transparent;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.pf-grid .pf-filter span:hover {
  color: var(--accent, #F24259);
}
.pf-grid .pf-filter span.active {
  background: transparent;
  border-bottom-color: var(--accent, #F24259);
  color: var(--accent, #F24259);
}

.pf-grid .pf-card {
  height: 100%;
  background: #fff;
  border: 1px solid rgba(35, 35, 35, 0.08);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 24px -18px rgba(35, 35, 35, 0.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
.pf-grid .pf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -22px rgba(35, 35, 35, 0.4);
}

.pf-grid .pf-media {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: #e8e8e8;
}
.pf-grid .pf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.pf-grid .pf-card:hover .pf-media img { transform: scale(1.05); }

.pf-grid .pf-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 35, 35, 0.35);
  opacity: 0;
  transition: opacity .3s ease;
}
.pf-grid .pf-card:hover .pf-overlay { opacity: 1; }

.pf-grid .pf-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--accent, #F24259);
  font-size: 16px;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.pf-grid .pf-btn:hover {
  background: var(--accent, #F24259);
  color: #fff;
  transform: scale(1.08);
}

.pf-grid .pf-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  height: 170px;
  padding: 22px 20px 26px;
  overflow: hidden;
}
.pf-grid .pf-cat {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent, #F24259);
}
.pf-grid .pf-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #232323;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pf-grid .pf-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #777;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 991px) {
  .pf-grid .pf-media { height: 230px; }
  .pf-grid .pf-caption { height: 160px; }
}
@media (max-width: 575px) {
  .pf-grid .pf-media { height: 210px; }
  .pf-grid .pf-caption { height: 150px; }
}

/* ===== PORTFOLIO: paginación propia y centrada ===== */
/* El bloque .pagination del blog está scoped bajo .blogs .posts, así que la
   página /portafolio/ usa .pf-pagination con botones uniformes y centrados. */
.pf-grid .pf-pagination {
  width: 100%;
  margin-top: 60px;
  text-align: center;
}
.pf-grid .pf-pagination ul {
  display: inline-flex;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  gap: 8px;
}
.pf-grid .pf-pagination li a,
.pf-grid .pf-pagination li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(35, 35, 35, 0.18);
  border-radius: 6px;
  background: #fff;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: all .25s ease;
}
.pf-grid .pf-pagination li a:hover {
  background: var(--accent, #F24259);
  border-color: var(--accent, #F24259);
  color: #fff;
}
.pf-grid .pf-pagination li.active a {
  background: var(--accent, #F24259);
  border-color: var(--accent, #F24259);
  color: #fff;
  cursor: default;
}
.pf-grid .pf-pagination li.disabled span,
.pf-grid .pf-pagination li.disabled a {
  background: #f7f7f7;
  border-color: #eee;
  color: #bbb;
  cursor: not-allowed;
}
@media (max-width: 575px) {
  .pf-grid .pf-pagination ul { flex-wrap: wrap; justify-content: center; }
  .pf-grid .pf-pagination .pf-prev .xs-display-none,
  .pf-grid .pf-pagination .pf-next .xs-display-none { display: none; }
}

/* ===== TESTIMONIOS: formulario público en tarjeta con banda de color (/testimonio/nuevo/) ===== */
/* Tarjeta única de dos zonas: banda superior con el color de acento del sitio
   (var(--accent), configurable desde Configuración del Sitio) + título en blanco,
   y cuerpo blanco con el formulario (inputs tipo "pill", labels en el color de
   acento). navbar_class="blog-nav" en PublicTestimonialView evita que el navbar
   (position:absolute por defecto) se superponga al fondo claro de la sección. */
.testimonial-form-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 20px 45px -22px rgba(35, 35, 35, 0.35);
}

.testimonial-form-banner {
  background: var(--accent, #F24259);
  padding: 45px 40px;
  text-align: center;
}
.testimonial-form-banner h1 {
  margin: 0;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .3px;
  text-transform: none;
}
.testimonial-form-banner p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.testimonial-form-body {
  background: #fff;
  padding: 50px;
}

/* Estructura interna del formulario: cada campo es su propio bloque con
   espaciado consistente (antes los campos quedaban "pegados" entre sí y
   contra los bordes de la tarjeta al depender solo de utilidades sueltas). */
.testimonial-form-card .form-hint {
  margin: 0 0 28px;
  color: #888;
  font-size: 13px;
}
.testimonial-form-card .form-field {
  margin-bottom: 26px;
}
.testimonial-form-card .form-field:last-of-type {
  margin-bottom: 0;
}
.testimonial-form-card .form-field > label {
  display: block;
  margin-bottom: 10px;
  color: var(--accent, #F24259);
  font-weight: 600;
  font-size: 15px;
}
.testimonial-form-card .required-mark {
  color: #e5384d;
}

/* Inputs tipo "pill": relleno claro y sin borde visible, en vez del
   rectángulo con borde gris por defecto de Bootstrap (.form-control). */
.testimonial-form-card .form-field input[type="text"],
.testimonial-form-card .form-field input[type="email"],
.testimonial-form-card .form-field input[type="tel"],
.testimonial-form-card .form-field textarea {
  width: 100%;
  background: #f2f1f5;
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 15px 24px;
  color: #232323;
  transition: background .2s ease, box-shadow .2s ease;
}
.testimonial-form-card .form-field textarea {
  border-radius: 22px;
  resize: vertical;
}
.testimonial-form-card .form-field input[type="text"]:focus,
.testimonial-form-card .form-field input[type="email"]:focus,
.testimonial-form-card .form-field input[type="tel"]:focus,
.testimonial-form-card .form-field textarea:focus {
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 2px var(--accent, #F24259) inset;
}

/* Fila de dos campos (Nombre/Email del formulario de contacto): rejilla de
   dos columnas que colapsa a una en móvil, con separación fija entre celdas
   para que los pills no se peguen ni se descuadren. */
.testimonial-form-card .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
@media (max-width: 575px) {
  .testimonial-form-card .form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* Casilla de consentimiento: fila flex explícita para que el checkbox quede
   siempre a la izquierda del texto (alineado a su primera línea), en vez de
   depender del <label> envolvente (que podía romper a su propia línea). El
   checkbox se estiliza como un círculo relleno (appearance:none) acorde al
   resto de controles redondeados de este formulario. */
.testimonial-form-card .form-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.testimonial-form-card .form-consent-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: #f2f1f5;
  cursor: pointer;
  position: relative;
  transition: background .2s ease;
}
.testimonial-form-card .form-consent-row input[type="checkbox"]:checked {
  background: var(--accent, #F24259);
}
.testimonial-form-card .form-consent-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.testimonial-form-card .form-consent-row input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(35, 35, 35, 0.15);
  outline: none;
}
.testimonial-form-card .form-consent-row label {
  margin: 0;
  font-weight: 400;
  color: #555;
  line-height: 1.5;
  cursor: pointer;
}

/* Botón "Enviar Testimonio": píldora rellena con el color de acento,
   centrada (en vez del botón cuadrado con borde que usa el resto del sitio). */
.testimonial-form-card .form-submit {
  margin-top: 34px;
  text-align: center;
}
.testimonial-form-card .form-submit .btn {
  min-width: 220px;
  padding: 15px 20px;
  border-radius: 30px;
  background: var(--accent, #F24259);
  border-color: var(--accent, #F24259);
  color: #fff;
}
.testimonial-form-card .form-submit .btn:hover,
.testimonial-form-card .form-submit .btn:focus {
  background: #fff;
  color: var(--accent, #F24259);
  border-color: var(--accent, #F24259);
}

@media (max-width: 575px) {
  .testimonial-form-banner { padding: 34px 24px; }
  .testimonial-form-banner h1 { font-size: 22px; }
  .testimonial-form-body { padding: 32px 22px; }
}

/* ERROR 404 — página de error del sitio sin imagen de fondo (breadcrumb sólido
   .blog-header + sección centrada sobre blanco). La navbar usa .blog-nav para
   mantenerse blanca/estática sobre el fondo claro. */
.error404-section .error404-icon {
  font-size: 40px;
  color: var(--accent, #F24259);
  margin-bottom: 10px;
}
.error404-section .error404-code {
  font-size: clamp(96px, 16vw, 150px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -3px;
  background: linear-gradient(135deg, var(--accent, #F24259), #ff8fa0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error404-section .error404-title {
  font-weight: 300;
  font-size: 34px;
  color: #232323;
  margin: 8px 0 14px;
}
.error404-section .error404-text {
  font-size: 15px;
  line-height: 1.7;
  color: #6c6c6c;
  max-width: 560px;
  margin: 0 auto 30px;
}
.error404-section .error404-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.error404-section .error404-actions .btn {
  min-width: 190px;
  padding: 13px 24px;
}

/* ===== ALERTS PERSONALIZADAS (sitio público) ===== */
/* Mensajes Django (base.html/home) y feedback AJAX del formulario de contacto:
   .alert / .contact-alert pasan de los recuadros Bootstrap planos a tarjetas
   suaves con esquinas redondeadas, barra de acento a la izquierda y sombra
   sutil, acordes a la estética pill del sitio. */
.alert,
.contact-alert {
  border: none;
  border-left: 4px solid var(--accent, #F24259);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 18px;
  font-size: 13.5px;
  letter-spacing: .3px;
  line-height: 1.6;
  box-shadow: 0 12px 28px -16px rgba(35, 35, 35, 0.25);
}
.alert-success,
.contact-alert-success {
  background: #eef9f2;
  color: #1e7b4c;
  border-left-color: #2fb380;
}
.alert-danger,
.alert-error,
.contact-alert-error {
  background: #fdf0f1;
  color: #c03946;
  border-left-color: #e5384d;
}
.alert-warning {
  background: #fff7e7;
  color: #8a5a00;
  border-left-color: #f5a623;
}
.alert-info {
  background: #eef3fb;
  color: #2b4b8b;
  border-left-color: #5b7fd4;
}
/* Botón de cierre del `.alert-dismissible` de los mensajes Django */
.alert .close {
  opacity: .55;
  color: inherit;
  text-shadow: none;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}
.alert .close:hover,
.alert .close:focus {
  opacity: 1;
}

/* Errores de formulario dentro de las tarjetas (testimonio/contacto): los
   `.alert.alert-danger` heredan el estilo de arriba; los inputs inválidos del
   formulario AJAX se señalan bajo su campo sin distorsionar los pills. */
.contact-error-slot.contact-field-error {
  display: block;
  color: #c03946;
  font-size: 12px;
  margin: 8px 2px 0;
  padding-left: 14px;
}