/*
Theme Name: Ideal Block Theme
Author: Ideal Agency
Version: 1.0
Text Domain: idealblocktheme
*/

:root {
  --spacing-8: var(--wp--preset--spacing--space-8);
  --spacing-12: var(--wp--preset--spacing--space-12);
  --spacing-16: var(--wp--preset--spacing--space-16);
  --spacing-24: var(--wp--preset--spacing--space-24);
  --spacing-32: var(--wp--preset--spacing--space-32);
  --spacing-40: var(--wp--preset--spacing--space-40);
  --spacing-48: var(--wp--preset--spacing--space-48);
  --spacing-64: var(--wp--preset--spacing--space-64);
  --spacing-80: var(--wp--preset--spacing--space-80);
  --spacing-96: var(--wp--preset--spacing--space-96);
  --spacing-160: var(--wp--preset--spacing--space-160);
  --transition-dur: 0.3s;
  --filter: invert(0);
  --border-radius: 16px;

  --color-white: var(--wp--preset--color--white);
  --color-textMain: var(--wp--preset--color--text-main);
  --color-black-80: var(--wp--preset--color--black-80);
  --color-grey: var(--wp--preset--color--grey);
  --color-accent: var(--wp--preset--color--accent);
  --color-accent-80: var(--wp--preset--color--accent-80);
  --color-accent-40: var(--wp--preset--color--accent-40);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: var(--wp--preset--font-family--helvetica-neue);
  user-select: none; /* Estándar */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

h1, h2, h3, h4, h5, h6, .destacado {
  color: var(--color-textMain);
  overflow: hidden;
  padding-bottom: 0.12em;
  font-weight: 300;
}

h3 span, h4 span, h5 span, h6 span, .destacado span {
  display: inline-block;
  transform: translateY(100%);
  will-change: transform;
}

h1, h2, h3 { 
  letter-spacing: -1px;
}

/* ul / ol */
ul.wp-block-list, ol.wp-block-list { margin: var(--spacing-12); padding-inline-start: var(--spacing-16); }
ul { list-style-type: square; }
ul li::marker { color: var(--color-accent); }
ol.wp-block-list li, .entry-content li { margin-bottom: var(--spacing-12); }


/* Color */
.wp-block-navigation .wp-block-navigation-item {  background-color: transparent;  }
.has-secondary-background-color { background-color: var(--color-accent) !important; }

/* Effects */
header .logo img, .logo-hero img, .clients-c img, .filter img { filter: var(--filter); }
.backdropblur { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

/* Layout */
.wp-block:not(.alignfull) { max-width: var(--wp--style--global--content-size, 800px); }
.wp-block.alignwide { max-width: var(--wp--style--global--wide-size, 100%); }
.hidden { display: none !important; }
.width-50 .wrapper { width: 50%; }


/* Img / Video */
main .wp-block-image { position: relative; overflow: hidden; }
main .wp-block-image img { display: block; width: 100%; height: auto; }
video { border-radius: var(--border-radius); }

/* Buttons */
button,
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  background: inherit;
  color: inherit;
}

/* ----------------------------------------------------------------------------------------------------
* Header & Footer
* ---------------------------------------------------------------------------------------------------- */
header .nav-additional-info a, header .logo-container a , footer a {
  text-decoration: none;
}

header .header nav a:hover, .header nav .current-menu-item a, header .nav-additional-info a:hover, footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

header {
  position: fixed;
  padding-left: calc(var(--spacing-24) - 24px) !important;
  padding-right: calc(var(--spacing-24) - 24px) !important;
  width: 100%;
  z-index: 9;
  font-size: 16px;
}

header .header {
  width: fit-content;
  margin: auto;
  padding: var(--spacing-12) var(--spacing-24) !important;
  gap: var(--spacing-64);
  margin-top: var(--spacing-24);
  border-radius: 10px;
  /* background-color: rgba(16, 16, 16, 0.8); */
  background: var(--color-accent);
  background: linear-gradient(180deg,rgba(244, 0, 0, .9) 50%, rgba(244, 0, 0, 0.7) );
  backdrop-filter: blur(2px);
  height: 60px;
  box-shadow: 1px 1px 1px 0px #ff453c inset, 1px 1px 1px 0px #ff453c;
}

.header a {
  color: var(--color-white) !important;
}

header .nav-additional-info {
  width: fit-content;
  position: absolute;
  right: var(--spacing-24);
  margin-top: var(--spacing-24);
  padding: var(--spacing-12) var(--spacing-24) !important;
  background: var(--color-accent);
  background: linear-gradient(180deg,rgba(244, 0, 0, .9) 50%, rgba(244, 0, 0, 0.7) );
  backdrop-filter: blur(2px);
  color: var(--color-white);
  height: 60px;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 0px #ff453c inset, 1px 1px 1px 0px #ff453c;
}


header .nav-additional-info a:hover {
  color: inherit;
}

header .logo {
  position: relative;
  overflow: hidden;
}

header .logo a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  filter: blur(4px);
} 

header .logo a:hover::before {
  opacity: 1; /* aparece solo en hover */
  animation: shine 0.75s forwards;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}


.icon-login img {
  height: auto !important;
  width: auto;
  width: 24px !important;
}

.club-img {
  margin-top: 6px;
}


/* Shrink on Hover effect */
.icon-login img, .icon-club img {
  transition: transform .5s ease;
}

.icon-login img:hover, .icon-club img:hover {
  transform: scale(0.90);
}



footer {
  padding: var(--spacing-40) var(--spacing-32) var(--spacing-24);
  background-color: var(--color-textMain);
  color: var(--color-white);
  font-size: 14px;
}

footer .logo-sd path {
  stroke: #fff;
}

footer a:hover {
  color: var(--color-white);
}

footer .club-img {
    opacity: 0;
    visibility: hidden;
    display: none !important;
}






/* --------------------------------------------------------------------
   Buttons
---------------------------------------------------------------------- */
.wp-block-button__link {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background-size: 300%;
  transition: all 0.25s ease-in-out;
}

.wp-block-button__link {
  background-image: linear-gradient(20deg, var(--color-textMain) 50%, var(--color-accent) 50%);
}

.wp-block-button__link:hover {
  color: var(--color-white);
  background-position: 100%;
  transform: translateX(0.5rem);
}

.wp-block-button__link:active {
  transform: translate(0rem, 0.2rem);
}

.is-style-outline .wp-block-button__link {
  background-image: linear-gradient(20deg, var(--color-white) 50%, transparent 50%);
}

/* Professionals */
.page-template-page-professionals video {
  border-radius: 0;
}

.page-template-page-professionals .wp-block-button__link {
  background-image: linear-gradient(20deg, #a69971 50%, var(--color-white) 50%);
  color: var(--color-textMain);
}


.page-template-page-professionals .is-style-outline .wp-block-button__link {
  background-image: linear-gradient(20deg, #1b1b1b 50%, #a69971 50%);
  color: #a69971;
}

.page-template-page-professionals .is-style-outline .wp-block-button__link:hover {
  color: var(--color-textMain);
}

/* Disabled */
.disabled .wp-block-button__link {
  background-size: 100%;
  background-image: linear-gradient(20deg, #555555 50%, #555555 50%);
  pointer-events: none;
  color: #979797;
}


/* --------------------------------------------------------------------
   Marquee
---------------------------------------------------------------------- */
.marquee {
  width: 100%;
  overflow: hidden;
  background: var(--color-accent);
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

.marquee-track span {
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-white);
  padding: var(--spacing-12) 0 var(--spacing-12) var(--spacing-12) ;
}


/* --------------------------------------------------------------------
  HS Forms
---------------------------------------------------------------------- */
.contacto-block .hs-form-frame {
  width: 45vw;
}

.hubspot-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.hubspot-modal.is-open {
  display: flex;
  max-width: 100%;
}

.hubspot-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.hubspot-modal__content {
  position: relative;
  width: min(90vw, 600px);
  height: auto;
  margin: auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.hubspot-modal__content .title {
  padding: var(--spacing-40) 0 0;
}

.hubspot-modal .hs-form-frame {
  width: 100%;
}

.hubspot-modal__close {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-16);
  z-index: 1;
  font-size: var(--wp--preset--font-size--h-5);
  background: transparent;
  border: none;
  color: var(--color-textMain);
  cursor: pointer;
}

.hubspot-modal__close:hover {
  color: var(--color-accent);
}



/* --------------------------------------------------------------------
  Homepage
---------------------------------------------------------------------- */
.hero video, .page-template-page-calma .wp-block-cover video, .page-template-page-nopaddingtop .wp-block-cover video {
  border-radius: 0;
}

.testimonials video {
  aspect-ratio: 9/16 !important;
  border-radius: var(--border-radius);
}

.calma-block-home .title::before {
  content: '';
  position: absolute;
  background-image: url('/wp-content/themes/idealblocktheme/assets/images/bubble.svg');
  background-repeat: no-repeat;
  background-position: center;
  width: 80%;
  height: 80%;
  animation: pulseBubble 5s ease-in-out infinite;
}


@keyframes pulseBubble {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}


.carnets-chip a {
  color: var(--color-white);
  padding: var(--spacing-8) var(--spacing-24);
  border: 1px solid var(--color-white);
  border-radius: 40px;
  text-decoration: none;
  transition: background-color .5s ease;
}

.carnets-chip a:hover {
  background-color: var(--color-accent-40);
  border-color: var(--color-accent);
}


@keyframes glowAnim {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Testimonials */
.hover-video-container {
  cursor: url('/wp-content/themes/idealblocktheme/assets/images/volume-up.svg') 16 16, auto; /* cursor por defecto si falla */
}

/* Pinned Cards */
.pinned-cards {
  position: relative; 
}

.pinned-cards .card {
  position: relative;
  backdrop-filter: blur(8px);
  background-color: rgba(242 242 242 / 80%);
  box-shadow: 1px 1px 1px #f6f6f699 inset, 1px 1px 1px #ffffff;
  transform-origin: top center;
}

.corner5-home {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -7% !important;
  margin-top: 5% !important;
}

/* Mapa */
#locations-map {
  height: 400px;
  width: 100%;
}

/* --------------------------------------------------------------------
   Driver Club: Text Rotator
---------------------------------------------------------------------- */
.text-rotator-wrapper {
  overflow: hidden;
}

.text-rotator {
  /* overflow: hidden; */
  position: relative;
  display: inline-block;
}

.phrase {
  position: absolute;
  white-space: normal; 
}

/* Border Animation */
.glow-box::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 16px;
  background: linear-gradient(270deg, #ff000030, #ff000010, #ff000030);
  background-size: 600% 600%;
  z-index: -1;
  filter: blur(35px);
  animation: glowAnim 5s ease infinite;
}



/* --------------------------------------------------------------------
   Carnets Page
---------------------------------------------------------------------- */
.page .wp-block-cover {
  margin-block-start: 0;
}
.page main {
    padding-top: 0;
}


.corner-lines {
  width: 100%;
  min-width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
}

svg#corner1, svg#corner2, svg#corner3 {
  position: absolute;
  top: 0;
  overflow: visible;
}

svg#corner1 { left: -20px; }
svg#corner2 { right: 0; }
svg#corner3 { right: 0; top: 2%; }

path#corner1Path, path#corner3Path { stroke: var(--color-accent); opacity: .4; }
svg rect { filter: drop-shadow(0px 0px 10px #ff0a0a); }

.corner4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  min-width: 100%;
}



/* --------------------------------------------------------------------
  Calma Page / Professionals Page
---------------------------------------------------------------------- */
.page-template-page-calma .entry-content, .page-template-page-professionals .entry-content,
.page-template-page-nopaddingtop .entry-content {
  padding-top: 0;
  margin-top: -8px;
}

.calma-hero {
  margin-top: 0;
}

.page-template-page-calma header .header, .page-template-page-calma header .nav-additional-info {
  background: rgba(16 16 16 / 60%);
  box-shadow: 1px 1px 1px 0px #41414185 inset, 1px 1px 1px 0px #414141ad;
}

.draggable-wrapper {
  position: relative;

}

.bubble {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  margin-left: -300px;
  margin-top: -300px;

  background-image: url('/wp-content/themes/idealblocktheme/assets/images/bubble.svg');
  filter: opacity(0.5);
  z-index: 9;

  /* efecto flotante */
  animation: float 2s ease-in-out infinite;

  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;

  transform: scale(var(--bubble-scale, 1));
}

@keyframes float {
  0%   { transform: translateY(0) scale(var(--bubble-scale, 1)); }
  50%  { transform: translateY(-20px) scale(var(--bubble-scale, 1)); }
  100% { transform: translateY(0) scale(var(--bubble-scale, 1)); }
}

.calma-bg-text-container, .professionals-bg-text-container {
	position: relative;
}

.calma-bg-text-container::before {
	content: "Calma";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 33vw;
	font-weight: 900;
	color: #f2fbff;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
  letter-spacing: -1vw;
	z-index: -1;
}

ol.calma-circle-list, ol.professionals-circle-list {
  counter-reset: step-text;
  list-style: none;
}

ol.calma-circle-list li:after, ol.professionals-circle-list li:after {
	counter-increment: step-text;
	content: counter(step-text);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 2em;
	aspect-ratio: 1;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: var(--border-radius);
	background-color: #b3e1f8;
}

ol.calma-circle-list li:before, ol.professionals-circle-list li:before {
	position: absolute;
  top: 0;
  bottom: -1.5em; 
  left: calc(1em + 1px);
	/* inset-block: 0;
	inset-inline: calc(1em + 1px) auto;
	display: block; */
	width: 1px;
	background-color: #b3e1f8;
	content: "";
}

ol.calma-circle-list li:last-child:before, ol.professionals-circle-list li:last-child:before {
	inset-block-end: auto;
	height: 1em;
}

ol.calma-circle-list li, ol.professionals-circle-list li {
	position: relative;
	padding-inline-start: 3em;
	min-height: 2.4em;
	padding-block: calc(
		1px +
			((var(--list-font-size) * var(--list-line-height)) - var(--list-font-size)) /
			2
	);
}

.page-template-page-calma main ul li {
  list-style-type: none
}

.page-template-page-calma main ul li:before {
  content: "✔️";
  margin-right: 0.5em;
  line-height: 1.2;
  flex-shrink: 0;
}


/* Professionals Page */
.page-template-page-professionals {
  background-color: rgb(27, 27, 27);
}

.page-template-page-professionals, .page-template-page-professionals h1, .page-template-page-professionals h2, .page-template-page-professionals h3, .page-template-page-professionals h4, .page-template-page-professionals h5, .page-template-page-professionals h6, .page-template-page-professionals p  {
  color: var(--color-white);
}

.professionals-bg-text-container {
  margin-top: 0;
}

.professionals-bg-text-container::before {
	content: "Seguretat";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 22vw;
	font-weight: 900;
	color: #181818;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
  letter-spacing: -1vw;
	z-index: -1;
}

ol.professionals-circle-list li:after, ol.professionals-circle-list li:before {
  background-color: #a69971;
}

ol.professionals-circle-list li {
  display: flex;
  align-items: center; 
  padding-block: 0; 
}

.page-template-page-professionals ul li::marker {
  color: #a69971;
}



/* ----------------------------------------------------------------------------------------------------
* Legal
* ---------------------------------------------------------------------------------------------------- */
.page-template-page-legal main {
  padding-top: 9rem;
}

.page-template-page-legal .wp-block-heading {
  margin-top: var(--spacing-64);
  color: var(--color-accent);
}

.page-template-page-legal .wp-block-post-title {
  color: var(--color-accent);
}

.page-template-page-legal .entry-content {
  padding-bottom: var(--spacing-64);
}

/* ----------------------------------------------------------------------------------------------------
* Responsive
* ---------------------------------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .entry-content > .is-layout-constrained {
    padding-left: var(--spacing-40);
    padding-right: var(--spacing-40);
  }
}

@media (min-width: 693px) and (max-width: 1148px) {
  header .header, header .wp-block-navigation__container { gap: var(--spacing-16); }
  header .header, header .nav-additional-info { position: relative; height: 50px; padding: var(--spacing-8) var(--spacing-12) !important; gap: var(--spacing-24); }
}

@media (max-width: 768px) {

  :root { 
    --wp--style--global--content-size: 100%;
    --spacing-96: var(--wp--preset--spacing--space-40);
    --wp--preset--spacing--space-160: var(--wp--preset--spacing--space-64);
    --wp--preset--spacing--space-80: var(--wp--preset--spacing--space-64); 
  }

  /* Layout */
  .entry-content > .is-layout-constrained { padding-left: var(--spacing-12); padding-right: var(--spacing-12);  }
  .width-50 .wrapper { width: 100%; }
  
  /* Header */
  header .logo img { width: 120px !important;}
  header .wp-block-navigation__container { gap: 11px; flex-wrap: nowrap; font-size: 14px; }
  header .wrapper { display: flex; justify-content: space-between; }
  header .header, header .nav-additional-info { position: relative; height: 50px; padding: var(--spacing-8) var(--spacing-12) !important; gap: var(--spacing-24); }

  /* Nav menu */
  #modal-1 { width: 100%; height: fit-content; border-radius: 8px;}
  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: rgba(16, 16, 16, 0.9); color: var(--color-accent); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .wp-block-navigation__responsive-container-open { color: var(--color-white); }
  .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }




  /* General */
  main { overflow-x: hidden; }
  .flex-section .wrapper { flex-direction: column; } 
  .flex-section .wrapper .title { min-height: 34vh !important; }
  .pinned-vertical-scroll.flex-section .title { min-height: auto !important;}
  .wrap { flex-wrap: wrap; }
  
  /* Home */
  .hero .tags { gap: var(--spacing-12); }
  .pinned-cards .card { flex-direction: column;  gap: var(--spacing-24); }
  .scroll-section .wrapper { overflow: scroll; width: 100%; justify-content: flex-start; scroll-snap-type: x proximity; }
  .scroll-section .scroll-card { min-width: 300px; }

  /* Preguntas */
  .pallars-cf-answer-container {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    gap: var(--spacing-8); } 

  .ccc-left { min-height: fit-content;}
  .contacto-block .hs-form-frame { width: 100%;}
  .testimonials .wrapper { padding: 0 !important; width: 100%; overflow: scroll; scroll-snap-type: x proximity; }
  .hover-video-container { min-width: 60%; }
  .testimonials video { object-fit: cover; }

  /* Professionals */
  .flex-section .wrap > .wp-block-group { padding-right: 0 !important; flex-basis: 100%;}

  /* Calma */
  .bubble { background-repeat: no-repeat; top: 29%; left: 5%; width: 90vw; height: 90vw; margin-left: unset; margin-top: unset; }
  .calma-bg-text-container { min-height: 40vh !important; } 

  /* Carnets */
  .requisits-card { flex-basis: 100%; }
  .corner4 { min-width: 500px !important; } 
  .corner4 svg path { stroke-width: 2px; }

  /* Driver Club */
  .text-rotator-wrapper { width: 100%; padding: var(--spacing-24) !important; }
  .phrase { font-size: var(--wp--preset--font-size--h-5) !important; }


  /* Footer */
  footer .row { flex-wrap: wrap;}
  footer .col1, footer .col4 { flex-basis: 100%;}
  footer .col2, footer .col3 { flex-basis: 48%;}
  footer p, footer ul li { font-size: 3vw;}
  footer ul { gap: 10px;}
  footer .wp-block-social-links svg { height: 30px !important; width: 30px !important; }

}