/*
Theme Name: Gianco
Description: Tema de Gianco design. Cerámica imperfecta para gente bonica. Hijo de Twenty Twenty-Five.
Template: twentytwentyfive
Version: 1.0.0
Author: Gianco design
Text Domain: gianco
Requires at least: 6.6
*/

/* ---------- Base ---------- */
:root {
	--g-blob: 62% 38% 46% 54% / 55% 45% 55% 45%;
	--g-blob-2: 42% 58% 63% 37% / 41% 52% 48% 59%;
	--g-soft: 22px 28px 18px 30px;
	--g-line: rgba(41, 68, 75, .18);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4, .wp-block-site-title) { font-variation-settings: "SOFT" 100, "WONK" 1; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--wp--preset--color--coral); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text:focus { clip: auto; }

/* Subrayado a mano en coral: aplicar con la clase "subrayado" o con <mark> sin color */
.subrayado, mark.subrayado {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 20 2, 35 12, 55 6 S 95 3, 118 7' fill='none' stroke='%23E45834' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") bottom / 100% .35em no-repeat;
	padding-bottom: .12em;
	color: inherit;
}

/* Etiqueta pequeña en mayúsculas */
.is-style-etiqueta {
	font-family: var(--wp--preset--font-family--figtree);
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ---------- Formas imperfectas (estilos de bloque) ---------- */
.is-style-canto img, .is-style-canto .wp-block-cover__image-background, .wp-block-cover.is-style-canto { border-radius: var(--g-blob) !important; }
.is-style-canto { border-radius: var(--g-blob); overflow: hidden; }
.is-style-suave, .is-style-suave img { border-radius: var(--g-soft) !important; }
.is-style-suave { overflow: hidden; }
.is-style-guijarro { border-radius: var(--g-blob-2) !important; }

/* Ondas entre bloques de color: grupo con clase "con-ondas" */
.con-ondas { position: relative; margin-block: 28px !important; }
.con-ondas::before, .con-ondas::after {
	content: ""; position: absolute; left: 0; right: 0; height: 28px;
	background: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 L0 14 C 40 0, 80 28, 130 14 S 220 2, 270 14 S 360 26, 400 12 L400 28Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28 L0 14 C 40 0, 80 28, 130 14 S 220 2, 270 14 S 360 26, 400 12 L400 28Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.con-ondas::before { top: -27px; }
.con-ondas::after { bottom: -27px; transform: scaleY(-1); }

/* Separador ondulado */
.wp-block-separator.is-style-onda {
	border: 0 !important; height: 18px; max-width: 220px; opacity: 1;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 40 0, 80 28, 130 14 S 220 2, 270 14 S 360 26, 400 12' fill='none' stroke='%23E45834' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}

/* ---------- Botones ---------- */
.wp-element-button, .wp-block-button__link {
	border-radius: 999px / 60% 70% 60% 70%;
	transition: transform .15s ease, background-color .15s ease;
	min-height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
}
.wp-element-button:hover, .wp-block-button__link:hover { transform: rotate(-1.5deg) scale(1.02); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid currentColor; }

/* ---------- Cabecera ---------- */
.gianco-header { position: sticky; top: 0; z-index: 20; }
.admin-bar .gianco-header { top: var(--wp-admin--admin-bar--height, 0); }
.gianco-header .wp-block-site-logo img { width: 52px; height: auto; }
.gianco-header .wp-block-navigation__responsive-container-open svg,
.gianco-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 2rem; font-weight: 600;
}

/* Barra fija inferior "Pedir" (solo móvil) */
.gianco-barra-pedir { display: none; }
@media (max-width: 781px) {
	.gianco-barra-pedir {
		display: block; position: sticky; bottom: 0; z-index: 15;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--crema);
		border-top: 1.5px solid var(--g-line);
	}
	.gianco-barra-pedir .wp-block-button, .gianco-barra-pedir .wp-block-button__link { width: 100%; }
}

/* ---------- Tarjetas de pieza ---------- */
.gianco-grid .wp-block-post-template { gap: 28px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 782px) { .gianco-grid .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 40px 24px; } }
@media (min-width: 1100px) { .gianco-grid .wp-block-post-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
.gianco-card { position: relative; }
.gianco-card .wp-block-post-featured-image { margin: 0; }
.gianco-card .wp-block-post-featured-image img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border-radius: var(--g-soft); transition: border-radius .35s ease; }
.gianco-card:hover .wp-block-post-featured-image img { border-radius: var(--g-blob); }
.gianco-card .wp-block-post-title a { text-decoration: none; }
.gianco-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta clicable */
.gianco-card .gianco-precio { font-weight: 700; white-space: nowrap; }
.gianco-card .gianco-tag {
	position: absolute; top: 10px; left: 10px; z-index: 1; margin: 0;
	background: var(--wp--preset--color--crema); color: var(--wp--preset--color--petroleo);
	font-size: 12px; font-weight: 700; letter-spacing: .04em;
	padding: 5px 11px; border-radius: 999px;
}
.estado-ya-tiene-casa .gianco-tag { background: var(--wp--preset--color--petroleo); color: var(--wp--preset--color--crema); }
.estado-ejemplo-de-encargo .gianco-tag { background: var(--wp--preset--color--lila); }
.gianco-tag:empty { display: none; }

/* Filtros (pastillas) */
.gianco-filtros { gap: 8px !important; overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 6px; scrollbar-width: none; }
.gianco-filtros::-webkit-scrollbar { display: none; }
.gianco-filtros .wp-block-button__link { white-space: nowrap; min-height: 42px; padding: 8px 18px !important; font-size: 15px !important; }

/* Ficha de pieza */
.gianco-datos { border-top: 1.5px dashed var(--g-line); }
.gianco-datos p { margin: 0; padding: 10px 0; border-bottom: 1.5px dashed var(--g-line); }
.gianco-datos p:empty { display: none; }

/* Lista de precios */
.gianco-precios p { display: flex; justify-content: space-between; gap: 16px; margin: 0 !important; padding: 12px 0; border-bottom: 1.5px dashed rgba(41, 68, 75, .4); }
.gianco-precios p strong { white-space: nowrap; }

/* Pasos */
.gianco-num {
	flex: none; width: 44px; height: 44px; display: grid; place-items: center;
	border-radius: var(--g-blob-2); background: var(--wp--preset--color--coral);
	font-weight: 700; font-size: 18px; margin: 0 !important;
}

/* Preguntas frecuentes */
.wp-block-details { border-bottom: 1.5px dashed var(--g-line); padding: 14px 0; }
.wp-block-details summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-size: 1.5em; line-height: 1; color: var(--wp--preset--color--coral); transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: 10px; }

/* ---------- Formulario ---------- */
.gianco-form { display: grid; gap: 4px; }
.gianco-form__field { display: grid; gap: 6px; margin: 0 0 12px; }
.gianco-form label { font-weight: 700; }
.gianco-form label span { font-weight: 400; opacity: .75; }
.gianco-form input[type=text], .gianco-form input[type=email], .gianco-form select, .gianco-form textarea {
	box-sizing: border-box; width: 100%; font: inherit; font-size: 17px; color: var(--wp--preset--color--petroleo);
	background: var(--wp--preset--color--blanco);
	border: 2px solid var(--g-line); border-radius: 16px 20px 14px 22px;
	padding: 12px 14px; min-height: 50px;
}
.gianco-form input:focus, .gianco-form select:focus, .gianco-form textarea:focus { border-color: var(--wp--preset--color--petroleo); outline: none; }
.gianco-form__check { display: flex; gap: 10px; align-items: start; font-size: 15px; }
.gianco-form__check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--wp--preset--color--petroleo); flex: none; }
.gianco-form__check label { font-weight: 400; }
.gianco-form__hp { position: absolute !important; left: -9999px; }
.gianco-form button { width: 100%; }
.gianco-form__ok { background: var(--wp--preset--color--turquesa); padding: 24px; border-radius: var(--g-soft); }
.gianco-form__ok-title { font-family: var(--wp--preset--font-family--fraunces); font-size: 2rem; font-weight: 600; margin: 0 0 8px; }
.gianco-form__error { background: #fde0d6; padding: 12px 16px; border-radius: 12px; }

/* Instagram (plugin de feed) */
.gianco-insta img { border-radius: 14px; }