/*
Theme Name: KathyGaete
Author: wekum
Author URI: https://wekum.cl/
Theme URI: https:/wekum.cl/
Tags: full-site-editing, editor-style, block-styles, block-patterns
Text Domain: kathygaete
Requires at least: 6.3
Requires PHP: 7.4
Tested up to: 6.3
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Styles intended only for the front.*/
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}


/****** FAQ en FSE usando <details> (con animación + / -) *******/
#faq details,
.faq details { 
  border-bottom: 1px solid #eaeaea;
  padding: 10px 0;
}

/* Summary como fila */
#faq summary,
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 500;
  position: relative; /* para animaciones limpias */
}

/* Ocultar marcador nativo */
#faq summary::-webkit-details-marker,
.faq summary::-webkit-details-marker { 
  display: none; 
}

/* Icono + / - */
#faq summary::after,
.faq summary::after{
  content: "+";
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}

/* Estado abierto: cambia a "-" con animación */
#faq details[open] summary::after,
.faq details[open] summary::after{
  content: "−";
  transform: rotate(180deg);
}

/* (Opcional pero recomendado) pequeño "pop" del summary al abrir */
#faq details[open] summary,
.faq details[open] summary{
  transform: translateY(-1px);
  transition: transform 0.22s ease;
}

/* Espaciado respuesta */
#faq details > *:not(summary),
.faq details > *:not(summary){
  padding: 10px 0 14px;
  color: #555;
}

/****** Cierre FAQ en FSE usando <details> (con animación + / -) *******/

/****** Formulario contacto *******/

.cm-contact-wrapper,
.cm-contact-wrapper * { box-sizing: border-box; }

.cm-contact-wrapper p,
.cm-contact-wrapper br { margin: 0 !important; padding: 0 !important; }

.cm-contact-wrapper { max-width: 540px; width: 100%; }

/* Formulario */
.cm-contact-form{
  display:flex;
  flex-direction:column;
  row-gap: 6px;
}

/* Filas */
.cm-row{ width:100%; margin:0; }

/* ===============================
   FILA DOBLE (Nombre + Teléfono)
   CF7 a veces envuelve con <p>,
   así que atacamos ambos casos.
   =============================== */

/* Caso 1: .cm-row-2 contiene directamente los .cm-field */
.cm-contact-wrapper .cm-row.cm-row-2{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}

/* Caso 2: CF7 mete un <p> dentro de .cm-row-2 */
.cm-contact-wrapper .cm-row.cm-row-2 > p{
  display: contents !important; /* “aplana” el <p> para que el grid funcione */
}

/* Asegura que cada field se comporte bien */
.cm-contact-wrapper .cm-row.cm-row-2 .cm-field{
  width:100%;
  min-width: 0;
}

/* Wrappers CF7 al 100% */
.cm-contact-wrapper .cm-field .wpcf7-form-control-wrap{
  display:block;
  width:100%;
}

/* Responsive: en móvil, 1 columna */
@media (max-width: 640px){
  .cm-contact-wrapper .cm-row.cm-row-2{
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   CAMPOS
   =============================== */
.cm-field .wpcf7-form-control{
  width:100%;
  border: 1px solid #dfe3ef;
  background:#fff;
  padding: 12px 16px;
  font-size:14px;
  font-family:inherit;
  color:#1b2538;
  line-height:1.4;
  border-radius:0;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Altura inputs/select */
.cm-field input.wpcf7-form-control,
.cm-field select.wpcf7-form-control{
  height:52px;
}

/* Textarea */
.cm-field textarea.wpcf7-form-control{
  min-height:160px;
  resize:vertical;
}

/* Placeholder */
.cm-contact-wrapper ::placeholder{
  color:#a5aec3;
  opacity:1;
}

/* Focus */
.cm-field .wpcf7-form-control:focus{
  border-color:#a0608b;
  box-shadow:0 0 0 1px rgba(0,71,187,0.08);
}

/* Select con flecha */
.cm-field select.wpcf7-form-control{
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ea9c2' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:10px 6px;
}

/* Botón */
.cm-row-submit .wpcf7-submit{
  display:inline-block;
  border:none;
  background:#a0608b;
  color:#fff;
  padding:12px 40px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border-radius:30px;
  margin-top:6px;
  transition: background-color .2s ease, transform .1s ease;
}
.cm-row-submit .wpcf7-submit:hover{
  background:#6b3158;
  transform: translateY(-1px);
}
.cm-row-submit .wpcf7-submit:active{
  transform: translateY(0);
}

/* Validación */
.cm-contact-wrapper span.wpcf7-not-valid-tip{
  font-size:11px;
  line-height:1.4;
  color:#d9534f;
  margin-top:2px;
}
.cm-contact-wrapper .wpcf7-response-output{
  font-size:12px;
  line-height:1.4;
  margin-top:8px;
  border-radius:0;
}

/****** Cierre Formulario contacto *******/

/****** quitar decoración lineas *****/
a {
  text-decoration: none !important;
  /*border-bottom: none !important;*/
}



/* =========================
   HEADER – Links navegación
   ========================= */

/* Links base */
.wp-block-navigation a {
  position: relative;
  text-decoration: none !important;
  color: #6b3b5f;              /* morado base */
  font-weight: 500;
  padding: 6px 0;
  transition: color .2s ease;
}

/* Hover */
.wp-block-navigation a:hover {
  color: #951b81;              /* morado más intenso */
}

/* Línea inferior animada */
.wp-block-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: #951b81;
  transition: width .25s ease;
}

/* Hover muestra la línea */
.wp-block-navigation a:hover::after {
  width: 100%;
}

/* ACTIVO */
.wp-block-navigation a.is-active {
  color: #951b81;
  font-weight: 600;
}

.wp-block-navigation a.is-active::after {
  width: 100%;
}


/* ===== HEADER STICKY (robusto) ===== */

/* Sticky */
.site-header{
  position: sticky;
  top: 0;
  z-index: 99999;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Evita que el sticky falle por overflow en wrappers comunes */
.wp-site-blocks,
.wp-site-blocks > * {
  overflow: visible !important;
}

/* Evita que el salto a anclas (#faq, etc.) quede tapado */
html{
  scroll-padding-top: 110px; /* ajusta si tu header es más bajo/alto */
}