/* Ajustes de main.css (el mismo del prototipo) al marcado de los bloques de WordPress.
   Los bloques nativos envuelven imagenes en <figure>, no guardan <dl> ni <span> decorativos y
   los botones son enlaces de texto: aqui se compensan esas diferencias. */

.wp-site-blocks > * { margin-block: 0; }
.sitio-principal { display: block; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* Imagenes */
.wp-block-image { margin: 0; }
.wp-block-image img { display: block; }
.wp-element-caption { margin: 0.6rem 0 0; }
.banda-img img, .svc-img img { width: 100%; height: 100%; object-fit: cover; }
.svc-media .svc-img { min-height: 0; overflow: hidden; border-radius: var(--radius-lg); }
.svc-media-pie { margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.svc-media-pie span { color: var(--gold-light); margin-right: 0.4rem; }
.banda-pie { position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 1; margin: 0 auto; width: min(100% - 2rem, var(--container));
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
@media (min-width: 40rem) { .banda-pie { width: min(100% - 4rem, var(--container)); } }

/* Iconos dibujados con mascara (los enlaces de texto no llevan SVG dentro) */
.btn-cta::after, .link-arrow::after, .svc-item::after, .btn--wa::before, .chip::before {
  content: ""; flex: none; background-color: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.btn-cta::after, .link-arrow::after, .svc-item::after { --ic: url("../icons/flecha.svg"); }
.btn--wa::before { --ic: url("../icons/whatsapp.svg"); width: 1.15rem; height: 1.15rem; }
.chip::before { width: 1rem; height: 1rem; margin-top: 0.1rem; }
.chip--ok::before { --ic: url("../icons/check.svg"); }
.chip--pendiente::before { --ic: url("../icons/reloj.svg"); }
.link-arrow::after { width: 1.05rem; height: 1.05rem; transition: transform 0.25s var(--ease-out); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Boton principal: texto con fondo dorado y caja de flecha separada 3px */
.wp-site-blocks .btn-cta { position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 calc(52px + 3px + 1.4rem) 0 1.4rem;
  font: inherit; font-weight: 600; font-size: var(--step--1); color: var(--bg); text-decoration: none; border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--gold-boton); background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) left / calc(100% - 52px - 3px) 100% no-repeat, linear-gradient(#000 0 0) right / 52px 100% no-repeat;
  mask: linear-gradient(#000 0 0) left / calc(100% - 52px - 3px) 100% no-repeat, linear-gradient(#000 0 0) right / 52px 100% no-repeat;
  transition: background-position 0.5s var(--ease-out); }
.wp-site-blocks .btn-cta::after { position: absolute; right: 0; top: 50%; width: 1.15rem; height: 1.15rem; margin: -0.575rem calc(26px - 0.575rem) 0 0;
  background-color: var(--bg); transition: transform 0.25s var(--ease-out); }
.wp-site-blocks .btn-cta:hover { background-position: 100% 0; color: var(--bg); }
.wp-site-blocks .btn-cta:hover::after { transform: rotate(-45deg); }
.wp-site-blocks .btn-cta--sm { min-height: 44px; padding-right: calc(44px + 3px + 1.2rem); padding-left: 1.2rem;
  -webkit-mask: linear-gradient(#000 0 0) left / calc(100% - 44px - 3px) 100% no-repeat, linear-gradient(#000 0 0) right / 44px 100% no-repeat;
  mask: linear-gradient(#000 0 0) left / calc(100% - 44px - 3px) 100% no-repeat, linear-gradient(#000 0 0) right / 44px 100% no-repeat; }
.wp-site-blocks .btn-cta--sm::after { margin-right: calc(22px - 0.575rem); }
.wp-site-blocks .btn-cta--linea { color: var(--text); background: none; border: 1px solid var(--line-2); padding-right: 3.2rem; -webkit-mask: none; mask: none; }
.wp-site-blocks .btn-cta--linea::after { background-color: var(--gold-light); margin-right: 1.1rem; }
.wp-site-blocks .btn-cta--linea:hover { color: var(--gold-light); border-color: var(--gold); }

/* Datos clave y campos de experiencia (antes <dl>) */
.dato-dt, .exp-dt { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.exp-dt { margin-bottom: 0.3rem; }
.dato-dd { margin: 0; font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.02em; font-size: var(--step-2); line-height: 1.15; color: var(--text); }
@media (max-width: 39.99rem) { .hero-datos .dato-dd { font-size: var(--step-1); } }
.exp-dd { margin: 0; color: var(--text-2); }

/* Servicios de Inicio: cada elemento es un grupo; el enlace del titulo cubre toda la fila */
.svc-item { display: grid; grid-template-columns: 3rem 1fr auto; column-gap: 1rem; align-items: start; padding: 1.6rem 0; }
.svc-item .svc-num { grid-row: 1 / span 2; margin: 0; }
.svc-item .svc-title { grid-column: 2; margin: 0 0 0.4rem; }
.svc-item .svc-title a { color: inherit; text-decoration: none; }
.svc-item .svc-title a::after { content: ""; position: absolute; inset: 0; }
.svc-item .svc-text { grid-column: 2; margin: 0; }
.svc-item::after { grid-column: 3; grid-row: 1; width: 1.5rem; height: 1.5rem; margin-top: 0.45rem; color: var(--text-3); transition: transform 0.3s var(--ease-out), color 0.3s ease; }
.svc-item:hover .svc-title, .svc-item:focus-within .svc-title { color: var(--text); }
.svc-item:hover::after, .svc-item.is-active::after { transform: translateX(4px); color: var(--gold-light); }
.svc-placa-num { margin: 0; }

/* Metodo: el numero de paso no se oculta; la palabra grande la arma adaptador.js */
.paso .paso-num { max-height: none; overflow: visible; margin: 0; font-size: 0.85rem; }
.paso-palabra { display: none; }
.pasos--estaticos .paso-fijo { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.75rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.pasos--estaticos .paso-fijo .paso-num { margin: 0; color: var(--gold-light); }

/* Experiencia: cada foto es un grupo con su rotulo */
.exp-foto { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.exp-fotos--3 > .exp-foto:last-child { grid-column: 1 / -1; }
.exp-fotos--3 > .exp-foto:not(:last-child) img { aspect-ratio: 4 / 3; }
.defecto-nombre { font-size: 0.86rem; color: var(--text-2); margin: 0.4rem 0 0; }
.case-rotulo { margin: 0; }

/* Formulario: avisos que devuelve el servidor */
.form-aviso { margin: 0; padding: 0.8rem 1rem; border-radius: var(--radius); }
.form-aviso--ok { background: var(--ok-bg); color: var(--ok); }
.form-aviso--falla, .form-aviso--limite, .form-aviso--invalido { background: rgba(224, 122, 107, 0.12); color: #F0A397; }

/* Editor */
.gta-editor-aviso { padding: 2rem; border: 1px dashed var(--line-2); color: var(--text-3); font-family: var(--font-mono); font-size: 0.8rem; }
.editor-styles-wrapper [data-reveal], .editor-styles-wrapper .gta-reveal { opacity: 1; transform: none; filter: none; }
.editor-styles-wrapper .metodo { height: auto; }
.editor-styles-wrapper .metodo-fijo { position: static; height: auto; }
.editor-styles-wrapper .paso p { max-height: none; }
.editor-styles-wrapper .svc-panel { display: none; }