/*
Theme Name: wpstudio
Description: wpstudio
Author: Carlos Martinez
Author URI: https://wpstudio.es/
Template: frost
Text Domain: wpstudio
Version: 1.0.0
*/

/* -- Scroll animations --  */
/* Uso: añadir clases en "Clases CSS adicionales": animate animate-fade-up
   [animate-duration-X] [animate-delay-X] [animate-repeat] */

.animate {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--animate-duration, 600ms);
  transition-timing-function: var(--animate-easing, ease-out);
  transition-delay: var(--animate-delay, 0ms);
}

.animate.is-inview {
  opacity: 1;
  transform: none;
}

.animate-fade-up {
  transform: translate3d(0, 10px, 0);
}

.animate-fade-down {
  transform: translate3d(0, -10px, 0);
}

.animate-zoom-in {
  transform: scale(0.92);
  --animate-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.animate-duration-200 {
  --animate-duration: 200ms;
}

.animate-duration-400 {
  --animate-duration: 400ms;
}

.animate-duration-600 {
  --animate-duration: 600ms;
}

.animate-duration-800 {
  --animate-duration: 800ms;
}

.animate-duration-1000 {
  --animate-duration: 1000ms;
}

.animate-delay-100 {
  --animate-delay: 100ms;
}

.animate-delay-200 {
  --animate-delay: 200ms;
}

.animate-delay-300 {
  --animate-delay: 300ms;
}

.animate-delay-400 {
  --animate-delay: 400ms;
}

.animate-delay-500 {
  --animate-delay: 500ms;
}

.animate-delay-600 {
  --animate-delay: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  .animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -- Site logo --  */

.custom-logo-link {
  display: block;
  line-height: 0;
  max-width: 240px;
  width: 100%;
}

/* -- Navigation -- */
/* El tema padre Frost pone el botón hamburguesa en blanco (base) al hacer
   hover/focus sobre fondos "has-background", invisible sobre fondo cream. */
.has-cream-background-color
  .wp-block-navigation__responsive-container-open:focus,
.has-cream-background-color
  .wp-block-navigation__responsive-container-open:hover {
  color: var(--wp--preset--color--contrast);
}

/* -- WhatsApp CTA -- */
/* Cambia esta variable para usar otro color del theme.json, ej.
   var(--wp--preset--color--accent). */
:root {
  --wpstudio-whatsapp-cta-color: var(--wp--preset--color--primary);
}

/* Oculto por defecto; whatsapp-cta.js añade "is-visible" cuando corresponde. */
.wpstudio-whatsapp-cta {
  align-items: center;
  background-color: var(--wpstudio-whatsapp-cta-color);
  border-radius: 999px;
  bottom: max(var(--wp--custom--spacing--gap), env(safe-area-inset-bottom));
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  color: var(--wp--preset--color--contrast);
  display: inline-flex;
  gap: 10px;
  opacity: 0;
  padding: 14px 24px;
  pointer-events: none;
  position: fixed;
  right: var(--wp--custom--spacing--gap);
  text-decoration: none;
  transform: translateY(16px);
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
  z-index: 100;
}

.wpstudio-whatsapp-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.wpstudio-whatsapp-cta:hover {
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.28);
}

.wpstudio-whatsapp-cta svg {
  flex-shrink: 0;
  height: 22px;
  width: 22px;
}

.wpstudio-whatsapp-cta span {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--font-weight--medium);
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .wpstudio-whatsapp-cta {
    transition: none;
  }
}

/* -- Button -- */

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--cream-hover);
}

/* Shared layout for any icon button variant (añadir como Clase CSS adicional,
   combinable con is-style-outline porque no es un block style registrado):
   is-style-icon-arrow (flecha después del texto), is-style-icon-whatsapp (icono antes del texto) */
.wp-block-button[class*="is-style-icon-"] .wp-block-button__link {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

.wp-block-button.is-style-icon-arrow .wp-block-button__link::after,
.wp-block-button.is-style-icon-whatsapp .wp-block-button__link::before {
  background-color: currentColor;
  content: "";
  flex-shrink: 0;
  height: 16px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 16px;
}

.wp-block-button.is-style-icon-arrow .wp-block-button__link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 8h11.5M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2 8h11.5M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
  transition: transform 0.2s ease-in-out;
}

.wp-block-button.is-style-icon-arrow .wp-block-button__link:hover::after {
  transform: translateX(4px);
}

.wp-block-button.is-style-icon-whatsapp .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.248c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.337-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.248c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.337-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z'/%3E%3C/svg%3E");
}

/* El tema padre Frost define ::after genérico para cualquier "is-style-icon-*"
   (sin mask-image), dejando un cuadrado solido tras el texto en variantes
   que no son la flecha. Lo anulamos aquí para las que usan ::before. */
.wp-block-button.is-style-icon-whatsapp .wp-block-button__link::after {
  content: none;
}

.is-style-chip {
  display: inline-flex;
  padding: 0.25rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--primary);
  background: white;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
}

/* -- List -- */

.wp-block-list.is-style-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  list-style: none;
  padding-left: 0;
  flex-grow: 1;
}

.wp-block-list.is-style-check-list li {
  display: flex;
  flex-direction: column;
  padding-left: 28px;
  position: relative;
}

.wp-block-list.is-style-check-list li .price-card-feature-title {
  display: block;
  font-weight: var(--wp--custom--font-weight--medium);
  line-height: var(--wp--custom--line-height--one);
}

.wp-block-list.is-style-check-list li .price-card-feature-description {
  color: var(--wp--preset--color--primary);
  display: block;
  font-size: var(--wp--preset--font-size--x-small);
}

.wp-block-list.is-style-check-list li::before {
  background-color: currentColor;
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* -- Servicios Grid -- */

.servicios-grid {
  display: grid;
  gap: var(--wp--custom--spacing--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
}

/* -- FAQ Servicio -- */
/* El bloque wpstudio/faq-servicio no soporta "layout", así que no recibe
   automáticamente el margen entre hijos que sí genera core/group (is-layout-flow). */
.wp-faq-accordion > .wp-faq-item + .wp-faq-item {
  margin-top: var(--wp--style--block-gap, var(--wp--custom--spacing--gap));
}

/* -- Price Card -- */

.wp-block-group.is-style-price-card {
  background-color: var(--wp--preset--color--cream);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--x-small);
  padding: var(--wp--preset--spacing--small);
  position: relative;
}

.price-card-icon {
  position: absolute;
  right: var(--wp--custom--spacing--gap);
  top: var(--wp--custom--spacing--gap);
}

.price-card-icon svg {
  display: block;
  height: 40px;
  width: 40px;
}

.price-card-header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: start;
}

.price-card-title {
  margin: 0;
}

.price-card-price {
  margin: 0;
}

.price-card-iva {
  font-size: var(--wp--preset--font-size--x-small);
}

.price-card-divider {
  border: none;
  border-top: 1px solid var(--wp--preset--color--cream-hover);
  margin: 0;
}

.price-card-badge {
  border: 1px solid var(--wp--preset--color--accent);
  border-radius: 999px;
  background-color: white;
  display: inline-block;
  font-size: var(--wp--preset--font-size--x-small);
  text-transform: uppercase;
  padding: 6px 14px;
}

/* -- Cards equal hight -- */
.is-style-equal-hight {
  display: flex !important;
  flex-direction: column !important;
}

.is-style-equal-hight > .wp-block-group {
  flex-grow: 1 !important;
}

/* -- Box Shadow -- */

.is-style-shadow-accent {
  box-shadow: var(--wp--preset--shadow--accent);
}

/* -- Border -- */

/* Reusable border (top/left none, right/bottom 1px accent), e.g. "is-style-border-accent" */
.wp-block-group.is-style-border-accent,
.wp-block-details.is-style-border-accent {
  border-color: var(--wp--preset--color--accent);
  border-style: solid;
  border-width: 0 1px 1px 0;
}

/* -- Radius -- */

/* Add "rounded-lg" as an Additional CSS Class for the 25px radius used across cards/boxes */
.rounded-lg {
  border-radius: 25px;
}

/* -- Circle -- */

/* Add "is-circle" as an Additional CSS Class; combine with "is-style-shadow-*" for an optional shadow */
.is-circle {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  font-family: var(--wp--preset--font-family--primary);
  justify-content: center;
  overflow: hidden;
  width: clamp(48px, 8vw, 65px);
}

.is-circle > * {
  line-height: 1;
  margin: 0;
}

.is-circle svg {
  height: 50%;
  width: 50%;
}

/* -- Steps -- */

.wp-step-item {
  align-items: flex-start;
}

/* -- FAQ Accordion -- */

.wp-faq-item {
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--contrast);
  overflow: hidden;
  padding: var(--wp--preset--spacing--small);
}

.wp-faq-item summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: var(--wp--custom--font-weight--semi-bold);
  gap: 20px;
  justify-content: space-between;
  list-style: none;
}

.wp-faq-item summary::-webkit-details-marker {
  display: none;
}

.wp-faq-item summary::after {
  background-color: currentColor;
  content: "";
  flex-shrink: 0;
  height: 16px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 16px;
}

.wp-faq-item[open] summary {
  margin-bottom: var(--wp--custom--spacing--gap);
}

.wp-faq-item[open] summary::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
}

/* Media Queries
---------------------------------------- */

@media only screen and (max-width: 600px) {
  /* -- Site logo --  */

  .custom-logo-link {
    max-width: 200px;
  }

  /* -- Button -- */

  .wp-block-button .wp-block-button__link {
    font-size: var(--wp--preset--font-size--x-small);
    padding-left: 20px;
    padding-right: 20px;
  }

  /* -- Chip -- */

  .is-style-chip {
    font-size: var(--wp--preset--font-size--x-small);
  }

  /* -- Column reverse -- */

  .wp-block-columns.is-reverse {
    flex-direction: column-reverse;
  }

  /* -- WhatsApp CTA -- */

  .wpstudio-whatsapp-cta {
    padding: 12px 18px;
  }

  .wpstudio-whatsapp-cta span {
    font-size: var(--wp--preset--font-size--x-small);
  }
}