
.espacios {
  margin-top: 80px;
  margin-bottom: 120px; }

  /* ======================================
   BLOG HERO FRAME
====================================== */

.heroFrame{
  position:relative;
  overflow:hidden; }

/* ===== HERO EDITORIAL FRAME ===== */

.heroFrame::after{
  content:'';
  position:absolute;
  inset:26px;
  border:1px solid rgba(255,255,255,.52);
  box-shadow: inset 0 0 0 1px rgba(168,146,108,.26);
  pointer-events:none;
  z-index:3;
  opacity:.92;
  transition: opacity .8s ease, transform 1.1s ease; }

.heroFrame:hover::after{ transform:scale(.992); }


/* ====HERO NARROW EDITORIAL============================= */

.heroNarrow{
  width:35%;
  margin:90px auto;
  transition:.6s ease; }

/* =====HERO DIVIDERS====================================== */

.heroDivider{
  width:clamp(120px,16vw,220px);
  height:1px;
  margin:38px auto;
  position:relative;
  background: linear-gradient( 90deg, transparent, rgba(168,146,108,.9), transparent ); }

.heroDivider::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:10px;
  height:10px;
  border:1px solid rgba(133,90,37,.45);
  background:#eef0ea;
  rotate:45deg; }

/* spacing */
.topDivider{ margin-top:90px;}

.bottomDivider{
  margin-top:25px;
  margin-bottom:15px; }

/* =====HERO OUTER EDITORIAL LINES====================================== */

.heroOuter{
  position:relative;
  overflow:visible !important;
  z-index:3; }

.blog-intro {
  text-align: center;
  padding: 60px 20px 0;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.19,1,.22,1); }

.blog-intro p {
  font-family: "Viaoda Libre", serif;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: 3px;
  line-height: 1.6;
  color: #855a25;
  max-width: 1400px;
  margin: 0 auto; }

.blog-intro .blog-sub-fix{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  max-width:none;
  margin-bottom:18px;
  color: #fff; }

.blog-intro.active-intro {
  opacity: 1;
  transform: translateY(0); }

.blog-intro p,
.blog-intro .contact-line {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.19,1,.22,1); }

.blog-intro.active-intro p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; }

.blog-intro.active-intro .contact-line {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s; }

.blog-intro .margen{ margin-bottom:60px; }


/* ===== BLOG INTRO PREMIUM ===== */

.blog-intro-copy p{
  line-height:1.95;
  margin-bottom:32px;
  text-wrap:pretty; }

.blog-intro-copy h2{
  font-family:"Viaoda Libre",serif;
  color:#3b4a3b;
  font-size:clamp(1.55rem,2vw,2rem);
  line-height:1.6;
  max-width:1000px;
  margin:60px auto;
  font-weight:450; }

/* ===== BLOG IMAGE FRAME ===== */

.blogFrame picture{
  position:relative;
  display:block;
  overflow:hidden; }

/* ===== HERO CINEMATIC IMAGE ===== */
.blogFrame img{
  transition: transform 1.8s cubic-bezier(.19,1,.22,1), filter 1.2s ease;
  transform:scale(1.04);
  animation: heroBreath 12s ease-in-out infinite; }

.blogFrame:hover img{ transform:scale(1.08); }

/* ===== SLOW BREATH ===== */
@keyframes heroBreath{
  0%{ transform: scale(1.04) translateY(0); }
  50%{ transform: scale(1.085) translateY(-6px); }
  100%{ transform: scale(1.04) translateY(0); }
}

.blogFrame:hover img{ transform:scale(1.06); }

.blogFrame picture::before{
  content:'';
  position:absolute;
  top:-24px;
  left:-24px;
  width:38%;
  height:38%;
  border-top:1px solid rgba(168,146,108,.7);
  border-left:1px solid rgba(168,146,108,.7);
  transition:transform .5s ease; }

.blogFrame picture:hover::before{ transform:translate(-6px,-6px); }

/* ===== BLOG MICRO OVERLINE ===== */

.blogMicro{
  display:block;
  text-align:center;
  color:#a8926c;
  font-size:.85rem;
  letter-spacing:5px;
  text-transform:uppercase;
  margin:0 auto 14px;
  opacity:1;
  transform:none; }

/* =====BLOG PAPER EDITORIAL SYSTEM======================================= */
/* ===== PAPER EDITORIAL SYSTEM ===== */

.blog-intro-copy,
.blogClosing,
.tips-editorial .texto.blog{
  width:92%;
  margin:80px auto;
  padding:110px 10%;
  box-sizing:border-box;
  position:relative;
  box-shadow: 0 18px 45px rgba(0,0,0,.045);
  background-size:cover;
  background-position:center; }

/* ===== PAPER TEXTURE SYSTEM ===== */

.blog-intro-copy,
.blogClosing,
.tips-editorial .texto.blog{
 background: radial-gradient( circle at 18% 22%, rgba(255,255,255,.42), transparent 34%),
             radial-gradient( circle at 78% 72%, rgba(22,31,22,.055),  transparent 36% ),
             repeating-linear-gradient( 0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 2px, transparent 2px, transparent 5px),
             linear-gradient( 180deg, #f7f5f0 0%, #eef0ea 100% ); }

/* ===== DUAL EDITORIAL FRAME ===== */
.blog-intro-copy::after,
.blogClosing::after,
.tips-editorial .texto.blog::after{
  content:'';
  position:absolute;
  inset:22px;
  border:1px solid rgba(133,90,37,.32);
  box-shadow: inset 0 0 0 1px rgba(22,31,22,.12);
  pointer-events:none;
  opacity:0;
  transform:scale(.96);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.19,1,.22,1); }

/* ===== PAPER GRAIN ===== */

.blog-intro-copy::before,
.blogClosing::before,
.tips-editorial .texto.blog::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background: repeating-linear-gradient( 0deg, rgba(255,255,255,.06) 0px, rgba(255,255,255,.06) 1px, transparent 1px, transparent 4px),
              repeating-linear-gradient( 90deg, rgba(22,31,22,.018) 0px, rgba(22,31,22,.018) 1px, transparent 1px, transparent 5px);
  mix-blend-mode:multiply; }

.blogReveal::after{
  opacity:1;
  transform:scale(1); }

/* ===== INTRO ===== */

.blog-intro-copy{ position:relative; }

/* ===== BLOG HERO H1 ===== */

.blog-intro-copy h1{
  font-size:clamp(2.7rem,4.3vw,4.4rem);
  line-height:1.18;
  letter-spacing:1px;
  max-width:950px;
  margin:38px auto 70px;
  text-wrap:balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 8px 22px rgba(0,0,0,.36); }

.blog-intro-copy h2{
  font-family:"Viaoda Libre",serif;
  color:#855a25;
  font-size:clamp(1.55rem,2vw,2rem);
  line-height:1.6;
  max-width:1000px;
  margin:60px auto;
  font-weight:400; }

/* ===== ARTICLE TEXT SYSTEM ===== */

.blog-intro-copy p,
.blogClosing p,
.tips-editorial p{
  font-size:clamp(1.28rem,1.36vw,1.46rem);
  line-height:1.82;
  font-weight:400;
  letter-spacing:.2px;
  color:#1f261f !important;
  text-wrap:pretty;
  margin-bottom:34px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto; }

/* ===== TEXT EMPHASIS ===== */

.blogStrong{
  color:#855a25;
  font-weight:500;
  position:relative;
  display:inline-block; }

.blogStrong::after{
  content:'';
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:7px;
  background: rgba(133,90,37,.28);
  z-index:-1; }

/* ===== CLOSING ===== */

.blogClosing{ position:relative; }

.blogClosing::before{
  content:'';
  display:block;
  width:140px;
  height:1px;
  background:#a8926c;
  margin:0 auto 55px; }

.blogClosing h2{
  font-family:"Viaoda Libre",serif;
  color:#3b4a3b;
  line-height:1.65;
  font-weight:500;
  margin:50px auto;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 2px 10px rgba(22,31,22,.06); }

/* ===== CONTACT FINAL ===== */
.contact-final {
  position: relative;
  text-align: center;
  padding: 200px 20px;
  color: #e1e1e0;
  overflow: hidden; }

.contact-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/portfolio/fotografo-bodas-destino-mexico-jesus-amaya-weddings-p34.jpg") center/cover no-repeat;
  background-attachment: fixed;
  z-index: 0; }

.contact-final::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(22,31,22,0.6), rgba(22,31,22,0.4));
  z-index: 1; }

.contact-final-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto; }

.contact-sub {
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #a8926c;
  margin-bottom: 30px; }

.contact-final h2 {
  font-family: "Viaoda Libre", serif;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.4;
  font-weight: 400; }      /*es lo que hace que no se vean tan gruesas las letras*/

.contact-line {
  width: 160px;
  height: 1px;
  background: #a8926c;
  margin: 40px auto; }

.contact-text {
  font-size: 1.1rem;
  line-height: 1.8; }

.contact-btn {
  display: inline-block;
  margin-top: 60px;
  padding: 14px 45px;
  border: 1px solid #a8926c;
  color: #e1e1e0;
  text-decoration: none;
  letter-spacing: 4px;
  text-transform: uppercase;
  transition: all 0.4s ease; }

.contact-btn:hover {
  background: #a8926c;
  color: #161f16; }

  /* ===== CTA GLOW ===== */
.boton{ transition: transform .45s ease, box-shadow .45s ease, background .4s ease; }

.boton:hover{
  transform:translateY(-3px);
  box-shadow: 0 10px 30px rgba(168,146,108,.20); }

.contact-final-content{
  opacity:0;
  transform:translateY(60px) scale(.98);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.19,1,.22,1);
  filter:blur(6px); }

.contact-final.active-contact .contact-final-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0); }

.contact-final .contact-sub,
.contact-final .contact-text,
.contact-final .contact-btn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.19,1,.22,1); }

.contact-final.active-contact .contact-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; }

.contact-final.active-contact h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; }

.contact-final.active-contact .contact-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s; }

.contact-final.active-contact .contact-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s; }

/* ===== TIPS EDITORIAL ===== */
.tips-editorial{ margin:120px 0; }

.tips-editorial .texto.blog{
  background:#eef0ea !important;
  color:#161f16 !important;
  box-sizing:border-box; }

.tips-editorial p{ color:#2b322b !important; }

.tips-editorial .titulos{
  color:#855a25 !important;
  font-weight:550;
  letter-spacing:0px;
  line-height:1.45;
  margin-top:70px;
  margin-bottom:28px;
  text-wrap:balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(133,90,37,.58); position:relative;
  padding-top:34px; }

.tips-editorial .titulos::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:1px;
  background:#a8926c; }

/* ===== PAPER SPACING ===== */
.blog-intro-copy + .blogFrame,
.tips-editorial + .blogFrame{ margin-top:100px; }

/* ===== BLOG SIGNATURE DELAY ===== */

.firmaBlog{
  text-align:center;
  margin-top:70px;
  opacity:0;
  transform: translateY(26px) scale(.96);
  filter:blur(5px);
  transition: opacity 1.3s ease, transform 1.5s cubic-bezier(.19,1,.22,1), filter 1.2s ease; 
  transition-delay:3s; }

.firmaBlog img{
  width:clamp(220px,20vw,340px);
  opacity:.92;
  filter: drop-shadow( 0 8px 18px rgba(22,31,22,.10) );
  transition:.35s ease; }

.firmaBlog img:hover{
  opacity:1;
  transform:translateY(-2px); }

/* ===== SIGNATURE REVEAL ===== */

.blogReveal .firmaBlog{
  opacity:1;
  transform: translateY(0) scale(1);
  filter:blur(0); }

/* ======PAPER REVEAL====================================== */

.blog-intro-copy,
.tips-editorial .texto.blog,
.blogClosing{
  opacity:0;
  transform: translateY(55px) scale(.985);
  filter:blur(10px);
  transition: opacity 1.25s ease, transform 1.4s cubic-bezier(.19,1,.22,1), filter 1.2s ease; }

.blogReveal{
  opacity:1 !important;
  transform: translateY(0) scale(1); 
  filter:blur(0); }

/* ===== SECTION REVEAL FIX ===== */
.tips-editorial.blogReveal .texto.blog{
  opacity:1 !important;
  transform: translateY(0) scale(1) !important;
  filter:blur(0) !important; }

/* ===== FRAME FIX ===== */
.tips-editorial.blogReveal .texto.blog::after{
  opacity:1 !important;
  transform:scale(1) !important; }


/* =====BLOG NEXT — EDITORIAL LIGHT====================================== */

.blogNext{
  width:92%;
  max-width:900px;
  margin:50px auto 65px;
  text-align:center; }

.blogNext-inner{
  position:relative;
  padding:20px 20px 0; }

.blogNext-micro{
  color:#855a25;
  font-size:.98rem;
  letter-spacing:4px;
  text-transform:uppercase;
  margin-bottom:18px;
  font-weight:500; }

.blogNext-line{
  width:95px;
  height:1px;
  margin:0 auto 22px;
  background:#a8926c;
  position:relative; }

.blogNext-line::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%; 
  transform: translate(-50%,-50%) rotate(45deg);
  width:7px;
  height:7px;
  border:1px solid rgba(133,90,37,.34);
  background:#f5f4ef; }

.blogNext-title{
  font-family: "Viaoda Libre", serif;
  color:#fff;
  font-size: clamp( 1.35rem, 1.75vw, 1.8rem );
  line-height:1.7;
  font-weight:400;
  max-width:700px;
  margin:0 auto; }

  /* =======BLOG NEXT REVEAL================================== */

.blogNext{
  opacity:0;
  transform: translateY(35px);
  transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.19,1,.22,1); }

/* inner stagger */

.blogNext-micro,
.blogNext-line,
.blogNext-title{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.19,1,.22,1); }

/* active */
.blogNext.blogNextReveal{
  opacity:1;
  transform: translateY(0); }

.blogNext.blogNextReveal .blogNext-micro{
  opacity:1;
  transform:translateY(0);
  transition-delay:.45s; }

.blogNext.blogNextReveal .blogNext-line{
  opacity:1;
  transform:translateY(0);
  transition-delay:.90s; }

.blogNext.blogNextReveal .blogNext-title{
  opacity:1;
  transform:translateY(0);
  transition-delay:1.45s; }


/* ======RELATED BLOGS REVEAL====================================== */

.bloqueHistorias{ overflow:hidden; }

.bloqueHistorias .fotoHistorias{
  opacity:0;
  transform: translateY(45px) scale(.96);
  filter:blur(8px);
  transition: opacity 1.15s ease, transform 1.25s cubic-bezier(.19,1,.22,1), filter 1.1s ease; }

/* active */

.bloqueHistorias.blogStoriesReveal
.fotoHistorias{
  opacity:1;
  transform: translateY(0) scale(1);
  filter:blur(0); }

/* stagger */

.bloqueHistorias.blogStoriesReveal
.fotoHistorias:nth-child(1){ transition-delay:.25s; }

.bloqueHistorias.blogStoriesReveal
.fotoHistorias:nth-child(2){ transition-delay:.75s; }

/* ===== BLOG CARD MOTION ===== */
.bloqueHistorias
.fotoHistorias img{
  transition: transform 1.3s cubic-bezier(.19,1,.22,1), filter .8s ease; }

.bloqueHistorias
.fotoHistorias:hover img{ transform:scale(1.05); }

/*=====================INSTAGRAM====================*/
/* ===== Instagram Section Styles ===== */
#our-instagram {
  padding: 70px 0;
  background-color: #000; 
  text-align: center; 
  overflow:hidden;}

.insta-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; }

.insta-container h1{
  font-size: 4rem;
  font-weight: normal;
  color: #855a25; }

.insta-container p{ 
  color: #fff; 
  font-size: 2rem; }

.insta-title {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 10px; }

.insta-subtitle {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 30px; }

.insta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 25px; }

.insta-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease; }

.insta-grid a:hover img {
  transform: scale(1.15); }

.btn.view-more {
  font-size: 1.5rem;
  display: inline-block;
  padding: 20px 50px;
  background: #000;
  color: #fff;
  text-decoration: none;  
  border-radius: 5px;
  transition: background 0.3s ease;
  border: 3px solid #855a25; }

.btn.view-more:hover{
  background:#855a25;
  border-color:#855a25;
  transition: background .28s ease, color .28s ease, border-color .28s ease; }


/* ========INSTAGRAM REVEAL=========================== */
.insta-container h1,
.insta-subtitle,
.insta-grid a,
.view-more{ opacity:0; }

.insta-container h1{
  transform:translateY(35px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.19,1,.22,1); }

.insta-subtitle{
  transform:translateY(25px);
  transition: opacity .95s ease, transform 1s cubic-bezier(.19,1,.22,1); }

.insta-grid a{
  transform: translateY(35px) scale(.96);
  filter:blur(6px);
  transition: opacity 1s ease, transform 1.15s cubic-bezier(.19,1,.22,1), filter .9s ease; }

/* ===== INSTAGRAM BUTTON REVEAL ===== */
.btn.view-more{
  opacity:0 !important;
  transform:translateY(22px);
  pointer-events:none;
  transition: opacity 1s ease, transform 1s cubic-bezier(.19,1,.22,1);
  background:#000;
  color:#fff; }

/* ===== ACTIVE ===== */

#our-instagram.instaReveal h1{
  opacity:1;
  transform:translateY(0); }

/* ===== ACTIVE DELAYED ===== */
#our-instagram.instaReveal h1{
  opacity:1;
  transform:translateY(0);
  transition-delay:.35s; }

#our-instagram.instaReveal .insta-subtitle{
  opacity:1;
  transform:translateY(0);
  transition-delay:.95s; }

#our-instagram.instaReveal .insta-grid a{
  opacity:1;
  transform: translateY(0) scale(1);
  filter:blur(0); }

#our-instagram.instaReveal .insta-grid a{
  opacity:1;
  transform: translateY(0) scale(1);
  filter:blur(0); }

#our-instagram.instaReveal .btn.view-more{
  opacity:1 !important;
  transform:translateY(0);
  pointer-events:auto;
  transition-delay:.3s; }

/* ===== CINEMATIC GRID ===== */

#our-instagram.instaReveal
.insta-grid a:nth-child(1){
  transition-delay:1.45s; }

#our-instagram.instaReveal
.insta-grid a:nth-child(2){
  transition-delay:1.75s; }

#our-instagram.instaReveal
.insta-grid a:nth-child(3){
  transition-delay:2.05s; }

#our-instagram.instaReveal
.insta-grid a:nth-child(4){
  transition-delay:2.35s; }

#our-instagram.instaReveal
.insta-grid a:nth-child(5){
  transition-delay:2.65s; }

#our-instagram.instaReveal
.insta-grid a:nth-child(6){
  transition-delay:2.95s; }

/* ===== RESPONSIVE ===== */

@media(max-width:768px){

  .heroFrame::after{ inset:14px; }

  .heroNarrow{
    width:100%;
    margin-top:90px;
    margin-bottom:40px;
    margin-left:auto;
    margin-right:auto; }
}

@media(min-width:1024px){
.tips-editorial .titulos{
  font-size:clamp(1.75rem,2.1vw,2.3rem);
  line-height:1.4;
  max-width:1050px;
  margin-left:auto;
  margin-right:auto; }
}


