/*
Theme Name: petk9.es - Seguro mascotas
Theme URI: https://petk9.es
Author: Alejandro Fernández
Author URI: https://camposemantico.es
Description:
Tags:
Version: 0.1
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: petk9
*/

/* 
https://mdigi.tools/color-shades 
https://heroicons.com/outline

*/
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap'); */

:root {
  /* color-scheme: light dark; */

  /* FINAL */
  --primary: #00b3ba;
  --secondary: #69c3c4;
  --tertiary: #f5ffff;
  --tertiary-alt: rgba(0, 179, 186, 0.05);

  --font-primary: #222;
  --font-secondary: #444;
  --font-tertiary: #666;

  --bg: #fff;
}
pre {
  font-size: 0.8rem;
  color: tomato !important;
}
pre::before {
  display: block;
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url('./img/code.svg');
  mask-image: url('./img/code.svg');
  background-color: tomato;
  top: 2rem;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16.5px;
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--primary);
  transition: color 0.3s ease-in-out;
}
a:hover {
  color: var(--primary);
}
img {
  max-width: 100%;
  height: auto;
}
ul {
  padding: 0;
}

.inner {
  max-width: 1280px;
  margin: auto !important;
}
.inner.container {
  padding: 2rem 1.5rem;
}
.btn,
.button {
  font-size: 1.05rem !important;
  letter-spacing: 0.25px !important;
  line-height: 1rem !important;
  padding: 0.75rem !important;
  outline: none !important;
  border: 2px solid var(--secondary) !important;
  box-shadow: 0 0 8px var(--tertiary) !important;
  transition: all 0.3s ease-in-out;
  border-radius: 5px !important;
  font-weight: 500 !important;
}
.btn.disabled {
  pointer-events: none;
  background: #ddd !important;
  color: #666 !important;
  border: 2px solid #999 !important;
}
.btn:hover,
.button:hover {
  box-shadow: 0 0 8px var(--secondary) !important;
}
.btn-primary,
.button {
  min-width: 100px;
  padding: 0.75rem 1.5rem !important;
  background-color: var(--primary) !important;
  border-color: var(--secondary) !important;
  color: var(--bg) !important;
  transition: all 0.3s ease-in-out;
  text-decoration: none !important;
}
.btn-outline-primary {
  min-width: 100px;
  padding: 0.75rem 1.5rem !important;
  color: var(--secondary) !important;
  background-color: transparent !important;
  color: var(--secondary) !important;
}
.btn-primary:hover:active:focus,
.btn-outline-primary:hover:active:focus,
.button:hover:active:focus {
  background-color: var(--secondary) !important;
  border-color: var(--primary) !important;
  outline: 0;
  box-shadow: 0 0 8px var(--tertiary) !important;
}
.accordion-button:focus,
.btn-primary:hover:active:focus,
.form-control:focus {
  border-color: var(--secondary) !important;
  outline: 0;
  -moz-box-shadow: 0 0 8px var(--tertiary) !important;
  box-shadow: 0 0 8px var(--tertiary) !important;
}
.form-check label {
  font-weight: 400;
}
.form-check .form-check-label {
  color: var(--font-primary);
}

#header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--secondary);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(3px);
}
#header .inner {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  justify-content: space-between;
}
#header .logo {
  position: relative;
  z-index: 100;
  width: 100px;
}
#header .logo img {
  aspect-ratio: 16/9;
  transition: all 0.3s ease-in-out;
}

#nav-icon3 {
  width: 1.75rem;
  height: 1rem;
  position: absolute;
  z-index: 100;
  top: 1.35rem;
  right: 1rem;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}
#nav-icon3 span:nth-child(1) {
  top: 0%;
}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
  top: 50%;
}
#nav-icon3 span:nth-child(4) {
  top: 100%;
  width: 60%;
}
#nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--font-primary);
  border-radius: 3px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
#nav-icon3.open span {
  background: var(--secondary);
}
#nav-icon3.open span:nth-child(1) {
  top: 0rem;
  width: 0%;
  left: 50%;
}
#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) {
  width: 0%;
  left: 50%;
}

#menu-main-menu {
  background: var(--bg);
}
#main-menu ul {
  width: 100%;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  gap: 1rem;
  margin: 0;
  padding: 0;
  font-size: 1.35rem;
}
#main-menu ul a {
  letter-spacing: 0.05px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
#main-menu ul a:hover {
  color: var(--secondary);
}
#main-menu .current-menu-item a {
  font-weight: 600;
}

#header #call2action {
  width: fit-content;
  position: absolute;
  z-index: 1000;
  right: 1rem;
}

#page-content #app {
  min-height: fit-content;
}
#page-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}
#page-content h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.25;
  margin-top: 1.2rem;
  letter-spacing: -0.5px;
}
#page-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1rem;
  letter-spacing: -0.25px;
}
#page-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
#page-content li {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
#page-content ol li {
  margin-bottom: 1rem;
}
#page-content strong {
  font-weight: 600;
}

.products {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}
.product.col-md-6 {
  width: 100%;
  position: relative;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem !important;
  border-radius: 1rem;
  background-color: var(--tertiary);
  color: var(--font-primary);
  border: 2px solid var(--secondary);
  box-shadow: 0 0 8px var(--secondary);
  transition: all 0.3s ease-in-out;
}
.product a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--font-primary);
}
.product .h3 {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
  line-height: 1;
  margin: 0;
}
.product .h4 {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  color: var(--primary);
}
.product .icon {
  width: 75px;
  height: 75px;
  background-color: var(--secondary);
  transition: all 0.3s ease-in-out;
}
.product:hover {
  background-color: var(--bg);
  border-color: var(--primary);
}
.product:hover .icon {
  background-color: var(--primary);
}
.product .dog {
  -webkit-mask-image: url('./img/dog.svg');
  mask-image: url('./img/dog.svg');
  mask-size: cover;
}
.product .dangerous-breed {
  -webkit-mask-image: url('./img/dangerous-breed.svg');
  mask-image: url('./img/dangerous-breed.svg');
  mask-size: cover;
}
.product .price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0 0.5rem;
  font-size: 0.952rem;
}
.product .price strong {
  line-height: 1;
  font-size: 1.85rem;
}
.product .btn {
  width: 100%;
}

#block_faqs.product-faqs {
  padding: 2rem 1.5rem;
}
#block_faqs .h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 600 !important;
}
#block_faqs .h2 strong {
  font-weight: 700;
  color: var(--primary);
}
.accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.accordion .collapsing {
  box-shadow: none !important;
}
.accordion-item {
  border: none !important;
  background: var(--tertiary-alt);
  border-radius: 0.25rem !important;
}
.accordion-button {
  padding: 1rem;
  font-size: 1.05rem;
  font-weight: 600 !important;
  background: none !important;
  color: var(--font-primary) !important;
  box-shadow: none !important;
  transition: all 0.3s ease-in-out !important;
}
.accordion-button:not(.collapsed)::after,
.accordion-button::after {
  width: 1.5rem;
  height: 1.5rem;
  background-image: none;
  mask-image: url('img/page-2/arrow-up.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  background-size: cover;
  background-color: var(--primary);
  rotate: 180deg;
}
.accordion-button:not(.collapsed)::after {
  rotate: 180deg;
}
.accordion-button:focus,
.accordion-button:hover::after,
.accordion-button:not(.collapsed)::after {
  box-shadow: none !important;
}
.accordion-body {
  font-size: 0.925rem;
}
.accordion-body ul {
  padding-left: 1.5rem;
}
.accordion-body ul li {
  margin-bottom: 0.25rem;
}

#block_ratings .h2 {
  font-weight: 600;
}
.ratings {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 2rem 0;
}
.ratings .google-review {
  width: 100%;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  align-items: center;
  border: 1px solid #d6dae4;
  border-radius: 0.5rem;
  padding: 1.5rem;
  font-size: 1rem;
}
.ratings .google-review .icon {
  width: 3.5rem;
  height: 3.5rem;
  line-height: 3.5rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--bg);
  text-align: center;
  border-radius: 50%;
  background: var(--primary);
}
.ratings .google-review .h3 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
}
.ratings .google-review .stars {
  display: flex;
  gap: 0.25rem;
}
.ratings .google-review .content {
  font-size: 0.952rem;
  text-align: center;
  height: 4.5rem;
  overflow: hidden;
}
.ratings .google-review .content.open {
  height: max-content;
}
.ratings .google-review .more {
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  font-size: 0.85rem;
}
.ratings .google-review .time {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  gap: 0.5rem;
  color: #9ca0ac;
}
.ratings .google-review .time svg {
  width: 1.25rem;
  height: 1.25rem;
}

.wpcf7-form {
  margin: 1rem 0;
}
.wpcf7-form label {
  width: 100%;
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--font-primary);
}
.wpcf7-form .wpcf7-form-control {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  display: block;
  outline: none;
}
.wpcf7-form .wpcf7-form-control.wpcf7-acceptance {
  border: none;
  padding: 0;
  margin: 0;
}
.wpcf7-form .wpcf7-form-control.wpcf7-acceptance label {
  font-size: 0.85rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wpcf7-form .wpcf7-not-valid-tip {
  color: tomato;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
  border: 1px solid tomato !important;
  outline: 0;
  -moz-box-shadow: 0 0 8px tomato !important;
  box-shadow: 0 0 8px tomato !important;
}

#footer {
  padding: 2rem 0 1rem 0;
  background: var(--font-primary);
  background: #00b3ba0d;
  color: var(--bg);
}
#footer .inner.container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
#footer-menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 1rem;
  justify-content: center;
}
#footer-menu .col-xs-12:nth-child(1) {
  display: flex;
  flex: 1 100%;
  justify-content: center;
}

#footer-menu .menu-footer-menu-container {
  width: 100%;
}
#footer-menu .h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--font-primary);
}
#footer-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem 0.25rem;
  margin: 0;
}
#footer-menu ul li {
  list-style: none;
  line-height: 1.2;
}
#footer-menu a {
  font-size: 0.925rem;
  text-decoration: none;
  color: var(--tertiary);
  color: var(--font-primary);
}
#footer-menu a:hover {
  color: var(--primary);
  text-decoration: underline;
}

#footer-menu ul#menu-footer-menu-social {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
}
#menu-footer-menu-social li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#menu-footer-menu-social li a:before {
  display: block;
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  background-position: center center;
}

#menu-footer-menu-social li a span {
  display: none;
}

#menu-footer-menu-social .instagram a:before {
  background-image: url('img/social/instagram.svg');
}
#menu-footer-menu-social .facebook a:before {
  background-image: url('img/social/facebook.svg');
}
#menu-footer-menu-social .x a:before {
  background-image: url('img/social/x.svg');
}
#menu-footer-menu-social .tiktok a:before {
  background-image: url('img/social/tiktok.svg');
  background-size: 2rem;
}

#footer #copyright {
  font-size: 0.752rem;
  letter-spacing: 0.25px;
  text-align: center;
  padding: 0.5rem 0;
  opacity: 0.45;
  color: var(--font-secondary);
}

.page-461 #page-content {
  min-height: calc(100dvh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url('img/pys-bg.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 1rem;
}
.page-461 #page-content * {
  max-width: 768px;
  margin: 0.5rem auto;
  text-align: center;
}
.page-139 #page-content,
.page-139 #page-content .wpcf7,
.page-139 #page-content .wpcf7 form {
  min-height: 0;
  text-align: left;
  width: 100%;
  max-width: 768px;
}
.page-139 #page-content .wpcf7-list-item {
  margin: 0;
}

.not-found {
  min-height: calc(100dvh - 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url('img/pys-bg.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 1rem;
}

.cookie-notice-container,
.cookie-notice-container * {
  font-family: 'Montserrat', sans-serif !important;
}

.woocommerce-coming-soon-social-login {
  display: none !important;
}

@media (prefers-color-scheme: light2) {
}

@media (prefers-color-scheme: dark2) {
  :root {
    --main-bg-color: #242424;
    --main-font-color: #fff;
    --main-link-color: #747bff;
  }
}

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
  #header .logo {
    width: 120px;
  }
  #menu-main-menu {
    background: none;
  }
  #main-menu ul {
    position: relative;
    height: fit-content;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 1.05rem;
  }
  #block_faqs {
    padding: 2rem 0rem;
  }
  #footer-menu {
    flex-direction: row;
  }
  #footer-menu .col-xs-12:nth-child(1) {
    /* justify-content: space-around; */
    justify-content: flex-start;
    margin-bottom: 1rem;
  }
  #footer-menu .col-md-4 {
    max-width: calc(33.33% - 0.7rem);
  }
  #footer-menu ul {
    align-items: flex-start;
    /* flex-direction: row; */
  }
}

/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
  .product.col-md-6 {
    max-width: calc(50% - 0.75rem);
    aspect-ratio: 1/1;
  }
  .accordion-button {
    padding: 1.5rem;
    font-size: 1.25rem;
  }
  .accordion-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
  #footer {
    padding-top: 3rem;
  }
  .page-461 #page-content {
    background-size: contain;
  }
}