/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
/*MENU*/

.main-mn-nav ul li:last-child .sub-menu {
	width: auto;
	display: flex;
}

.main-mn-nav ul li:last-child .sub-menu li {
	width: auto;
}

.main-mn-nav ul li:last-child .sub-menu li a {
	width: max-content;
}

/*-------------------- MENU MOBILE -*/

/* Hamburger Icon Base Styles */
.btn-mob {
    width: 40px;
    height: 30px;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn-mob__line {
    display: block;
    width: 100%;
    height: 3px;
    background: #737272;
    transition: all 0.3s ease-out;
    transform-origin: center;
}

/* Middle line variation (optional) */
.btn-mob__line--middle {
    width: 80%;
    margin-left: auto;
}

/* Active State (X icon) */
.btn-mob.active .btn-mob__line--top {
    transform: translateY(14px) rotate(45deg);
    background: #ffffff;
}

.btn-mob.active .btn-mob__line--middle {
    opacity: 0;
    transform: scaleX(0);
}

.btn-mob.active .btn-mob__line--bottom {
    transform: translateY(-12px) rotate(-45deg);
    background: #ffffff;
}


/*HEADER-INI*/

#headm_bck {
	display: flex;
}
.headm_bck > div {
	max-width: none;
}

.mn_head_acord {
	width: 45%;
	min-height: 100%;
}

.mn_head_acord .et_pb_column {
	align-content: center;
}

.cord-ini {
	width: 50%;
	margin-left: auto;
	margin-right: 5%;
}

.panels_head_mn {
	min-height: 100%;
	height: 100%;
}

.panels_head_mn .et_pb_column {
	min-height: 100%;
}

.cord-ini .et_pb_toggle_content.clearfix {
	text-align: justify !important;
	padding: 6em 0 0 10%;
}

.tits_panels_head {
	width: auto;
	position: absolute;
	bottom: 10%;
	margin: 0 !important;
	left: 50%;
	transform: translateX(-50%);
}

.tits_panels_head h1 {
	font-size: 6em;
	font-weight: 400;
	color: #757575;
	text-transform: uppercase;
}

/*-------------------------NEW HEADER V1*/

#header_hm {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mov_back {
	height: 83vh;
	overflow: hidden;
	padding: 0;
}

#mov_back_sb {
	aspect-ratio: 1;
	width: clamp(1500px, calc(802px + 85.3vw), 2700px);
	background-image: url(https://portacartas.com/wp-content/uploads/2025/09/back1.jpg);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	left: 50%;
	right: 50%;
	position: absolute;
    --bg-rotation: 0deg; /* CSS variable for rotation */
	transform: translate(-50%, -0%) rotate(var(--bg-rotation));
    transform-origin: center center;
    transition: transform 1.2s ease-in-out; /* Smooth transition */
}

#header_info {
	align-self: flex-end;
	margin: 0;
    height: clamp(260px, calc(840px - 19vw), 800px);
    
}

#info_clm1, #info_clm2 {
	width: calc(30px + 28.6vw);
}

#info_clm2 {
	margin-left: auto;
}

#menu-head-container {
	display: flex;
	justify-content: space-between;
	max-width: 850px;
	margin: 0 auto;
}

.mn-btn {
	background: #d0d0d0;
	padding: 1% 2%;
}

/* Panel base styles */
.panel {
  display: none;
  opacity: 0;
  will-change: transform, opacity, scale;
  height: 100%;
}

/* Specific initial states for different types */
.panel[data-type="image"] {
  transform: scale(0.9);
}

.panel[data-type="title"] {
  transform: translateY(30px);
}

.panel[data-type="content"] {
  transform: translateY(20px);
}

.panel[data-type="complex"] {
  transform: translateY(30px);
}

.panel[data-type="complex"] .feature {
  opacity: 0;
  transform: translateY(20px);
}

/* Show first panel by default */
[data-button="panel-1"] {
  display: block;
}

.pnl_head {
	height: 100%;
}

.pnl_head .et_pb_code_inner {
	height: 100%;
}

.panel.preciohead {
	padding: 5%;
}

.panel_precio_head {
	width: 30%;
	float: left;
	height: 80%;
	align-content: center;
}

.panel_precio_head div {
	width: 100%;
	height: 50%;
	align-content: center;
}

.pd_head1 {
	font-style: italic;
    font-size: 1.4rem;

}

.precio_details {
	font-weight: bold;
	text-transform: uppercase;
	padding: 0;
}

.pre_dets_tit {
	font-size: 6rem;
	font-weight: bold;
}

.pd_head2 {
	text-align: right;
	font-size: 2rem;
	font-weight: 900;
}

.img-info-head {
    width: 70%;
    float: right;
    height: 80%;
    display: grid;
    grid-auto-flow: column;
}