/* ============================================================
   Impeca Group — estilo de marca para páginas de WooCommerce
   (catálogo de servicios, carrito, checkout, mi cuenta)
   ============================================================ */

:root{
  --navy-950:#071E38; --navy-900:#0A2A4D; --navy-800:#0A386C;
  --teal-500:#0AC0C1; --teal-400:#3ED9D2; --teal-100:#E4FBF8;
  --ink:#0C1B2A; --ink-soft:#3E5570;
  --paper:#F6FAFB; --paper-alt:#EBF3F5;
  --line: rgba(10,56,108,0.12);
  --radius:16px;
}

/* Contenedor de respaldo para "Mi cuenta": si por cualquier motivo esta
   página se llegara a mostrar sin la plantilla del tema asignada (y por
   lo tanto sin el contenedor .wrap habitual), esta regla evita que el
   contenido de WooCommerce quede suelto, sin ancho máximo ni centrado.
   Si la plantilla SÍ está activa, esto no cambia nada (ya está dentro
   de un .wrap del mismo ancho). */
.woocommerce-account .woocommerce{
  max-width:1180px; margin:0 auto; padding:40px 32px 80px; box-sizing:border-box;
}

body.woocommerce, body.woocommerce-page{
  font-family:'Inter', sans-serif; color:var(--ink); background:var(--paper);
}
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3{
  font-family:'Space Grotesk', sans-serif; color:var(--navy-900);
}

/* Catálogo de servicios (shop) */
ul.products{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:22px; list-style:none; margin:0; padding:0; }
ul.products li.product{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:0; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
ul.products li.product:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(7,30,56,0.3); }
ul.products li.product img{ width:100%; aspect-ratio:4/2.7; object-fit:cover; border-radius:0 !important; }
ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title{
  font-size:16.5px; padding:16px 18px 4px; margin:0;
}
ul.products li.product .price{ padding:0 18px; color:var(--teal-500) !important; font-weight:700; }
ul.products li.product .button{
  margin:14px 18px 18px; display:inline-block;
  background:var(--navy-800) !important; color:#fff !important;
  border-radius:999px; padding:10px 18px; font-weight:700; font-size:13.5px;
  border:none;
}
ul.products li.product .button:hover{ background:var(--teal-500) !important; color:var(--navy-950) !important; }
@media (max-width:900px){ ul.products{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ ul.products{ grid-template-columns:1fr; } }

/* Página de un servicio individual */
.single-product .summary .price{ color:var(--teal-500); font-size:24px; font-weight:700; }
.single-product .single_add_to_cart_button{
  background:var(--teal-500) !important; color:var(--navy-950) !important;
  border-radius:999px !important; padding:14px 30px !important; font-weight:700 !important;
  border:none !important;
}

/* Carrito */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.woocommerce-cart table.shop_table th{ background:var(--paper-alt); color:var(--navy-900); }
.woocommerce-cart table.shop_table td{ vertical-align:middle; }
.woocommerce-cart table.shop_table td.product-name a{ color:var(--navy-900); font-weight:600; }
.woocommerce-cart table.shop_table td.product-remove a{
  color:#d9534f !important; font-size:20px; border:1px solid var(--line) !important; border-radius:50% !important;
}
.woocommerce-cart .cart-collaterals .cart_totals{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2{
  font-family:'Space Grotesk',sans-serif; font-size:19px; color:var(--navy-900); margin-bottom:16px;
}
.woocommerce-cart .cart-collaterals .cart_totals table{ border:none; }
.woocommerce-cart .cart-collaterals .cart_totals table td,
.woocommerce-cart .cart-collaterals .cart_totals table th{ border:none; border-bottom:1px solid var(--line); padding:12px 0; }
.woocommerce-cart .cart-collaterals .cart_totals table tr:last-child td,
.woocommerce-cart .cart-collaterals .cart_totals table tr:last-child th{ border-bottom:none; font-weight:700; color:var(--navy-900); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ width:100%; text-align:center; display:block; }
.woocommerce-cart .cart-empty{ font-size:16px; }
.woocommerce-cart .return-to-shop .button{ margin-top:14px; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
  background:var(--navy-800) !important; color:#fff !important;
  border-radius:999px !important; font-weight:700 !important; border:none !important;
  padding:12px 24px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background:var(--teal-500) !important; color:var(--navy-950) !important;
}
.woocommerce #payment #place_order{
  background:var(--teal-500) !important; color:var(--navy-950) !important;
}

/* Mi cuenta */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; }
.woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--line); padding:10px 0;
}
.woocommerce-MyAccount-navigation li a{ color:var(--navy-800); font-weight:600; text-decoration:none; }
.woocommerce-MyAccount-navigation li.is-active a{ color:var(--teal-500); }

/* Mensajes (éxito, error, info) */
.woocommerce-message, .woocommerce-info{
  border-top-color:var(--teal-500) !important;
}
.woocommerce-message::before, .woocommerce-info::before{ color:var(--teal-500) !important; }
.woocommerce-error{ border-top-color:#d9534f !important; }

/* ============================================================
   Mi cuenta — Iniciar sesión / Crear cuenta / Editar perfil
   ============================================================ */
.woocommerce form .form-row{ margin-bottom:16px; }
.woocommerce form .form-row label{
  display:block; margin-bottom:6px; font-weight:600; font-size:13.5px; color:var(--navy-900);
}
.woocommerce form .form-row .required{ color:#d9534f; text-decoration:none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce table.shop_table .qty,
.woocommerce-page form .form-row input.input-text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"],
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-address-fields input[type="text"],
.woocommerce-address-fields input[type="email"],
.woocommerce-address-fields input[type="tel"],
.woocommerce-address-fields select,
.woocommerce-checkout select{
  width:100% !important; max-width:100% !important; box-sizing:border-box !important;
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus,
.woocommerce-EditAccountForm input:focus,
.woocommerce-address-fields input:focus,
.woocommerce-checkout select:focus{
  outline:none; border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(10,192,193,0.15);
}
.woocommerce form .form-row.form-row-first,
.woocommerce form .form-row.form-row-last{
  width:48%; display:inline-block;
}
.woocommerce form .form-row.form-row-first{ float:left; clear:none; }
.woocommerce form .form-row.form-row-last{ float:right; clear:none; }
.woocommerce form .clear{ clear:both; }
@media (max-width:600px){
  .woocommerce form .form-row.form-row-first,
  .woocommerce form .form-row.form-row-last{ width:100%; float:none; }
}

.woocommerce-form-login, .woocommerce-form-register{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px !important; max-width:none !important; width:100% !important;
  height:100%; box-sizing:border-box;
}
.woocommerce-form-login .form-row label,
.woocommerce-form-register .form-row label{ color:var(--navy-900); }
.woocommerce-form-login p.woocommerce-form-row,
.woocommerce-form-register p.woocommerce-form-row{ margin-bottom:16px; }
.woocommerce-form-login .woocommerce-form-login__rememberme{
  display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-soft); font-weight:400;
}
.woocommerce-form-login .lost_password a,
.woocommerce-form-register a{ color:var(--teal-500); font-weight:600; }

/* Las dos columnas de "Mi cuenta": Iniciar sesión / Crear cuenta, lado a
   lado. Se fuerza con !important porque el propio WooCommerce trae un
   CSS por defecto (float:left/right, width:48%) que compite con esto,
   y además la página puede estar envuelta en un bloque "Fila/Columna"
   de un constructor de páginas (Pagelayer u otro), cuyo propio CSS
   también puede forzar que el contenido se apile en una sola columna.
   Por eso neutralizamos también esos contenedores genéricos. */
#customer_login.u-columns{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:24px; align-items:stretch;
  width:100% !important; max-width:920px !important; margin:0 auto;
}
#customer_login.u-columns .u-column1,
#customer_login.u-columns .u-column2{
  display:flex !important; flex-direction:column; float:none !important; width:auto !important; max-width:none !important;
}
#customer_login.u-columns h2{
  font-family:'Space Grotesk',sans-serif; font-size:20px; color:var(--navy-900);
  margin-bottom:6px;
}
@media (max-width:820px){
  #customer_login.u-columns{ grid-template-columns:1fr !important; max-width:460px !important; }
}

/* Respaldo robusto: si esta versión de WooCommerce ya no usa
   id="customer_login" / class="u-columns" (las plantillas de
   WooCommerce han ido cambiando con las versiones), esto encuentra el
   contenedor real que envuelve ambos formularios — sin importar cómo
   se llame — y lo vuelve una cuadrícula de 2 columnas de todas formas.
   Se excluye ".woocommerce" (el envoltorio más externo del shortcode)
   para no convertir TODA la página en una cuadrícula de 2 columnas —
   solo el contenedor inmediato de los dos formularios.

   IMPORTANTE — bug corregido: la versión anterior de esta regla también
   probaba `:has(.woocommerce-form-login):has(.woocommerce-form-register)`
   SIN el combinador `>` (es decir, "cualquier descendiente", no solo
   hijo directo). Eso hacía que la regla no solo encontrara el
   contenedor inmediato de los formularios (#customer_login), sino que
   TAMBIÉN coincidiera con .account-page-wrap y con el .wrap exterior
   de toda la página — porque esos también "contienen" ambos
   formularios en algún nivel más profundo. El resultado: .wrap y
   .account-page-wrap (que solo tienen UN hijo cada uno) se convertían
   también en cuadrículas de 2 columnas, dejando ese único hijo metido
   en la primera columna y la segunda vacía — de ahí que toda la página
   de "Mi cuenta" se viera angosta y pegada a la izquierda, con las dos
   columnas de inicio de sesión/crear cuenta apiladas dentro de ese
   espacio angosto en vez de lado a lado. Por eso ahora se usa
   ÚNICAMENTE el selector con `>` (hijo directo), que solo puede
   coincidir con el contenedor inmediato real de los formularios. */
body.woocommerce-account *:not(.woocommerce):has(> .woocommerce-form-login):has(> .woocommerce-form-register){
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:24px !important;
  width:100% !important; max-width:920px !important; margin:0 auto !important;
}
@media (max-width:820px){
  body.woocommerce-account *:not(.woocommerce):has(> .woocommerce-form-login):has(> .woocommerce-form-register){
    grid-template-columns:1fr !important; max-width:460px !important;
  }
}

/* Si un constructor de páginas (Pagelayer u otro) envuelve el shortcode
   [woocommerce_my_account] en su propia fila/columna, esas capas no
   deben angostar ni apilar el contenido de WooCommerce. */
.pagelayer-row:has(#customer_login), .pagelayer-col:has(#customer_login),
.pagelayer-shortcode:has(#customer_login), .pagelayer-widget-shortcode:has(#customer_login),
[class*="pagelayer-"]:has(#customer_login){
  width:100% !important; max-width:none !important; flex:none !important;
}

.account-page-wrap{ padding:50px 0 90px; }
@media (max-width:720px){ .account-page-wrap{ padding:20px 0 36px; } }
.account-page-wrap .woocommerce-notices-wrapper .woocommerce-error,
.account-page-wrap .woocommerce-notices-wrapper .woocommerce-message{
  max-width:820px; margin:0 auto 24px;
}

.u-columns.woocommerce-Addresses{ display:flex; gap:28px; flex-wrap:wrap; }
.u-columns.woocommerce-Addresses .u-column1,
.u-columns.woocommerce-Addresses .u-column2{ flex:1 1 320px; }
.woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle{
  background:var(--paper-alt); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:20px;
}
.form-row .optional{ font-weight:400; font-size:12.5px; color:var(--ink-soft); }

/* Panel "Mi cuenta" (menú + contenido) */
.woocommerce-account .woocommerce-MyAccount-navigation{
  float:left; width:230px; margin-right:30px;
}
.woocommerce-account .woocommerce-MyAccount-content{
  float:left; width:calc(100% - 260px);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{ padding:0; border-bottom:1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child{ border-bottom:none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:13px 18px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active{ background:var(--teal-100); }
@media (max-width:782px){
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content{ float:none; width:100%; margin-right:0; margin-bottom:24px; }
}

/* Checkbox de "Crear una cuenta" en el checkout, "Recordarme", etc. */
.woocommerce form input[type="checkbox"]{
  width:16px; height:16px; margin-right:8px; accent-color:var(--teal-500);
}
.woocommerce-privacy-policy-text{ font-size:12.5px; color:var(--ink-soft); }

/* Botones de envío de estos formularios, consistentes con el resto del sitio */
.woocommerce #customer_login .button,
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce button.woocommerce-Button,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:10px; padding:15px 28px;
  border-radius:999px; border:1px solid transparent;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px; cursor:pointer;
  background:linear-gradient(135deg, var(--teal-500), var(--teal-400));
  color:var(--navy-950) !important;
  box-shadow:0 14px 30px -12px rgba(10,192,193,0.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.woocommerce #customer_login .button:hover,
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px -12px rgba(10,192,193,0.7);
}

/* Envoltorio de la tienda y de la página de un servicio individual */
.shop-wrap{ padding:40px 0 90px; }
@media (max-width:720px){ .shop-wrap{ padding:20px 0 40px; } }
.single-product-wrap .summary{ max-width:100%; }
.single-product-wrap .woocommerce-Reviews{ margin-top:40px; }